/* defaults */
  
@font-face { 
  font-family: "Univers-UltraCondensed";
  font-weight: 700;
  font-style: normal;
  color: black;
  src: url("../fonts/Univers-UltraCondensed.eot") format("eot"),
    url("../fonts/Univers-UltraCondensed.woff") format("woff"),
    url("../fonts/Univers-UltraCondensed.woff2") format("woff2");
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: whitesmoke;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering:optimizeLegibility;
    font-family: "Univers-UltraCondensed";
    color: whitesmoke;
    font-size: 6vw;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;  
  }

/* ::selection {
    background-color: rgb(141, 202, 194);
    color: white;
}

::-moz-selection {
    background-color: rgb(141, 202, 194);
    color: white;
} */


.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    /* perspective: 100vw; */
}

.layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease-in-out;
    overflow: hidden;
  }

  .start {
    background-image: url("../img/gnocchi_01.jpg");
    background-size: cover;
    font-size: 100px;
  }

  .grid-background {
    position: fixed; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    background-image: 
      linear-gradient(transparent 129px, rgb(255, 51, 51) 130px,transparent 129px),
      linear-gradient(90deg,transparent 129px,rgb(255, 51, 51) 130px, transparent 129px);
    background-size: 100% 130px, 130px 100%;
  }

  .layer-1 {
    background-size: 100% 130px, 130px 100%;
    transform: translate3d(0, 100%, 0);
    background-color: whitesmoke;
    /* border: 2px solid white; */
  }

  .layer-2 {
    transform: translate3d(100%, 0, 0);
    background-color: rgb(231, 47, 47);
    /* border: 1px solid white; */
    font-size: 9vw;
  }

  .layer-3 {
    transform: translate3d(0, 100%, 0);
    background-color: rgb(231, 47, 47);
    /* border: 1px solid white; */
    font-size: 7vw;
  }

  .image_3 {
    /* position: relative;
    z-index: 1000; */
    width: 100%;
    height: 100%;
  }

  .layer-4 {
    background-size: 100% 130px, 130px 100%;
    transform: translate3d(100%, 0, 0);
    background-color: whitesmoke;
    /* border: 2px solid white; */
  }

  .layer-5 {
    transform: translate3d(0, 100%, 0);
    background-color: rgb(231, 47, 47);
    /* border: 1px solid white; */
    font-size: 9vw;
  }

  .layer-6{
    transform: translate3d(100%, 0, 0);
    background-color: rgb(231, 47, 47);
    /* border: 1px solid white; */
    font-size: 9vw;
  }

  .layer-7 {
    transform: translate3d(0, 100%, 0);
    background-color: rgb(231, 47, 47);
    /* border: 1px solid white; */
    font-size: 9vw;
  }

  .layer-8 {
    background-size: 100% 130px, 130px 100%;
    transform: translate3d(100%, 0, 0);
    background-color: whitesmoke;
    /* border: 2px solid white; */
  
  }

  .layer-9{
    transform: translate3d(0, 100%, 0);
    background-color: rgb(231, 47, 47);
    /* border: 1px solid white; */
    font-size: 9vw;
  }

  .layer-10{
    transform: translate3d(100%, 0, 0);
    background-color: rgb(231, 47, 47);
    /* border: 1px solid white; */
    font-size: 9vw;
  }

  .layer-11 {
    transform: translate3d(0, 100%, 0);
    background-color: rgb(231, 47, 47);
    /* border: 1px solid white; */
    font-size: 9vw;
  }
  
  .layer-12{
    background-size: 100% 130px, 130px 100%;
    transform: translate3d(100%, 0, 0);
    background-color: whitesmoke;
    /* border: 2px solid white; */
  }

  .layer-13 {
    transform: translate3d(0, 100%, 0);
    background-color: rgb(231, 47, 47);
    /* border: 1px solid white; */
    font-size: 7vw;
  }

  .layer-14 {
    background-size: 100% 130px, 130px 100%;
    transform: translate3d(0, 100%, 0);
    background-color: whitesmoke;
    font-size: 3vw;
    /* border: 1px solid white; */
  }

  .switch-1 .layer-1 {
    transform: translate3d(0, 0, 0);
  }

  .switch-2 .layer-2 {
    transform: translate3d(0, 0, 0);
  }
  .switch-3 .layer-3 {
    transform: translate3d(0, 0, 0);
  }

  .switch-4 .layer-4 {
    transform: translate3d(0, 0, 0);
  }

  .switch-5 .layer-5 {
    transform: translate3d(0, 0, 0);
  }

  .switch-6 .layer-6 {
    transform: translate3d(0, 0, 0);
  }

  .switch-7 .layer-7 {
    transform: translate3d(0, 0, 0);
  }

  .switch-8 .layer-8 {
    transform: translate3d(0, 0, 0);
  }

  .switch-9 .layer-9 {
    transform: translate3d(0, 0, 0);
  }

  .switch-10 .layer-10 {
    transform: translate3d(0, 0, 0);
  }

  .switch-11 .layer-11 {
    transform: translate3d(0, 0, 0);
  }

  .switch-12 .layer-12 {
    transform: translate3d(0, 0, 0);
  }

  .switch-13 .layer-13 {
    transform: translate3d(0, 0, 0);
  }

  .switch-14 .layer-14 {
    transform: translate3d(0, 0, 0);
  }



.start .clic,
.visible-slide .clic {
  opacity: 1;
}

