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

.container {
  
    margin:  auto;
 
    text-align: center;
}


h1
{  
  text-align: center; 
 

  font-family: monospace;
 
 
    font-size: clamp(20px, 4vmin, 60px);
    color: rgb(95, 245, 232);
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; 
}

#problem {
  margin: auto;
  
    font-family: Arial, Helvetica, sans-serif;
    font-weight:600;
    margin-top: 1vh;margin-bottom: 1vh;
    font-size: 3vw;
    width: 25vw;
    height: 60px; ;
    color: rgb(64, 201, 243);
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    text-align: center;
}

#incorrect {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:600;
margin-top: 1vw;
  font-size: 1.5vw;

  text-align: center;
  height: 30px; ;
  color: rgb(64, 201, 243);
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;

}
#correct {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:600;
  margin-top: 1vw;
  font-size: 1.5vw;
  text-align: center;

  height: 30px; ;
  color: rgb(64, 201, 243);
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;

}
#reponse{

  width: 5vw;
  height: 5vw;

}


#score-value{
    color: rgb(164, 117, 245);
}



#score {
    font-family: Arial, Helvetica, sans-serif;

    margin-top: 3vh;margin-bottom: 3vh;
    color: rgb(64, 201, 243);
    font-size: 2vw;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
#timer-value{
    
    color: rgb(164, 117, 245);
    
}

#timer {
    font-family: Arial, Helvetica, sans-serif;

    margin-top: 3vh;margin-bottom: 3vh;
    color: rgb(64, 201, 243);
    font-size: 2vw;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

.bouton {
    background-color: #024c4e;
    margin-bottom: 3vh;
    cursor: pointer;
    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:white;
    width: 25vw;
    height: 50px; ;
   
  }
  .bouton::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;
  }
  .bouton:hover {
    color: rgb(64, 201, 243);
    background-color: #780795;

    
  }
  .bouton: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;
  }  
  
#a,#b,#c,#d,#e,#f,#g,#h,#i,#j,#k{

  background-color: transparent;




}
  input{
    background-color: #024c4e;
  outline: none;
  width: 30px;
  border: none;
 text-align: center;
 
 font-size: 16px;
font-family: "Fira Sans", Arial, sans-serif;
  }
  input::before 
  {
   
    content: "";
    position: absolute;
    top: 0px;
    left: 100px;
    display: block;

    z-index: -1;
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
    transition: all 0.4s;
  }
  input:hover {
  color: #f5def5;  
  background-color: #780795;
  }
  input: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;
  }
  .inp
  {
    margin-bottom: 4vh;margin-top: 2vh;
    width: 25vw;
    height: 50px; 
    text-transform: uppercase;
    color: rgb(215, 239, 245); 
    padding: 0px;
  font-family: 'verdana';
  z-index: -1;
  font-size: 1.2vw;
  border: 1px solid;

  }
  input::placeholder {
    color: #d6f3e1;
    opacity: 0.2;
    font-family: 'verdana';
    
  }







  .bandrole{


 
    position: fixed;
    z-index:1;
    left: 0px;
    top: 0px;
    
    /*background-color: #f6b8f1;*/
    background: radial-gradient(rgb(246, 163, 163), rgb(149, 149, 243), rgb(162, 246, 162));
    height: 10vmin;
    width: 100%; /* Largeur personnalisée */
    
  }
  #sepband{
  
    position: fixed;
    top: 9.5vmin;
    left: 0px;
    z-index:6;
    height: 1px;
    width: 100%;
    background-color: #60f0eb;
    border: none;
  }
  #debband{
  
    position: fixed;
    top: -6px;
    left: 0px;
    z-index:6;
  
    height: 1px;
    width: 100%;
    background-color:#60f0eb;
    border: none;
  }
  #plateau
  {
    width:70vw;
    height:10vh;
    margin: auto;
    border: 3pt solid rgb(62, 63, 2);
  }
  #plateau2
  {
  
    width:70vw;
    height:9vh;
    margin: auto;
    border: 3pt solid rgb(62, 63, 2);
  }
  
  
  td
  {
    padding: 0px;
    text-align: center;
    font-size: 1.2vw;
    font-family: "Fira Sans", Arial, sans-serif;
    width:6%;
    height:auto;
    border: 1pt solid blue;
    
  }
  #niveau
  {
    padding: 0px;
    text-align: center;
    font-size: auto;
    font-family: "Fira Sans", Arial, sans-serif;
    width:auto;
    height:auto;
    border: 1pt solid blue;
    
  }



.tit
{
  text-align: center;
  font-size: 1vw;
  font-family: "Fira Sans", Arial, sans-serif;
  font-weight:600;
  color: rgb(69, 7, 83);
  width:12vw;
  height:4vh;
  border: 1pt solid blue;
  
}


