@font-face {
    font-family: "Fraunces";
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url("fraunces/fraunces.woff2") format(woff2) tech(variations),
        url("fraunces/fraunces.woff2") format("woff2-variations");
}

.fraunces {
    font-variation-settings: "opsz" var(--fraunces-opsz, 9), "wght" var(--fraunces-wght, 900), "SOFT" var(--fraunces-SOFT, 0), "WONK" var(--fraunces-WONK, 1);
}

@font-face {
    font-family: "Fraunces";
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    src: url("fraunces/fraunces-italic.woff2") format(woff2) tech(variations),
        url("fraunces/fraunces-italic.woff2") format("woff2-variations");
}

.fraunces {
    font-variation-settings: "opsz" var(--fraunces-opsz, 9), "wght" var(--fraunces-wght, 900), "SOFT" var(--fraunces-SOFT, 0), "WONK" var(--fraunces-WONK, 1);
}

/* available OT features: case liga rvrn ss01 */

body {
    background-color: white;
}


h1 {
   
    font-family: "Fraunces";
    font-size: 80px;
    margin: 0;
    text-shadow: 3px 8px 20px aqua;
    animation: yolio 250ms infinite alternate;
    justify-content: center;
    text-align: center;
    width: 100%;
}


ul {
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 50px;
    list-style: none;
    padding: 0;
}

h2 {
    /* background-color: lightblue; */
    /* 1em = le corps / la taille du texte */
    margin-top: 2em;
    text-align: center;
    font-family: "Fraunces";
    animation: mutant 5s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;


    
}

@keyframes mutant {
    0% {
        font-variation-settings:  "wght" 0
    }

    25% {
        font-variation-settings:  "wght" 0
    }

    50% {
        font-variation-settings:  "wght" 1000
    }

    75% {
        font-variation-settings:  "wght" 1000
    }

    100% {
        font-variation-settings: "wght" 0
    }
}

/* cést lui le gropupe : */

.partie {
    margin: 0%;
    h3 {
        background-color:darkblue;
        color: white;
        font-family: "Fraunces";
    }

    border: 1px dotted gray;
    padding: 50px;
    background-color: aqua;
    /* largeur */
    width: 90%;
    margin-bottom: 100px;
}

.grille {

    margin: 0px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 50px;

}

.toutelaligne {
    grid-column: 1 / -1;
}

p {
    
}

img {
    width: 100%;
}