@charset "UTF-8";

@font-face {
  font-family: "Favorit Variable";
  src: url("../fonts/Sono[MONO\,wght].ttf");
}

 body{
  font-family: "Favorit Variable";
  background-color: rgb(0, 255, 76);
  overflow: hidden;
}




.info{
  font-size: 1vw;
  position: absolute;
  right: 2vw;
  top: 7%;

  transform: translate(0,-0%);
 
  z-index: -500;

}

#heyman{
  border: 1px;
  border-style: solid;
  color: white;
  border-color: white;
  border-radius: 50px;
  padding-left: 100px;
  padding-right: 100px;
}

#heyman:hover{
  color: rgb(0, 255, 76);
  border-color: rgb(0, 255, 76);
  background-color: white;
}
.panel{
  top: 7%;
  left: -100%;
  height: 100%;
  width: 48vw;
  padding-left: 2vw;
  position: absolute;
  transition: 1s;
  font-size: 1vw;
  color: white;
  line-height: 110%;
}

.new-style {
  left: 0%;
}





















 #time {
  font-size: 1.5vw;
  position: absolute;
  right: 2%;
  padding-top: 1%;
  color: black;
}




#lockscreen {
  background-color: #000000;
  width: 100vw;
  height: 105vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#login {
    color: rgb(0, 255, 76);
    border: 1px;
    border-style: solid;
    border-color: rgb(0, 255, 76);
    background-color: black;
    border-radius: 50px;
    margin: 5px;
    font-size: 2vw;
    font-family: "Favorit Variable";
    text-transform: uppercase;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 70px;
    padding-right: 70px;
    transition: .1s;
    z-index: 1010;



}

#login:hover{
  color: black;
  border-color: black;
  background-color: rgb(0, 255, 76);
  transition: .1s;

}


#wallpaper{
  position: absolute;
  top: 45%;
  left: 50%;
  height: 50%;
  width: auto;
  transform: translate(-50%, -50%);
  z-index: -1000;

}



.foldercontainer1{
  position: absolute;
  top: 10%;
  right: 14%;
  width: 10%;

}

.foldercontainer2{
  position: absolute;
  top: 10%;
  right: 2%;
  width: 10%;

}

.foldercontainer3{
  position: absolute;
  top: 30%;
  right: 2%;
  width: 10%;

}

.foldercontainer4{
  position: absolute;
  top: 50%;
  right: 2%;
  width: 10%;

}

.folders{
  width: 100%;
  mix-blend-mode: multiply;
  filter: invert(0%);
  transition: .1s;
  }


  .folders:hover{
    filter: invert(100%);
    transition: .1s;
  }


  .foldersname{
    font-size: 1vw;
    position: absolute;
    top: 85%;
    left: 5%;
    mix-blend-mode: multiply;
    filter: invert(0%);
    transition: .1s;
    text-align: center;

    }
  









.gigacontainer {
    display: flex;
    flex-direction: row; 
    margin-left: 2%;
    padding-top: 1%;


  }




  .container{
    /* flex: 50%; */
    padding-right: 1%;
    background-color: rgb(0, 255, 76);
    color: rgb(0, 0, 0);

  }


  

  .container:hover{
    background-color: rgb(0, 0, 0);
    color:  rgb(0, 255, 76); 
   }




  #text {
    position: relative;
    top: 0%;
    left: 0%;
    text-align: center;
    /* transform: translate(-50%, -0%); */
    font-size: 1.5vw;
    
  }
  
  #ticket {
    /* width: 10vw;
    height: 10vh; */
    position:absolute;
    transform: translate(0%, -0%);
    background-color: rgb(0, 0, 0);
    color: rgb(0, 255, 76);
    padding: 2%;
    display: none;
    flex-direction: column;
  }

  
  

  h2{
    padding:3%;
  }

  h2:hover{
    filter: invert(100%);
  }
  


  #text:hover + #ticket { 
    opacity: 100%;
    animation-play-state: paused ;
    z-index: +10;
    display: block;

 }

 /* #text:active + #ticket { 
  display: block;
}  */








 #search-bar {
  text-align: center;
}

#search-input {
  width: 20vw;
  font-size: 1.5vw;
}

#search-button {
  font-size: 1.5vw;
}






















  
#animateButton{
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    border: 1px;
    border-style: solid;
    border-color: black;
    background-color: rgb(0, 255, 76);
    border-radius: 50px;
    margin: 5px;
    font-size: 2vw;
    font-family: "Favorit Variable";
    text-transform: uppercase;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 70px;
    padding-right: 70px;
    transition: .1s;
    mix-blend-mode: darken;
}

