#wind-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.wind-gust {
  position: absolute;
  background-color: white;
  border-radius: 5px;

  animation-name: wind-flow;
  animation-timing-function: linear;
  animation-iteration-count: 1;

  will-change: transform;
}

@keyframes wind-flow {
  from {
    transform: translateX(-200px);
  }
  to {
    transform: translateX(100vw);
  }
}
.slide-down {
  opacity: 1;
  animation: slide-down forwards 0.5s;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-10rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0rem);
  }
}
.slide-right {
  opacity: 1;
  animation: slide-right forwards 0.5s;
}

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(-20rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0rem);
  }
}

.fade-in {
  animation: fade-in 0.5s;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes done-gone {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.auto-scroll {
  transition: margin 2s;
}

@keyframes link {
  0% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1.01);
  }
}
.link {
  animation: link 2s infinite alternate-reverse ease-in-out;
  cursor: pointer !important;
}
.link:hover {
  animation-play-state: paused;
}

.link h2 {
  color: #12517a !important;
}

@keyframes click-hint {
  0% {
    transform: translateY(0px) scale(1);
    opacity: 0;
  }
  50% {
    transform: translateY(-5px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateY(0px) scale(1);
    opacity: 0;
  }
}

.click-animation {
  animation: click-hint 1.5s infinite ease-in-out;
}