body {
  background-image: url('ciel.avif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000; /* Couleur de fond de secours */
}

.container {
    margin:  auto;
    max-width: 700px;
    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; 
}

.button {
  background-color: #024c4e;
   padding-top: 15px;
   padding-bottom: 5px;
   margin-bottom: 10px;
   margin-top: 10px;
   font-family: sans-serif;
   font-size:1vw;
   text-transform: uppercase;
   text-align: center;
   position: relative;
   text-decoration: none;
   display: inline-block;
   border: 1px solid;
   color: #b7f5cc;
   width: 25vw;
   height: 5.5vh; ; 
 }
 .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: 5px;  /* 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;
}


 





  
  
  
  
  





 
  .box {



    display:flex;
    justify-content:space-around;
    align-items: center;
    }
    
    .box1 {
    
    width:50%;
    display: flex;
    flex-direction:column;
    align-items:center;
    
    }
    .box2 {
    
    width:50%;
    display: flex;
    flex-direction:column;
    align-items:center;
    
    }
    
   
    
    
    
    
    
      

      #affi_vitesse_rotation {
        padding-top: 1vw;
          font-family:"AppleGothic", sans-serif;
          text-align: center;
        
          font-size: 1.5vw ;
          color: rgb(39, 1, 58);
          margin: auto;
      }
      #aff{

        font-family:"AppleGothic", sans-serif;
        text-align: center;
  
        font-weight: bold;
        font-size: 0.8vw ;
        color: rgb(39, 1, 58);
      }

      #baiss_vitesse_rotation, #augm_vitesse_rotation  {
        width: 35px;
        height: 35px;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 18px;
        margin: auto;
    
      }
      .box3 {
        background-color: #7cf0f4;
            width: 25vw;
            height: 20vh;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
          
            border: 1px solid;
    
      }