:root {
    --couleur-texte: #ffffffd0;
    --couleur-texte-translucide: #ffffff80;
    --couleur-carte: #ffffff10;
    --flou-carte: blur(4px);
    --image-fond: url(@/public/fond.png);
    --transition-douce: all 250ms cubic-bezier(0.2, 0.5, 0.45, 0.94);
    --ombre-douce: 0 2px 12px rgba(0, 0, 0, 0.1);
    --ombre-elevee: 0 8px 30px rgba(0, 0, 0, 0.2);
    --rayon-bordure: 12px;
    --bordure: 3px double #eeeeee20;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica;
    font-variant: small-caps;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    background-image: var(--image-fond);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.titreNavigation {
    color: var(--couleur-texte);
    opacity: 0.9;
    text-shadow: 0 0 8px #ffffff80;
    text-align: center;
    padding: 36px;
    padding-top: 72px;
    letter-spacing: 8px;
    font-weight: 100;
}

/* navigation */
.navigationLiens {
    z-index: 200;
    display: flex;
    position: fixed;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 32px;
    background-color: var(--couleur-carte);
    backdrop-filter: blur(3px);
    border-bottom: var(--bordure) ;
    box-shadow: var(--ombre-elevee);

    li {
        list-style: none;
        flex: 1;
        text-align: center;
        cursor: pointer;

        a {
            color: var(--couleur-texte-translucide);
            text-shadow: 0 0 4px #ffffff80;
            text-decoration: none;
            font-weight: 100;
            letter-spacing: 2px;

            transition: var(--transition-douce);
        }
    }
}

.navigationLiens li:hover a{
    letter-spacing: 4px;
}