body {
   
  background: radial-gradient(rgb(246, 163, 163), rgb(149, 149, 243), rgb(162, 246, 162));
  
}

.comptvisiteur {
  font-family: Arial, Helvetica, sans-serif;
  color: #780795;
  
  border-style: solid;
  border-color: #780795;
  border-radius:0.3vw;
  padding: 0.8vw;
  font-size: 0.7vw;
  position: fixed;
    z-index:2;
    right: 0.5vw;
    top: 0.7vw;
  background: radial-gradient(rgb(246, 163, 163), rgb(149, 149, 243), rgb(162, 246, 162));
}
.center{
  text-align: center;
}
  
  
    h1
    {  
      text-align: center; 
     
    
      font-family: monospace;
     
        font-size: 3vw;
        color: rgb(95, 245, 232);
        text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; 
    }
  
  
  
  
  
    header {
      background-color: #333;
      color: white;
      padding: 5px;
      text-align: center;
  }

  nav {
      font-family:"AppleGothic", sans-serif;
      display: flex;
      justify-content: space-around;
      background-color: #eee;

  }

  nav a {

    background-color: #024c4e;
    
    cursor: pointer;
    font-family: sans-serif;
    font-size: 1vw;
    
    text-transform: uppercase;
    text-align: center;
    
    position: relative;
    text-decoration: none;
    display: inline-block;

    width:auto;
    height: auto;
  }

  nav a::before {
 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;

    z-index: -1;
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
    transition: all 0.4s;
  }
  nav a:hover {
    color: rgb(215, 239, 245);
    background-color: #780795;

    
  }
  nav a:hover::before {
    opacity: 1;
  
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    transition: -webkit-transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity 0.4s;
    transition: transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity;
  }  
  
  


  
  
  #bo {

    background-color: #024c4e;
    
    cursor: pointer;
    font-family: sans-serif;
    font-size: 1vw;
    
    text-transform: uppercase;
    text-align: center;
    
    position: relative;
    text-decoration: none;
    display: inline-block;

    width:auto;
    height: auto;
  }

  #bo::before {
 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;

    z-index: -1;
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
    transition: all 0.4s;
  }
  #bo:hover {
    color: rgb(215, 239, 245);
    background-color: #780795;

    
  }
#bo:hover::before {
    opacity: 1;
  
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    transition: -webkit-transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity 0.4s;
    transition: transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity;
  }     
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

     
 
  .ligne_bouton {
      width: 80vw;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: auto;
      
  }
  .ligne_bouton {
    width: 80vw;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
    
}




  #instructions { background-image: url('instructions.jpg'); }
  #jeux { background-image: url('jeux.jpg'); }
  #sciences { background-image: url('sciences.jpg'); }
  #informations { background-image: url('informations.jpg'); }
  #contact { background-image: url('contact.jpg'); }


  .buttonhome {
    padding-top: 1vw;
    font-family:"AppleGothic", sans-serif;
    width: 20vw;
    height: 15vw;
    font-size: 1vw;
    margin: 10px 4px;
    color: #063d3e;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    text-decoration: none;
    display: inline-block;
    border: 1px solid;
  }
  .buttonhome::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
    transition: all 0.4s;
  }
  .buttonhome:hover {
    color: #ffffff00;
  }
  .buttonhome:hover::before {
    background-image: url('home.png'); background-size: cover; background-position: center;
    opacity: 1;
  
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    transition: -webkit-transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity 0.4s;
    transition: transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity;
  }
    
  .button {
    padding-top: 1vw;
    font-family:"AppleGothic", sans-serif;
    width: 20vw;
    height: 15vw;
    font-size: 1vw;
    margin: 10px 4px;
    color: #063d3e;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    text-decoration: none;
    display: inline-block;
    border: 1px solid;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.471);
  }
  .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
    transition: all 0.4s;
  }
  .button:hover {
    color: #b414ba;
  }
  .button:hover::before {
    opacity: 1;
    background-color: #f7c2f9;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    transition: -webkit-transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity 0.4s;
    transition: transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity;
  }
  
  .bouton {
    width: 100%;
    height: 100%;
    padding: 10px;  /* Ajoutez du rembourrage au besoin */
    background-color: transparent;  /* Couleur de fond transparente */
    color: transparent;  /* Couleur de texte transparente */
    border: none;  /* Supprime la bordure du bouton */
    outline: none;  /* Supprime le contour du bouton lorsqu'il est en surbrillance */
    cursor: pointer;
    position: absolute;  /* Permet au bouton de couvrir toute la surface de la div */
    top: 0;
    left: 0;
}
  
.bou {
  width: 100%;
  height: 100%;
  padding: 10px;  /* Ajoutez du rembourrage au besoin */
  background-color: transparent;  /* Couleur de fond transparente */
  color: transparent;  /* Couleur de texte transparente */
  border: none;  /* Supprime la bordure du bouton */
  outline: none;  /* Supprime le contour du bouton lorsqu'il est en surbrillance */
  cursor: pointer;
  position: absolute;  /* Permet au bouton de couvrir toute la surface de la div */
  top: 0;
  left: 0;
}
  
  
  
#bo {
text-align: left;
font-size:auto;
  color: rgb(169, 237, 241);
  padding: 5px 5px;
  text-decoration: none;
  display: block;
  width: auto;
 
}   
  
  
  
  
  
  
  
  
  
  .theme-dropdown {
      position: relative;
      display: inline-block;
  }

  .theme-dropdown-content {
      display: none;
      position: absolute;
      background-color: #faf7f7;
      width: auto;
      box-shadow: 0 12px 20px rgba(0, 0, 0, 0.471);
      z-index: 1;
  }

  .theme-dropdown-content a {
    text-align: left;
    font-size:auto;
      color: rgb(169, 237, 241);
      padding: 5px 5px;
      text-decoration: none;
      display: block;
      width: auto;
     
  }

  .theme-dropdown:hover .theme-dropdown-content {
      display: block;
      width: auto;
  }
  .lien { 
    padding-top: 5px;
  width: 14vw;
  height: 2.5vh;
  background-color: #eee;
  font-family:"AppleGothic", sans-serif;
  color: black;
    display: flex;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.471);
    justify-content: center;
    text-decoration: none;
    font-weight: 600;

}
.lien :hover {
  
  z-index: -1;
  background-color: #780795;
}