/* defaults */
@font-face {
  font-family: "Ohno";
  src: url("../fonts/Ohno Blazeface 14 Point.ttf");
  }
  @font-face {
    font-family: "Century";
    src: url("../fonts/Century Schoolbook Pro Regular.otf");
  }

html, body {
    margin: 0;
    padding: 0;
    height:100%;
    background-color: #0e0f0f;
    vertical-align: baseline;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    cursor: crosshair;
}

#main {
  border: 3px solid white;
}

::-webkit-scrollbar {
  display: none;
}

* {
  box-sizing: border-box;
}

div {
  display: block;
}

body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    height: 100%;
    margin:0;
  }
   

::selection {
    background-color: #0e0f0f;
    color:white;
}


::-moz-selection {
    background-color: #0e0f0f;
    color:white;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #0e0f0f;
}

em {
  font-family: "Ohno";
  font-style: normal; /* initial */
  font-size: 2.55vw;
}

a:hover {
    z-index: 10000000;
}

.hidden {
    display: none
}

  /* menu */
  body {
      margin: 0;
      padding: 0;
      height: 500px;
  }

  .nav{
    font-family: "Century";
      text-align: right;
      height: 75px;
      line-height: 70px;
      background: #f52800;
      position: inherit;
      border-bottom: solid 3px white;
  }
  
  .menu{
      margin: 0 30px 0 0;
  }
  
  .menu .a{
    z-index: 1;
    position: relative;
    clear: right;
    text-decoration: none;
    color: white;
     margin: 0 10px;
      line-height: 30px;
     border-bottom: #0e0f0f;
     border-radius: 1em;
     border: solid white 3px;
     padding: 10px;
  
  }
  .menu .a:hover{
    color: white;
   border-bottom: 3px solid white;
   background-color: #0e0f0f; 
  }
  
  .label{
     margin: 0 40px 0 0;
     font-size: 26px;
     line-height: 22px;
     display: none;
     color: white;
     float: right;
     width: 180px;
    }
  .Navigator{
    display: inline-flex;
    font-size: 25px;
  }
  #toggle{
    display: none;
  }
  /* menu */
  
  @media only screen and (max-width:  1030px) {
      .menu{
          text-align: center;
          width: 100%;
          display: none;
        }
        .menu .a{
          display: block;
          border-bottom: 3px solid #EAEAEA;
          margin: 0;
          font-size: 20px;
          background-color: #f52800;
          color: white;
        }        
       .label{
            display: block;
            cursor: pointer;
        }
        #toggle:checked + .menu{
          display: block;
        }
    
  }
  @media only screen and (max-width: 760px){
      .Navigator{
      display: none;
      }
      .label{
        margin: 0 40px 0 0;
        font-size: 28px;
        line-height: 70px;
        color: white;
        float: right;
        width: 26px;
        float: right;
      }
  }

  
/*   title page  */

.scroll-top {
  background: #f52800;
  border: solid white 3px;
  border-radius: 50%;
  bottom: 0;
  cursor: pointer;
  height: 50px;
  margin: 15px;
  position: fixed;
  right: -70px;
  transition: right 0.2s ease-in-out;
  width: 50px;
  z-index: 1;
}

.scroll-top.visible {
  right: 0;
}

.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  margin-top: 5px;
  padding: 4px;
}
.arrow.up {  
  transform: rotate(-135deg);
}

.habanero-1 {
  position: absolute;
  top: 40vh;
  margin-left: 10vh;
  z-index: 1;
  width: 20%;
  transform: rotate(25deg);
}

.habanero-1:hover {
  transform: rotate(60deg);
  transition-duration: 2s;
}

.habanero-2 {
  position: absolute;
  top: 65vh;
  left: 65%;
  z-index: 1;
  width: 20%;
  transform: rotate(25deg);
}

.habanero-2:hover {
  transform: rotate(-30deg);
  transition-duration: 2s;
}

.habanero-3 {
  position: absolute;
  top: 31%;
  right: 17%;
  z-index: 1;
  width: 20%;
  transform: rotate(3deg);
}

.habanero-3:hover {
  transform: rotate(60deg);
  transition-duration: 2s;
}

