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

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Fascinate+Inline&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&family=Reddit+Sans+Condensed:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap');
*
{
margin:0;
padding:0;
}

html
{
--res:calc(0.01*6vmin);
}
body
{
background-image:url(image\ genealogie.png);
background-position:center;
background-color: darkgrey;
}
 h1
{
text-align:center;
margin-left: auto;
margin-right: auto;
border-radius:30px;
font-size:clamp(35px,5vw,40px);
text-shadow:4px 4px 4px yellow;
letter-spacing: 01vw;
max-width: 400px;
font-family: "Sofadi One", system-ui;
animation-duration: 8s;
animation-iteration-count:3;
animation-name:example;
}
@keyframes example {
   0%   {background-color: red;}
   25%  {background-color: violet;}
   50%  {background-color: blue;}
   100% {background-color: green;}
 }
h2.foort
{  
text-align: center;
font-size:clamp(1rem,2.5vw,10rem);
color:midnightblue;
background-color: rgba(250, 235, 215, 0.396);
margin-left:auto;
margin-right:auto;
width:200px;
height:200px;
border-radius:50%;
border:7px double red;
background-color: rgba(169, 169, 169, 0.46);
display: grid;
place-items:center;
text-shadow:4px 4px 4px red;
animation-name: example;

}
h2.foort
{
font-size:clamp(1rem,2.5vw,18rem);
animation-name:rotating;
animation-duration:10s;
animation-iteration-count:3;
}
@keyframes rotating {     
 
   from {
     transform: rotate(-360deg);
   }
   to {
     transform: rotate(-0deg);
   } 
} 

/*Début question-réponse*/
div.question-container
{
 position:relative; 
 display:flex;  
 justify-content:center;
 margin-top:20px;
 perspective:1000px; /*activer la 3D*/
}
div.question-container:hover .question2
{
transform:rotateY(0deg);
}
div.question-container:hover .question1
{
transform:rotateY(-180deg);
}
h5.question
{
transition: transform 6s ease;      /*reglage du temps de rotation du texte*/
position:absolute;
}
h5.question1
{
z-index:1 ;
backface-visibility:hidden; 
}

h5.question2
{
backface-visibility:hidden;
transform:rotateY(180deg);
}
.question1
{
width:300px;
height:150px;
border:8px dashed red;
border-radius:6px;
text-align:center;
place-content:center;
background-color:orange ;
font-size:2rem;
font-family: "Dancing Script", cursive;
font-optical-sizing: auto;
  
}
.question2
{
width:300px;
height:150px;
border:8px ridge brown;
text-align:center;
place-content:center;
background-color:yellow ;
font-size:2rem;
border-radius:25px;
font-family: "Sofadi One", system-ui;
}
/*Fin question-réponse*/

.coté
{
display:flex ;
align-items:center;
margin-left:auto;
margin-right: auto;
font-size:clamp(1rem,2.5vw,18rem);
}
#gauche
{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 40px;
  margin-right: auto;
  max-width:170px;
  max-height:400px;
  border:2px solid black;
  font-family:  "Dancing Script", cursive;
  border-radius:20px;
  border-left:5px solid blue;
  font-weight:900;
  font-size:clamp(0.5rem,1.9vw,18rem);
  background-color: #999999f3;
  height:200px;
  text-overflow:ellipsis;
}
#gauche:hover
{
  font-size:1.5rem;
  text-overflow:ellipsis;
  max-width:300px ;
}


#droite
{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right:50px;
  margin-left: auto;
  max-width:170px;
  max-height:400px;
  background-color: darkgrey;
  font-family: "Dancing Script", cursive;
  border-radius:20px;
  border-left:5px solid blue;
  font-weight:900;
  font-size:clamp(0.8rem,1.7vw,18rem);
  height:200px;
  text-overflow:ellipsis;
}
#droite:hover
{
font-size:1.5rem;
text-overflow:ellipsis;
max-width:300px ;
}

.logo
 {
  display:block;
  margin: auto;
 }
.logo:hover
{
    content:url(grand\ titre.png);
    transition:4s;
}
#menu-accordeon {
  padding: 3px;
  margin:10px;
  list-style:none;
  text-align: center;
  width: 180px;
  background-color:aqua;
  font-size:clamp(1rem,2.5vw,18rem);
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  font-size:clamp(1rem,2.5vw,18rem);
}
#menu-accordeon li {
   background-color:#729EBF; 
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40;
   font-size:clamp(1rem,2.5vw,18rem);
}
#menu-accordeon li li {
  max-height:0;
  overflow: hidden;
  transition: all .5s;
  border-radius:0;
  background: #444;
  box-shadow: none;
  border:none;
  margin:0
 
}
#menu-accordeon a {
 display:block;
 text-decoration: none;
 color: #fff;
 padding: 8px 0;
 font-family: verdana;
 font-size:1.2em;
 font-size:clamp(1rem,2.5vw,18rem);
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:clamp(1rem,2.5vw,18rem); 
  
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}
#menu-accordeon ul li a:hover
{ 
  color:blue;
}

/*Début du menu déroulant*/
div.deroulant
{
  height:20vh;
  width: 100%;
  display:flex;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
  margin-top:180px;
  overflow:clip;
  color:black;
  font-size:clamp(1rem,2.5vw,18rem);
}
.btn
{
white-space:nowrap;
font-size:30px;
text-shadow :2px 2px 2px blue,5px 5px 3px red;
margin-left:auto;
margin-right:auto;
animation:scroll 15s linear infinite;
font-size:clamp(1rem,2.5vw,18rem);
}
@keyframes scroll
{
0% {transform:translateX(100%);}
100%{transform:translateX(0%)}
}
/*Fin du menu déroulant*/