@charset "UTF-8";


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



body {
  background-color: rgb(0, 255, 76)
}



#text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;


    font-family: "Favorit Variable";
    font-variation-settings: "wght" 2000;
    font-variation-settings: "MONO" .5;
    font-size: 5vw;
  
    color: rgb(255, 255, 255); /* Set text color */
                  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); /* Create the border effect */
                  background-clip: text; /* Apply background only to the text */
      
    z-index: -50;
  

  }

  .hide{
    position:absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    background-color: none;
    z-index: 50;

  }

  




 
  .button1 {
    position: absolute;
    right: 3%;
    top: 49.5%;
    transform: translate(0,-50%);
    color: white;
    border: 1px;
    border-style: solid;
    border-color: white;
    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;
    z-index: 100;

  }

  .button2 {
    position: absolute;
    left: 3%;
    top: 49.5%;
    transform: translate(0,-50%);
    color: white;
    border: 1px;
    border-style: solid;
    border-color: white;
    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;
    z-index: 100;

    

  }


  .button3 {
    position: absolute;
    left: 50%;
    top: 3%;
    transform: translate(-50%);
    color: white;
    border: 1px;
    border-style: solid;
    border-color: white;
    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;
    z-index: 100;


  }

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

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

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



  #buttonHolder {
    /* background-color: white; */
    color: white;
    text-align: center;
    padding-top: 50px;
  }
  #restartHolder {
    /* background-color: white; */
    color: white;
    text-align: center;

  }
  




  .button-skip {
    position: absolute;
    left: 50%;
    bottom: 3%;
    transform: translate(-50%);
    color: white;
    border: 1px;
    border-style: solid;
    border-color: white;
    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;
    z-index: 100;

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





  		.timer {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    
    
        font-family: "Favorit Variable";
        font-variation-settings: "wght" 2000;
        font-variation-settings: "MONO" .5;
        font-size: 60vw;
      
        
                  color: rgb(0, 255, 76); /* Set text color */
                  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; /* Create the border effect */
                  background-clip: text; /* Apply background only to the text */
      


        z-index: -100;
      
      }



      .lineH{
        height: 100%;
        width: 1px;
        background-color: white;
        position: fixed;
        left: 50%;
        top: 0%;
        z-index: -150;
      }

      .lineL{
        height: 1px;
        width: 100%;
        background-color: white;
        position: fixed;
        left: 0%;
        top: 50%;
        z-index: -150;
      }





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






        #text {
          position: absolute;
          left: 50%;
          top: 48.5%;
          transform: translate(-50%, -50%);
          text-align: center;
          line-height: 88%;
          font-weight: 500;
      
      
          font-family: "Favorit Variable";
          font-variation-settings: "wght" 500;
          font-variation-settings: "MONO" .5;
          font-size: 18vw;
        
          color: rgb(255, 255, 255); /* Set text color */
                        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); /* Create the border effect */
                        background-clip: text; /* Apply background only to the text */
            
          z-index: -50;
        
      
        }









        .button1 {
          position: absolute;
          right: 3%;
          top: 95%;
          transform: translate(0,-100%);
          color: white;
          border: 1px;
          border-style: solid;
          border-color: white;
          background-color: rgb(0, 255, 76);
          border-radius: 50px;
          margin: 5px;
          font-size: 12vw;
          font-family: "Favorit Variable";
          text-transform: uppercase;
          padding-top: 1px;
          padding-bottom: 1px;
          padding-left: 30px;
          padding-right: 30px;
          z-index: 100;
      
        }
      
        .button2 {
          position: absolute;
          left: 3%;
          top: 95%;
          transform: translate(0,-100%);
          color: white;
          border: 1px;
          border-style: solid;
          border-color: white;
          background-color: rgb(0, 255, 76);
          border-radius: 50px;
          margin: 5px;
          font-size: 12vw;
          font-family: "Favorit Variable";
          text-transform: uppercase;
          padding-top: 1px;
          padding-bottom: 1px;
          padding-left: 40px;
          padding-right: 40px;
          z-index: 100;
      
          
      
        }
      
      
        .button3 {
          position: absolute;
          left: 2%;
          top: 4%;
          transform: translate(-0%);
          color: white;
          border: 1px;
          border-style: solid;
          border-color: white;
          background-color: rgb(0, 255, 76);
          border-radius: 50px;
          margin: 5px;
          font-size: 7vw;
          font-family: "Favorit Variable";
          text-transform: uppercase;
          padding-top: 1px;
          padding-bottom: 1px;
          padding-left: 7%;
          padding-right: 7%;
          z-index: 100;
      
      
        }




        .button-skip {
          position: absolute;
          right: 2%;
          top: 4%;
          height: 4vh;
          text-align: center;
          transform: translate(-0%);
          color: white;
          border: 1px;
          border-style: solid;
          border-color: white;
          background-color: rgb(0, 255, 76);
          border-radius: 50px;
          font-size: 7vw;
          font-family: "Favorit Variable";
          text-transform: uppercase;
          padding-top: 1.5%;
          padding-left: 1%;
          padding-right: 1%;
          z-index: 100;
      
        }
       
        
       
      
      
      
      
            .timer {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              text-align: center;
          
          
              font-family: "Favorit Variable";
              font-variation-settings: "wght" 2000;
              font-variation-settings: "MONO" .5;
              font-size: 90vw;
            
              
                        color: rgb(0, 255, 76); /* Set text color */
                        text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; /* Create the border effect */
                        background-clip: text; /* Apply background only to the text */
            
      
      
              z-index: -100;
            
            }
      



      }