#animateButton:hover{
  color: rgb(0, 255, 76);
  border-color: rgb(0, 255, 76);
  background-color: black;
  transition: .1s;
}

.gigacontainer2 {
  /* Your existing CSS properties for the element */
  width: 90%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 100%);
  transition: .2s;
  bottom: 1%;
  display: flex;
  flex-direction: row; 
  /* background-color: rgb(0, 0, 0); */
  mix-blend-mode: darken;
}

.animate {
  transform: translate(-50%, 0%);
  background-color: rgb(255, 255, 255);
}

/* .gigacontainer2:hover{
  transform: translate(-50%, 0%);
  background-color: rgb(255, 255, 255);
  transition: .2s;

} */

.logo{
    flex: 50%;
    width: 4%;
    padding: .5%;
    mix-blend-mode: multiply;
    transition: .1s;

}

#safari{
  flex: 50%;
  width: 4%;
  padding: .5%;
  mix-blend-mode: multiply;
  transition: .1s;

}



.logo:hover{
filter: invert(100%);
transition: .1s;
}

#safari:hover{
  filter: invert(100%);
  transition: .1s;

  }

  .illustrator:hover{
    filter: invert(100%);
    transition: .1s;

    }



.canvastext{
  position: relative;
  text-align: center;
  font-size: 1.5vw;
  color: white;
  text-transform: uppercase;
  transition: .1s;
}

.canvastext:hover{
  color: rgb(0, 255, 76);
  transition: .1s;
}

#canvas1 {
  display: none;
  /* background-color: rgb(255, 255, 255); */

  z-index: 9999;
  background-color: transparent;
  touch-action: none;

  border: solid 1px rgb(255, 255, 255);
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height: 50%;
  background-color: rgb(0, 0, 0);
}



#canvas2 {
  display: none;
  /* background-color: rgb(255, 255, 255); */

  z-index: 9999;
  touch-action: none;

  border: solid 1px rgb(255, 255, 255);
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height: 50%;
  background-color: rgb(0, 0, 0);
  overflow: scroll;
}

.apps{
  position: relative;
  width: 100%;
  top: 0%;
  left: 0%;
  filter: invert(0%);
  transition: .1s;
}

.apps:hover{
  filter: invert(100%);
  transition: .1s;
}



#canvas3 {
  display: none;
  /* background-color: rgb(255, 255, 255); */

  z-index: 9999;
  background-color: transparent;
  touch-action: none;
  overflow: scroll;

  border: solid 1px rgb(255, 255, 255);
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height: 50%;
  background-color: black;
}



#canvas4 {
  display: none;
  /* background-color: rgb(255, 255, 255); */

  z-index: 9999;
  background-color: transparent;
  touch-action: none;

  border: solid 1px rgb(255, 255, 255);
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height: 50%;
  background-color: black;
}


#canvas5 {
  display: none;
  z-index: 9999;
  touch-action: none;

  border: solid 1px white;
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height: 50%;
  background-color: black;
  overflow: scroll;
}

.song{
  position: relative;
  top: 0%;
  left: 0%;
  width: 100%;
  padding-top: 5%;
  padding-bottom: 5%;

}

.playPauseButton {
  display: block;
  position: absolute;
  top: 15%;
  left: 5%;


  color: rgb(0, 255, 76);
  border: 1px;
  border-style: solid;
  border-color: rgb(0, 255, 76);
  background-color: black;
  border-radius: 50px;
  /* margin: 5px; */
  font-size: 2vw;
  font-family: "Favorit Variable";
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 4vw;
  padding-right: 4vw;
  transition: .1s;

}

.playPauseButton:hover{
  color: black;
  border-color: black;
  background-color: rgb(0, 255, 76);
  transition: .1s;

}

.progressBar {
  width: 60%;
  position: absolute;
  top: 15%;
  right: 5%;
  height: 2.2vw;
  border: 1px;
  border-style: solid;
  border-color: rgb(0, 255, 76);
  cursor: pointer;



}

.progressBarFill {
  height: 100%;
  background-color: rgb(0, 255, 76);
  width: 0;
}



#closeBtn {
  position: sticky;
  top: 5px;
  left: 5px;
  cursor: pointer;
  font-size: 40px;
  color: rgb(0, 255, 76);
  z-index: 10000;

}





























/* Style for the popup */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: auto;
  cursor: crosshair;
  overflow: hidden;
  align-items: center;
}


  

.popuptext{
  font-size: 1.5vw;
  text-align: center;
  position: absolute;
  color: rgb(0, 255, 76);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation-name: popuptext;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  
}

