@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 {
  font-family: "coconat";
  scroll-behavior: smooth;
}

.header {
  padding: 1em 10%;
  display: flex;
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1000;
  justify-content: space-between;
  background-color: #ffdee7;
  border: 2.5px solid black;
}

.header-item {
  font-size: 1rem;
}

.texthead:hover {
  color: white;
  font-size: 1.2rem;
}


/* SECTION 1 - TOP */
.first {
  max-width: 100vw;
  height: 100vh;
  background-image: url("../img/field.png");
}

.firsttitel {
  text-decoration: none;
  font-size:  16vh;
  text-align: center;
  margin: 0;
}

/* SECTION 2 - WARNING */
.warning {
  font-size: 6vh;
  width: 100vw;
  height: 100vh;
  text-align: center;
  font-family: "coconat";
  color:  #ffdee7; 
  -webkit-text-stroke: 1px black;


    background: linear-gradient(-45deg, #ffdee7, white, #ffdee7,white);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
  }
  
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}

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

.warning {
  font-size: 20vh;
}
.bigtitel {
  font-size: 12vh;
  margin-left:  10vw;
  margin-right: 10vw;
  margin: 0;
  color: black;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  1% {
    opacity: 100%;
  }
  45% {
    opacity: 99%;
  }
  50% {
    opacity: 0;
  }
  55% {
    opacity: 99%;
  }
  100% {
    opacity: 100%;
  }
}
/* SECTION 3 - DISCOVER THE 7 */

.border-title {
  margin-top: 5vw;
  margin-left:  25vw;
  margin-right: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vh;
  color: black;
  border: 2.5px solid black;
}

.head {
  font-size: 40vh;
  z-index: 2;
}

.pres {
  font-size: 8rem;
}

p {
  font-size: 5vw;
  z-index: 2;
}


.sticky {
  position: relative;
  width: 50%;
  flex: 0 0 auto;
  font-size: 2.5rem;
  padding: 0rem 6%;
  z-index: 2;
}

.head {
  font-size: 10rem;
  color: #ffdee7;
  text-shadow: 0.75px 0 0 black, 0.75px 0.75px 0 black, 0 0.75px 0 black, -0.75px 0.75px 0 black, -0.75px 0 0 black, -0.75px -0.75px 0 black, 0 -0.75px 0 black, 0.75px -0.75px 0 black;
}

.img1{
  position: sticky;
  top: 8%;
  margin-left: 30vw;
  opacity: 80%;
  z-index: 1;
}

.img2{
  position: sticky;
  top: 12%;
  margin-left: 10vw;
  max-width: 120%;
  opacity: 80%;
  z-index: 1;
}

.img3{
  position: sticky;
  top: 16%;
  margin-left: 30vw;
  opacity: 80%;
  z-index: 1;
}

.img4{
  position: sticky;
  top: 20%;
  max-height: 50%;
  margin-left: 50vw;
  opacity: 80%;
  z-index: 1;
}

.img5{
  position: sticky;
  top: 24%;
  margin-left: 30vw;
  opacity: 80%;
  z-index: 1;
}

.img6{
  position: sticky;
  top: 28%;
  margin-left: 10vw;
  opacity: 80%;
  z-index: 1;
}

.img7{
  position: sticky;
  top: 32%;
  margin-left: 30vw;
  opacity: 80%;
  z-index: 1;
}




/* SECTION 4 - GROW YOUR OWN */


#section-grow {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #ffdee7;
}

.center-text{
  margin-top: 20w;
  margin-left:  20vw;
  margin-right: 20vw;
  text-align: center;
  font-size: 7vh;
  color: black;
  
}

.yes-button{
  font-size: 20vh;
  color: pink;
}

.yes-button:hover {
  color: white;
}

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

.aie{
position: absolute;
width: 320px;
top: 80%;
left: 5%;
overflow: hidden;
animation: aie 4s ease-in-out infinite;
}

.corrosif{
position: absolute;
width: 400px;
top: 80%;
left: 15%;
overflow: hidden;
animation: corrosif 5s ease-in-out infinite;
}

.environnement{
position: absolute;
width: 300px;
top: 50%;
right: 20%;
overflow: hidden;
animation: environnement 5s ease-in-out infinite;
}

.feu{
position: absolute;
width: 350px;
top: 80%;
right: 30%;
overflow: hidden;
animation: feu 5s ease-in-out infinite;
}
.mort{
position: absolute;
width: 300px;
top: 30%;
left: 30%;
overflow: hidden;
animation: autre 6s ease-in-out infinite;
}
.respiratoire{
position: absolute;
width: 450px;
top: 25%;
right: 5%;
overflow: hidden;
animation: mort 5s ease-in-out infinite;
}

.borage{
position: absolute;
width: 350px;
top: 1%;
left: 1%;
overflow: hidden;
animation: bora 5s ease-in-out infinite;
}

.violette{
  position: absolute;
  width: 450px;
  top: 1%;
  left: 1%;
  overflow: hidden;
  animation: corrosif 5s ease-in-out infinite;
  }

  .rose{
    position: absolute;
    width: 250px;
    top: 1%;
    left: 1%;
    overflow: hidden;
    animation: rose 5s ease-in-out infinite;
    }
  