fieldset{
  position: relative;
margin: auto;
  
  font-family: monospace;

  text-align: center;
  width:65vw;
  height:7vh;


}
#clignote {
  animation-duration: 1s;
  animation-name: clignoter;
  animation-iteration-count: infinite;
  transition: none;
}
@keyframes clignoter {
 0%   { opacity:1; }
 40%   {opacity:0; }
 100% { opacity:1; }
}
#difficile, #trèsdifficile, #moyen, #facile, #trèsfacile{
  width: 2vw;
  height: 2vw;

  
  font-family: monospace;

  text-align: justify;
 
  text-decoration:dashed;

}



legend{

  font-family:monospace;
  text-align: center;
  font-size: 18px;
  font-weight:600;
  color: rgb(179, 45, 212);


}
span
  {
    
     font-family: Arial, Helvetica, sans-serif;
      font-weight:600;
      
      color: rgb(255, 255, 255);
      font-size: 1.8vw;
      text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; 
    
  }
  .minute{
    margin: 1.8vw;

    font-family: Arial, Helvetica, sans-serif;
    font-weight:600;
    
    color: rgb(92, 198, 244);
    font-size: 1.2vw;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; 


  }
  .box {
 


    display:flex;
    justify-content:space-around;
    }
    
    .box1 {

    width:33%;
    display: flex;
    flex-direction:column;
    align-items:center;
    
    }
    .box2 {
 
    width:33%;
    display: flex;
    flex-direction:column;
    align-items:center;
    
    }
    
    .box3 {
  
    width:33%;
    display: flex;
    flex-direction:column;
    align-items:center;
    
    }
    .circular-progress{


      margin: 1vw;
      padding: 0;
      box-sizing: border-box;
      
    }
    
    :root {
    
    
      --progress-bar-width: 15vw;
      --progress-bar-height: 15vw;
      --font-size: 2rem;
    }
    
    .circular-progress {
      width: var(--progress-bar-width);
      height: var(--progress-bar-height);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(59, 4, 142);
      border: 1pt solid rgb(19, 4, 1);
    
    
    
    }
    .inner-circle {
      position: absolute;
      width: calc(var(--progress-bar-width) - 3.2vw);
      height: calc(var(--progress-bar-height) - 3.2vw);
      border-radius: 50%;
      background-color: #f494ec;
      border: 1pt solid rgb(19, 4, 1);
    }
    
    #pourcentage {
      z-index: 9999;
      position: relative;
      font-weight:700;
      font-family: "Fira Sans", Arial, sans-serif;
      color: rgb(255, 255, 255);
      font-size:2.5vw;
      text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
      
    }
    .circular-progress2{


      margin: 1vw;
      padding: 0;
      box-sizing: border-box;
      
    }
    
    :root {
    
    
      --progress-bar-width: 15vw;
      --progress-bar-height: 15vw;
      --font-size: 2rem;
    }
    
    .circular-progress2 {
      width: var(--progress-bar-width);
      height: var(--progress-bar-height);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(59, 4, 142);
      border: 1pt solid rgb(19, 4, 1);
    
    
    
    }
    .inner-circle2 {
      position: absolute;
      width: calc(var(--progress-bar-width) - 3.2vw);
      height: calc(var(--progress-bar-height) - 3.2vw);
      border-radius: 50%;
      background-color: #f494ec;
      border: 1pt solid rgb(19, 4, 1);
    }
    
    #pourcentage2 {
      z-index: 9999;
      position: relative;
      font-weight:700;
      font-family: "Fira Sans", Arial, sans-serif;
      color: rgb(255, 255, 255);
      font-size:2.5vw;
      text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
      
    }

    #clignote {
      animation-duration: 1s;
      animation-name: clignoter;
      animation-iteration-count: infinite;
      transition: none;
    }
    @keyframes clignoter {
     0%   { opacity:1; }
     40%   {opacity:0; }
     100% { opacity:1; }
    }
    #MR{
      margin-left: 2vw;
      display: none;

      width: 4vw;
      height: 4vw;

    }
    #BR{
      margin-left: 2vw;
      display: none;

      width: 4vw;
      height: 4vw;

    }
    .box11{
      margin:  auto;
      width:5vw;
    display: flex;
    flex-direction:column;
 
    align-items:start;
    }
    .box12{
   margin-left: 2vw;
      width:25vw;
    display: flex;
    flex-direction:column;
    align-items:start;
    }
    .box13{
   
      width:40vw;
    display: flex;
    flex-direction:column;
    align-items:end;
    }
    .boxx {
      margin:  auto;
      width:70vw;

      display:flex;
      justify-content:space-around;
      }