@keyframes popuptext {


  0%{
  color: rgb(0, 255, 76);

  }
  50%{
    color: white;
  }
  100%{
    color: rgb(0, 255, 76);

  }
}

@keyframes popup {

  0%{
    border: 1px solid  rgb(0, 255, 76);
  
    }
    50%{
      border: 1px solid white;
    }
    100%{
      border: 1px solid  rgb(0, 255, 76);
  
    }

 
}










#rio {
  font-size: 4vw;
  text-align: center;
  position: absolute;
  /* color: rgb(0, 255, 76); */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);



  font-family: "Favorit Variable";
  font-variation-settings: "wght" 2000;
  font-variation-settings: "MONO" .5;

  color: rgb(0, 0, 0); 
            text-shadow: -1px -1px 0 rgb(0, 255, 76), 1px -1px 0 rgb(0, 255, 76), -1px 1px 0 rgb(0, 255, 76), 1px 1px 0 rgb(0, 255, 76); 

  z-index: -110;

}


#hide{
  top: 0%;
  left: 0%;
  position: absolute;
  background-color: none;
  color: rgb(0, 255, 76);
  width: 100%;
  height: 90%;
  z-index: 10;
}















/* Style for the popup content */

#myModal1{
  top: 10%;
  left: 10%;
  position: fixed;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 255, 76);
  color: rgb(0, 255, 76);
  width: 100%;
  height: 30vh;
  width: 30vw;
  z-index: 20;
  transition: .1s;


  animation-name: popup;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

#myModal1:hover{
  background-color:  rgb(0, 255, 76);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  transition: .1s;
}

#myModal2{
  top: 55%;
  left: 20%;
  position: fixed;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 255, 76);
  color: rgb(0, 255, 76);
  width: 100%;
  height: 30vh;
  width: 30vw;
  z-index: 20;
  transition: .1s;


  animation-name: popup;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;

}

#myModal2:hover{
  background-color:  rgb(0, 255, 76);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  transition: .1s;

}

#myModal3{
  top: 30%;
  left: 30%;
  position: fixed;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 255, 76);
  color: rgb(0, 255, 76);
  width: 100%;
  height: 30vh;
  width: 30vw;
  z-index: 20;
  transition: .1s;


  animation-name: popup;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;

}

#myModal3:hover{
  background-color:  rgb(0, 255, 76);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  transition: .1s;

}

#myModal4{
  top: 15%;
  left: 60%;
  position: fixed;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 255, 76);
  color: rgb(0, 255, 76);
  width: 100%;
  height: 30vh;
  width: 30vw;
  z-index: 20;
  transition: .1s;


  animation-name: popup;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;

}

#myModal4:hover{
  background-color:  rgb(0, 255, 76);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  transition: .1s;

}

#myModal5{
  top: 35%;
  left: 45%;
  position: fixed;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 255, 76);
  color: rgb(0, 255, 76);
  width: 100%;
  height: 30vh;
  width: 30vw;
  z-index: 20;
  transition: .1s;


  animation-name: popup;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;

}

#myModal5:hover{
  background-color:  rgb(0, 255, 76);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  transition: .1s;

}

#myModal6{
  top: 60%;
  left: 60%;
  position: fixed;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 255, 76);
  color: rgb(0, 255, 76);
  width: 100%;
  height: 30vh;
  width: 30vw;
  z-index: 20;
  transition: .1s;


  animation-name: popup;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;

}

#myModal6:hover{
  background-color:  rgb(0, 255, 76);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  transition: .1s;

}






#myModal7{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 255, 76);
  color: rgb(0, 255, 76);
  width: 100%;
  height: 60vh;
  width: 60vw;
  z-index: 10;


  animation-name: popup;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}


.button-yes{
color: rgb(0, 255, 76);
position: absolute;
text-align: center;
bottom: 0%;
width: 47.8%;
padding: 1%;
border: 1px solid rgb(0, 255, 76);
transition: .1s;

}

.button-no{
color: rgb(0, 255, 76);
position: absolute;
text-align: center;
bottom: 0%;
right: 0%;
width: 47.8%;
padding: 1%;
border: 1px solid rgb(0, 255, 76);
transition: .1s;

}

.button-no:hover{
  background-color: rgb(0, 255, 76);
  color:black;
  border: 1px solid rgb(0, 0, 0);
  transition: .1s;


}

.button-yes:hover{
  background-color: rgb(0, 255, 76);
  color:black;
  border: 1px solid rgb(0, 0, 0);
  transition: .1s;


}







/* Style for the close button */
.close {
  color:rgb(0, 255, 76);
  float: right;
  animation-name: popuptext;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  /* font-size: 28px;
  font-weight: bold; */
}

