@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: JetBrains Mono, monospace;
    background: #0a0e17 radial-gradient(120% 120% at 50% 0%, #0e1524 0, #070b12 60%, #05080e 100%);
    width: 100dvw;
    height: 100dvh;
}


.logo-header {
    color: #06f106;
    font-size: 0.15rem;
}

.nav-header > ul {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #00af00;
    padding-bottom: -10px;
}

.li-header {
    list-style: none;
    color: #00af00;
    margin: 0.75dvw;
    font-size: 1.5vw;
    transition: 0.2s ease-in-out;
}

.li-header > a {
    text-decoration: none;
    color: #00af00;
}

.li-header:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.up {
    padding-bottom:10px;
}

.only-mobile {
    display: none;
}

.only-desktop {
    display: block;
}

/* ========= Mobile ========= */
@media (max-width: 640px) {
    .only-mobile {
        display: block;
    }

    .only-desktop {
        display: none;
    }

    /* Nav en colonne, plus lisible au doigt */
    .nav-header > ul {
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .li-header {
        font-size: 1rem;
    }

    .li-header > a {
        font-size: 1.1rem;
    }

    body {
        height: 103dvh;
    }
}