@charset "UTF-8";

@font-face {
    font-weight: 900;
    font-style: normal;
    font-family: "coconat";
  
    src: url("../fonts/desktop/Coconat-Regular.otf") format("otf"),
        url("../fonts/web/Coconat-Regular.woff2") format("woff2"),
        url("../fonts/web/Coconat-Regular.woff") format("woff");
  }

* {
	margin: 0;
	padding: 0;
}


html, body, section {
  
    position: relative;
    margin: 0;
    cursor: default;
    font-family: "coconat";
    scroll-behavior: initial;
    background-color: #ffdee7;
  
  
  }
  html, body {
      overflow-x: hidden; 
  }


* {
    box-sizing: border-box;
  }
  
  section>div {
    border:1px solid transparent
  }
  
  section div  {
    padding:1px;
  }
  .header {
    padding: 1em 10%;
    text-align: center;
    top: 0;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1000;
    background-color: #ffdee7;
    border: 2.5px solid black;
  }
  .texthead:hover {
    color: white;
    font-size: 1.2rem;
  }
  
  /* SECTION */


.h2 {
    font-family: "coconat";
    margin-left: auto;
    margin-top: auto;
  }

.p{
    font-family: "coconat";
    margin-left: auto;
    margin-top: auto;
  }

.h1 {
      text-align: center;
      font-family: "coconat";
  }
  
.flowername {
    font-size: 7vh;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: "coconat";
}

.titel {
    margin-left:  10vw;
    margin-right: 10vw;
    color:  white; 
    -webkit-text-stroke: 1px black;
}

.second{
    font-size: 7vh;
    color: #ffdee7;
}

.text {
    margin-left:  15vw;
    margin-right: 15vw;
    color: black;
    font-size: 2vh;
    justify-items: center;
  align-items: center;
}

.gif {
    max-width: 600px;
    margin-left:  10vw;
    margin-right: 10vw;
    
}


  .recette-titel {
      margin-top: 2vw;
      margin-left:  20vw;
      margin-right: 20vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 8vh;
      color: black;
      background-color: white;
      border: 2.5px solid black;
    }

    .container {
      display: grid;
      width: 60%;
      height: 60%;
      margin-left:  20vw;
      margin-right: 20vw;
      grid-template-areas: 
      "number-1 text-1"
      "number-2 text-2"
      "number-3 text-3"
      "number-4 text-4"
      "number-5 text-5";
      grid-template-columns: 120px 4fr;
      grid-template-rows: 1fr 1fr 2fr 2fr 2fr;
    }

    .container > div {
      border-left: 2.5px solid black;
      border-right: 2.5px solid black;
      border-top: 2.5px solid black;
      border-bottom: 2.5px solid black;
      background-color: white;
      margin:0 -2.5px -2.5px 0;
    }
    
    .number-1 {
      display: flex;
      grid-area: number-1;
      justify-content: center;
      align-items: center;
    }
    .text-1 {
      grid-area: text-1;
      font-size: 4vh;
      display: flex;
      justify-content: center;
      align-items: center;
s    
    }
    .number-2 {
      display: flex;
      grid-area: number-2;
      justify-content: center;
      align-items: center;
    }
    .text-2 {
      grid-area: text-2;
      font-size: 4vh;
      display: flex;
      justify-content: center;
      align-items: center;

    }
    .number-3 {
      display: flex;
      grid-area: number-3;
      justify-content: center;
      align-items: center;
    }
    .text-3 {
      grid-area: text-3;
      font-size: 4vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
 





.button-print {
  font-size: 4vh;
}

.back-button {
  background-color:  #ffdee7;
}

.style {
  margin-left:  10vw;
  margin-right: 10vw;
  color:  white; 
  border: none;
}

.button:hover {
  color: black;
  text-decoration: none;
}

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


  .aie{
    position: absolute;
    width: 300px;
    animation: aie 4s infinite;
    z-index: 10000;
    }
    
    .corrosif{
    position: absolute;
    width: 300px;
    overflow: hidden;
    animation: corrosif 5s ease-in-out infinite;
    z-index: 10000;
    }
    
    .environnement{
    position: absolute;
    width: 300px;
    overflow: hidden;
    animation: environnement 5s ease-in-out infinite;
    z-index: 10000;
    }
    
    .feu{
    position: absolute;
    width: 300px;
    overflow: hidden;
    animation: feu 5s ease-in-out infinite;
    z-index: 10000;
    }
    .mort{
    position: absolute;
    width: 500px;
    overflow: hidden;
    animation: mort 5s ease-in-out infinite;
    z-index: 10000;
    }

    
    
    @keyframes aie{
      0%{
        top: 4%;
        left: 25%;
      }
      50% {
        top: 40%;
        left: 15%;
      }
      100%{
        top: 4%;
        left: 25%;
      }
    }
    
    
    @keyframes corrosif{
      0%{
        top: 5%;
        right: 5%;
      }
      50% {
        top: 70%;
        right: 5%;
      }
      100%{
        top: 5%;
        right: 5%;
      }
    }
    
      
    @keyframes environnement{
      0%{
        top: 1%;
        left: 2%;
      }
      50% {
        top: 20%;
        left: 2%;
      }
      100%{
        top: 1%;
        left: 2%;
      }
    }
    
  
    @keyframes feu{
      0%{
        top: 20%;
        right: 25%;
      }
      50% {
        top: 20%;
        right: 3%;
      }
      100%{
        top: 20%;
        right: 25%;
      }
    }
  
    @keyframes mort{
      0%{
        top: 80%;  
        left: 10%;
      }
      50% {
        top: 80%;
        left: 30%;
      }
      100%{
        top: 80%;
        left: 10%;
      }
    }
    
    
    #print-button {
      display: none;
    }