* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container{
    width: 100%;
    height: 100%;
    position:relative;
   font-size: 5rem;
   
}

.container img{
    height: 105%;
    width: 100%;
    position:absolute;
    top:4.5%;
}

.container1{
    width:100%;
    height:100%;
    position:absolute;
   
}

#tiles{
    width:100%;
    height:100%;
    top:7%;
    position: absolute;
    visibility:hidden;
}

#backgray{
    width:107%;
    height:100%;
    top:4.3%;
    left: -3.5%;
    position: absolute;
    visibility:hidden;
}

#backgray1{
    width:107%;
    height:100%;
    left: -3.5%;
    top:-2%;
    position: absolute;
    visibility:hidden;
}

.instruments{
    width: 95%;
    height: 104%;
    position: absolute;
    top:2%;
    left:3%;
}





/* Instruction Panel Styles */
#instruction-panel {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 300px;
    max-height: 80vh;
    background-color: rgba(240, 240, 240, 0.95);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border: 1px solid #d0d0d0;
    overflow: hidden;
}

#message-container {
    flex-grow: 1;
    min-height: 100px;
    max-height: calc(80vh - 100px);
    margin-bottom: 15px;
    padding: 12px;
    background-color: #f8f8f8;
    border-radius: 5px;
    border-left: 4px solid #4CAF50;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

#instruction-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

#instruction-controls button {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s;
    font-size: 14px;
}

#instruction-controls button:hover {
    background-color: #45a049;
}

#instruction-controls button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Scrollbar styling */
#message-container::-webkit-scrollbar {
    width: 8px;
}

#message-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#message-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#message-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}



/* Remove the old instructionsBox styles */
.instructionsBox {
  display: none;
}

.instructionsBox{
    width:100%;    /*20*/
    height:7%;  /*100*/
    top:0%;      /*0*/
    left: 0%;   /*80*/
    border-width:medium;
    border-style: solid;
    border-color:  rgb(240, 7, 7);  /*3px*/
    background-color: rgb(248, 226, 226);
    position: absolute;
   /* overflow: hidden;*/
    text-align:left;
    display: flex;
    justify-content: center;
    
  }
  
  h6{
      border-width: thick;
      border-color:rgb(223, 139, 153);
      border-style: double;
      color: rgb(223, 8, 51);
      background-color: rgb(254, 235, 204);
      font-size:  1.8vw;  /*3.5*/
      
  }
  
  #message {
      text-align: center;
      justify-content: center;
     /* font-family: Arial, Helvetica, sans-serif;*/
      font-size: 1.8vw;  /*2.5*/ 
      margin-top: 0.4%;     
  }
  
#smooth{
    width: 17%;
    height: 20%;
    top:48%;
    left: 22.5%;
    position: fixed;
    transition-property:  all;
    transition-duration: 3s;
   transition-delay: 13s;
}
#cap{
    width: 8.4%;
    height: 3%;
    top:59.7%;
    left: 23.7%;
    visibility: visible;
    position: absolute;
    transition: all;
    transition-duration: 1s;
   /*transition-delay: 13s;*/
}

#captlc{
    width: 8.4%;
    height: 3%;
    top:59.7%;
    left: 66.7%;
    visibility:hidden;
    position: absolute;
    transition: all;
    transition-duration: 1s;
   /*transition-delay: 13s;*/
}


