/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
} */

/* @font-face {
  margin: 0;
  padding: 0;
  font-family: "Daubenton";
  src: url(Daubenton.ttf);
} */

html,
body {
  margin: 0;
}

body {
  /* background: #0a2a43; */

  background: rgb(123, 146, 183);
  min-height: 1500px;
}

section {
  position: relative;
  width: 100vw;
  /* height: calc(100vw / var(--ratio)); */
  height: 100vh;
  overflow: hidden;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  section {
    height: 90vw;
    /* display: none !important; */
  }
  .sticky {
    display: none;
  }

  #arbres {
    width: 200%;
    height: auto;
  }
  #text {
    font-size: 3rem;
  }

  p {
    font-size: 1rem;
    position: absolute;
    z-index: 200;
  }

  h2 {
    font-size: 1rem;
    color: #ffc165;
  }

  #p1 {
    font-size: 1rem;
    position: absolute;
    z-index: 10;
  }
  #h4 {
    display: none;
  }
}

@media (max-width: 900px) {
  #arbres {
    width: 200%;
    height: auto;
  }
}

section:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  /* background: linear-gradient(to top, #0a2a43, transparent); */
  background: linear-gradient(to top, rgb(123, 146, 183), transparent);
  z-index: 5;
}
section:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: #0a2a43; */
  background: rgb(123, 146, 183);
  z-index: 5;
  mix-blend-mode: color;
}
section img {
  position: absolute;
  top: 0;
  /* left: 0; */
  width: 100%;
  /* height: 100%; */
  /* object-fit: cover; */
  object-fit: contain;
  pointer-events: none;
}

/* #recette {
  display: flex;
} */

#h1 {
  /* display: flex; */

  justify-content: center;
  align-items: center;
}

h1 span {
  display: inline-block;
  font-size: 20px;
  margin-top: 18px;
  vertical-align: top;
  letter-spacing: 0;
}

.options {
  /* border-radius: 1px; */

  /* background-color: rgb(255, 255, 255); */
  /* opacity: 0.5; */

  margin-top: 1rem;
  margin-left: 1rem;
  height: auto;
  z-index: 2;
  text-transform: uppercase;
}
.options a {
  display: table-caption;
  text-decoration: none;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border: 1px solid rgb(255, 255, 255);
  top: 3%;
  left: 3%;
}
.options-text {
  font-family: "GRECOromanLubedWrestling";
  /* font-size: medium; */

  text-transform: uppercase;
  /* letter-spacing: 0.1rem; */
  margin: 1rem 0;
}
.options-text--margin {
  margin-top: 1rem;
}
.options-title {
  font-family: "GRECOromanLubedWrestling";
  font-size: 24px;
  padding: 1rem 0;
  color: rgb(42, 38, 97);
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  top: 3%;
  left: 3%;
}

.active {
  color: #ffffff;
}
.option:hover {
  /* color: #fcd6ff; */
  color: #ffc165;
}
/* html {
  scroll-behavior: smooth;
} */

#icebal {
  display: flex;
  /* display: block;
  margin-left: 5%;
  margin-right: 30%; */
  text-align: center;
  width: 50%;
  margin-top: 3%;
  margin-left: 25%;
  margin-bottom: 3%;
}
#sorbetcone {
  width: 70%;
  height: auto;
  /* z-index: 8; */
}

#cone {
  width: 50%;
  height: auto;
}

#boule2 {
  width: 50%;
  height: auto;
}

#boule1 {
  width: 50%;
  height: auto;
}

#cerise {
  width: 50%;
  height: auto;
}

#debut {
  background-color: #abc227;
  z-index: 7;
}

#text {
  /* font-family: "Daubenton"; */
  font-family: "GRECOromanLubedWrestling";
  margin-top: 10%;
  margin-left: 20%;
  position: absolute;
  /* color: #fcd6ff; */
  color: #ffc165;
  /* color: #bbe4ff; */
  font-size: 6rem;
  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
  z-index: 7;
}

#dessus {
  font-family: "GRECOromanLubedWrestling";

  color: white;
  font-size: 1.5rem;
  width: 50%;
  text-align: justify;
  /* border: 1px solid white; */
  padding: 1em;
  text-align: left;
  z-index: 300;
  margin-top: 3%;
  margin-left: 20%;
  position: relative;

  /* display: flex; */

  z-index: 800;
}

#sorbetdessin {
  z-index: 6;
  width: 40%;
  margin-top: 10%;
  margin-left: 30%;
  margin-bottom: 3%;
}

#mauve {
  z-index: 6;
  width: 20%;
  margin-top: 10%;
  margin-left: 60%;
  margin-bottom: 3%;
}

#peche {
  z-index: 6;
  width: 28%;
  margin-top: 20%;
  margin-left: 60%;
  /* margin-bottom: 3%; */
}