.habanero-4 {
    position: absolute;
    margin: 10px;
    top: 20;
    left:20;
    width:45%;
}

.title {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -4.75vh;
}

.title h1 {
  font-family: "Ohno";
  color: #f52800;
  width: 100%;
  text-align: center;
  font-size: 18vw;
  line-height: 0.63;
  background-color: none;
  z-index: 1;  
  text-shadow:
    -3px -3px 0 #fff,
     0   -3px 0 #fff,
     3px -3px 0 #fff,
     3px  0   0 #fff,
     3px  3px 0 #fff,
     0    3px 0 #fff,
    -3px  3px 0 #fff,
    -3px  0   0 #fff;
}

h1{
  display: block;
}

.block-text {
  font-family: "Century";
  font-size: 3vw;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color:#f52800;
  border-radius: 1em;
  border: solid white 3px;
  color: white;
  width: 50%;
  margin-left: 2%;
  position: relative;
  line-height: 1;
  z-index: 0;
  overflow-wrap: inherit;
}


.block-text-4 {
  font-family: "Century";
  font-size: 3vw;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color:#f52800;
  border-radius: 1em;
  color: white;
  width: 50%;
  margin-left: 47%;
  margin-top: -70px;
  position: relative;
  line-height: 1;
  border: solid white 3px;
}

.block-text-5 {
  font-family: "Century";
  font-size: 3vw;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color:#f52800;
  border-radius: 1em;
  color: white;
  width: 50%;
  margin-left: 15%;
  margin-top: -70px;
  position: relative;
  line-height: 1;
  border: solid white 3px;
}

.space2{
  height: 20vw;
}
.space{
  height: 40vw;
}

h3{
  display: block;
}

.soustitre {
  font-family: "Ohno";
  color: white;
  font-size: 7vw;
  margin-bottom: -59px;
  position: relative;
  right: 0;
  margin-left: 45%;
  width: 50%;
  z-index: 14;
}

/* sections  */

.ingredients {
  font-family: "Ohno";
  color: #f52800;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16vw;
  line-height: 0.63;
  background-color: none;
  text-shadow:
    -3px -3px 0 #fff,
     0   -3px 0 #fff,
     3px -3px 0 #fff,
     3px  0   0 #fff,
     3px  3px 0 #fff,
     0    3px 0 #fff,
    -3px  3px 0 #fff,
    -3px  0   0 #fff;
}

.ingredpics {
  margin: 0;
    padding: 0;
    height:100%;
    cursor: crosshair;
}

.step1 {
  font-family: "Ohno";
  color: #f52800;
  font-size: 10vw;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  text-shadow:
    -3px -3px 0 #fff,
     0   -3px 0 #fff,
     3px -3px 0 #fff,
     3px  0   0 #fff,
     3px  3px 0 #fff,
     0    3px 0 #fff,
    -3px  3px 0 #fff,
    -3px  0   0 #fff;
    background-image: url(../img/Step1.png);
    vertical-align: baseline;
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -999999;
}

.step1:hover {
  font-size: 23vw;
  transition: all 500ms;
} 

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: #f52800;
  overflow-x: hidden;
  transition: 0.5s;
  color:white;
  border-right: solid white 3px;
}

.overlay2 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #0FE308;
  overflow-x: hidden;
  transition: 0.5s;
  color:white;
  border-right: solid white 3px;
}

.overlay2 a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: white;
  display: block;
  transition: 0.3s;
}


.overlay3 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f52800;
  overflow-x: hidden;
  transition: 0.5s;
  color:white;
  border-right: solid white 3px;
}

.overlay3 a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: white;
  display: block;
  transition: 0.3s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  font-family: "Century";
  font-size: 3vw;
  color: white;
  line-height: 1;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}


.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: white;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay1 a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 10px;
  right: 45px;
  font-size: 40px;
}

.overlay2 .closebtn {
  position: absolute;
  top: 10px;
  right: 45px;
  font-size: 40px;
}