#b1back{
    width: 7.9%;
    height: 18%;
    top:50.9%;
    left: 52.4%;
    position: absolute;
  /* transition-property: all;
   transition-duration: 3s;*/
}
#b1middle{
    width: 16.15%;
    height: 18%;
    top:50.9%;
    left: 49.95%;
    position: absolute;
   /* transition-property: all;
   transition-duration: 3s;*/
}
#b1front{
    width: 23.19%;
    height: 21.58%;
    top:49.49%;
    left: 49.1%;
    position: absolute;
  /* transition-property: all;
   transition-duration: 3s;*/
}
#b2back{
    width: 7.9%;
    height: 18%;
    top:50.7%;
    left: 60.7%;
    position: absolute;
  /* transition-property: all;
   transition-duration: 3s;*/
}
#b2middle{
    width: 16.3%;
    height: 18%;
    top:50.7%;
    left: 58.2%;
    position: absolute;
  /* transition-property: all;
   transition-duration: 3s;*/
}
#b2front{
    width: 23.3%;
    height: 21.9%;
    top:49.1%;
    left: 57.38%;
    position: absolute;
  /* transition-property: all;
   transition-duration: 3s;*/
}
#b3back{
    width: 7.9%;
    height: 18%;
    top:50.5%;
    left: 69%;
    position: absolute;
  /* transition-property: all;
   transition-duration: 3s;*/
}
#b3middle{
    width: 16%;
    height: 18%;
    top:50.4%;
    left: 66.6%;
    position: absolute;
  /* transition-property: all;
   transition-duration: 3s;*/
}
#b3front{
    width: 23.2%;
    height: 21.58%;
    top:49.1%;
    left: 65.66%;
    position: absolute;
  /* transition-property: all;
   transition-duration: 3s;*/
}
#beaker0back{
    width: 7.9%;
    height: 18%;
    top:50.9%;
    left: 35%;
    position: absolute;
    visibility: hidden;
  /* transition-property: all;
   transition-duration: 3s;*/
}
#beaker0front{
    width: 23.2%;
    height: 21.75%;
    top:49.3%;
    left: 31.73%;
    position: absolute;
    visibility: hidden;
  /* transition-property: all;
   transition-duration: 3s;*/
}

#middleTLCchamber{
    width: 23.8%;
    height: 5.5%;
    top:63.3%;
    left: 53.4%;
    position: absolute;
    visibility: hidden;
}

#TCback1{
    width: 8.5%;
    height: 17.8%;
    top:50.88%;
    left: 56.5%;
    position: absolute;
  visibility:hidden;
}
#TCfront1{
    width: 22.4%;
    height: 17.5%;
    top:51.3%;
    left: 44%;
    position: absolute;
    visibility: hidden;
}

#middleTLCchamber1{
    width: 23.8%;
    height: 3.3%;
    top:65.4%;
    left: 53.4%;
    position: absolute;
    visibility: hidden;
}

#TCback{
    width: 7.9%;
    height: 18%;
    top:50.9%;
    left: 35%;
    position: absolute;
}
#TCfront{
    width: 21%;
    height: 17.7%;
    top:51.2%;
    left: 23.3%;
    position: absolute;
}


#bottombeakerliquid{
    width: 6.96%;
    height: 2%;
    top:66.8%;
    left: 35.97%;
    position: absolute;
    visibility: hidden;
    opacity:0%;
   transition-property: all;
   transition-duration: 1s;
   
}
#middlebeakerliquid{
    width: 6.96%;
    height: 2%;
    top:64.9%;
    left: 35.95%;
    position: absolute;
    visibility:hidden;
    opacity:0%;
   transition-property: all;
   transition-duration: 3s;
}

#topbeakerliquid{
    width: 14.3%;
    height: 8.9%;
    top:59%;
    left: 30.5%;
    position:absolute;
   visibility:hidden;
   opacity: 0%;
   transition-property: all;
   transition-duration: 3s;
}

#beaker0middle{
    width: 7%;
    height: 8%;
    top:60.7%;
    left: 40.95%;
    position: absolute;
    visibility: hidden;
    
}

#TLCbeakerback{
    width: 7.9%;
    height: 18%;
    top:50.9%;
    left: 52.4%;
    position: absolute;
    visibility: hidden;
}

#TLCbeakerfront{
    width: 23.19%;
    height: 21.58%;
    top:49.49%;
    left: 49.1%;
    position: absolute;
    visibility: hidden;
}

