@import url('https://fonts.googleapis.com/css2?family=Sofadi+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Ruge+Boogie&family=Shadows+Into+Light&display=swap');
*
{
    margin:0;
    padding:0;
}
html
{
--res:calc(0.01*6vmin);
}
body
{
    
    background-color: bisque;
  }
h1
{
display:inline-block;
align-items:center;
justify-content: center;
margin-left:auto;
margin-right:auto;
color: aliceblue;
font-style: italic;
text-shadow:4px 4px 4px aqua;
background-color: darkgrey;
margin-top:10px;
margin:auto;
font-size:clamp(1rem,2.5vw,18rem);
}
.nom,.Philippe,.Jean-Marie,.Leon,.Rene
{
display:inline-flex;
justify-content:center;
align-items:center;
background-color:darkgray;
margin-left:60px;
border-radius:10px;
font-size:clamp(1rem,2.5vw,18rem);
}
.Philippe
{
rotate:3deg;
max-width:160px;
animation-duration:3s;
animation-name:clignoter;
animation-iteration-count:4;
transition:none;
}
@keyframes clignoter {
0%   { color:#0000000a; }
40%   {color:red; }
100% { opacity:#00000016; }
}
.Jean-Marie
{
rotate:-3deg;

text-align: center;
}
.Leon
{
rotate:3deg;  
text-align:center;
}
.Rene
{
rotate:-6deg;  

}
.nom
{
font-size:3rem; 
background-image:url(philippe.jpg);
background-position:top;
background-size:20rem;
position: relative;
width:180px;
height:180px;
text-align:left;
animation-name: example;
animation-duration:4s;
border-radius:50%;
animation-iteration-count:2;
text-shadow:4px 4px 4px aqua;
}
@keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:goldenrod; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
.contenu 
{
 background-color: rgba(169, 169, 169, 0.445);   
 margin-top:60px;
 border:15px ridge black ;
 max-width:900px;
 text-align:left;
 margin-left:5px;
 display:grid;
 justify-content:center;
 place-items:center;
 margin-left:auto;
 margin-right:auto;
 font-family: "Sofadi One", system-ui;
 font-weight:900;
 font-style: normal;
 font-size:clamp(1rem,2.5vw,18rem);
}

.container
{
color: blue;
text-shadow:3px 3px 3px beige;
margin-left:10px;
margin: right 10px;
font-size:clamp(1rem,1.8vw,18rem);
font-family: "Sofadi One", system-ui;
font-weight: 400;
}
p#titre
{
color:red;
text-shadow:5px 5px 3px blue;
text-align:center;
font-size:clamp(1rem,3vw,18rem);
}
.container #rang
{
text-align:center;
color:blue;
width:200px;
border-radius:15px;
background-color:red;
font-size:clamp(1rem,2.5vw,18rem);
}
.container,#rang, p
{
display:grid;
place-items:center;
}
 #folquin
{
font-size:1.5rem;
background-color: darkgrey;
  
}
h2#total
{
  text-align:center;
  color: red;
  font-size:3rem;
  animation-duration:1s;
  animation-name:clignoter;
  animation-iteration-count:infinite;
  transition:none;
}
@keyframes clignoter {
  0%   { color:#0000000a; }
  40%   {color:red; }
  100% { opacity:#00000016; }
}