html {
  scroll-behavior: smooth;
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 1.5s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.floating {
  animation: floating 4s ease-in-out infinite;
}
@keyframes floating {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0, 15px); }
  100% { transform: translate(0, 0); }
}
.blur-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.animated-gradient {
  background: linear-gradient(45deg,
              rgba(248, 238, 226, 0.8) 0%,
              rgba(222, 236, 247, 0.78) 45%,
              rgba(244, 229, 213, 0.82) 100%);
  background-size: 400% 400%;
  animation: gradient-rotate-pastel_16-rotate 48s ease-in-out infinite;
  background-attachment: fixed;
}
@keyframes gradient-rotate-pastel_16-rotate {
  0% {
    background: linear-gradient(45deg,
                rgba(248, 238, 226, 0.85) 0%,
                rgba(225, 238, 248, 0.8) 45%,
                rgba(244, 229, 213, 0.85) 100%);
  }
  25% {
    background: linear-gradient(135deg,
                rgba(230, 244, 248, 0.82) 0%,
                rgba(248, 233, 217, 0.86) 50%,
                rgba(214, 229, 241, 0.78) 100%);
  }
  50% {
    background: linear-gradient(225deg,
                rgba(251, 241, 230, 0.86) 0%,
                rgba(210, 226, 236, 0.78) 50%,
                rgba(246, 234, 219, 0.82) 100%);
  }
  75% {
    background: linear-gradient(315deg,
                rgba(228, 242, 247, 0.82) 0%,
                rgba(245, 232, 214, 0.86) 50%,
                rgba(218, 232, 243, 0.78) 100%);
  }
  100% {
    background: linear-gradient(45deg,
                rgba(248, 238, 226, 0.85) 0%,
                rgba(225, 238, 248, 0.8) 45%,
                rgba(244, 229, 213, 0.85) 100%);
  }
}
mark {
  background-color: rgba(182, 160, 122, 0.2);
  color: #1b4378;
  font-weight: 500;
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
}