#introslide{
    width: 20%;
    height: 25%;
    top:54%;
    left: 38.4%;
    position: absolute;
    transition-property: all;
   /* transition-duration: 3s;*/
    visibility:visible;
}

#forceps1{
    width: 23%;
    height: 27%;
    top:54%;
    left: 36.8%;
    position: absolute;
    visibility: visible;
 }


#pencil1{
    width: 8.5%;
    height: 17.5%;
    top:61%;
    left: 26%;
    position:absolute;
    visibility: visible;
 }
 #pipette{
    height: /*2.5%; */2.2%;    /*1.9*/
    width: 16.5%;/*16.5*/
    top: 66%;
    left: 17.5%;
    position:absolute;
    visibility: visible;
    transition-property: all;
    transition-duration: 1s;
 }

 #pipettebeak{
    height: /*2.5%; */2.2%;    /*1.9*/
    width: 16.5%;/*16.5*/
    top: 66%;
    left: 17.5%;
    position:absolute;
    visibility: hidden;
    transition-property: all;
    transition-duration: 1s;
 }

#pipette3ml{
    width:0.57%;
    height:9%;
    top:55%;
    left:56.3%;
    position: absolute;
    opacity: 0%;
    transition: all;
    transition-duration: 0.95s;
}
#pipette35ml{
    width:0.56%;
    height:9%;
    top:53.89%;
    left:64.9%;
    position:absolute;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#pipette7ml{
    width:0.54%;
    height:17%;
    top:46.8%;
    left:73.2%;
    position:absolute;
    opacity:0%;
    transition: all;
    transition-duration: 1s;
}

#over7ml{
    width:0.54%;
    height:25%;  /*23*/
    top:38.8%;
    left:73.2%;
    position:absolute;
    opacity:0%;
}

#readymade7ml{
    height: 35.1%; /*30*/
    width: 1%;
    top: 28.8%; /*33.9*/
    left: 73%;
    position: absolute;
    visibility:hidden;
    transition-property: all;
    transition-duration: 1s;
}
#readymade3ml{
    height: /*39.55%; */35.2%;   /*29.9*/
    width: 1%;      /*1*/
    top:/* 24%; */29.17%;   /*34.17*/
    left: 56.1%;
    position: absolute;
    visibility: hidden;
    transition-property: all;
    transition-duration: 1s;
}

#readymade35ml{
    height: /*40%*/35.1%;
    width: 1%;
    top: 27.8%; /*33.05*/
    left: 64.68%;
    position:absolute;
    visibility:hidden;
    transition-property: all;
    transition-duration: 1s;
}
#p1{
    width:0%;
    height:0%;
    color:rgb(255, 255, 255);
    top:32%;
    left:2%;
    white-space: nowrap;
    font-size: 2vw;
    text-decoration: underline;
    position:absolute;
    transition: all;
    transition-duration: 2.5s;
    transition-timing-function: ease-in-out;
}


#nxt{
    width: 6%;
    height: 6%;
    top:80.8%;
    left: 90%;
    position: absolute;
    visibility: visible;
    border-width:medium; 
    border-style:solid ;
    border-color:black;
    border-radius: 40%;
    background-color: hotpink;
    font-size: 1.3vw;
 }

 #nxt:active{
    transform: scale(0.98);
    box-shadow: 7px 6px 28px 1px rgba(250, 35, 35, 0.24);
}

#toptable{
   width:80%;
    height:78%;
    position:absolute;
    top:10%;
    left:10%;
    visibility: hidden;
}

 #penintro{
    height:15%;
    width: 25%;
    top: 57.5%;
    left: 18%;
    position: absolute;
    visibility: visible;
    transition-property: all;
    /*transition-duration: 3s;*/
 }

 #m1{
    width:0%;
    height:0%;
    color:rgb(139, 1, 93);
    top:3.5%;
    left:1.7%;
    white-space: nowrap;
    font-size: 2.7vw;
    text-decoration: underline;
    position: absolute;
    visibility:hidden;
 }
 
