body {
        font-family: "Noto Sans", sans-serif;
    }

    .second_font {
        font-family: "Playwrite AU QLD", cursive;
    }

    body {
        background-image: url('/landingpage/minigame/bg.png');
        background-position: top;
        background-size: cover;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

    .animate-fade-in-up {
        animation: fadeInUp 0.6s ease-out both;
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

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

    .animate-fade-in-down {
        animation: fadeInDown 0.6s ease-out both;
    }

    @keyframes gradient-slide {
        0% {
            background-position: 0% 50%;
        }

        100% {
            background-position: 100% 50%;
        }
    }

    .animate-gradient {
        background: linear-gradient(90deg, #d3e9fb, #00539d, #002568);
        background-size: 200% 200%;
        animation: gradient-slide 3s linear infinite;
    }

    @keyframes heartbeat {

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

        14% {
            transform: scale(1.3);
        }

        28% {
            transform: scale(1);
        }

        42% {
            transform: scale(1.3);
        }

        70% {
            transform: scale(1);
        }
    }

    .heartbeat {
        animation: heartbeat 1.5s infinite;
    }
@keyframes borderGradientMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.led-border {
  border: 4px solid transparent;
  background-image: linear-gradient(#004b8b, #00539d),
                    linear-gradient(90deg, white, #00ffea, white);
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: borderGradientMove 3s linear infinite;
  background-size: 200% 100%;
}

.dr_1 {
    filter: drop-shadow(1px 3px 6px #2d2d2e);
}
.dr_2 {
    filter: drop-shadow(1px 3px 6px #e46a2c);
}
.dr_3 {
    filter: drop-shadow(1px 3px 6px #024da4);
}
.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}