*{
  
   
}


body{ 
    

   
    font-family: "Roboto";
    
    
   
}

ul {
color: red;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

ul.topnav li{
     
    
    
    list-style-type: none;
    
    margin: 0;
    padding: 0;
    background-color:#ffffff;
   
}

ul.topnav li a  {
     font-weight: 100;
    display: block;
    color: #858585;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover {
   
    color: rgb(0, 166, 255);
}


#logo{
    font-weight: 700;
    font-size: 22px;
    color: red;
}

#main-area{
    background-color: white;
    display: flex;
   justify-content: center;
 /*  align-items: center;*/ 
    margin-top: 25px;
    
    font-weight: 200;
    font-size: 60px;

}


@keyframes animate_on_your_hand {
    0%{
    
        width: 0px;
        height: 80px;
       
    }
    15%{
        width: 120px;
        height: 80px;
       
    }
    30%{
        width: 250px;
        height: 80px;  
    }
    45%{
        width: 400px;
        height: 80px;
    }
    90%{
        width: 400px;
        height: 200px;  
    }
    
    


}





 #on_your_hand{
    position: relative;
    overflow:hidden;
    width: 400px;
    height: 160px;
    animation:  animate_on_your_hand 3s linear forwards; 
    text-align: center;
  
     
     
}

#left{
   display: flex;
  flex-direction: row;
    justify-content: space-between;
    

}

#content_left{
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 40px;
}


#app_main_screen_image{
    justify-content: right;
    height: 800px;
}

#content{
    
    background: #ffffff;
    background: linear-gradient(130deg, rgba(255, 255, 255, 1) 0%, rgb(253, 252, 252) 65%, rgb(214, 214, 214) 100%);
}

.container {
  /* Only Glass Effect Relevant Code */
  background-color: #c8c8c82c;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 1px 1px 5px 1px #13131354;
  border: 1px solid #e9e9e94f;
}


.glass-text{
 display: block;
 padding: 30px;
 font-size: 25px;
 font-weight: 300;
}




#bottomNav{
   
    position: relative;
    bottom: 0px;
    text-align: center;
    font-weight: 200;
    font-size: 20px;
    padding: 10px;
}



#bottomNav img{
    position: absolute;
    
   
    bottom: 10px;
    
}

a{
    text-decoration: none;
    color: black;
}


@keyframes animate_on_your_hand_small {
    0%{
    
        width: 0px;
        height: 70px;
       
    }
    25%{
        width: 50px;
        height: 70px;
       
    }
    50%{
        width: 150px;
        height: 70px;  
    }
    75%{
        width: 200px;
        height: 70px;
    }
    90%{
        width: 250px;
        height: 70px;  
    }
    
    


}




@media (max-width:1000px) {
 ul {
color: red;
   display: flex;
   flex-direction: column;
   align-items: center;
  
}
    .glass-text{
 display: block;
 padding: 20px;
 font-size: 30px;
 font-weight: 300;
}
  
   #logo{
    font-size: 30px;
   }

   #contact{
    font-size: 25px;
   }
    #content{
        background:none;
    }
    #app_main_screen_image{
       display: flex;
    justify-content: center;
    align-content: center;
    height: 790px;
    
    }
    
    #on_your_hand{
    font-weight: 35px;
    position: relative;
    overflow:hidden;
    
    height: 150px;
   
    animation:animate_on_your_hand_small 3s linear forwards;
    text-align: center;
    }
     
    
    
   
    #main-area{
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }   

   
  
    #left{
  
     display: flex;
     flex-direction: column;
    }

    #image_area{
        padding-top: 30px;
        display: flex;
        justify-content: center;
    }


  
}