*{
               box-sizing: border-box;

          }
           #light{
               display: none; 
          } 
          body{
               background: #FFF;
               font-family: Sans-Serif;
               display: flex;
               justify-content: center;
               align-items: centre;
          }
          .container{
               margin: auto;
               padding: 1.5rem;
               color: #333;
     
          }
          .btn{
               background: none;
               border: none;
               outline: none;
          }
          .dark-img{
               width: 100px;
          }
          .main-btn{
               border: none;
               border-radius: 5px;
               background: #10B982;
               font-size: 1rem;
               font-weight: bold;
               padding: 10px;
               color: #F5F7FA;
          }
          .random{
               color: #10B982;
          }
          .intro{
            margin: 50px 0;
          }
         
          .sub{
               border-bottom: 1px solid #ADAEAF;
               padding: 20px 0;
               margin: 15px auto;
          }
          .main-btn{
               margin: 15px 0;
               outline: none;
          }
          .password-container{  
               background: #263548;
               display: block;
               border: none;
               padding: 15px;
               font-weight: bold;
               border-radius: 5px;
               width: 50%;
               max-height: fit-content;
               outline: none;
          }
          .fine-print{
     font-size: 0.75rem;
     letter-spacing: 1px;
     color: #858585;
}
          .output{
               margin: 0 auto;
               padding: 0;
               display: flex;
               gap: 20px;
               justify-content: space-between;
               color: #10B982;
          }

          #refresh{
               display: none;
          }
          p{
               font-weight: bold;
          }
          .input{
               color: white;
          }
          .headphone{
           border-radius: 10px;
           width: 70px;
           height: 10px;
           margin: 8px auto;
           background: #333;
          }
          .button{
           border-radius: 50%;
           width: 60px;
           height: 60px;
           margin: 20px auto;
           background: #333;
           cursor: pointer;
          }
          .iframe{
           padding: 10px 25px 3px;
           border-radius: 16px;
           box-shadow:  3px 3px 3px #b3b3b3,
             -3px -3px 5px #b3b3b3;
             background: #fff;
          }
          #screen{
           width: 100%;
           height: 500px;
           background: #333;
           display: none;
          }
          iframe{
           border: none;
           background: #333;
          }
@media (min-width: 500px){
     body{
          background: #fff;
     }
     .container{
          color: #333;
     }
}