@media (max-aspect-ratio: 4/3) and (max-width: 499px) {
    #avatarlogo img {
        max-height: 40px !important; 
        height: auto !important;     
    }

    #user-info {
        font-size: 0.60em !important;        
        max-height: 28px;                    
        line-height: 1.05;                   
        padding: 1px 4px;                    
        margin: 1px auto !important;         
    }
    #user-info .login,
    #user-info .admin-link {
        font-size: inherit !important;       
        padding: 1px 4px !important;         
    }
    #user-info form {
        display: inline;                     
    }

    #restartbtn,
    #headstopbtn {
        font-size: 0.60em !important;       
        padding: 1px 4px !important;        
        min-width: 0;                      
        height: 24px !important;            
        border-radius: 12px !important;     
    }
    #restartbtn img,
    #headstopbtn img {
        width: 12px !important;            
        height: 12px !important;
        padding: 1px !important;
    }
    #restartbtn .btntext,
    #headstopbtn .btntext {
        padding-right: 1px !important;    
    }


    #multimedia-container {
        top: 8vh;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;           
        max-width: 390px;      
        min-width: unset;      
        box-sizing: border-box;
        height: 40vh;
    }


}