:root {
--primary-color: #cc0000;
--secondary-color: #7c0000;

}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.app-header{
    flex-shrink: 0;
    background : white; 
     height: 25px; 
color : #444;
padding : 0px;
font-size: 12px;
margin-top : 0px;
flex-direction: column;
vertical-align: middle;
}
.app-header ul{
    display: flex;
   vertical-align: middle;
    align-items : center;
    justify-content : space-around;
    list-style : none;
}

.app-header ul li {
    display: flex;
    flex-direction: column;
    align-items : center;
    padding: 0px;
    vertical-align: middle;

}
.app-header ul li a{
    display: none;
    flex-direction: column;
    align-items : center
    color:black;
    
}

.white{
    background-color: white;

}
.app-header ul li i{
    
    font-size: 8px;
}

@media(min-width:325px) {
    .app-header{
        flex-shrink: 0;
        background : white; 
         height: 25px; 
    color : #444;
    padding : 0px;
    font-size: 8px;
    margin-top : 0px;
    flex-direction: column;
    vertical-align: middle;

    }
    .app-header ul{
        display: flex;
       vertical-align: middle;
        align-items : center;
        justify-content : space-around;
        list-style : none;
        vertical-align: middle;

    }
    
    .app-header ul li {
        display: flex;
        flex-direction: column;
        align-items : center;
        padding: 0px ;
        vertical-align: middle;
    
    }
    .app-header ul li a{
        display: flex;
        flex-direction: column;
        align-items : center;
        color:black;
    }
    .white{
        background-color: white;
    
    }
    .app-header ul li i{
        
        font-size: 12px;
    }
    
}
@media(min-width:400px) {
    .app-header{
        flex-shrink: 0;
        background : white; 
         height: 25px; 
    color : #444;
    padding : 0px;
    font-size: 14px;
    margin-top : 0px;
    flex-direction: column
    vertical-align: middle;

    }
    .app-header ul{
        display: flex;
       vertical-align: middle;
        align-items : center;
        justify-content : space-around;
        list-style : none;
    }
    
    .app-header ul li {
        display: flex;
        flex-direction: column;
        align-items : center;
        padding: 0px;
        vertical-align: middle;
    
    }
    .app-header ul li a{
        display: flex;
        flex-direction: column;
        align-items : center;
        color:black;
    }
    .white{
        background-color: white;
    
    }
    .app-header ul li i{
        
        font-size: 12px;
    }
    
}
@media(min-width:1000px) {
   .app-header{
       display: none;
   }
}