*{
      margin: 0;
      padding: 0;
      font-family: FK Grotesk Neue, sans-serif;
      text-decoration: none;
    }
    body{
      width: 100vw;
      height: 100vh;
      background-color: #4949b7;
      font-family: FK Grotesk Neue, sans-serif;
    }
    h1{
      font-size: 40px;
      font-weight: 800;
      color: #FEB089;
      text-align: center;
      margin: 0;
    }

    #progressBar {
      width: 400px;
      height: 20px;
      background-color: #ddd;
      margin-bottom: 10px;
      border-radius: 20px;
    }

    #progressFill {
      height: 100%;
      background-color: #4caf50;
      width: 0;
      border-radius: 20px;
    }
    .info_container{
      width: calc(100vw - 100px);
      padding: 50px;
      display: flex;
      flex-direction: column;
      gap: 40px;
      justify-content: center;
      align-items: center;
    }
    .quiz_container{
      max-width: 750px;
      padding: 25px;
      margin: 50px;
      margin-top: 0px;
      margin: auto;
      display: flex;
      border-radius: 20px;
      background-color: white;
    }
    #quizForm{
      width: 100%;
      height: 100%;
      color: #161348;
    }
    .question{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .question .avance{
      font-size: 20px;
    }
    .question label{
      font-size: 22px;
      margin-bottom: 20px;
    }
    .question .reponce{
      padding: 19px 30px;
      border-radius: 40px;
      display: flex;
      align-items: center;
      gap: 25px;
      font-size: 18px;
      background-color: #c5c5eb;
      transition: 300ms ease-in-out;
    }
    .question .reponce input{
      height: 18px;
      width: 18px;
    }
    #nextButton{
      display: flex;
      justify-content: left;
      align-items: center;
      gap: 20px;
      text-decoration: none;
      padding: 20px;
      width: 200px;
      border-radius: 30px;
      margin-top: 15px;
      background-color: #FEB089;
      position: relative;
      transition: 200ms ease-in-out;
      border: 0;
      margin: auto;
      margin-top: 25px;
      margin-right: 0px;
      cursor: pointer;
    }
    #nextButton span{
      margin-top: 1px;
      font-size: 16px;
      font-weight: 600;
      margin-left: 5px;
      color: #161348;
    }
    #nextButton svg{
      position: absolute;
      right: 30px;
      width: 18px;
      transition: 200ms ease-in-out;
    }
    #nextButton svg path{
      fill: #161348;
    }
    #nextButton:hover{
      width: 210px;
    }
    #nextButton:hover #nextButton svg{
      right: 20px;
    }
    .correct-answer {
      background-color: #4caf50 !important;
    }

    .bad-answer {
      background-color: #d12828 !important;
    }
    .hidden {
      display: none;
    }
    .congrat{
      width: 426px;
      text-align: center;
      margin: auto;
      margin-bottom: 20px;
    }
    #quizResult .container_img{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }
    #quizResult .container_img img{
      width: 300px;
    }
    #quizResult a{
      display: flex;
      justify-content: left;
      align-items: center;
      gap: 20px;
      text-decoration: none;
      padding: 20px;
      width: 180px;
      border-radius: 30px;
      margin-top: 15px;
      background-color: #FEB089;
      position: relative;
      transition: 200ms ease-in-out;
      margin: auto;
    }
    #quizResult a:hover{
      width: 200px;
    }
    #quizResult a span{
      margin-top: 1px;
      font-size: 16px;
      font-weight: 600;
      margin-left: 5px;
      color: #161348;
    }
    #quizResult a svg{
      position: absolute;
      right: 30px;
      width: 18px;
      transition: 200ms ease-in-out;
    }
    #quizResult a svg path{
      fill: #161348;
    } 
    @media (max-width: 850px) {
      .info_container{
        width: calc(100vw - 50px);
        padding: 25px;
      }
      .quiz_container{
        margin: 25px;
        margin-top: 0;
        margin-bottom: 0;
      }
    }
.contenu_text{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 750px;
    padding: 25px;
    margin: 50px;
    margin-top: 0px;
    margin: auto;
    display: flex;
    border-radius: 20px;
    background-color: white;
    color: #161348;
}
.contenu_text p a{
    color: #FEB089;
}
.contenu_text .bobo{
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  padding: 20px;
  width: 190px;
  border-radius: 30px;
  margin-top: 15px;
  background-color: #FEB089;
  position: relative;
  transition: 200ms ease-in-out;
  margin: auto;
}
.contenu_text .bobo:hover{
  width: 210px;
}
.contenu_text .bobo span{
  margin-top: 1px;
  font-size: 16px;
  font-weight: 600;
  margin-left: 5px;
  color: #161348;
}
.contenu_text .bobo svg{
  position: absolute;
  right: 30px;
  width: 18px;
  transition: 200ms ease-in-out;
}
.contenu_text .bobo svg path{
  fill: #161348;
}