@media (max-width: 350px)
    
       {
        .band-1 {
            height: 49px;
            top: 6px;
        }
        .band-1:nth-child(4) {
            
            height: 47px;           
            top: 7px;
        }
        }   
     
        
    @media (max-width: 330px)
    
       {
        .band-1 {
            height: 46px;
            top: 7px;
        }
        .band-1:nth-child(4) {
            
            height: 44px;           
            top: 8px;
        }
        }
     
  
     @media (max-width: 315px)
    
       {
        .band-1 {
            height: 44px;
            top: 8px;
        }
        .band-1:nth-child(4) {
            
            height: 42px;           
            top: 9px;
        }
        }
        
        
        @media (max-width: 300px)
    
       {
        .band-1 {
            height: 42px;
            top: 9px;
        }
        .band-1:nth-child(4) {
            
            height: 40px;           
            top: 10px;
        }
        }
        
        @media (max-width: 290px)
    
       {
        .band-1:nth-child(2){
            height: 41px;
            top: 9px;
        }
        .band-1:nth-child(3) {
            
            height: 41px;           
            top: 9px;
        }
        }
        
      @media (max-width: 280px)
    
       {
        .band-1:nth-child(2){
            height: 40px;
            top: 9.5px;
        }
        .band-1:nth-child(3) {
            
            height: 40px;           
            top: 9.5px;
        }
        }  
        
        @media (max-width: 270px)
    
       {
        .band-1:nth-child(2){
            height: 38px;
            top: 10px;
        }
        .band-1:nth-child(3) {
            
            height: 38px;           
            top: 10px;
        }
        }  
        
        @media (max-width: 260px)
    
       {
        .band-1:nth-child(2){
            height: 38px;
            top: 10px;
        }
        .band-1:nth-child(3) {
            
            height: 38px;           
            top: 10px;
        }
        }  
        
        @media (max-width: 250px)
    
       {
        .band-1:nth-child(1){
            height: 40px;
            top: 10px;
        }
        .band-1:nth-child(2) {
            
            height: 36px;           
            top: 11px;
        }
         .band-1:nth-child(3) {
            
            height: 36px;           
            top: 11px;
        }
         .band-1:nth-child(4) {
            
            height: 39px;           
            top: 10px;
        }
        }  
        
        @media (max-width: 240px)
    
       {
       .band-1:nth-child(1) {
    height: 39px;
}

.band-1:nth-child(2) {
    height: 35px;
}

.band-1:nth-child(3) {
    height: 35px;
}

.band-1:nth-child(4) {
    left: 145px;
    height: 39px;
    }

        }  
        
      
        /* Hide the warning by default */
.small-screen-warning {
    display: none;
    background-color: #ffcccc;
    color: #800000;
    padding: 10px;
    border: 1px solid #ff0000;
    text-align: center;
    font-size: 14px;
    margin: 10px 0;
    border-radius: 5px;
}

/* Show the warning if the screen is smaller than 250px */
@media (max-width: 250px) {
    .small-screen-warning {
        display: block;  /* Show the message */
    }
    main {
        display: none;
    }
    .footer {
        display: none;
    }
    #band5html {
        display: none;   
    }
    
    }        
    
    @media (max-height: 360px) {
    .nav-links { margin-top: 20px;}
  /*  #btnInstall { margin-top: 20px;}*/
    }
    
    @media (max-height: 310px) {
    /*.nav-links { margin-top: 10px;
                 gap: 5px;*/
    }
    
    }        
#statusDot {
            position: fixed;
            width: 3px;
            height: 3px;
            border-radius: 50%;     
            bottom: 20px;
            left: 20px;
             }