body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}


header {
    background-color: black;
    color: white;
    padding: 0px 0px 0px 0px;
    }
    
#navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    }    

    
header nav a {
    display: inline-block;
    margin-left: 5px;
    }

    
header nav b { display: none;}    
header #burger { display: none; z-index: 500;}
header #icons { display: block; }

header a {
    color: white;
    text-decoration: none;
    }
    
#icons a:hover path    { fill: #FF0000; }

.aslink,
a {
    text-decoration: none;
    color: #FF0000; 
}

a:hover { color: #800000;}


 @media only screen and (max-width: 600px) {
    header #burger { display: block; cursor: pointer;}
    header #icons { 
        display: none; 
        background-color: #FF0000;
        padding: 40px 10px 00px 10px;
        height: 100vh;
        width: 180px;
        z-index: 10;
        }
    header nav {
        position: absolute;
        right: 0px;    
        top: 0px;
        }
    header nav a { 
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 7px;
        }
    header nav .icon { padding-left: 10px;}    
    header nav b { display: inline; margin-left: 15px; margin-right: 15px;}    
    
    header nav a:hover { color: #000000; }
    #icons a:hover path { fill: #000000; }
    
}
    
.logo {
    font-size: 17px;
    font-weight: bold;
    }    
    
.column {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    }    
    
 @media only screen and (max-width: 800px) {
     .column {
        padding-left: 15px;
        padding-right: 15px;
        }
    }
h1 {
    font-size: 2.5em;
    margin-top: 2em;
    margin-bottom: 2em;
    }    
    
.controls {
        z-index: 150;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        }        

.fixed button,        
.controls button {
        background-color: black;
        border: none;
        font-size: 1.2em;
        padding: 6px 10px 6px 10px;
        margin: 0px 10px 0px 10px;
        cursor: pointer;
        color: white;
        }     
.controls button:hover {
        background-color: #FF0000;
        }        
        

.pad {
        margin-top: 30px;
        margin-bottom: 30px;
        }
.paddie {
        margin-top: 10px;
        margin-bottom: 10px;
        }
        
        
#list ul { 
        list-style: none;
        padding-left: 0;
        }
#list li {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 5px 0px 5px 0px; 
        }
#list img { margin: 0pc 10px 0px 10px;  }
#list a { text-decoration: none; color: black; }
/*#list .nolink b { color: gray; }*/
#list i { font-style: normal; }
        

.halign {
        display: flex;
        flex-direction: row;
        align-items: center;    
}
.halign .hpad { margin-left: 15px; margin-right: 15px;}



.main-text {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
}    
    
.grey-text {
    font-size: 0.8em;
    color: grey;
}   


#emptyList {
    padding: 10px 10px 10px 10px;
    
    }
    
    
.forwardIcon:hover { fill: black; }