@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }

    html {
        background: linear-gradient(180deg,
                #081C15 0%,
                #0D251C 50%,
                #132F24 100%);
        background-color: #081C15;
        color: #F1F8F4;
    }

    .bg-svg {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTYwIDBMMCA2ME02MCA2MEwwIDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLW9wYWNpdHk9Ii4wMyIgc3Ryb2tlLXdpZHRoPSIuNSIvPgo8L3N2Zz4K');
    }
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
    }

    html {
        background: #ffffff;
        color: #1B4332;
    }

    .bg-svg {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTYwIDBMMCA2ME02MCA2MEwwIDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW9wYWNpdHk9Ii4wMyIgc3Ryb2tlLXdpZHRoPSIuNSIvPgo8L3N2Zz4K');
    }
}

@keyframes float {
    0% {
        transform: translateY(0) translateX(-50%) scale(1);
    }

    50% {
        transform: translateY(-80px) translateX(-50%) scale(1.15);
    }

    100% {
        transform: translateY(0) translateX(-50%) scale(1);
    }
}

@keyframes float-reverse {
    0% {
        transform: translateY(0) translateX(-50%) scale(1);
    }

    50% {
        transform: translateY(80px) translateX(-50%) scale(1.15);
    }

    100% {
        transform: translateY(0) translateX(-50%) scale(1);
    }
}

.animate-float {
    animation: float 8s ease-in-out infinite;
}

.animate-float-reverse {
    animation: float-reverse 10s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
    .animate-float {
        background: linear-gradient(45deg,
                rgba(216, 243, 220, 0.4) 0%,
                rgba(149, 213, 178, 0.4) 50%,
                rgba(216, 243, 220, 0.4) 100%);
        filter: brightness(1.3);
    }

    .animate-float-reverse {
        background: linear-gradient(-45deg,
                rgba(149, 213, 178, 0.4) 0%,
                rgba(216, 243, 220, 0.4) 50%,
                rgba(149, 213, 178, 0.4) 100%);
        filter: brightness(1.3);
    }
}

@keyframes slide-slow {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

html {
    min-height: 100%;
    background-attachment: fixed;
}