/*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;
}

nav {
    font-style: italic;
}

body > marquee { height:2em; width: 100%; font-size: 6vw; background: rgba(255, 255, 255, 0); box-shadow: 0px 0px 50px 20px white;}
body > marquee > marquee { 
  display: block;
  width: 100%;
  height: fit-content;
  position: absolute;
  top: 0;
  color: rgba(237, 170, 36, 0.5);
}
body > marquee > marquee + marquee { text-indent: 3ch;}

h2{
    display: flex;
    justify-content: space-between;
    
    transition: all 0.5s linear;
    margin: 0;
    /* transform-origin: 0 0 ; */
    /* width: 100%; */
}

/* h2:hover{
    transform: scale(4);
} */
@keyframes popop {
    0% { font-variation-settings: "wght" 100 }
    100% { font-variation-settings: "wght" 900 }
}

p{
    margin: 0px;
    text-align: center;
    font-size: 1.5rem;
    font-family: "Fraunces";
}
p a {
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    color: currentColor;
    text-decoration: none;
    position: relative;
}
p:hover img {
    /*filter: grayscale(1);*/
    transform: scale(1.1);
}

strong{
    text-size-adjust: 20%;
}
img{
    height: 200px;
    /*width: 100%;*/
    align-self: center ;
    padding: 2px;
    border-radius: 10px;

    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    flex: 1;
    /*filter: grayscale(0);*/
    /*mix-blend-mode: multiply;*/
    transition: all .5s;
}
#Musique{
    color: peru;
    font-size: 30px;
    text-decoration: underline;
    animation: popop 4s infinite alternate;
}
#Films{
    color: rgb(111, 146, 234);
    font-size: 30px;
    text-decoration: underline;
    animation: popop 4s infinite alternate;
}
#Séries{
    color: rgb(145, 35, 74);
    font-size: 30px;
    text-decoration: underline;
    animation: popop 4s infinite alternate;
}
#Artistes{
    color: rgb(93, 157, 69);
    font-size: 30px;
    text-decoration: underline;
    animation: popop 4s infinite alternate;
}
#JeuxVidéos{
    color: rgb(14, 195, 211);
    font-size: 30px;
    text-decoration: underline;
    animation: popop 4s infinite alternate;
}
#Livres{
    color: rgb(239, 86, 91);
    font-size: 30px;
    text-decoration: underline;
    animation: popop 4s infinite alternate;
}
#Danse{
    color: rgb(165, 81, 137);
    font-size: 30px;
    text-decoration: underline;
    animation: popop 4s infinite alternate;
}