@charset "UTF-8";


body {
    background-color: #740036;
    cursor: url('../images/cursor.png')16 16, auto !important;
    overflow: hidden;
}


.container-intro {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#740036;
    transform: scale(1);
    transition: transform 0.6s ease-in-out;
}
.switch-questions .container-intro {
    transform: scale(0) rotate(720deg);
}

#button-intro {
    position: absolute;
    width: 400px;
    height: 330px;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    background-color: rgb(255, 40, 219);
    cursor: pointer;
    color: #740036;
    border-radius: 200px;
	  border:solid 2vw rgb(255, 0, 132);
    font-family: 'JacobAndSon';
    font-size: 5rem;
    text-align: center;
	  display: flex;
	  align-items: center;
	  justify-content: center;
}


@media only screen and (max-width: 200px) {
  #button-intro{
    width: 80vw;
    height: 40vh;
    font-size: 3rem;
  }

}


#button-intro:hover {
    background-color: rgb(255, 0, 136);
    color: rgb(255, 255, 255);
}

.sparkle-container {
    position: relative;
    height: 100%;
  }
  
  .sparkle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(244, 244, 244, 0.8);
    animation: sparkle 2s linear infinite;
  }
  
  @keyframes sparkle {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    50% {
      transform: translate(-20px, 20px);
    }
    75% {
      transform: translate(20px, 40px);
    }
    100% {
      transform: translate(0, 60px);
      opacity: 0;
    }
  }
  
  .sparkle:nth-child(2) {
    left: 20%;
    top: 10%;
    animation-delay: 0.5s;
  }
  
  .sparkle:nth-child(3) {
    left: 40%;
    top: 30%;
    animation-delay: 0.7s;
  }
  
  .sparkle:nth-child(4) {
    left: 60%;
    top: 20%;
    animation-delay: 1s;
  }
  
  .sparkle:nth-child(5) {
    left: 80%;
    top: 70%;
    animation-delay: 1.2s;
  }
  
  .sparkle:nth-child(6) {
    left: 90%;
    top: 40%;
    animation-delay: 0.8s;
  }
  
  .sparkle:nth-child(7) {
    left: 10%;
    top: 50%;
    animation-delay: 1.3s;
  }
  
  .sparkle:nth-child(8) {
    left: 30%;
    top: 70%;
    animation-delay: 1.1s;
  }
  
  .sparkle:nth-child(9) {
    left: 50%;
    top: 80%;
    animation-delay: 0.6s;
  }
  
  .sparkle:nth-child(10) {
    left: 70%;
    top: 60%;
    animation-delay: 0.4s;
  }


  /* Test */

.container-questions {
    position: fixed;
    z-index: 1000;
    top: 20%;
    left: 0%;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: transform 0.6s ease-in-out;
    font-size: 0.5rem;
    text-align: center;
    /* display: flex; */
    align-items: center;
    justify-content: center;

}

.switch-final .container-questions {
    transform: scale(0) rotate(720deg);

}
  

.rep {
    position: absolute;
    width: 200px;
    height: 500px;
    transition: top .4s ease-in-out, left .4s ease-in-out;
    text-align: center;
    top: 50%;
    left: 50%;
    transition: transform 0.5s ease;
    animation: float 3s ease-in-out infinite alternate;
    /* transform: translate(-50%, -50%); */

}

@keyframes float {
  0% {
    transform: translate(0, 0) scale(1);

  }
  100% {
    transform: translate(-10px, 10px) scale(1.1);
  }
}

.switch-final .rep {
    top: 0 !important;
    left: 0 !important;
    margin-top: 30%;
    margin-left: 30%;
}

/* style des bulles reponses */
.rep p {
    border: 10px solid rgb(255, 0, 162);
    border-radius: 2px;
    font-family: 'Pretorian';
    color: #740036;
    font-size: 2rem;
    background-color: rgb(255, 122, 144);
    border-radius: 50%;
    padding: 2em;
    width: 20vw;
    height: 10vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  
}

@font-face {
  font-family: JacobAndSon;
  src: url(../fonts/JacobAndSon-gxl06.otf);
}

#reponse1{
  border: 2px solid rgb(255, 255, 255) !important;
  /* border-radius: 30%; */
  background-color: rgb(255, 40, 219);
  margin: 40px;
  font-family: 'JacobAndSon';
  font-size: 4vw;
  color: #740036;

  width: 50vw;
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
    
}

#reponse1:hover {
  background-color: rgb(255, 0, 136);
  color: rgb(255, 255, 255);
  
}

#reponse2{
  border: 2px solid rgb(255, 255, 255) !important;
  /* border-radius: 30%; */
  background-color: rgb(255, 40, 219);
  margin: 20px;
  font-family: 'JacobAndSon';
  font-size: 4vw;
  color: #740036;

  width: 50vw;
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;

}

#reponse2:hover {
  background-color: rgb(255, 0, 136);
  color: rgb(255, 255, 255);
  
}


#reponse3{
  border: 2px solid rgb(255, 255, 255) !important;
  /* border-radius: 50%; */
  background-color: rgb(255, 40, 219);
  margin: 40px; 
  font-family: 'JacobAndSon';
  font-size: 4vw;
  color: #740036;

  width: 50vw;
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;

}


#reponse3:hover {
  background-color: rgb(255, 0, 136);
  color: rgb(255, 255, 255);
  
}

.section-question{
  overflow-y: hidden;
}


.button:hover{
	transform: translateY(-20px);
	background-color: rgb(202, 200, 200);
	color: rgb(143, 143, 143);
  }

  /* la boite ou y'a les trois reponses */
.button-reponse {
    font-size: 6em;
    position: relative;
    background-color: transparent;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@font-face {
  font-family: Pretorian;
  src: url(../fonts/Pretorian.ttf);
}


#question{
  text-align: center;
  width: 100%;
  margin-top: 30px;
  font-family: Pretorian;
  font-size: 3em;
  color: rgb(255, 179, 241);
  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: rgb(255, 41, 205);
  margin-bottom: 100px;

}





img.hidden {
  display: none;
}

img.visible {
  display: block;
  width: 50%;
  height: 50%;
  position: absolute;
}

.myvideo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

.animRes {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
  transition: 0.4s ease-in-out;
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  from {
    width: 0;
   
  }
  to {
    width: 50%;
   
  }
}

@keyframes example2 {
  from {
    width: 0;
   
  }
  to {
    width: 100%;
   
  }
}


@media only screen and (max-width: 600px) {

  .button-reponse {
    font-size: 8vw;
  }
  #reponse1,
  #reponse2,
  #reponse3{
    font-size: 2rem;
    width: 70vw;
    height: 15vh;
  }
  .animRes {
    animation-name: example2;
    animation-duration: 1s;
    width: 100%;
  }



}