@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: blue;}


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



body {
    margin: 50px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: white;
    flex-direction: column;
    }

    p {
    position: relative;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, #000,lightblue, #000);
    background-repeat: no-repeat;
    background-size: 50%;
    animation: animate 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
    }

    @keyframes animate {
    0% {
        background-position: -500%;
    }
    100% {
        background-position: 500%;
    }
}



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;
}
/* cést lui le gropupe : */

.partie {
    border: 1px dotted gray;
    padding: 50px;
    background-color: aqua;
}

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

}

p{
    margin: 0;
    background-color: white;
    border: solid;
    border: thick double #e4e8ea;
    border-radius: 12%;
    overflow: hidden;
}

img {
    width: 100%;
}