/* defaults */
* {
    box-sizing: border-box;
  }

@font-face {
    font-style: normal;
    font-family: Fjalla;
    src:url("../fonts/fjalla-one-v8-latin-regular.eot ") format("eot"), 
        url("../fonts/fjalla-one-v8-latin-regular.woff") format("woff"), 
        url("../fonts/fjalla-one-v8-latin-regular.woff2") format("woff2");
}

@font-face {
  font-style: normal;
  font-family: Lato;
  src:url("../fonts/lato-v17-latin-regular.eot ") format("eot"), 
      url("../fonts/lato-v17-latin-regular.woff") format("woff"), 
      url("../fonts/lato-v17-latin-regular.woff2") format("woff2");
}

  html,
  body {
    margin: 0;
    padding: 0;
  }
  
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
  }

  a {
    text-decoration: none;
    color: black;
  }


  /*Title*/

  .Title {
    position: relative;
    width: 100vw;
    height: 35vw;
    background-color: white;
    border-top: 10px solid lightgray;
    padding-right: 2vw;
    font-size: 29vw;
    color: #000;
    text-align: left;
    font-family: Fjalla;
    animation: move 5s;
    animation-fill-mode: forwards;
}

@keyframes move {
  0% { 
    text-align: left;
  }
  100% { 
    background: #F6F6F6;
    height: 6.3vw;
    color: orangered;
    font-size: 5vw;
    text-align: left;
    padding-left: 2vw;
   }
}

.Title1 {
  position: relative;
  width: 100vw;
  height: 3vw;
  background-color: white;
  border-top: 10px solid lightgray;
  font-size: 2vw;
  color: #000;
  text-align: left;
  padding-left: 2vw;
  font-family: Fjalla;
}
.Title1:hover
{
  background: white;
  height: 25vw;
  color: orangered;
  font-size: 20vw;
}
.base {
border-top: 10px solid lightgray;
}

.topcoat {
border-top: 10px solid orangered;
}

/*TO DO LIST*/ 

ul {
  margin: 0;
  padding: 0;
}

.root-list {
  display: none;
}

/* TO DO LIST */  
.base-list li {
  cursor: pointer;
  position: relative;
  padding-left: 2vw;
  font-size: 2vw;
  background: white;
  color: black;
  font-family: Lato;
  transition: 0.2s;
  height: 3.8vw;
  border-bottom: 10px solid orangered;
  padding-top: 0.2vw;
}

.base-list li:nth-child(odd) {
  background: #F6F6F6;
}

.base-list li:hover {
  background: orangered;
  font-size: 6vw;
  height: 8vw;
  padding-bottom: 8vw;
}

.base-list li.checked {
  background: white;
  color: black;
  text-decoration: line-through;
}

/*RECETTE*/
.listing {
  padding-left: 2vw;
  font-size: 2vw;
  background: white;
  color: black;
  font-family: Lato;
  height: 3.8vw;
  padding-top: 0.5vw;
}

.listing:hover {
  background: lightgreen;
  font-size: 6vw;
  height: 9vw;
  padding-left: 2vw;
}

.listing1 {
  padding-left: 2vw;
  font-size: 2vw;
  background: white;
  color: black;
  font-family: Lato;
  height: 3.8vw;
  padding-top: 0.5vw;
}

.listing1:hover {
  background: lightgreen;
  font-size: 6vw;
  height: 16vw;
  padding-left: 2vw;
}

.listing2 {
  padding-left: 2vw;
  font-size: 2vw;
  background: white;
  color: black;
  font-family: Lato;
  height: 3.8vw;
  padding-top: 0.5vw;
}

.listing2:hover {
  background: lightgreen;
  font-size: 6vw;
  height: 22.5vw;
  padding-left: 2vw;
}

/*IMAGES*/

.Showroom {
  position: relative;
  height: auto;
  width: 100vw;
}

.Images {
  position: relative;
  height: auto;
  width: 100vw;
}

.ImageLasagne {
  position: relative;
  height: auto;
  width: 100vw;
}

.texte3 {
  position: relative;
  width: 100vw;
  height: 8vw;
  background-color: white;
  flex: 1 1 auto;
  font-family: Fjalla;
  color: orangered;
  overflow: hidden;
  padding-top: 1.5vw;
}
.texte3 .flow3{
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  align-content: center;
  float: left;
  font-size: 5vw;
  text-transform: uppercase;
  white-space: nowrap;
  animation: flowsss 6s linear infinite;
}
@keyframes flowsss
{
  0%
  {
      left: 0%;
  }
  100%
  {
      left: -100%;
  }
}

/* 
#ustensiles, #toDoList, #ingredients, #recette, #ImagesA, #ListeAbutton, #ImagesB, #ListeBbutton, #ImagesC, #ListeCbutton, 
#ImagesD, #ListeDbutton, #ImagesE, #ListeEbutton, #ImagesF, #ListeFbutton, #ImagesG, #ListeGbutton, #ImagesH, #ListeHbutton, 
#ImagesI, #ListeIbutton, #ImagesK, #ListeKbutton, #ImagesL, #ListeLbutton, #ImagesM, #ListeMbutton, #ImagesN, #ListeNbutton,
#ImagesO, #ListeObutton{
  
} */


.listeCachee{
  display: none;
}

/*COUCHES*/

.couche {
  border: 20px solid limegreen;
}

.couche0 {
  border: 10px solid lightgreen;
}

.couche2 {
  border: 70px solid orangered;
}

.couche3 {
  border: 20px solid tomato;
}

.couche4 {
  border: 40px solid red;
}

.couchelast {
  border: 39px solid brown;
}

/*CHECK COLOR BOX*/
.checkedIngredient {
  background-color: lightgreen !important;
}

.checkedUstensile {
  background-color: #ff9c9a !important;
}

.recette {
  background-color: lightgreen !important;
}

/*RESPONSIVE*/

@media only screen and (min-width: 500px) {
  .couche5 {
    border-top: 220px solid brown;
  }
  .base {
    border-top: 3px solid lightgray;
    }
    .topcoat {
      border-top: 3px solid orangered;
    }

  .Title {
      border-top: 3px solid lightgray;
  }
  .Title1 {
    border-top: 3px solid lightgray;
    padding-top: 0.05vw;
  }
  .Title1:hover
  {
  padding-top: 0.9vw;
  padding-left: 0.5vw;
  }
  .base-list li {
    border-bottom: 3px solid orangered;
  }
  .couchelast {
    border: 135px solid brown;
  }
}

@media only screen and (min-width: 700px) {
  .Title {
    border-top: 5px solid lightgray;
}
.Title1 {
  border-top: 5px solid lightgray;
  padding-top: 0.05vw;
}
.base-list li {
  border-bottom: 5px solid orangered;
}
.base {
  border-top: 5px solid lightgray;
  }
  .topcoat {
    border-top: 5px solid orangered;
  }
  .Images {
    height: 4px;
  }
  .Images {
    height: auto;
    width: 60vw;
  }


@media only screen and (min-width: 800px) {
  .Title {
    border-top: 10px solid lightgray;
}
.Title1 {
  border-top: 10px solid lightgray;
  margin: 2px;
}
.base-list li {
  border-bottom: 10px solid orangered;
}
.base {
  border-top: 10px solid lightgray;
  }
  .topcoat {
    border-top: 10px solid orangered;
  }

  .Images {
    height: auto;
    width: 100vw;
  }

  .Images:hover {
    height: auto;
  }
}