@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--spacing-base);
    border-bottom: 0.2rem solid var(--color-primary);
    background-color: rgba(0, 0, 0, 0.5);
}

#titre {
    display:flex;
    align-items:center;
    gap: var(--headerGap);
}

#logo_lounge {
    width:5vw;
    height:5vw;
    object-fit:contain;
}

#titre h1 {
    color: var(--color-primary);
    font-family: "Audiowide", monospace;
    margin:0;
    font-size:5vh;
    text-shadow: 5px 5px 1px var(--color-primary-shadow);
}


/* nav menu */
#menu { display:flex; gap: 0.75rem; align-items:center; flex-wrap:wrap; }

.titre_menu{
    padding:var(--spacing-base);
}

.menu__link {
    text-decoration: none;
    display:inline-block;
    color: var(--color-primary);
    line-height: 2;
    position: relative;
}

.menu__link::before {
    content: '';
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-primary);
    position: absolute;
    bottom: -.5rem;
    left: 0;
    transition: transform .2s, opacity .2s;
    opacity: 0;
}

.menu__link:hover::before {
    transform: translateY(-.25rem);
    opacity: 1;
}

/* Tablettes */
@media screen and (max-width: 1024px) {

    header{
        padding: calc(var(--spacing-base) * 0.8);
    }

    #logo_lounge{
        width: 8vw;
        height: 8vw;
    }

    #titre h1{
        font-size: 4vh;
        text-shadow: 3px 3px 1px var(--color-primary-shadow);
    }

    #menu{
        gap: 0.5rem;
    }

    .menu__link{
        font-size: 0.95rem;
    }
}

/* Mobiles */
@media screen and (max-width: 600px) {

    header{
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px;
        text-align: center;
    }

    #titre{
        gap: 10px;
    }

    #logo_lounge{
        width: 14vw;
        height: 14vw;
    }

    #titre h1{
        font-size: 3vh;
        text-shadow: 2px 2px 1px var(--color-primary-shadow);
    }

    #menu{
        justify-content: center;
        gap: 1rem;
    }

    .menu__link{
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .menu__link::before{
        bottom: -0.3rem;
    }
}