body   {background-color: rgb(244, 96, 140);}

  h1   {
      font-size: 4em;}
  h2   {color: black;} 
  p    {color:blueviolet;}
  button { font-size: large;}


 .partie_bienvenue { 
    border: 1px solid black; 
    border-radius: 30px;
    padding: 30px;
    padding-bottom: 15px;
    position: absolute;
	top: 07%;
	left: 50%;
    transform: translate(-50%, 0); /* décalage de 50% de sa propre taille */

    background-color:rgba(74, 85, 28, 0.507)

 }


 .bouttoncommencer { 
    padding: 5px;
    position: relative;
	top: 10%;
	left: 50%;
    transform: translate(-50%, 0); /* décalage de 50% de sa propre taille */
    margin-top: 50px;
 }

 .textemulticolore {
      background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   
      -webkit-background-clip: text;
      -moz-background-clip: text; 
      background-clip: text;
      color: transparent;
      } 




      @import url('https://fonts.googleapis.com/css?family=Poppins:900i');

* {
  box-sizing: border-box;
}



.wrapper {
  display: flex;
  justify-content: center;
}

.cta {
    display: flex;
    padding: 10px 45px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    color: white;
    background: #6225E6;
    /* transition: 1s; */
    box-shadow: 6px 6px 0 black;
    transform: skewX(-15deg);
}

.cta:focus {
   outline: none; 
}

.cta:hover {
    /* transition: 0.5s; */
    box-shadow: 10px 10px 0 #FBC638;
}

.cta span:nth-child(2) {
    /* transition: 0.5s; */
    margin-right: 0px;
}

.cta:hover  span:nth-child(2) {
    /* transition: 0.5s; */
    margin-right: 45px;
}

  span {
    /* transform: skewX(15deg)  */
  }

  span:nth-child(2) {
    width: 20px;
    margin-left: 30px;
    position: relative;
    top: 12%;
  }
  
/**************SVG****************/

path.one {
    /* transition: 0.4s; */
    /*transform: translateX(-60%);*/
}

path.two {
    /* transition: 0.5s; */
    /* transform: translateX(-30%); */
}

.cta:hover path.three {
    animation: color_anim 1s infinite 0.2s;
}

.cta:hover path.one {
    /* transform: translateX(0%); */
     animation: color_anim 1s infinite 0.6s; 
}

.cta:hover path.two {
    /* transform: translateX(0%); */
     animation: color_anim 1s infinite 0.4s; 
}

/* SVG animations */

@keyframes color_anim {
    0% {
        fill: white;
    }
    50% {
        fill: #FBC638;
    }
    100% {
        fill: white;
    }
}

#conteur_question_general{
  visibility: collapse;
}


#conteneur_question1{
  visibility: collapse;
}

#conteneur_question2{
    visibility: collapse;
  }


  #conteneur_question3{
    visibility: collapse;
  }


  #conteneur_question4{
    visibility: collapse;
  }
  
  
  #conteneur_question5{
    visibility: collapse;
  }

  #conteneur_question6{
    visibility: collapse;
  }
  #conteneur_question7{
    visibility: collapse;
  }
  #conteneur_question8{
    visibility: collapse;
  }
  #conteneur_question9{
    visibility: collapse;
  }
  #conteneur_question10{
    visibility: collapse;
  }


#conteneur_findepartie{
  visibility: collapse;

}

#phrase_score{
 font-size: 5em;
}
  .bonnereponse{

    font-size: xx-large ;
  
    color: rgb(0, 128, 79)

  }


  
  .mauvaisereponse{

    font-size: xx-large ;
    
    color: rgb(128, 30, 0)

  }
  
.boutonbonnereponse{
  background-color: green;
}

.boutonmauvaisereponse{
  background-color: red;
}

.boutonattentereponse{
  background-color: lightgrey;
}

  /* IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 800px;
  } */

  .imgbox {
    display: grid;
    height: 100%;
}
.displayed {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}