:root {
    --background: hsl(220, 20%, 8%);
    --foreground: hsl(45, 30%, 90%);
    --muted-foreground: hsl(220, 10%, 55%);
    --border: hsl(220, 15%, 20%);
    --storm-blue: hsl(220, 40%, 60%);
    --lightning: hsl(200, 80%, 90%);
    --blood: hsl(0, 80%, 35%);
    --blood-glow: hsl(0, 100%, 50%);
    --gradient-dark: linear-gradient(180deg, hsl(220, 20%, 10%) 0%, hsl(220, 25%, 5%) 100%);
    --gradient-blood: linear-gradient(135deg, hsl(0, 80%, 45%) 0%, hsl(0, 80%, 25%) 100%);
}

html,
body {
    height: 100%;
}

body {
    background: var(--gradient-dark);
    background-color: var(--background);
    color: var(--foreground);
}

.thunderstorm-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.storm-clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 35%;
    background:
        radial-gradient(ellipse 80% 50% at 20% 10%, hsla(220, 30%, 15%, 0.9), transparent),
        radial-gradient(ellipse 60% 40% at 70% 15%, hsla(220, 25%, 12%, 0.8), transparent),
        radial-gradient(ellipse 90% 45% at 50% 5%, hsla(220, 35%, 10%, 0.95), transparent),
        linear-gradient(to bottom, hsl(220, 25%, 8%) 0%, transparent 100%);
    animation: clouds-drift 40s ease-in-out infinite alternate;
}

@keyframes clouds-drift {
    0% {
        transform: translateX(-10%);
    }

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

.rain {
    position: absolute;
    width: 100%;
    height: 100%;
}

.rain-drop {
    position: absolute;
    width: 1px;
    background: linear-gradient(to bottom,
            transparent,
            hsla(220, 40%, 60%, 0.2),
            hsla(220, 40%, 60%, 0.6));
    animation: rain-fall linear infinite;
}

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

    10% {
        opacity: 1;
    }

    90% {
        opacity: 0.8;
    }

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

.lightning-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 120% 60% at 50% 0%,
            hsla(200, 80%, 90%, 0.4),
            hsla(200, 80%, 90%, 0.1) 40%,
            transparent 70%);
    opacity: 0;
    animation: flash 10s infinite;
}

.lightning-flash-2 {
    animation: flash-2 13s infinite;
    animation-delay: 4s;
}

.lightning-flash-3 {
    animation: flash-3 17s infinite;
    animation-delay: 8s;
}

@keyframes flash {

    0%,
    88%,
    92%,
    100% {
        opacity: 0;
    }

    89%,
    91% {
        opacity: 1;
    }
}

@keyframes flash-2 {

    0%,
    54%,
    56%,
    58%,
    100% {
        opacity: 0;
    }

    55%,
    57% {
        opacity: 0.7;
    }
}

@keyframes flash-3 {

    0%,
    34%,
    36%,
    100% {
        opacity: 0;
    }

    35% {
        opacity: 0.5;
    }
}

.lightning-bolt {
    position: absolute;
    top: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(to bottom,
            var(--lightning),
            hsla(200, 80%, 90%, 0.8),
            transparent);
    filter: blur(1px);
    opacity: 0;
    box-shadow:
        0 0 10px hsla(200, 80%, 90%, 0.9),
        0 0 30px hsla(200, 80%, 90%, 0.6),
        0 0 60px hsla(220, 40%, 60%, 0.4);
}

.lightning-bolt-1 {
    left: 18%;
    animation: bolt-strike 10s infinite;
}

.lightning-bolt-2 {
    left: 72%;
    animation: bolt-strike 13s infinite;
    animation-delay: 4s;
}

.lightning-bolt-3 {
    left: 42%;
    animation: bolt-strike 17s infinite;
    animation-delay: 8s;
}

@keyframes bolt-strike {

    0%,
    88%,
    92%,
    100% {
        height: 0;
        opacity: 0;
    }

    89% {
        height: 55vh;
        opacity: 1;
    }

    91% {
        height: 55vh;
        opacity: 0.6;
    }
}

.form-login {
    max-width: 330px;
    padding: 1rem;
    position: relative;
    z-index: 1;
}

.form-login .form-floating:focus-within {
    z-index: 2;
}

.form-login input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-login input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-floating input:-webkit-autofill {
    box-shadow: 0 0 0 1000px var(--gradient-dark) inset !important;
    -webkit-text-fill-color: var(--foreground) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.form-floating input:-moz-autofill {
    box-shadow: 0 0 0 1000px var(--gradient-dark) inset !important;
    -moz-text-fill-color: var(--foreground) !important;
}

.form-control {
    font-family: "MedievalSharp", cursive;
    color: var(--muted-foreground);
    background: var(--gradient-dark);
    border: 1px solid #3c3c3c;
}

.form-control:focus {
    font-family: "MedievalSharp", cursive;
    color: var(--foreground);
    background: var(--gradient-dark);
    border-color: var(--blood);
    box-shadow: 0 0 40px hsla(0, 80%, 35%, 0.5);
}

.form-control::placeholder {
    font-family: "MedievalSharp", cursive;
    color: var(--foreground);
    opacity: 1;
}

.form-floating > label {
    font-family: "MedievalSharp", cursive;
    color: var(--muted-foreground);
}

.form-floating .form-control:focus {
    border-color: var(--blood);
    box-shadow: 0 0 40px hsla(0, 80%, 35%, 0.5);
}

.form-check-label {
    font-family: "MedievalSharp", cursive;
    color: var(--muted-foreground);
}

.form-check-input {
    --bs-form-check-bg: var(--gradient-dark);
    border: var(--bs-border-width) solid #3c3c3c;
}

.form-check-input:focus {
    border-color: var(--blood-glow);
    box-shadow: 0 0 0 0.25rem hsla(0, 80%, 35%, 0.5);
}

.form-check-input:checked {
    background-color: var(--blood-glow);
    border-color: var(--blood-glow);
}

.btn-login {
    position: relative;
    overflow: hidden;
    padding: 1rem 3rem;
    font-family: 'Cinzel', serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: hsl(0, 0%, 98%);
    background: var(--gradient-blood);
    border: 2px solid var(--blood);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-login:hover {
    transform: scale(1.05);
    border-color: var(--blood-glow);
    box-shadow: 0 0 40px hsla(0, 80%, 35%, 0.5);
    color: hsl(0, 0%, 98%);
}

footer {
    font-family: 'Cinzel', serif;
    color: var(--muted-foreground);
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
}

.footer-nav a,
.footer-link {
    white-space: nowrap;
}

.footer-nav a {
    font-family: 'Cinzel', serif;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--foreground);
}

.footer-flag {
    height: 24px;
    margin-top: -2px;
    width: 24px;
}