#pencil{
    width: 13.5%; /*15*/
    height: 49%; /*40*/
    top:44%; /*49*/
    left: 28%;
    position: absolute;
    visibility:hidden;
    transition-property: all;
    transition-duration: 1.8s;
}

#ruler{
    width: 4.3%; /*4.5*/
    height: 64%; /*45*/
    top:22%;   /*40*/
    left:65%;
    position: absolute;
    transition-property: all;
    transition-duration: 1.8s;
    visibility: hidden;
    
}

#slide{
    width: 4.5%;
    height: 31%; /*25*/
    top:14%;  /*20*/
    left: 47%;
    position: absolute;
    transition-property: all;
    transition-duration: 2s;
    visibility: hidden;
}

#line{
    width: 4.11%;
    height: 0.23%;
    top:40.8%; /*41.56*/
    left: 47.03%;
    position:absolute;
    opacity: 0%;
    transition-property: all;
    transition-duration:1.8s;
   /* transition-timing-function:ease-in-out;*/
}

#line1{
    width: 4.2%;
    height: 0.25%;
    top:18%; /*22.7*/
    left: 47%;
    opacity: 0%;
    /*visibility: hidden;*/
    position:absolute;
    transition-property: all;
    transition-duration:1.8s;
   /* background-color: black;*/
}

#linedot{
    height:39%;
    width:39%;
    top:44.6%;
    left:37%;
    position: absolute;
    opacity:0%;
    transition: all;
    transition-duration: 4s;
}

#lineslide{
    width: 24%;
    height: 20%;
    top:56%;
    left: 50%;
    position: absolute;
    transition-property: all;
    transition-duration: 2s;
    visibility: hidden;
}

#pen{
    width:23%; /*25*/
    height:19%;
    top:55%;
    left:31%; /*30*/
    position: absolute;
    visibility: hidden;
    transition: all;
    transition-duration: 1s;
}

#hd1{
    width: 24%;
    height: 20%;
    top:56%;
    left: 38%;
    position: absolute;
    transition-property: all;
    transition-duration: 2.5s;
    visibility:hidden;
}

#hd2{
    width: 24%;
    height: 20%;
    top:56%;
    left: 38%;
    position: absolute;
    transition-property: all;
    transition-duration: 2.5s;
    visibility:hidden;
}

#ss{
    width: 3%; /*3.4*/
    height: 12.2%;
    top:56%;
    left: 45%;
    position: absolute;
    transition-property: all;
    transition-duration: 1.5s;
    visibility:hidden;
}

#wetslide{
    width: 2.89%;
    height: 11.8%;
    top:56.85%;
    left:59.35%;   
    position: absolute;
    transition-property: all;
    transition-duration: 1.5s;
    opacity:0%;
    visibility: hidden;

}

#forcepsmov{
     width: 27%;  /*27*/
     height: 25%;  /*25*/
     top:54%;    /*54*/
     left: 22%;
     position: absolute;
     visibility: hidden;
     transition-property: all;
     transition-duration: 1.5s;
}

#dryslide{
    width: 4.6%;
    height: 29.5%; /*25.05*/
    top:19.9%;  /*20*/
    left: 14%;
    position: absolute;
    transition-property: all;
    transition-duration: 1s;
    opacity: 0%;
    visibility: hidden;
    
}

#hindi{
    width:7%;
    position:absolute;
    border-radius: 40%;
    padding: 1%;
    font-size: 1vw;
    left: 45%;
    top: 50%;
    border: none;
    background-color: rgb(226, 239, 33);
    box-shadow: 2px 2px 0px 1px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;

}

#hindi:active{
    scale: 0.9;
}

