html{
    scroll-behavior:smooth;
}

body{
    background:#000;
    color:#e8e8e8;
    font-family:Verdana, Geneva, sans-serif;
    font-size:18px;
    line-height:1.75;
    margin:0;
    padding:0;
}

/* =============================== */
/* Contenedor
/* =============================== */

.container{
    width:760px;
    max-width:92%;
    margin:45px auto 120px auto;
    position:relative;
    z-index:2;
}

/* =============================== */
/* Texto de base
/* =============================== */

h1{
    margin:0;
    font-size:60px;
    font-weight:700;
    letter-spacing:10px;
    color:#7ddcff;
    text-shadow:
        0 0 10px rgba(125,220,255,.25),
        0 0 30px rgba(125,220,255,.15);
}

h2{
    margin:0 0 18px 0;
    font-size:28px;
    color:#7ddcff;
    text-shadow:0 0 10px rgba(125,220,255,.2);
}

p{ margin:18px 0; }

a{
    color:#7ddcff;
    text-decoration:none;
}

a:hover{ color:#fff; }

::selection{
    background:#7ddcff;
    color:#000;
}

/* =============================== */
/* Scrollbar
/* =============================== */

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:#222; }
::-webkit-scrollbar-thumb:hover{ background:#3a3a3a; }

/* =============================== */
/* Neones
/* =============================== */

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

    background:
    repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 12px,
        #7ddcff 12px,
        #7ddcff 16px,
        transparent 20px
    ) left / 8px 100% repeat-y,

    repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 12px,
        #7ddcff 12px,
        #7ddcff 16px,
        transparent 20px
    ) right / 8px 100% repeat-y;

    animation: neonMove 1.2s linear infinite;

    filter:
        drop-shadow(0 0 10px #7ddcff)
        drop-shadow(0 0 25px #7ddcff);
}

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

    box-shadow:
        inset 25px 0 50px rgba(125,220,255,.25),
        inset -25px 0 50px rgba(125,220,255,.25);
}

@keyframes neonMove{
    from{ background-position:0 0, 100% 0; }
    to{ background-position:0 50px, 100% -50px; }
}

/* =============================== */
/* Colorillos
/* =============================== */

body.yellow-theme{ background:#120f00; color:#fff3b0; }
body.yellow-theme h1, body.yellow-theme h2{ color:#ffd86b; text-shadow:0 0 20px #ffd86b; }
body.yellow-theme::before{ filter:drop-shadow(0 0 20px #ffd86b); }

body.orange-theme{ background:#1a0f05; color:#ffd2a1; }
body.orange-theme h1, body.orange-theme h2{ color:#ff9a3c; text-shadow:0 0 20px #ff9a3c; }
body.orange-theme::before{ filter:drop-shadow(0 0 20px #ff9a3c); }

body.grey-theme{ background:#111; color:#aaa; }
body.grey-theme h1, body.grey-theme h2{ color:#888; }

body.purple-theme{ background:#120018; color:#e9d5ff; }
body.purple-theme h1, body.purple-theme h2{ color:#a855f7; text-shadow:0 0 20px #a855f7; }

body.blue-strong-theme{ background:#00102a; color:#c7ddff; }
body.blue-strong-theme h1, body.blue-strong-theme h2{ color:#005bff; text-shadow:0 0 20px #005bff; }

body.blue-light-theme{ background:#00161f; color:#bfe9ff; }
body.blue-light-theme h1, body.blue-light-theme h2{ color:#66ccff; text-shadow:0 0 20px #66ccff; }

body.light-purple-theme{ background:#1a1020; color:#f3e8ff; }
body.light-purple-theme h1, body.light-purple-theme h2{ color:#d8b4fe; text-shadow:0 0 20px #d8b4fe; }

body.green-theme{ background:#071a0c; color:#c7f9cc; }
body.green-theme h1, body.green-theme h2{ color:#22c55e; text-shadow:0 0 20px #22c55e; }

body.dark-red-theme{ background:#1a0505; color:#ffc9c9; }
body.dark-red-theme h1, body.dark-red-theme h2{ color:#7f1d1d; text-shadow:0 0 20px #7f1d1d; }

/* =============================== */
/* nezu
/* =============================== */

body.nezu-glitch{
    animation: shake 0.12s infinite;
}

@keyframes shake{
    0%{transform:translate(0,0);}
    25%{transform:translate(-2px,1px);}
    50%{transform:translate(2px,-1px);}
    75%{transform:translate(-1px,2px);}
    100%{transform:translate(0,0);}
}

body.nezu-glitch::before{
    filter:
        drop-shadow(-2px 0 red)
        drop-shadow(2px 0 cyan)
        brightness(1.2);
}

/* =============================== */
/* Media
/* =============================== */

@media(max-width:800px){
    .container{ width:90%; }
    h1{ font-size:42px; letter-spacing:5px; }
    body{ font-size:17px; }
}
img{
    display:block;
    margin:20px auto;
    max-width:100%;
}