/*==================================================
FRIKITORIUM
style.css
==================================================*/

:root{

    --bg:#050505;
    --panel:#101010;
    --panel2:#171717;

    --green:#00ff88;
    --green2:#1ed760;

    --purple:#6f49d8;
    --purple2:#8b5cf6;

    --text:#ececec;
    --text2:#a8a8a8;

    --border:rgba(0,255,136,.18);

    --radius:18px;

    --shadow:0 0 25px rgba(0,255,136,.08);

}

/*==========================
RESET
==========================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:'Share Tech Mono',monospace;

    line-height:1.6;

    overflow-x:hidden;

}

/*==========================
FONDO
==========================*/

.background{

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at 15% 0%,
            rgba(0,255,136,.16),
            transparent 35%),

        radial-gradient(circle at 85% -10%,
            rgba(111,73,216,.18),
            transparent 40%),

        radial-gradient(circle at 50% -40%,
            rgba(0,255,136,.08),
            transparent 45%),

        linear-gradient(
            180deg,
            #111111 0%,
            #070707 18%,
            #050505 60%,
            #040404 100%
        );

    z-index:-30;

}

.scanlines{

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

        repeating-linear-gradient(

            0deg,

            transparent 0,

            transparent 3px,

            rgba(255,255,255,.015) 4px

        );

    z-index:-20;

}

.noise{

    position:fixed;

    inset:0;

    opacity:.03;

    pointer-events:none;

    z-index:-10;

}
/*==========================
NAVBAR
==========================*/

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:

        radial-gradient(circle at 20% -120%,
            rgba(0,255,136,.18),
            transparent 45%),

        radial-gradient(circle at 80% -120%,
            rgba(111,73,216,.22),
            transparent 50%),

        linear-gradient(
            180deg,
            rgba(18,18,18,.96),
            rgba(8,8,8,.92)
        );

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.05);

    box-shadow:
        0 15px 45px rgba(0,0,0,.45),
        inset 0 -1px rgba(255,255,255,.03);

    transition:
        background .35s,
        box-shadow .35s,
        border-color .35s;

}

.navbar::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(0,255,136,.03),

            rgba(111,73,216,.04),

            rgba(0,255,136,.03),

            transparent

        );

    pointer-events:none;

}

.navbar::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent 0%,

            rgba(0,255,136,.9) 20%,

            rgba(111,73,216,.9) 50%,

            rgba(0,255,136,.9) 80%,

            transparent 100%

        );

    opacity:.8;

}

.navbar.scrolled{

    background:

        radial-gradient(circle at 20% -120%,
            rgba(0,255,136,.12),
            transparent 45%),

        radial-gradient(circle at 80% -120%,
            rgba(111,73,216,.16),
            transparent 50%),

        rgba(8,8,8,.97);

}

.container{

    width:min(1450px,95%);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:18px 0;

}
/*==========================
LOGO
==========================*/

.logo{

    position:relative;

    display:inline-block;

    text-decoration:none;

    color:#ffffff;

    font-family:'Orbitron',sans-serif;

    font-size:1.7rem;

    font-weight:900;

    letter-spacing:3px;

    text-transform:uppercase;

    transition:
        color .30s,
        transform .30s,
        text-shadow .30s;

}

.logo::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:180%;

    height:180%;

    transform:translate(-50%,-50%);

    background:

        radial-gradient(circle,

            rgba(0,255,136,.18),

            rgba(111,73,216,.12),

            transparent 72%

        );

    filter:blur(20px);

    z-index:-1;

    opacity:.8;

}

.logo:hover{

    color:#ffffff;

    transform:translateY(-1px);

    text-shadow:

        0 0 12px rgba(0,255,136,.35),

        0 0 25px rgba(111,73,216,.25);

}

/*==========================
MENÚ
==========================*/

.menu{

    display:flex;

    align-items:center;

    gap:8px;

    list-style:none;

}

.menu li{

    list-style:none;

}

.menu a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:42px;

    padding:0 18px;

    border-radius:12px;

    text-decoration:none;

    color:#d8d8d8;

    font-family:'Orbitron',sans-serif;

    font-size:.88rem;

    letter-spacing:.5px;

    transition:
        color .25s,
        background .25s,
        border-color .25s,
        transform .20s,
        box-shadow .25s;

    border:1px solid transparent;

}

.menu a:hover{

    color:#ffffff;

    background:rgba(255,255,255,.04);

    border-color:rgba(0,255,136,.18);

    transform:translateY(-2px);

    box-shadow:

        0 8px 20px rgba(0,0,0,.30),

        0 0 18px rgba(0,255,136,.08);

}
.menu a::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:12px;

    background:

        linear-gradient(
            135deg,
            rgba(0,255,136,.08),
            rgba(111,73,216,.10)
        );

    opacity:0;

    transition:opacity .25s;

    z-index:-1;

}

.menu a::after{

    content:"";

    position:absolute;

    left:12px;

    right:12px;

    bottom:6px;

    height:2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--green),
            var(--purple),
            transparent
        );

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .25s;

}

.menu a:hover::before{

    opacity:1;

}

.menu a:hover::after{

    transform:scaleX(1);

}

.menu a.active{

    color:#fff;

    background:

        linear-gradient(
            135deg,
            rgba(0,255,136,.14),
            rgba(111,73,216,.16)
        );

    border-color:rgba(0,255,136,.25);

    box-shadow:

        inset 0 0 12px rgba(255,255,255,.03),

        0 0 18px rgba(0,255,136,.12);

}

.menu a.active::before{

    opacity:1;

}

.menu a.active::after{

    transform:scaleX(1);

}

/*==========================
CONTENIDO
==========================*/

main{

    width:min(1500px,95%);

    margin:auto;

    padding-top:120px;

}

.module{

    margin-bottom:90px;

}
.button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:15px 28px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        var(--green),
        var(--green2)
    );

    color:#000;

    font-family:'Orbitron',sans-serif;

    font-weight:700;

    transition:
        transform .25s,
        box-shadow .25s,
        filter .25s;

}

.button:hover{

    transform:translateY(-2px);

    filter:brightness(1.05);

    box-shadow:
        0 0 25px rgba(0,255,136,.28);

}

footer{

    margin-top:80px;

    padding:45px 30px;

    border-top:1px solid var(--border);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            rgba(255,255,255,.005)
        );

    text-align:center;

}

footer a{

    color:var(--green);

    text-decoration:none;

}

footer a:hover{

    color:#fff;

}

/*==========================
RESPONSIVE
==========================*/

@media (max-width:1000px){

    .container{

        flex-direction:column;

        justify-content:center;

        gap:18px;

        padding:18px 0;

    }

    .menu{

        flex-wrap:wrap;

        justify-content:center;

        gap:10px;

    }

    .menu a{

        padding:0 16px;

        height:40px;

        font-size:.84rem;

    }

    main{

        padding-top:155px;

    }

}

@media (max-width:700px){

    .logo{

        font-size:1.35rem;

    }

    .menu{

        gap:8px;

    }

    .menu a{

        width:100%;

    }

    .button{

        width:100%;

    }

    footer{

        padding:30px 20px;

    }

}

@media (max-width:500px){

    .container{

        width:94%;

    }

    .logo{

        text-align:center;

        font-size:1.2rem;

    }

    .menu{

        flex-direction:column;

        width:100%;

    }

    .menu li{

        width:100%;

    }

    .menu a{

        width:100%;

        justify-content:center;

    }

    main{

        width:94%;

        padding-top:250px;

    }

}