#blanc {
  z-index: 2;
  width: 25%;
  margin-top: 20%;
  margin-left: 70%;
  margin-bottom: 3%;
}

#petit {
  z-index: 7;
  width: 15%;
  margin-top: 30%;
  margin-left: 10%;
  margin-bottom: 3%;
}

#icy {
  z-index: 5;
  width: 60%;
  margin-top: 1%;
  margin-left: 26%;
  margin-bottom: 10%;
}

#icy2 {
  z-index: 3;
  width: 50%;
  margin-top: 7%;
  margin-left: 15%;
  margin-bottom: 3%;
}

#rg {
  width: 20%;
  height: auto;
  margin-top: 31%;
  margin-left: 20%;
  margin-bottom: 3%;
}

#nauge1 {
  z-index: 3;
}

#nauge2 {
  z-index: 1;
}

#cassis {
  width: 50%;
  height: auto;
  margin-top: 20%;
  margin-left: 20%;
  margin-bottom: 3%;
  z-index: 4;
}

#groseilles {
  width: 72%;
  margin-left: 10%;
  height: auto;
  z-index: 5;
}

#carte {
  width: 100%;
  height: auto;
  z-index: 2;
  /* display: flex;
  text-align: center; */
}

#fond {
  width: 100%;
  height: auto;
  z-index: 2;
  /* display: flex;
  text-align: center; */
}

#cameldos {
  width: 25%;
  height: auto;
  margin-top: 27%;
  margin-left: 30%;
  margin-bottom: 3%;
  z-index: 5;
}

#camelmaster {
  width: 20%;
  height: auto;
  margin-top: 31%;
  margin-left: 77%;
  margin-bottom: 3%;
  z-index: 5;
}

#camelsol {
  width: 20%;
  height: auto;
  margin-top: 31%;
  margin-left: 10%;
  margin-bottom: 3%;
  z-index: 5;
}

#honey {
  width: 20%;
  height: auto;
  margin-top: 32%;
  margin-right: 10%;
  margin-left: 10%;
  margin-bottom: 3%;
  z-index: 5;
}

#jute2 {
  width: 40%;
  height: auto;
  margin-top: 27%;
  margin-left: 40%;
  margin-bottom: 3%;
  z-index: 5;
}

#jute4 {
  width: 40%;
  height: auto;
  margin-top: 10%;
  margin-left: 50%;
  margin-bottom: 3%;
  z-index: 4;
}

#h2 {
  margin-top: 7%;
  margin-left: 20%;
  font-family: "GRECOromanLubedWrestling";
  position: relative;
  color: #ffffff;
  font-size: 2em;
  display: flex;
  z-index: 800;
  text-decoration: none;
  position: absolute;
}

#h2:hover {
  /* color: #fcd6ff; */
  color: #ffc165;
}

#h2-origine {
  /* margin-top: 5%;
  margin-left: 20%; */
  font-family: "GRECOromanLubedWrestling";
  /* position: relative; */
  /* border: 1px solid white; */

  color: #ffffff;
  font-size: 3em;
  /* display: flex;
  z-index: 800; */
}

#h3 {
  /* font-family: "Daubenton"; */
  font-family: "GRECOromanLubedWrestling";
  font-size: 3em;
  margin-top: 10%;
  margin-left: 20%;
  z-index: 300;
  color: rgb(255, 255, 255);
  line-height: 1em;
  position: relative;
}

#h3:hover {
  /* color: #fcd6ff; */
  color: #ffc165;
}

#h4 {
  /* font-family: "Daubenton"; */
  font-family: "GRECOromanLubedWrestling";
  font-size: 7rem;
  margin-top: 10%;
  margin-left: 10%;

  position: absolute;
  z-index: 300;
  color: rgb(255, 255, 255);
  line-height: 1rem;
}

/* p {
  font-family: "GRECOromanLubedWrestling";

  color: white;
  font-size: 1.5rem;
  width: 50%;
  text-align: justify;
  border: 1px solid white;
  padding: 1em;
  text-align: left;
  z-index: 300;
  margin-top: 10%;
  margin-left: 20%;
  
} */
/* 
#p1 {
  font-family: "GRECOromanLubedWrestling";
  top: 0;
  position: absolute;

  color: white;
  font-size: 1.5rem;
  width: 50%;
  text-align: justify;

  text-align: left;
  z-index: 20;
  
  margin-left: 20%;
} */

#p2 {
  /* font-family: "GRECOromanLubedWrestling"; */
  /* color: white; */
  font-size: 1.5em;
  /* width: 50%;
  text-align: justify; */
  /* border: 1px solid white; */
  /* padding: 1em;
  text-align: left; */
  z-index: 2;
  position: absolute;
  /* top: 0;
  margin-top: 10%;
  margin-left: 20%; */
}

