body {
    background:
        url('../layout/2024/images/body-texture-halloween.webp');
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: -1;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(240, 4, 228, 0.1), rgba(0, 0, 0, 0.7));
    opacity: 0.8;
    pointer-events: none;
    z-index: -1;
}


/* Nav bar */

.navbar {
    background:
        url('../layout/2024/images/body-texture-halloween.webp') repeat;
        border-bottom: 2px solid;
        border-image: repeating-linear-gradient(to right,
        rgba(128, 0, 128, 0.688) 0%,
        rgba(255, 165, 0, 0.688) 33.33%,
        rgba(0, 128, 0, 0.688) 66.66%,
        rgba(128, 0, 128, 0.688) 100%) 1;
        box-shadow:
        inset 0 0 75px rgba(0, 0, 0, 0.9),
        0 0 75px rgba(84, 208, 2, 0.245),
        0 0 30px 10px rgba(128, 0, 128, 0.2);
}

.nav-item a {
    color: #00ff00;
    text-shadow: 0 0 2px rgba(61, 4, 53, 0.8),
        0 0 4px rgba(25, 81, 27, 0.415),
        0 0 6px rgba(49, 1, 44, 0.4);
}

.nav-item a:hover,
.login-button a:hover {
    color: #ffa500;
    background-color: rgba(139, 69, 19, 0.4);
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9),
                 0 0 15px rgba(255, 140, 0, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 69, 0, 0.4), 
                0 0 25px rgba(139, 69, 19, 0.3);
}


.nav-item .sub-nav a {
    display: block;
    padding: 4px 10px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 10px;
}

.nav-item .sub-nav a:hover {
    color: rgb(248, 168, 7);
    background-color: rgba(0, 0, 0, 0.4);
}

/* Hero section */
.logo a {
    width: min(394px, 60vw);
    height: 200px;
    background: url('/layout/2024/images/halloween-syrnia-logo.webp') center/contain no-repeat;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.7));
}

.hero {
    background: url('../layout/2024/images/hero-background-halloween.webp') 50% 10% / cover no-repeat;
    border-bottom: 4px solid rgba(198, 90, 2, 0.556);
    box-shadow:
        inset 0 0 25px rgba(7, 109, 0, 0.8),
        0 3px 8px -5px rgba(14, 82, 0, 0.7),
        0 5px 20px rgba(93, 1, 118, 0.5),
        0 8px 10px rgba(58, 1, 40, 0.4);
}

.hero-header {
    font-family: "Rubik Wet Paint", system-ui;
    font-weight: 300;
    text-shadow:
        0 0 10px #000000,
        0 0 20px #302820,
        0 0 30px #000000;
        animation: flicker 7s infinite;
        background-color: none;
        background-image: none;
        box-shadow: none;
    backdrop-filter: none;
}

.hero-header::before {
    content: '';
    position: absolute;
    background-color: none;
}

@keyframes flicker {
    0%, 100% {
        opacity: 0;
        filter: brightness(1);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    }
    10% {
        opacity: 0.9;
        filter: brightness(1.2);
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
    }
    20% {
        opacity: 0.8;
        filter: brightness(0.8);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
    }
    30% {
        opacity: 0.7;
        filter: brightness(1.3);
        text-shadow: 0 0 10px rgb(48, 240, 19);
    }
    40% {
        opacity: 0.6;
        filter: brightness(0.7);
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    }
    41% {
        opacity: 0.4;
        filter: brightness(0.5);
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    }
    42% {
        opacity: 0.8;
        filter: brightness(1.4);
        text-shadow: 0 0 25px rgb(31, 85, 0);
    }
    43% {
        opacity: 0.6;
        filter: brightness(0.6);
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    }
    45% {
        opacity: 0.3;
        filter: brightness(0.4);
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
    }
    46% {
        opacity: 0.9;
        filter: brightness(1.1);
        text-shadow: 0 0 18px rgba(84, 0, 59, 0.9);
    }
    48% {
        opacity: 0.5;
        filter: brightness(0.7);
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    }
    49% {
        opacity: 1;
        filter: brightness(1);
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    51% {
        opacity: 0.8;
        filter: brightness(1.2);
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
    }
    52% {
        opacity: 1;
        filter: brightness(1);
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    70% {
        opacity: 0.9;
        filter: brightness(0.9);
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    }
    80% {
        opacity: 0.7;
        filter: brightness(1.1);
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
    }
    89% {
        opacity: 1;
        filter: brightness(1);
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    90% {
        opacity: 0.4;
        filter: brightness(0.6);
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    }
    91% {
        opacity: 0.8;
        filter: brightness(1.3);
        text-shadow: 0 0 22px rgba(255, 255, 255, 1);
    }
    92% {
        opacity: 0.6;
        filter: brightness(0.8);
        text-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
    }
    93% {
        opacity: 1;
        filter: brightness(1);
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
}

/* Footer */

.footer {
    border: none;
    background: none;
    box-shadow: none;
}

.footer-icons {
    text-shadow: rgba(14, 70, 1, 0.6) 0 2px;
}

.footer-icons a {
    color: rgb(49, 174, 3);
}

.footer-links a {
    color: rgb(50, 255, 4);
    text-shadow:
        1px 1px 2px rgba(255, 255, 255, 0.4),
        0 0 4px rgba(187, 103, 255, 0.6),
        0 0 8px rgba(155, 244, 128, 0.4),
        0 0 12px rgba(7, 7, 7, 0.67);
}

@media (max-width: 480px) {
    .logo a {
        width: min(300px, 75vw);
        min-height: 150px;
    }
}