/*Stop and Wait Css  */

@media screen and (min-width: 1100px) {
    body {
        z-index:-3;
        position:absolute;
       width: 100%;
       height: 100%;
       font-family: 'Raleway', sans-serif !important;
    }
}

.box{	  
    width: 1380px;
    height: 705px;
    z-index:-2;
    border: 3px solid black;
    background-color: #e3f6f5;
    
}
#instruction{
    z-index:0;
    position:absolute;
    margin-top: 1.4%;
    right: 5%; 
    background-color: #ffd803;
    color:#272343;
    border-radius: 6px;
    font-size: 18px;
    display: inline-block;

    }

    #instruction:hover {
        background-color: #bae8e8;
        color: #000;
    }
    
      
    .dropdown-content {
      display:none;
      position: absolute;
      margin-left:72%;
      margin-top: 6%;
      background-color: white;
      width: 350px;
      height: auto;
      border:4px;
      border-radius: 4px;
      padding: 10px;
      font-family: sans-serif;
      font-size: 14px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,1,1);
      z-index: 1;
      overflow: auto;
    }
    .dropdown-content p:hover {background-color: #e3f6f5}
    .show {display:block;}
    
       

    #topcorner {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #2C99CE ;
    
    }
    #topcorner:hover , .right:hover{
        color: #77BB41;
    }
    
    .overlay {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.9);
        overflow-x: hidden;
        transition: 0.5s;
      }
      
      .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }
      
      .overlay p {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
      }
      .overlay li{
          font-size: 20px;
      }

      
      
      
      .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
      }
      
      @media screen and (max-height: 450px) {
        .overlay a {font-size: 20px}
        .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
        }
      }
    
    
    
    
        li{
            list-style-type:upper-roman;
        }
        #btn{
            position: absolute;
        top: 15%;
        right: 15%; 
        }
        
        .block{
            display: none;
        }
        
canvas {
    z-index:-1;
    margin-left: 17rem;
    margin-top: 2rem;
    margin-bottom: 5rem;
    padding:3%;
    border: 1px solid black;
    background-color: #fffffe;
    
 margin-bottom: 5rem;
    padding:4%;
    border: 1px solid black;
}

.position-absolute {
    
    position: absolute !important;
    backdrop-filter: blur(6px);
    text-align: justify;

  }
  .swal2-popup {
    font-size: 1.4rem !important;
    font-family: Georgia, serif;
  }
.header-line{
    margin-top: 0.5rem;
    background:  #ff6600;
    border: 4px solid  #ff6600;
    width:100%;
    
}
.title{
    margin: 1rem;
    text-align: center;
    color:  #272343;
}
.footer{
    position: absolute;
  top:705px;
  width: 1380px;
  background-color: black;
  color: white;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
}

a{
    text-decoration: none !important;
    color: #2C99CE;
}
a:hover{
    color: #ffd803 !important;
}