#eng{
    position:absolute;
    border-radius: 40%;
    padding: 1%;
    font-size: 1vw;
    left: 55%;
    top: 50%;
    border: none;
    background-color: rgb(226, 239, 33);
   /* background-color: rgb(239, 33, 33);*/
    box-shadow: 2px 2px 0px 1px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;
}

#eng:active{
    scale: 0.9;
}

#lselector{
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 2vw;
    color: white;
    left: 37%;
    top: 40%;
}

#langselector{
    height: 100%;
    width: 100%;
    background-color: black;
    position: absolute;
}

#hovt{
    position: absolute;
    font-size: 1vw;
    color: black;
    background-color: white;
    border: 1px solid black;
    transition: all;
    transition-duration: 0.5s;
    /*left: 0%;
    top: 0%;*/
    visibility: visible;
}

#hpencil{
    position: absolute;
    width: 8.5%;
    height: 2%;
    top:67.5%;
    left: 26%;
}

#hintroslide{
    position: absolute;
    width: 6%;
    height: 3%;
    top:61%;
    left: 43.3%;
   
}

#hforceps1{
    position: absolute;
    width: 9.5%;
    height: 2%;
    top:64%;
    left: 44.3%;
   rotate: 145deg;
}

#hcap{
    position: absolute;
    width: 8.4%;
    height: 3%;
    top:59.7%;
    left: 23.7%;
}

#hpenintro{
    position: absolute;
    height:2%;
    width: 11.45%;
    top: 63.2%;
    left: 23.6%;
}
 
#hpipette{
    position: absolute;
    height: 1.9%;
    width: 16.5%;
    top: 66%;
    left: 17.5%;
}

#hTCfront{
    position: absolute;
    width: 7%;
    height: 17.5%;
    top:51.3%;
    left: 35.8%;
    
}

#hb1front{
    position: absolute;
    width: 7%;
    height: 18%;
    top:51%;
    left: 53.2%;
}

#hb2front{
    position: absolute;
    width: 7%;
    height: 18%;
    top:51%;
    left: 61.5%;
}

#hb3front{
    position: absolute;
    width: 7%;
    height: 18%;
    top:51%;
    left: 69.7%;
}

.arrow{
    position: absolute;
    width: 3%;
    height: 7%;
    top:69.7%;
    left: 24.8%;
    visibility:hidden;
}
.arrow.blink {
    animation: blink 1s steps(1, start) infinite;
}
  
  
@keyframes blink {
    0% {
      opacity: 2;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 2;
    }
  }
  
  #arrow{
    position: absolute;
    width: 2.3%;
    height: 7.5%;
    top:69.7%;
    left: 24.8%;
    visibility:hidden;
  }

#popbutton1{
    position: absolute;
    visibility: hidden;
    background-color: #49dc73; 
    color: #333; 
    font-family: sans-serif;
    font-size: 1.5vw;
    top:40%;
    left:37%;
    padding: 1% 2%;
    border-style: solid;
    border-color:black;
    border-radius: 5%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
#popbutton1:active{
    transform: scale(0.98);
    box-shadow: 7px 6px 28px 1px rgba(164, 28, 28, 0.24);
}