.goback {
  position: absolute;
  height: 140px;
  width: 140px;
  top: 3px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
}
.photo {
  font-size: 15vw;
  position: absolute;
  margin: auto;
  top: 80px;
  cursor: pointer;
  font-size: 100px;
  width: max-content;
  color: rgb(10, 107, 26);
  background-color: transparent;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  left: 97%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.clic {
  top: 95%;
  margin: auto;
  height: 150px;
  width: 150px;
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity 1s ease-in-out;
  transition-delay: 1s;
  opacity: 0;
}
.image{
  height: auto;
  width: 100%;
  object-fit: cover;
}


/* .back {
  font-size: 5vh;
  width: max-content;
  margin-top: 1%;
  margin-left: 5%;
  color: rgb(10, 107, 26);
  background-color: transparent;
  cursor: pointer;
  border-radius: 100%;
  position: absolute;
} */

.question {
  font-size: 6vw;
  margin: auto;
  display: flex;
  justify-content: space-around;
}

.text {
  color: #e72f2f;
  position: fixed; 
  align-items: center;
  display: flex;
  justify-content: space-around;
  width: 1300px;
  height: 130px;
  left: 50%;
  top: 50%;
  transform: translate(-650px, -390px);
  border: none;
  text-align: center;
}

.text-w {
  color: whitesmoke;
  margin-top: 3%;
  line-height: 0.95;
  vertical-align: middle;
  margin-left: 6%;
  margin-right: 6%;
}



.text-recette {
  color: #e72f2f;
  text-align: left;
  display: flex;
}

.gauche p {
  margin-bottom: -3vw;
  width: max-content;
}

.gauche {
  margin-right: 6%;
  margin-left: 6%;
}

.droite {
  line-height: 0.95;
  margin-right: 6%;
}

.droite p {
  margin-bottom: -3vw;
}

.choix-4 {
  margin-top: 5%;
}

.answer {
  font-size: 3vw;
  color: white;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}


.image_pomme {
  transform: translate(-520px, 325px);
  height: 15vw;
}
.image_patate {
  transform: translate(0, 335px);
  height: 15vw;
}
.image_courge {
  transform: translate(520px, 325px);
  height: 15vw;
}
.image_farine {
  transform: translate(-520px, 325px);
  height: 15vw;
}
.image_oeuf {
  transform: translate(0, 325px);
  height: 15vw;
}
.image_sel {
  transform: translate(520px, 325px);
  height: 15vw;
}
.image_fourchette{
  transform: translate(-390px, 325px);
  height: 15vw;
}
.image_planche {
  transform: translate(390px, 325px);
  height: 15vw;
}
.image_sauge{
  transform: translate(-390px, 325px);
  height: 15vw;
}
.image_tomate {
  transform: translate(400px, 325px);
  height: 15vw;
}


  .step-1 {
  position: fixed; 
  background-color: rgb(231, 47, 47);
  color: whitesmoke;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 260px;
  height: 120px;
  cursor: pointer;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(-130px, 0);
  border: none;
  text-align: center;
  line-height: 0.8;
  padding-top: 10px;
 }

.step-1:hover {
  background-color: rgb(10, 107, 26);
}

.pomme {
  transform: translate(-520px, 0);
}

.courge {
  transform: translate(260px, 0);
}

.farine {
  transform: translate(-520px, 0);
  background-color: rgb(10, 107, 26);
}

.sel {
  transform: translate(260px, 0);
  background-color: rgb(10, 107, 26);
}

.oeuf {
  background-color: rgb(10, 107, 26);
}

.fourchette {
  transform: translate(-390px, 0);
}

.planche {
  transform: translate(130px, 0);
  font-size: 2.5vw;
  line-height: 1;
}

.sauge {
  transform: translate(-390px, 0);
}

.tomate {
  transform: translate(130px, 0);
}


.choice { 
  background-color: rgb(10, 107, 26);
  border: none;
}

.yes {
  visibility: visible;
}

.no {
  visibility: hidden;
}

.hidden {
  display: none;
}

.grammes {
  position: fixed; 
  background-color: transparent;
  color: rgb(231, 47, 47);
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 260px;
  height: 130px;
  cursor: pointer;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(-130px, 76px);
  border: none;
  text-align: center;
  line-height: 0.8;

}

.quantité-oeuf {
  position: fixed; 
  background-color: transparent;
  color: rgb(231, 47, 47);
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 260px;
  height: 130px;
  cursor: pointer;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(-130px, 76px);
  border: none;
  text-align: center;
  line-height: 0.8;
}

.quantité-sel{
  position: fixed; 
  background-color: transparent;
  color: rgb(231, 47, 47);
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 260px;
  height: 130px;
  cursor: pointer;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(260px, 76px);
  border: none;
  text-align: center;
  line-height: 0.8;
}

.quantité-farine {
  position: fixed; 
  background-color: transparent;
  color: rgb(231, 47, 47);
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 260px;
  height: 130px;
  cursor: pointer;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(-520px, 76px);
  border: none;
  text-align: center;
  line-height: 0.8;
}


@media (max-height:850px) {

 .layer-2 {
  font-size: 16vh;
}
.layer-3 {
  font-size: 16vh;
}
.layer-5 {
  font-size: 16vh;
}
.layer-6 {
  font-size: 16vh;
}
.layer-7 {
  font-size: 16vh;
}
.layer-9 {
  font-size: 16vh;
}
.layer-10 {
  font-size: 16vh;
}
.layer-11 {
  font-size: 16vh;
}
.layer-13 {
  font-size: 16vh;
}
}