body {
      font-family: 'Inter', sans-serif;
      background: #ffffff;
      color: #111827;
    }

    html {
      scroll-behavior: smooth;
    }

    /* HIDE SCROLLBAR */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 20px;
    }

    /* MARQUEE */
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .animate-scroll {
      animation: scroll 30s linear infinite;
      width: max-content;
    }

    /* MODAL ANIMATION */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .animate-fadeUp {
      animation: fadeUp 0.3s ease;
    }

    /* CARD ENTRY */
  @keyframes cardEntry {
    0% {
      opacity: 0;
      transform: translateY(40px) scale(0.96);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .animate-card {
    animation: cardEntry 0.7s ease;
  }

  /* SMALL BOUNCE */
  @keyframes bounceSmall {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-6px);
    }
  }

  .animate-bounceSmall {
    animation: bounceSmall 2s infinite;
  }

  /* CONFETTI */
  .confetti {
    position: absolute;
    width: 12px;
    height: 20px;
    border-radius: 3px;
    opacity: 0.8;
    animation: fall linear infinite;
  }

  .confetti:nth-child(1) {
    left: 10%;
    animation-duration: 7s;
    animation-delay: 0s;
  }

  .confetti:nth-child(2) {
    left: 20%;
    animation-duration: 6s;
    animation-delay: 1s;
  }

  .confetti:nth-child(3) {
    left: 35%;
    animation-duration: 8s;
    animation-delay: 2s;
  }

  .confetti:nth-child(4) {
    left: 50%;
    animation-duration: 5s;
    animation-delay: 1s;
  }

  .confetti:nth-child(5) {
    left: 65%;
    animation-duration: 7s;
    animation-delay: 0s;
  }

  .confetti:nth-child(6) {
    left: 78%;
    animation-duration: 6s;
    animation-delay: 2s;
  }

  .confetti:nth-child(7) {
    left: 88%;
    animation-duration: 8s;
    animation-delay: 1s;
  }

  .confetti:nth-child(8) {
    left: 95%;
    animation-duration: 5s;
    animation-delay: 0s;
  }

  @keyframes fall {
    0% {
      transform: translateY(-100px) rotate(0deg);
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    100% {
      transform: translateY(110vh) rotate(360deg);
      opacity: 0;
    }
  }