body {
      background-color: rgb(39, 39, 38);

}
nav{
   
    height:30px;
       display: flex;
    justify-content: space-between;
    align-items: center;

      

        background: rgba(255, 255, 255, 0.15);
    
   
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
  
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    color: white;
 
      }
      nav a {
    color: white;
    text-decoration: none;
}

   
@media (max-width: 600px) {
    nav {
      display:flex;
   
        align-items: center;
        padding: 12px 15px;       
        gap: 10px;                
    }
}

.social-icons {
    display: flex;
    gap: 6px;
    justify-content: center;
    
}

.social-icons a {
    font-size: 18px;
    color: #D6D5A8;
    transition: 0.3s;
}




h1{

    color:#97A87A;       
    font-size: 80px;    
    font-weight: bold;    

    margin-top: 15px; 
        padding-bottom : 150px;
}
h3{
  font-size: 22px;
  color:#D3ECA7; 
}
h4{
  margin-top: -80px;
  font-size: 42px;
  color:#97A87A; 
}
   .font {
    font-size: 11px;   
    color: #00f2ff;    
}
   
 main {
     margin-top :10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
 

     backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 

    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
    padding: 20px;
    text-align: center;
    color: white;
}
@media (max-width: 600px) {
  h1{   
    font-size: 30px;  

}
p{
  font-size:30px;
 color: #97A87A;
}
   
   main section {
        width: 100%;
    }
    main {
       
      display:flex;
      
        padding: 12px 15px;     
        gap: 10px;      
         flex-direction: column;   
        align-items: center;   

    }
    #myVideo{
      width:350px;
    }
  }

#myVideo{
   backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
  
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    text-align: center;
    color: white;
   
}

.container1{
    margin-top: 3px; 
    position: relative;   
   color:#97A87A; 
    display: flex;
    justify-content: center;
    align-items: center;



  backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 

    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
    padding: 20px;
    text-align: center;

}

.container2{
    margin-top: 3px; 
    position: relative;   
   color:#97A87A; 
    display: flex;
    justify-content: center;
    align-items: center;



  backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 

    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
    padding: 20px;
    text-align: center;

}


#camera {
  


    transform: scaleX(-1);
  
    display: block;       
    margin: 20px auto;     
    width: 250px;
    border-radius: 10px;
}



















 .container {
  height:40vh;
    margin-top: 10px; 
    position: relative;   
  
    display: flex;
    justify-content: center;
    align-items: center;



  backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 

    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
    padding: 20px;
    text-align: center;
    color: white;


}




/* .btn {

    font-size: 25px;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: rgb(8, 234, 250);
    cursor: pointer;
    margin: 20px 10px;
     gap: 10px;
     
}
.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
      gap: 20px;
   margin-top: -20px;

} */
#no {
    position: absolute;   
}


.btn {
 color:#1B2430;
    font-size: 22px;
    padding: 8px 18px;
    border-radius: 10px;
    background-color: #6D5D6E;
    cursor: pointer;
    border: none;
    transition: 0.3s ease;
}

.buttons {
    /* position: relative;   
    display: flex;        
    justify-content: center; */
    /* align-items: center; */
    gap: 50px;           
    margin: 20px 10px;   
  
}
.btn:hover {
    transform: scale(1.1);
}



#message {
    margin-top: 10px;
    font-size: 25px;
    font-weight: bold;
    color: #7F5283;
}


.container {
    overflow: hidden;
}




/* #no {
    position: absolute;   
} */