@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Libre+Baskerville&family=Special+Elite&display=swap');

*{
    box-sizing:border-box;
    scrollbar-width:thin;
    scrollbar-color:#e0b800 #0a0a0a;
}

::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#0a0a0a; }

::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#ffd100,#5a4a00);
    border-radius:10px;
    border:2px solid #0a0a0a;
}

html,body{
    margin:0;
    padding:0;
    color:#e6e6e6;
    font-family:'Libre Baskerville',serif;
    background:#000000;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.03) 1px,
            transparent 2px,
            transparent 4px
        );

    mix-blend-mode:overlay;
    animation:scanFlicker 6s infinite;
}

@keyframes scanFlicker{
    0%,100%{opacity:.25;}
    50%{opacity:.4;}
}

.glitch{
    position:relative;
    display:inline-block;
}

.glitch::before,
.glitch::after{
    content:attr(data-text);
    position:absolute;
    left:0;
    top:0;
    width:100%;
    overflow:hidden;
}

.glitch::before{
    color:#ffea00;
    transform:translateX(2px);
    clip-path:polygon(0 0,100% 0,100% 45%,0 45%);
    animation:glitchTop 2s infinite linear alternate-reverse;
}

.glitch::after{
    color:#fff;
    transform:translateX(-2px);
    clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);
    animation:glitchBot 2s infinite linear alternate-reverse;
}

@keyframes glitchTop{
    0%{transform:translate(0);}
    20%{transform:translate(-3px,-2px);}
    40%{transform:translate(3px,2px);}
    60%{transform:translate(-2px,1px);}
    80%{transform:translate(2px,-1px);}
    100%{transform:translate(0);}
}

@keyframes glitchBot{
    0%{transform:translate(0);}
    20%{transform:translate(2px,3px);}
    40%{transform:translate(-3px,-2px);}
    60%{transform:translate(2px,-1px);}
    80%{transform:translate(-2px,1px);}
    100%{transform:translate(0);}
}

.flicker{
    animation:lightFlicker 3s infinite;
}

@keyframes lightFlicker{
    0%,18%,22%,25%,53%,57%,100%{
        opacity:1;
        text-shadow:0 0 8px rgba(255,209,0,.8);
    }

    20%,24%,55%{
        opacity:.2;
        text-shadow:none;
    }
}

#header{
    background-image:url('images/head.jpg'),url('images/bg1.jpg');
    background-position:center;
    background-repeat:no-repeat,repeat-x;
    height:621px;
    width:100%;
    position:relative;
}

#navigation{
    width:70%;
    margin:40px auto 0;

    display:flex;
    justify-content:center;
    gap:28px;
    padding:48px 40px;

    background:linear-gradient(180deg,#0c0c0c,#050505);

    border-radius:16px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.95),
        inset 0 0 30px rgba(255,209,0,.03);

    position:relative;
}

#navigation::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;

    background:
        radial-gradient(circle at 30% 50%, rgba(255,209,0,.06), transparent 60%),
        radial-gradient(circle at 70% 50%, rgba(255,209,0,.05), transparent 60%);

    opacity:.7;
    pointer-events:none;
}

#navigation::after{
    content:"";
    position:absolute;
    bottom:-6px;
    left:10%;
    width:80%;
    height:2px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,209,0,.6),
        transparent
    );

    opacity:.5;
}

#navigation a{
    font-family:'Special Elite',monospace;
    letter-spacing:.2em;

    padding:14px 28px;
    border-radius:4px;

    color:#ccc;

    background:linear-gradient(145deg,#1a1a1a,#050505);

    box-shadow:
        inset 0 0 10px #000,
        0 0 12px rgba(0,0,0,.9);

    transition:.35s;
}

#navigation a:hover{
    color:#000;

    background:#ffd100;

    box-shadow:
        0 0 18px rgba(255,209,0,.8),
        inset 0 0 12px rgba(0,0,0,.8);

    transform:translateY(-2px);
}

#navigation{
    animation:machineHum 10s ease-in-out infinite;
}

@keyframes machineHum{
    0%,100%{
        box-shadow:
            inset 0 8px 25px #000,
            0 15px 40px rgba(0,0,0,.9);
    }
    50%{
        box-shadow:
            inset 0 12px 35px #000,
            0 20px 60px rgba(255,209,0,.15);
    }
}

.contentx{
    width:70%;
    margin:-60px auto 120px;
    padding:70px 90px;
    font-size:23px;
    line-height:2;
    text-align:justify;
}

h1{
    font-family:'Cinzel Decorative',serif;
    font-size:32px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:3px;

    color:#fff;

    text-shadow:
        0 0 6px rgba(255,209,0,.5),
        3px 3px 0 #000;
}

h1::after{
    content:"⚠";
    display:block;
    margin-top:18px;
    font-size:22px;
    opacity:.6;
}

blockquote{
    margin:80px auto;
    padding:54px 76px;

    background:linear-gradient(160deg,#181818,#050505);

    border-left:6px solid #ffd100;
    border-radius:18px;

    color:#ddd;

    box-shadow:
        0 15px 45px rgba(0,0,0,.95),
        inset 0 0 20px rgba(255,209,0,.08);
}

textarea,input,select{
    width:42%;
    padding:1.8rem 1.2rem;

    background:linear-gradient(160deg,#1b1b1b,#090909);

    border:2px solid #5c4b00;
    border-radius:999px;

    color:#eee;
}

textarea:focus,input:focus,select:focus{
    outline:none;
    box-shadow:0 0 14px rgba(255,209,0,.6);
}

a{
    color:#e0c96a;
    position:relative;
}

a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:2px;

    background:linear-gradient(to right,transparent,#ffd100,transparent);

    transform:scaleX(0);
    transition:.3s;
}

a:hover{
    color:#fff;
}

a:hover::after{
    transform:scaleX(1);
}

i,em{
    color:#fff2a8;
    background:rgba(255,209,0,.15);
    padding:4px 8px;
    border-radius:6px;
}

b,strong{
    color:#000;
    padding:6px 14px;
    border-radius:999px;

    background:#ffd100;

    box-shadow:0 0 12px rgba(255,209,0,.8);
}

#footer{
    position:relative;
    margin:140px auto 0;
    padding:90px 20px 70px;

    text-align:center;

    background:
        radial-gradient(circle at top, rgba(255,209,0,.1), transparent 70%),
        linear-gradient(180deg,#030303,#000);

    border-top:2px solid #4a3d00;
}

#footer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:520px;
    height:2px;

    background:linear-gradient(to right,transparent,#ffd100,transparent);

    animation:warningPulse 5s infinite;
}

#footer::after{
    content:"⚠";
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    font-size:24px;
    color:#ffd100;
}

.footer-title{
    font-family:'Special Elite',monospace;
    font-size:22px;
    letter-spacing:.3em;
    color:#ddd;
}

.footer-links a{
    margin:0 18px;
    font-size:13px;
    letter-spacing:.25em;
    color:#aaa;
}

.footer-links a:hover{
    color:#ffd100;
}

@keyframes warningPulse{
    0%,100%{ opacity:.4; }
    50%{ opacity:1; box-shadow:0 0 20px rgba(255,209,0,.8); }
}