:root {
  --grid-cols: 1;
  --grid-rows: 1;
  --margin: 4vw;
}

@font-face {
  font-family: myFont;
  src: url(../font/Ekstra/GTFEkstraTRIAL-Bold.otf);
}

@font-face {
  font-family: myFontLight;
  src: url(../font/Ekstra/GTFEkstraTRIAL-Medium.otf);
}

body{
    overflow-x: hidden;
    background-color: white;
    width: 100vw;
    height: 100vh;
    transition: 0.5s ease;
    font-family: myFont;
    font-weight: lighter;
    color: rgb(0, 0, 255);
    animation: show 2s ease;
    margin: 0;
}

@keyframes hue{
  0%{filter: hue-rotate(0deg);}
  100%{ filter: hue-rotate(360deg);}
}

@keyframes show{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

.title{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  pointer-events: none;
}

.title02{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: ease 0.5s;
}

.title02visible{
  opacity: 1;
  transition: ease 0.5s;
  z-index: 9999;
}

.title_svg{
  width: 90%;
}



h1{
  text-align: center;
  font-size: 27vw;
  color: rgb(0, 0, 255);
  letter-spacing: -2vw;
}

.invert{
  transform: rotateX(180deg);
}

.space01{
  width: 10vw;
  height: 35vh;
}

.resume{
  font-size: 5vw;
  line-height: 5vw;
  margin-left: var(--margin);
  width: calc(100vw - var(--margin)*2);
  font-family: myFont;
  margin-top: 50vh;
}
  
  #container {
    position: fixed;
    bottom: 0vh;
    left: 1vw;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-gap: 0em;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    pointer-events: none;
    z-index: 2;
  }

  .content{
    margin-left: var(--margin);
    margin-right: var(--margin);
    width: calc(100vw - var(--margin)*2);
  }

  nav{
    width: calc(100vw - var(--margin)*2);
    height: 10px;
    margin-bottom: 20px;
    position: fixed;
    top: var(--margin);
    left: var(--margin);
    font-size: 2vw;
  }
  
  .nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  a{
    color: rgb(0, 0, 255);
    text-decoration: inherit;
  }

  a:hover{
    opacity: 0.5;
    transition: 0.5s ease;
  }

  .recette{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--margin);
    padding-bottom: var(--margin);
  }

  .column{
    width: 32%;
  }

  p{
    font-size: 1.9vw;
    margin-bottom: 10px;
    font-family: myFontLight;
  }

  .slider{
    width: 100%;
    z-index: 1 !important;
    position: relative;
  }
  
  .slider-text{
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 4vw;
  }

  .slider input{
    width: 100%;
  }

  input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    margin-top: -10vw;
    width: 300px;
    height: 1vw;
    background: #0000ff;
    border: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 5vw;
    width: 5vw;
    border-radius: 100%;
    border: solid 1vw #0000ff;
    background: white;
    margin-top: -2vw;
}

input[type=range]:focus {
    outline: none;
}
  
  .grid-item {
    padding: 1em;
    margin:0 !important;
    text-align: center;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: ease 0.5s;
    z-index: 2;
    mix-blend-mode: difference;
    animation: show 1s ease;
    max-width: 3%;
    pointer-events:all;
  }

  .grid-item:hover {
    transition: ease 0.5s;
    z-index: 999;
    pointer-events:all;
  }

  .hover{
    transition: ease 0.5s;
}

  .click{
      transition: ease 1.5s;
      transform: scale(0) rotate(360deg) !important;
      z-index: 999 !important;
  }

  .actif{
    font-style: italic;
    text-decoration-line: line-through;
  }

  .etape{
   cursor: pointer;
  }

 

  .etape:hover{
    text-decoration: underline;
  }

  /*------------------------------------ INTRO */

  .intro{
    overflow: hidden;
  }

  .intro nav{
    z-index: 1000 !important;
    position: absolute;
    width: calc(100vw - var(--margin)*2);
    margin-top: var(--margin);
  }

  .intro h1{
    z-index: 10;
  }

  .intro #container {
    top: 0vh;
    left: 0;
    position: absolute;
    pointer-events: visible !important;
    z-index: 999 !important;
  }

  .intro .grid-item-intro {
    padding: 1em;
    margin:0 !important;
    text-align: center;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: ease 0.5s;
    mix-blend-mode: none;
  }

  .ingrediants .column{
    width: 49%;
  }

  .ingrediants p{
    margin: 0;
  }

  .recette span{
    margin-right: 3vw;
  }

  .ingrediants span{
    margin-right: 0;
  }

  .overline{
    text-decoration-line: line-through !important;
  }

  /*------------------------------------ CLASSIC */

  .content{
    margin-left: 4.4vw !important;
  }



/*------------------------------------ SCROLL BAR */
  /* width */
::-webkit-scrollbar {
  width: 10px;
  position: absolute;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #000fff;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(0, 0, 170);
}

 /*------------------------------------ VEGETARIAN */

.vegetarian .grid-item {
  transition: ease 3s !important;
}

 /*------------------------------------ BLACK */
 .black .grid-item {
  mix-blend-mode: none !important;
}

 /*------------------------------------ MEAT */
 .meat .grid-item-meat {
  padding: 1em;
  margin:0 !important;
  text-align: center;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transition: ease 0.5s;
  z-index: 2;
  mix-blend-mode: none;
  animation: show 1s ease;
  max-width: 3%;
  pointer-events:all;
}

 /*------------------------------------ SEAFOOD */
 .seafood .grid-item-seafood {
  padding: 1em;
  margin:0 !important;
  text-align: center;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transition: ease 0.5s;
  z-index: 2;
  animation: show 1s ease;
  max-width: 3%;
  pointer-events:all;
}


/*------------------------------------ MOBILE */

@media (max-aspect-ratio: 1/1) {
  .recette{
    display:inline-block;
    width: 100%;
    margin-top: var(--margin);
    padding-bottom: var(--margin);
  }

  .column{
    min-width: 100% !important;
  }

  p{
    font-size: 22px;
  }

  nav{
    top:-50vh;
    padding-bottom: 50vh;
    height: 6vh;
    transition: 0.5s ease;
    border-bottom: 1vw #0000ff solid;
    background: white;
    z-index: 2!important;
  }

  nav:hover{
    background: white;
    top:0;
    height: 80vh;
    transition: 0.5s ease;
    border-bottom: 1vw #0000ff solid;
    padding-bottom: 0;
  }

  .nav{
    height: 100%;
    font-size: 6vw;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .nav a{
    margin-top: 2vh;
  }

  nav:hover .plus{
     color: red;
  }

  .plus{
    position: fixed;
    top: 0;
    width: 100vw;
    left: 0;
    text-align: center;
    height: 6vh;
    z-index: 2;
    pointer-events: none;
    font-size: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (min-aspect-ratio: 1/1) {
  .plus{
    display: none;
  }
}