@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  {
    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: black;
}

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

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


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

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



*:before, *:after {
  box-sizing: border-box;
}


    .container {
      display: grid;
      margin-left: 10vw;
      width: 80%;
      height: 60%;
      font-size: 2vh;
   
      text-align: center;
      grid-template-areas: "january february march april mai june july august september october november december"
      "rangee1 range1_2 rangee1_3 rangee1_4 rangee1_5 rangee1_6 rangee1_7 rangee1_8 rangee1_9 rangee1_10 rangee1_11 rangee1_12"
      "rangee2 rangee2_2 rangee2_3 rangee2_4 rangee2_5 rangee2_6 rangee2_7 rangee2_8 rangee2_9 rangee2_10 rangee2_11 rangee2_12"
      "rangee3 rangee3_2 rangee3_3 rangee3_4 rangee3_5 rangee3_6 rangee3_7 rangee3_8 rangee3_9 rangee3_10 rangee3_11 rangee3_12"
      "rangee4 rangee4_2 rangee4_3 rangee4_4 rangee4_5 rangee4_6 rangee4_7 rangee4_8 rangee4_9 rangee4_10 rangee4_11 rangee4_12"
      "rangee5 rangee5_2 rangee5_3 rangee5_4 rangee5_5 rangee5_6 rangee5_7 rangee5_8 rangee5_9 rangee5_10 rangee5_11 rangee5_12"
      "rangee6 rangee6_2 rangee6_3 rangee6_4 rangee6_5 rangee6_6 rangee6_7 rangee6_8 rangee6_9 rangee6_10 rangee6_11 rangee6_12"
      "rangee7 rangee7_2 rangee7_3 rangee7_4 rangee7_5 rangee7_6 rangee7_7 rangee7_8 rangee7_9 rangee7_10 rangee7_11 rangee7_12";
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .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;
    }

    .sizegrid {
      max-height: 60px;
    }
    
    .january {
      grid-area: january;
    }
    .february {
      grid-area: february;
    }
    .march {
      grid-area: march;
    }
    .april {
      grid-area: april;
    }
    .mai {
      grid-area: mai;
    }
    .june {
      grid-area: june;
    }
    .july {
      grid-area: july;
    }
    .august {
      grid-area: august;
    }
    .september {
      grid-area: september;
    }
    .october {
      grid-area: october;
    }
    .november {
      grid-area: november;
    }
    .december {
      grid-area: december;
    }
    .rangee1 {
      grid-area: rangee1;
    }
    .range1_2 {
      grid-area: range1_2;
    }
    .rangee1_3 {
      grid-area: rangee1_3;
    }
    .rangee1_4 {
      grid-area: rangee1_4;
    }
    .rangee1_5 {
      grid-area: rangee1_5;
    }
    .rangee1_6 {
      grid-area: rangee1_6;
    }
    .rangee1_7 {
      grid-area: rangee1_7;
    }
    .rangee1_8 {
      grid-area: rangee1_8;
    }
    .rangee1_9 {
      grid-area: rangee1_9;
    }
    .rangee1_10 {
      grid-area: rangee1_10;
    }
    .rangee1_11 {
      grid-area: rangee1_11;
    }
    .rangee1_12 {
      grid-area: rangee1_12;
    }
    .rangee2 {
      grid-area: rangee2;
    }
    .rangee2_2 {
      grid-area: rangee2_2;
    }
    .rangee2_3 {
      grid-area: rangee2_3;
    }
    .rangee2_4 {
      grid-area: rangee2_4;
    }
    .rangee2_5 {
      grid-area: rangee2_5;
    }
    .rangee2_6 {
      grid-area: rangee2_6;
    }
    .rangee2_7 {
      grid-area: rangee2_7;
    }
    .rangee2_8 {
      grid-area: rangee2_8;
    }
    .rangee2_9 {
      grid-area: rangee2_9;
    }
    .rangee2_10 {
      grid-area: rangee2_10;
    }
    .rangee2_11 {
      grid-area: rangee2_11;
    }
    .rangee2_12 {
      grid-area: rangee2_12;
    }
    .rangee3 {
      grid-area: rangee3;
    }
    .rangee3_2 {
      grid-area: rangee3_2;
    }
    .rangee3_3 {
      grid-area: rangee3_3;
    }
    .rangee3_4 {
      grid-area: rangee3_4;
    }
    .rangee3_5 {
      grid-area: rangee3_5;
    }
    .rangee3_6 {
      grid-area: rangee3_6;
    }
    .rangee3_7 {
      grid-area: rangee3_7;
    }
    .rangee3_8 {
      grid-area: rangee3_8;
    }
    .rangee3_9 {
      grid-area: rangee3_9;
    }
    .rangee3_10 {
      grid-area: rangee3_10;
    }
    .rangee3_11 {
      grid-area: rangee3_11;
    }
    .rangee3_12 {
      grid-area: rangee3_12;
    }
    .rangee4 {
      grid-area: rangee4;
    }
    .rangee4_2 {
      grid-area: rangee4_2;
    }
    .rangee4_3 {
      grid-area: rangee4_3;
    }
    .rangee4_4 {
      grid-area: rangee4_4;
    }
    .rangee4_5 {
      grid-area: rangee4_5;
    }
    .rangee4_6 {
      grid-area: rangee4_6;
    }
    .rangee4_7 {
      grid-area: rangee4_7;
    }
    .rangee4_8 {
      grid-area: rangee4_8;
    }
    .rangee4_9 {
      grid-area: rangee4_9;
    }
    .rangee4_10 {
      grid-area: rangee4_10;
    }
    .rangee4_11 {
      grid-area: rangee4_11;
    }
    .rangee4_12 {
      grid-area: rangee4_12;
    }
    .rangee5 {
      grid-area: rangee5;
    }
    .rangee5_2 {
      grid-area: rangee5_2;
    }
    .rangee5_3 {
      grid-area: rangee5_3;
    }
    .rangee5_4 {
      grid-area: rangee5_4;
    }
    .rangee5_5 {
      grid-area: rangee5_5;
    }
    .rangee5_6 {
      grid-area: rangee5_6;
    }
    .rangee5_7 {
      grid-area: rangee5_7;
    }
    .rangee5_8 {
      grid-area: rangee5_8;
    }
    .rangee5_9 {
      grid-area: rangee5_9;
    }
    .rangee5_10 {
      grid-area: rangee5_10;
    }
    .rangee5_11 {
      grid-area: rangee5_11;
    }
    .rangee5_12 {
      grid-area: rangee5_12;
    }
    .rangee6 {
      grid-area: rangee6;
    }
    .rangee6_2 {
      grid-area: rangee6_2;
    }
    .rangee6_3 {
      grid-area: rangee6_3;
    }
    .rangee6_4 {
      grid-area: rangee6_4;
    }
    .rangee6_5 {
      grid-area: rangee6_5;
    }
    .rangee6_6 {
      grid-area: rangee6_6;
    }
    .rangee6_7 {
      grid-area: rangee6_7;
    }
    .rangee6_8 {
      grid-area: rangee6_8;
    }
    .rangee6_9 {
      grid-area: rangee6_9;
    }
    .rangee6_10 {
      grid-area: rangee6_10;
    }
    .rangee6_11 {
      grid-area: rangee6_11;
    }
    .rangee6_12 {
      grid-area: rangee6_12;
    }
    .rangee7 {
      grid-area: rangee7;
    }
    .rangee7_2 {
      grid-area: rangee7_2;
    }
    .rangee7_3 {
      grid-area: rangee7_3;
    }
    .rangee7_4 {
      grid-area: rangee7_4;
    }
    .rangee7_5 {
      grid-area: rangee7_5;
    }
    .rangee7_6 {
      grid-area: rangee7_6;
    }
    .rangee7_7 {
      grid-area: rangee7_7;
    }
    .rangee7_8 {
      grid-area: rangee7_8;
    }
    .rangee7_9 {
      grid-area: rangee7_9;
    }
    .rangee7_10 {
      grid-area: rangee7_10;
    }
    .rangee7_11 {
      grid-area: rangee7_11;
    }
    .rangee7_12 {
      grid-area: rangee7_12;
    }



    .lien {
      max-height: 300px;
    }