nav {
    --margin: 2em;
    display: flex;
    pointer-events: auto;
    align-items: center;
    /* gap: 1rem; */
    margin: 0 var(--margin);
    position: fixed;
    margin-top: calc(50vh - var(--margin-body) * 2);
    transform: translateY(-50%);
    z-index: 2;
    justify-content: center;
    width: calc(100% - var(--margin) * 2);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    gap: 0;



}


nav a {
    /* letter-spacing: 1px; */
    padding-left: 0;
    padding-right: 0;

    text-decoration: none;
    color: black;

    /* font-weight: bold; */


    background-color: transparent;

    text-decoration: none;
    /* -webkit-text-stroke: 5px;
    -webkit-text-stroke-color: var(--main-color);
    paint-order: stroke fill; */



}

nav a {

    font-size: 1rem;
    /* text-transform: uppercase; */
}

nav a:nth-of-type(1) {
    color: var(--theme-1);
    --outline: var(--theme-1);
}

nav a:nth-of-type(2) {
    color: var(--theme-2);
    --outline: var(--theme-2);
}

nav a:nth-of-type(3) {
    color: var(--theme-3);
    --outline: var(--theme-3);
}

nav a:nth-of-type(4) {
    color: var(--theme-4);
    --outline: var(--theme-4);
}

nav a:nth-of-type(5) {
    color: var(--theme-5);
    --outline: var(--theme-5);
}

nav a:not(::first-letter) {
    font-size: 2em;
    text-transform: lowercase;
    display: none;
}


a.site-title::first-letter {
    /* font-size: 1rem;
    color: red; */


}

nav a:hover {
    outline: 1px solid var(--outline);
    background-color: white;
    -webkit-text-stroke-color: #000000;
}

nav a:hover,
nav a.active {}

nav a.active {
    text-transform: uppercase;
    font-family: "Univers";
}


:root {

    --easing: ease-in-out;
    --multiplier: 0.25s;
    --desappearing-duration: 1.5s;
    --total: calc(var(--multiplier) * 9);
    --totalAfterMenu: calc(var(--multiplier) * 9 + var(--desappearing-duration));
}

nav.top {
    margin-top: calc(var(--margin-body) + 1rem);
}

nav .intro_text {
    font-size: 1rem;
    text-decoration: none;
    color: black;
    /* font-weight: bold; */


    background-color: transparent;

    text-decoration: none;
    white-space: nowrap;

    overflow: hidden;

    /* -webkit-text-stroke: 5px;
    -webkit-text-stroke-color: var(--main-color);
    paint-order: stroke fill; */
    max-width: 30vw;
    /* opacity: 0; */
    padding-left: 0;
    padding-right: 0;

    /* a pour delay le total du temps d'apparition */
}


nav.first-visit>* {
    opacity: 0;
}

nav:not(.first-visit)>* {

    padding: .4em .4rem .2rem;
}

nav.first-visit>*:nth-child(1) {

    animation: fade-in .3s ease-in-out calc(var(--multiplier) * 0) 1 forwards, introduction_text var(--desappearing-duration) var(--easing) calc(var(--total) + var(--multiplier) * 0) 1 forwards;
}




nav:not(.first-visit)>*:nth-child(1),
nav:not(.first-visit)>*:nth-child(3),
nav:not(.first-visit)>*:nth-child(5),
nav:not(.first-visit)>*:nth-child(7) {
    display: none;
}

nav.first-visit>*:nth-child(2) {
    animation: fade-in .3s var(--easing) calc(var(--multiplier) * 1) 1 forwards,
        padding calc(var(--desappearing-duration) / 2) var(--easing) calc(var(--total) + var(--multiplier) * 3) 1 forwards;
}

nav.first-visit>*:nth-child(3) {
    animation: fade-in .3s var(--easing) calc(var(--multiplier) * 2) 1 forwards, introduction_text var(--desappearing-duration) var(--easing) calc(var(--total) + var(--multiplier) * 0) 1 forwards;
}

nav.first-visit>*:nth-child(4) {
    animation: fade-in .3s var(--easing) calc(var(--multiplier) * 3) 1 forwards,
        padding calc(var(--desappearing-duration) / 2) var(--easing) calc(var(--total) + var(--multiplier) * 3) 1 forwards;
    ;
}

nav.first-visit>*:nth-child(5) {
    animation: fade-in .3s var(--easing) calc(var(--multiplier) * 4) 1 forwards, introduction_text var(--desappearing-duration) var(--easing) calc(var(--total) + var(--multiplier) * 0) 1 forwards;
}

nav.first-visit>*:nth-child(6) {
    animation: fade-in .3s var(--easing) calc(var(--multiplier) * 5) 1 forwards,
        padding calc(var(--desappearing-duration) / 2) var(--easing) calc(var(--total) + var(--multiplier) * 3) 1 forwards;
}

nav.first-visit>*:nth-child(7) {
    animation: fade-in .3s var(--easing) calc(var(--multiplier) * 6) 1 forwards, introduction_text var(--desappearing-duration) var(--easing) calc(var(--total) + var(--multiplier) * 0) 1 forwards;
}

nav.first-visit>*:nth-child(8) {
    animation: fade-in .3s var(--easing) calc(var(--multiplier) * 7) 1 forwards,
        padding calc(var(--desappearing-duration) / 2) var(--easing) calc(var(--total) + var(--multiplier) * 3) 1 forwards;
}


@keyframes fade-in {
    0% {
        opacity: 0;


    }

    100% {
        opacity: 1;



    }
}

@keyframes padding {
    0% {

        padding-left: 0;
        padding-right: 0;
    }



    100% {
        padding: .4em .4rem .2rem;
    }
}

main:not(.first-visit) {

    opacity: 1;
}

main.first-visit {
    opacity: 0;
    animation: fade-in .5s ease-in-out var(--totalAfterMenu) forwards;
}

nav {}

@keyframes introduction_text {
    100% {
        opacity: 0;
        max-width: 0px;

    }

    70% {
        opacity: 0;
    }

    0% {
        opacity: 1;

    }
}

@keyframes gap {
    0% {
        gap: 0px;

    }

    100% {
        gap: .2rem;

    }

}

@media (width < 968px) {
    nav {
        bottom: 0 !important;
        top: auto !important;
        flex-wrap: wrap;
    }

    nav a {
        font-size: 5vw;
    }

}