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

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

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

}
.app-footer ul li a{
    display: flex;
    flex-direction: column;
    align-items : center;
    color:black;
}
.white{
    background-color: white;

}
.app-footer ul li i{
    
    font-size: 7px;
}

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

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

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

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