/*h1{color: rgb(29, 212, 41);
    font-weight: 500;
    font-size: 100px;
    font-style: oblique;
}*/
html{
  background: 
    radial-gradient(
      farthest-side at bottom left,
      rgba(242, 115, 24, 0.5), 
      transparent
    ),
    radial-gradient(
      farthest-corner at bottom right,
      rgba(255, 50, 50, 0.5), 
      transparent 100%
    );
    font-family: "Fraunces";
}

@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);
}

div{
    margin: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 50px;
}
.rond{
    border: solid 10px rgb(22, 200, 19);
    border-radius: 50%;
}
#speciale{
    border-radius: 15px;
}
h1{
    text-align: center;
    color: rgba(237, 170, 36, 0.5);
    /*font-weight: 400px;
    font-size: 80px;
    /*font-style: oblique;*/
    text-decoration-line: underline;

    font-family: "Fraunces";
    font-size: 90px;
    font-weight: normal;
    animation: popop 2s infinite alternate;

}

@keyframes popop {
    0% { font-variation-settings: "wght" 100 }
    100% { font-variation-settings: "wght" 900 }
}

p{
    margin: 2px;
    text-align: center;
    font-size: 1.5rem;
}
strong{
    text-size-adjust: 20%;
}
img{
    height: 200px;
    /*width: 100%;*/
    align-self: center ;
    padding: 2px;
    border-radius: 10px;
}
#Musique{
    color: peru;
    font-size: 30px;
    text-decoration: underline;
}
#Cinéma{
    color: rgb(111, 146, 234);
    font-size: 30px;
    text-decoration: underline;
}
#Sport{
    color: rgb(82, 163, 106);
    font-size: 30px;
    text-decoration: underline;
}
#Danse{
    color: rgb(165, 81, 137);
    font-size: 30px;
    text-decoration: underline;
}