#popbutton2{
    position: absolute;
    background-color: #49dc73; 
    top:47%;
    left:64%;
    color: #333; 
    font-family: sans-serif;
    font-size: 1.5vw;
    padding: 1% 2%;
    border-style:solid;
    border-color: black;
    border-radius:5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(245, 254, 74, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.5), inset -1px -1px 2px rgba(245, 254, 74, 0.1);
    transition: all 0.2s ease-in-out;
}
#popbutton2:active{
    transform: scale(0.98);
    box-shadow: 7px 6px 28px 1px rgba(164, 28, 28, 0.24);
}

  .popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 999;
  }
  
  .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width:40%;
    height:50%;
    transform: translate(-50%, -50%);
    background-color: rgb(248, 189, 189);
    padding: 0.5%;
    font-size: 1.5vw;
    border-width:medium;
    border-style:solid; 
    border-color:#f7f6f6;
    text-align: center;
    border-radius: 5px;
  }
  
  .popup-close {
    position: absolute;
    top: 30%;
    right: 50%;
    color: #ccc;
    font-size: 1.8vw;
    font-weight: bold;
    cursor: pointer;
  }
  
  .popup-choices {
    margin-top: 3%;
  }
  
  .popup-choices label {
    display: block;
    margin-bottom: 4%; /*3*/
  }
  
  .popup-choices input[type="radio"] {
    margin-right: 3%;
   transform: scale(1.3);
  }


  #popup {
    display: none;
    /* ... other styling as desired ... */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(248, 189, 189);
    padding: 0.5%;
    font-size: 1.5vw;
    border-width:medium;
    border-style:solid; 
    border-color: #6f1212;
    text-align: center;
    border-radius: 10%;
  }

  #factbutton{
    position: absolute;
    visibility: hidden;
    background-color: #e9fa2b; 
    color: #000000; 
    font-family: sans-serif;
    font-size: 1.5vw;
    top:40%;
    left:37%;
    padding: 1% 2%;
    border-style: solid;
    border-color: rgb(238, 97, 97);
    border-radius: 5%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  #factbutton:active{
    transform: scale(0.98);
    box-shadow: 7px 6px 28px 1px rgba(164, 28, 28, 0.24);
}

#closefactb{
    position: absolute;
    visibility: hidden;
    background-color: #e9fa2b; 
    color: #000000; 
    font-family: sans-serif;
    font-size: 1.5vw;
    top:25%;
    left:45%;
    padding: 1% 2%;
    border-style: solid;
    border-color: rgb(238, 97, 97);
    border-radius: 5%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  #closefactb:active{
    transform: scale(0.98);
    box-shadow: 7px 6px 28px 1px rgba(164, 28, 28, 0.24);
}
h5{
    color: #6211be;
    text-decoration: underline;
}

#mytable{
    border-collapse: collapse;
    width:50%;
    height:55%;
    position: absolute;
    left:39%;
    top:20%;
    visibility:hidden;
    border-width:thin ;
    border-style:solid;
  }
  tr:nth-child(even) {
    background-color: #f8dabe;
  }
  tr:nth-child(odd) {
    background-color: #fff;
  }
  th, td {
    border-width: medium;
    border-style:solid ;
    border-color: #10030b;
    text-align: center;
  }
  td{
    padding:1px;
    font-size: 1.8vw;
  }
  th{
    font-size: 2vw;
    background-color: rgb(251, 140, 112);
    border-width:medium;
    border-style:solid;
    border-color: #10030b;
  }

  #usertable{
    border-collapse: collapse;
    position: absolute;
    height:55%;
    width:12%;
    top:15%;
    left:65%;
    visibility:hidden;
  }

  .myinput{
    width:100%;
    height: 100%;
    font-size: 1.5vw;
    text-align: center;
   /* box-sizing: border-box;*/
  }

#formula{
    position: absolute;
    visibility: hidden;
    left:-13%;
    top:40%;
}

#submitresult{
    position: absolute;
    visibility:hidden;
    top:72%; /*67*/
    left:68%;
    height:5%;
    width:5%;
    background-color: #e9fa2b;
    font-size: 1.3vw;
    border-radius: 30%;
}
#submitresult:active{
    transform: scale(0.98);
    box-shadow: #fa9623;
}

#end{
    color: #f7f8f7;
    font-size: 4vw;
    position: absolute;
    left:25%;
    top:25%;
    visibility: hidden;
}
.confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
  }
  
  .confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: hsl(rand(), 100%, 50%); /* Random colors */
    animation: fall 2s linear infinite;
  }
  
  @keyframes fall {
    from {
      top: -50px;
      opacity: 0;
    }
    to {
      top: 100vh;
      opacity: 1;
    }
  }