.close:hover,
.close:focus {
  color: deeppink;
  cursor: pointer;
  /* text-decoration: none;
   */
}






















@media screen and (max-width: 600px){


    #login {
    color: rgb(0, 255, 76);
    border: 1px;
    border-style: solid;
    border-color: rgb(0, 255, 76);
    background-color: black;
    border-radius: 50px;
    margin: 5px;
    font-size: 7vw;
    text-align: center;
    line-height: 80%;
    font-family: "Favorit Variable";
    text-transform: uppercase;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 30px;
    padding-right: 30px;
    transition: .1s;
    z-index: 1010;
    animation-name:invertanimation ;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    
  }

    @keyframes invertanimation {

  0%{
  color:rgb(0, 255, 76);
  background-color: black;
  }

  25%{
    color:rgb(0, 255, 76);
    background-color: black;
    }

  50%{
    color: black;
    background-color: rgb(0, 255, 76);
    }

    75%{
      color:rgb(0, 255, 76);
      background-color: black;
      }

    100%{
      color:rgb(0, 255, 76);
      background-color: black;
      }
  
  }



  #time {
  font-size: 7vw;
  position: absolute;
  left: 2%;
  padding-top: 1%;
  color: black;
  }



  #wallpaper{
  position: absolute;
  top: 53%;
  left: 50%;
  height: 40%;
  width: auto;
  transform: translate(-50%, -50%);
  z-index: -1000;

  }


  .container{
  /* flex: 50%; */
  padding-right: 1%;
  background-color: rgb(0, 255, 76);
  color: rgb(0, 0, 0);
  display: none;

  }















  
  #animateButton{
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translate(-52%, -50%);
  color: black;
  border: .7px;
  border-style: solid;
  border-color: black;
  background-color: rgb(0, 255, 76);
  border-radius: 50px;
  font-size: 7vw;
  font-family: "Favorit Variable";
  text-transform: uppercase;
  text-align: center;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 110px;
  padding-right: 110px;
  transition: .1s;
  mix-blend-mode: darken;
 
  }



  .gigacontainer2 {
  /* Your existing CSS properties for the element */
  width: 90%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 110%);
  transition: .2s;
  bottom: 1%;
  display: flex;

  /* background-color: rgb(0, 0, 0); */
  mix-blend-mode: darken;
  }

  .animate {
  transform: translate(-50%, 0%);
  background-color: rgb(255, 255, 255);
  }



  .logo{
  width: 40%;
  padding: .5%;
  mix-blend-mode: multiply;
  transition: .1s;
    }

  #apps{
  display: none;
  }

  #mail{
  display:none
  }

  #finder{
  display: none;
  }









  .foldercontainer1{
  position: absolute;
  top: 10%;
  left: 24%;
  width: 20%;

  }

  .foldercontainer2{
  position: absolute;
  top: 10%;
  left: 2%;
  width: 20%;

  }

  .foldercontainer3{
  position: absolute;
  top: 22%;
  left: 2%;
  width: 20%;

  }

  .foldercontainer4{
  position: absolute;
  top: 22%;
  left: 24%;
  width: 20%;

  }

  .folders{
  width: 100%;
  mix-blend-mode: multiply;
  transition: .1s;
  }


  .foldersname{
    font-size: 2vw;
    position: absolute;
    top: 85%;
    left: 5%;
    mix-blend-mode: multiply;
    filter: invert(0%);
    transition: .1s;
    text-align: center;

    }











    .canvastext{
      position: relative;
      text-align: center;
      font-size: 1.5vw;
      color: white;
      text-transform: uppercase;
      transition: .1s;
    }
    
    .canvastext:hover{
      color: rgb(0, 255, 76);
      transition: .1s;
    }
    
 
    
    

    
   
    
    
    #canvas3 {
      display: none;
      /* background-color: rgb(255, 255, 255); */
    
      z-index: 9999;
      background-color: transparent;
      touch-action: none;
      overflow: scroll;
    
      border: solid 1px rgb(255, 255, 255);
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 70%;
      height: 60%;
      background-color: black;
    }
    
    
    
    
    
    
    #canvas5 {
      display: none;
      z-index: 9999;
      touch-action: none;
    
      border: solid 1px white;
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 70%;
      height: 60%;
      background-color: black;
      overflow: scroll;
    }
    

    .canvastext{
      position: relative;
      text-align: center;
      font-size: 3vw;
      color: white;
      text-transform: uppercase;
      transition: .1s;
    }


  

  .playPauseButton {
    display: block;
    position: absolute;
    top: 15%;
    left: 5%;
  
  
    color: rgb(0, 255, 76);
    border: 1px;
    border-style: solid;
    border-color: rgb(0, 255, 76);
    background-color: black;
    border-radius: 50px;
    /* margin: 5px; */
    font-size: 3vw;
    font-family: "Favorit Variable";
    text-transform: uppercase;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 4vw;
    padding-right: 4vw;
    transition: .1s;
  
  }
  
 
  
  .progressBar {
    width: 60%;
    position: absolute;
    top: 15%;
    right: 5%;
    height: 3.5vw;
    border: 1px;
    border-style: solid;
    border-color: rgb(0, 255, 76);
    cursor: pointer;
  
  
  
  }


  






    
  
  .popuptext{
    font-size: 3vw;
    text-align: center;
    position: absolute;
    color: rgb(0, 255, 76);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation-name: popuptext;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    
  }


  #myModal1{
    top: 10%;
    left: 10%;
    position: fixed;
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 255, 76);
    color: rgb(0, 255, 76);
    height: 15vh;
    width: 60vw;
    z-index: 20;
    transition: .1s;
  
  
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  }
  

  
  #myModal2{
    top: 55%;
    left: 2%;
    position: fixed;
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 255, 76);
    color: rgb(0, 255, 76);
    height: 15vh;
    width: 60vw;
    z-index: 20;
    transition: .1s;
  
  
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  
  }
  

  
  #myModal3{
    top: 25%;
    left: 5%;
    position: fixed;
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 255, 76);
    color: rgb(0, 255, 76);
    height: 15vh;
    width: 60vw;
    z-index: 20;
    transition: .1s;
  
  
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  
  }
  

  
  #myModal4{
    top: 15%;
    left: 37%;
    position: fixed;
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 255, 76);
    color: rgb(0, 255, 76);
    height: 15vh;
    width: 60vw;
    z-index: 20;
    transition: .1s;
  
  
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  
  }
  

  
  #myModal5{
    top: 40%;
    left: 25%;
    position: fixed;
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 255, 76);
    color: rgb(0, 255, 76);
    height: 15vh;
    width: 60vw;
    z-index: 20;
    transition: .1s;
  
  
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  
  }
  
 
  
  #myModal6{
    top: 65%;
    left: 33%;
    position: fixed;
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 255, 76);
    color: rgb(0, 255, 76);
    height: 15vh;
    width: 60vw;
    z-index: 20;
    transition: .1s;
  
  
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  
  }
  

  
  
  
  
  
  
  #myModal7{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 255, 76);
    color: rgb(0, 255, 76);
    height: 50vh;
    width: 80vw;
    z-index: 10;
  
  
    animation-name: popup;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  }
  
  
  .button-yes{
  color: rgb(0, 255, 76);
  position: absolute;
  text-align: center;
  bottom: 0%;
  width: 47.7%;
  padding: 1%;
  border: 1px solid rgb(0, 255, 76);
  border-left: none;
  border-bottom: none;
  transition: .1s;
  }
  
  .button-no{
  color: rgb(0, 255, 76);
  position: absolute;
  text-align: center;
  bottom: 0%;
  right: 0%;
  width: 47.7%;
  padding: 1%;
  border: 1px solid rgb(0, 255, 76);
  border-right: none;
  border-bottom: none;
  transition: .1s;
  }


  #rio {
    font-size: 12vw;
    text-align: center;
    position: absolute;
    /* color: rgb(0, 255, 76); */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  
  
  
    font-family: "Favorit Variable";
    font-variation-settings: "wght" 2000;
    font-variation-settings: "MONO" .5;
  
    color: rgb(0, 0, 0); 
              text-shadow: -1px -1px 0 rgb(0, 255, 76), 1px -1px 0 rgb(0, 255, 76), -1px 1px 0 rgb(0, 255, 76), 1px 1px 0 rgb(0, 255, 76); 
  
    z-index: -110;
  
  }







  .info{
    font-size: 1vw;
    position: absolute;
    right: 2vw;
    top: 7%;
  
    transform: translate(0,-0%);
   
    z-index: 100;
  }
  
  #heyman{
    border: 1px;
    border-style: solid;
    color: white;
    border-color: white;
    background-color: rgb(0, 255, 76);
    border-radius: 50px;
    padding-left: 100px;
    padding-right: 100px;
    display: none;
  }
  

  .panel{
    top: 7%;
    left: -100%;
    height: 100%;
    width: 48vw;
    padding-left: 2vw;
    position: absolute;
    transition: 1s;
    font-size: 1vw;
    color: white;
    line-height: 110%;
    display: none;
  }
  





}