.overlay3 .closebtn {
  position: absolute;
  top: 10px;
  right: 45px;
  font-size: 40px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

.step2 {
  font-family: "Ohno";
  color: white;
  font-size: 10vw;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  text-shadow:
    -3px -3px 0 #f52800,
     0   -3px 0 #f52800,
     3px -3px 0 #f52800,
     3px  0   0 #f52800,
     3px  3px 0 #f52800,
     0    3px 0 #f52800,
    -3px  3px 0 #f52800,
    -3px  0   0 #f52800;
    background-image: url(../img/Step2.png);
    vertical-align: baseline;
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -999999;
}

.step2:hover {
  font-size: 23vw;
  transition: all 500ms;
} 


.step3 {
  font-family: "Ohno";
  color: #f52800;
  font-size: 10vw;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  text-shadow:
  -3px -3px 0 #fff,
  0   -3px 0 #fff,
  3px -3px 0 #fff,
  3px  0   0 #fff,
  3px  3px 0 #fff,
  0    3px 0 #fff,
 -3px  3px 0 #fff,
 -3px  0   0 #fff;
    background-image: url(../img/Step3.png);
    vertical-align: baseline;
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -999999;
}

.step3:hover {
  font-size: 23vw;
  transition: all 500ms;
} 

.block-text2 {
  font-family: "Ohno";
  color: white;
  font-size: 7vw;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 12px;
  padding-right: 17px;
  background-color:#f52800;
  width: 100%;
  margin-left: 0%;
  position: relative;
  margin-top: 9vh;
  margin-bottom: 0vh;
  border: solid white 3px;
  border-radius: 0.5em;
}

a img { display:none;  }
a:hover img { display:block; 
padding: 3vw; }


/* ingredients scroll  */

.code-holder{
  width: auto; /* your prefered width */
  overflow-x: scroll;
  height: 464px;/* Your prfered height*/
  border-radius: 0.5em;
  line-height: 1;
}

.code-holder code{
 white-space: wrap; /* this rule is important*/
  font-family: "Ohno";
  color: white;
  font-size: 7vw;
}

.code-holder code >:nth-child(even) {
  white-space: wrap; /* this rule is important*/
   font-family: "Ohno";
   color: #0FE308;
   font-size: 7vw;
   text-align: right;
 }

 /* ingredients */

.groundbeef {
  position: absolute;
  margin-top: 0%;
  left: 3%;
}

.groundbeef .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.groundbeef:hover .img-top {
    display: inline;
}
.groundpork {
  position: absolute;
  margin-left: 57%;
  margin-top:-2%;
}
.groundpork .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    margin-left: 25%;
}
.groundpork:hover .img-top {
    display: inline;
}
.greenbell{
  position: absolute;
  margin-left: 30%;
  margin-top: 18%;
}
.greenbell .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    margin-left: 15%;
}
.greenbell:hover .img-top {
    display: inline;
}

.yellowonion{
  position: absolute;
  margin-left: 70%;
  margin-top: 30%;
}
.yellowonion .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    margin-left: 20%;
}
.yellowonion:hover .img-top {
    display: inline;
}

.jalapeno{
  position: absolute;
  margin-left: 50%;
  margin-top: 20%;
}
.jalapeno .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    margin-left: 10%;
}
.jalapeno:hover .img-top {
    display: inline;
}

.habanero{
  position: absolute;
  margin-left: 2%;
  margin-top: 35%;
}
.habanero .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    margin-left: 2%;
    margin-top: -10%;
}
.habanero:hover .img-top {
    display: inline;
}

.anaheim{
  position: absolute;
  margin-left: 25%;
  margin-top: -10%;
}
.anaheim .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    margin-left: 9%;
    margin-top: -10%;
}
.anaheim:hover .img-top {
    display: inline;
}

.garlic{
  position: absolute;
  margin-left: 10%;
  margin-top: -13%;
}
.garlic .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    margin-left: 9%;
    margin-top: 1%;
    transform: rotate(-20deg);
}
.garlic:hover .img-top {
    display: inline;
}

.cumin {
  position: absolute;
  margin-left: 54%;
  margin-top: 40%;
  transform: rotate(5deg);
}

.cumin:hover {
    display: inline;
    transform: rotate(-70deg);
    transition-duration: 2s;
}

.water {
  position: absolute;
  margin-left: 64%;
  margin-top: 40%;
}

.water:hover {
    display: inline;
    transform: rotate(70deg);
    transition-duration: 2s;
}

