#overlay {
    position: sticky;
    display: none;
    grid-template-rows: 52vh 48vh;
    grid-template-columns: 15vw 70vw 15vw;
    grid-template-areas:
      ". fly ."
      "gun0 human-fly gun1";
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  #overlay-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    background-color: rgb(19, 19, 19);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 50;
    animation: loading 0.8s;
  }
  @keyframes loading {
    0%{
        background-color: rgb(20, 0, 0);
    }
    100%{
        background-color: rgb(8, 8, 8);
    }
  }
  #warning-container{
    position: absolute;
    left: calc(50vw - (300px / 2 ));
    top: 30vh;
    width: 300px;
    height: 200px;
    background-color: #070000;
    border-left: solid 3px rgb(116, 6, 6);
    display: flex;
    align-items: center;
  }
  #warning-container img{
    margin-left: -20px;
    transform: scaleX(-1);
    width: 160px;
    filter: brightness(50%) saturate(10%) blur(50%); 
    animation: kaka 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  #warning-container h2{
    color: rgb(175, 12, 12);
    transform: rotate(-20deg) translate(15px,-40px); 
    animation: textrole 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);   
  }
  #warning-container h4{
    font-size: 0.8em;
    font-family: "Plus Jakarta Sans", sans-serif;
    position: absolute;
    right: 0;
    bottom: 0;
    color: rgb(102, 102, 102);
  }
  @keyframes kaka {
   0%{
      transform: rotate(0deg) scaleX(-1) translate(0px,0px);
   }   
   25%{
    transform: rotate(-20deg) scaleX(-1) translate(40px,-12px);
   }
   75%{
    transform: rotate(20deg) scaleX(-1) translate(-20px,12px);
   }
   100%{
    transform: rotate(0deg) scaleX(-1) translate(0px,0px);
   }   
  }
  @keyframes textrole {
    0%{
      transform: rotate(-20deg) translate(-80px,-40px) scale(1.0, 1.0); 
      opacity: 0; 
    }   
    25%{
      transform: rotate(-20deg) translate(15px,-40px); 
      opacity: 1; 
    }
    30%{
      opacity: 1;
    }
    95%{
      transform: rotate(-20deg) translate(15px,-40px) scale(1.2, 1.2); 
      
    }
    100%{
      transform: rotate(-20deg) translate(15px,-40px) ; 
      opacity: 0; 
    }   
   }
   #punch{
     animation: raising 1s;
     margin: -70px;
     animation-iteration-count: infinite;
     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);   
   }

   @keyframes raising {
    0%{
      transform: rotate(-10deg) translate(-5px,100px) scale(1.0, 1.0); 
      opacity: 0; 
    }   
    25%{
      transform: rotate(0deg) translate(5px,5px); 
      opacity: 0; 
    }
    30%{
      opacity: 0.5;
    }
    95%{
      transform: rotate(10deg) translate(-5px,-15px) scale(1.2, 1.2); 
      
    }
    100%{
      transform: rotate(0deg) translate(15px,0px) ; 
      opacity: 0; 
    }   
   }