@keyframes aie{
0%{
  transform: rotateY(0deg);
}
25%{
  top: 4%;
  left: 25%;
}
50% {
  transform: rotateY(0deg);
}
100% {
  transform: scaleY(0deg);
}
}

@keyframes corrosif{
0%{
  transform: scaleY(0deg);
}
8% {
  transform: scaleY(180deg);
}
45%{
  top: 4%;
  left: 50%;
}

100% {
  transform: scaleY(0deg);
}
}

@keyframes environnement{
0% {
  right: 5%;
}
65%{
  top: 10%;
  
}
100% {
 right: 5%;
}
}

@keyframes feu{
0%{
  transform: rotateY(0deg);
}

50% {
  transform: rotateY(0deg);
}

75%{
  top: 0%;
  right: 30%;
}

100% {
  transform: scaleY(0deg);
}
}

@keyframes mort{
  0%{
    top: 60%;
    left: 50%;
  }
  50% {
    top: 40%;
    left: 10%;
  }
  100%{
    top: 60%;
    left: 50%;
  }
}

@keyframes autre{
  0%{
    top: 4%;
    left: 25%;
  }
  50% {
    top: 40%;
    left: 15%;
  }
  100%{
    top: 4%;
    left: 25%;
  }
}



@keyframes violette{
  0%{
    top: 1%;
    left: 2%;
  }
  50% {
    top: 20%;
    left: 2%;
  }
  100%{
    top: 1%;
    left: 2%;
  }
}  

@keyframes bora{
  0% {
    right: 3%;
  }
  50%{
    top: 30%;
    
  }
  100% {
   right: 3%;
  }
  }

@keyframes rose{
  0%{
   
    left: 50%;
  }
  50% {
    left: 80%;
    top: 70%;
  }
  100%{
    left: 50%;
  }
}


/* SECTION 5 - HUNGRY MOOD*/


.recette {
  background-color: #ffdee7; 
}

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

.undertit {
  text-align: center;
  font-size: 6vh;
  color: white;
}


 .container {
  display: grid;
  width: 80%;
  height: 80%;
  margin-left: auto;
  margin-right: auto;
  grid-template-areas: "recette-1 recette-2 recette-3"
  "recette-4 recette-5 recette-6"
  "recette-7 recette-7 recette-7";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.shake:hover{
  animation: shake 0.5s;
  animation-iteration-count: 2s;
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.recette-1 {
  grid-area: recette-1;
  margin-left: auto;
  margin-right: auto;  
}
.recette-2 {
  grid-area: recette-2;
  margin-left: auto;
  margin-right: auto;
}
.recette-3 {
  grid-area: recette-3;
  margin-left: auto;
  margin-right: auto;
}
.recette-4 {
  grid-area: recette-4;
  margin-left: auto;
  margin-right: auto;
}
.recette-5 {
  grid-area: recette-5;
  margin-left: auto;
  margin-right: auto;
}
.recette-6 {
  grid-area: recette-6;
  margin-left: auto;
  margin-right: auto;
}
.recette-7 {
  grid-area: recette-7;
  margin-left: auto;
  margin-right: auto;
}
h5{
  font-size: 8vh;
  text-align: center;
  color: black;
}



/*  CSS Code  */

@media all and (max-width: 1024px){
	img {
		
		max-width: 100%; 
	}
	.head {
    font-size: 5rem;
	}
	.img1 {
		position: relative;
		top: 0;
		margin-left: 0;
		opacity: 80%;
		z-index: 1;
	}
	.img3 {
		position: relative;
		top: 0;
		margin-left: 0;
		opacity: 80%;
		z-index: 1;
	}
	.sticky { 
		width: 90%; 
		padding: 30px 4%;
		z-index: 2;  
		font-size: 18px;
	}
	.firsttitel {
		font-size: 36px; 
	}
	.bigtitel {
		font-size: 30px;
	}
	.img2 {
		position: sticky;
		top: 0;
		margin-left: 0;
		max-width: 100%; 
		z-index: 1;
	}
	.scrollsticky{
		max-width: 100%; 
	}
	.first, #s2{ 
		display: flex;
		vertical-align: middle;
		align-items: center; 
		
	}
	.bigtitel, .firsttitel{
		padding: 10px; 
	}
	.img1, .img3{
		display: none; 
	}
	body > br {
		display: none; 
	}
	.picto{
		position: relative; 
	}
	#section-grow { 
		min-height: 600px;
	}
	#s5 img {
		height: initial; 
	}
	.header { 
		flex-wrap: wrap;
	}
}

@media all and (max-width: 550px){ 
	.header {
		padding: 10px 5%;
	}
	.header .header-item{
		width: 50%; 
	}
}
@media all and (max-width: 550px){ 
	.head {
		font-size: 40px;
	}
	.center-text { 
		margin-left: 20px;
		margin-right: 20px; 
	}
	#s4 h2{ 
		font-size: 35px;
	}
	.picto img{
		max-width: 50%; 
	}
	#section-grow {
		min-height: 500px;
		height: initial;
	}
	.recette-titel { 
		margin-left: 20px;
		margin-right: 20px; 
		font-size: 20px; 
	}
}