.beer {
  position: absolute;
  margin-left: 20%;
  margin-top: 38%;
  transform: rotate(32deg);
}

.beer:hover {
    display: inline;
    transform: rotate(70deg);
    transition-duration: 2s;
}

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}

.redpepper{
  position: absolute;
  margin-left: 20%;
  margin-top: 50%;
  max-width: 100%;
  height: auto;
  transform: rotate(5deg);
}

.redpepper:hover {
  transform: rotate(-70deg);
    transition-duration: 2s;
}

.chilipowder{
  position: absolute;
  margin-left: 56%;
  margin-top: -16%;
  z-index: -1;
}

.bouillon{
  position: absolute;
  margin-left: 41%;
  margin-top: 11%;
  z-index: -1;
}

.tomato{
  position: absolute;
  margin-left: 38%;
  margin-top: 40%;
}
.tomato .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    margin-left: 2%;
    margin-top: -10%;
}
.tomato:hover .img-top {
    display: inline;
}
.beans{
  position: absolute;
  margin-left: 72%;
  margin-top: 29%;
}

.tomatoes {
  position: absolute;
  margin-left: 32%;
  margin-top: 56%;
  z-index: -1;
}

.wrapper {
  display: flex;
}

h3 {
  position: fixed;
  text-align: left;
  font-size: 1.5rem;
  width: 50%;
  top: 1em;
}

.history{
  font-family: "Ohno";
  color: #f52800;
  width: 100%;
  margin-bottom: 80px;
  text-align: center;
  font-size: 16vw;
  line-height: 0.63;
  background-color: none;
  text-shadow:
    -3px -3px 0 #fff,
     0   -3px 0 #fff,
     3px -3px 0 #fff,
     3px  0   0 #fff,
     3px  3px 0 #fff,
     0    3px 0 #fff,
    -3px  3px 0 #fff,
    -3px  0   0 #fff;
}

.container {
  flex-basis: 50%;
  max-height: 100vh;
  overflow-y: scroll;
  border: 3px solid white;
  font-family: "Ohno";
  border-radius: 1em;
  line-height: 1.15;
}

li {
  border-bottom: 6px solid white;
  padding: 20px;
  font-size: 3vw;
  color: black;
  background: white;
  text-align: left;
  display: flex;
  flex-flow: column;
  font-family: "Century";
}

li:first-child {
  background-color:red;
}

li:nth-of-type(odd) {
  background-color:#0FE308;
  font-family: "Ohno";
}

ol {
  top: 0;
  margin: auto;
  padding-left: 0;
}

/* cook button */

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-left: 17px;
}

.cookbutton {
  background-color: #f52800;
  border: none;
  border: 2px solid #fff;
  border-radius: 1em;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;s
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  }

  input {
    background-color: #f52800;
    border: 2px solid #fff;
    color: white;
    border-radius: 50%;
    height:100px;
    text-align: center;
    font-family: Ohno;
    font-size: 20px;
    
  }

.cookbutton:hover {
   background-color: #0FE308;
  border: none;
  border: 2px solid #fff;
  border-radius: 1em;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  }


.box {
  width: 30%;
  margin: 0 auto;
  background: #f52800;
  padding: 50px;
  border: 3px solid #fff;
  border-radius: 1.75em;
  background-clip: padding-box;
  text-align: center;
}

.button1 {
  font-family: "Ohno";
  font-size: 3vw;
  color: #fff;
  border: 3px solid white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease-out;
  position: relative;
  clear: right;
  text-decoration: none;
   margin: 0 10px;
    line-height: 30px;
   border-bottom: #0e0f0f;
   border-radius: 1em;
   border: solid white 3px;
   padding: 20px;

}

.button1:hover {
  background: #0FE308;
  color:white;
}



.overlaypop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}

.overlaypop:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  font-family: "Century";
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 1em;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
  text-align: center;
  font-size: 2vw;
  border: 3px solid #f52800;
  line-height: 1;
}

.popup h2 {
  margin-top: 0;
  color: #f52800;
}
.popup .close {
 position: absolute;
  top: 10px;
  right: 45px;
  font-size: 40px; 
  color: #f52800;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
  color:red;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}


.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 5s linear infinite;
}

.marquee2 span {
  animation-delay: 2.5s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}