@keyframes floaty {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

html {
  scroll-behavior: smooth;
  font-family: "Inter", sans-serif;
}

.floaty {
  animation: floaty 3s ease-in-out infinite;
}

@media (max-width: 380px) {
  .hero {
    height: 100vh;
  }
}

@media (min-width: 381px) {
  .hero {
    height: 80vh;
    overflow-y: hidden;
  }
}

@media (min-width: 1024px) {
  .hero {
    height: unset;
    overflow-y: visible;
  }
}

.mobile-menu {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform: translateY(-100%);
}

.mobile-menu.open {
  transform: translateY(0);
}