#p3 {
  font-family: "GRECOromanLubedWrestling";

  color: white;
  font-size: 1.5em;
  width: 20%;
  text-align: justify;
  border: 1px solid white;
  padding: 1em;
  text-align: left;
  z-index: 2;
  margin-top: 5%;
  position: relative;
  margin-left: 5%;
}

#p-milieu {
  font-family: "GRECOromanLubedWrestling";

  color: white;
  font-size: 1.5em;
  width: 35%;
  text-align: justify;
  border: 1px solid white;
  padding: 1em;
  text-align: left;
  z-index: 2;
  margin-top: 12%;
  position: relative;
  margin-left: 10%;
}

#fleur1 {
  width: auto;
  height: 100%;
  /* margin-top: 27%;
  margin-left: 40%;
  margin-bottom: 3%; */
  z-index: 4;
}

#fleur2 {
  /* width: 100%;
  height: auto; */
  width: auto;
  height: 100%;
  /* margin-top: 27%;
  margin-left: 40%;
  margin-bottom: 3%; */
  z-index: 4;
  position: relative;
}

#catherine {
  width: 20%;
  height: auto;
  margin-top: 4%;
  margin-left: 50%;
  margin-bottom: 3%;
  z-index: 5;
  position: relative;
}

#patissier2 {
  width: 40%;
  height: auto;
  margin-top: 16%;
  margin-left: -52%;
  margin-bottom: 3%;
  z-index: 5;
}

#patissier1 {
  width: 40%;
  height: auto;
  margin-top: 37%;
  margin-left: -35%;

  margin-bottom: 0%;
  z-index: 5;
}

#tapis {
  width: 90%;
  height: auto;
  margin-top: 3%;
  margin-left: 3%;

  z-index: 5;
}

#soleil {
  width: 70%;
  height: auto;
  margin-top: -12%;
  z-index: 2;
  opacity: 0.8;
  position: relative;
}

#bateau1 {
  width: 13%;
  height: auto;
  margin-top: 15%;
  margin-left: 16%;

  z-index: 4;
}

#bateau2 {
  width: 12%;
  height: auto;
  margin-top: 20%;

  z-index: 4;
}

#bateau3 {
  width: 8%;
  height: auto;
  margin-top: 23%;
  margin-left: 0%;

  z-index: 4;
}

#milky {
  width: 100%;
  height: auto;
  margin-top: 2%;
  /* margin-left: 15%; */
  opacity: 0.5;
  z-index: 3;
}

#tour-eiffel {
  width: 22%;
  height: auto;
  margin-top: 10%;
  margin-left: 24%;
  opacity: 0.7;
  z-index: 2;
}

#menthe {
  width: 10%;
  height: auto;
  margin-top: 8%;
  margin-left: 10%;
  margin-right: 10%;
  z-index: 1;
}

#jonquille {
  width: 27%;
  height: auto;
  margin-top: 20%;
  margin-left: 40%;
  z-index: 2;
}

#girofle {
  width: 6%;
  height: auto;
  margin-top: 45%;
  margin-left: 55%;
  z-index: 4;
}

#bergamotte {
  width: 32%;
  height: auto;
  /* margin-top: 23%;
  margin-left: 55%; */
  margin-top: 12%;
  margin-left: 55%;
  z-index: 2;
}

#pistache {
  width: 12%;
  height: auto;
  margin-top: 42%;
  margin-left: 60%;
  z-index: 4;
}

#raisin {
  width: 15%;
  height: auto;
  margin-top: 40%;
  /* margin-left: 27%; */
  z-index: 3;
}

#dessin {
  width: 15%;
  height: auto;
  margin-top: 29%;
  margin-left: 40%;
  z-index: 1;
}

#procope {
  width: 60%;
  height: auto;
  margin-bottom: 3%;
  margin-left: 22%;

  z-index: 2;
}

#cadre {
  font-family: "GRECOromanLubedWrestling";

  color: white;
  font-size: 1.5rem;
  width: 50%;
  text-align: justify;
  /* border: 1px solid white;
  padding: 0.5em, 0.5em, 1em, 1em; */
  text-align: left;
  z-index: 300;
  margin-top: 10%;
  margin-left: 20%;
  position: absolute;
}

#cadre2 {
  font-family: "GRECOromanLubedWrestling";

  color: white;
  font-size: 1.5rem;
  width: 50%;
  text-align: justify;
  /* border: 1px solid white;
  padding: 0.5em, 0.5em, 1em, 1em; */
  text-align: left;
  z-index: 300;
  margin-top: 16%;
  margin-left: 20%;
  position: absolute;
}

/*----------------------------------
  Small devices: iPhone 6+ and below
------------------------------------*/

/* @media (max-width: 767px) {
  .sticky {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
} */