:root {
    --header-color: #434b52;
    --navbar-color: #222d32;
    --footer-color: #fff;
    --content-color: #ddd;
    --light-text-color: #eee;
    --SDI-blue: #3e7998;
}

html,body {
    margin:0;
    font-family:Arial,sans-serif;
    font-size:16px;
}

ul,ol{
    list-style:none;
}
.grid{
    display:grid;
    min-height: 100vh;
    min-width: 100vw;
    grid-template-columns: 200px auto;
    grid-auto-rows: 160px auto 50px;
    grid-template-areas:
        "header header"
        "nav content"
        "nav footer";
}

.header {
    grid-area: header;
    background-color: var(--header-color) ;
    display: flex;
    font-size: 1.6rem;
    align-items: center;
    color: white;
    justify-content: center;
    flex-wrap:wrap;
    padding: 10px 0;
}
hr {
    border: 0;
    height: 1px;
    background: var(--SDI-blue);
}
.header logo{        
    margin-left:20px;
}

.content{
    grid-area: content;
    background-color: var(--content-color);
}

.nav {
    grid-area: nav;
    background-color: var(--navbar-color);
    color: var(--light-text-color);
}
.routeList{
    padding:0 15px;
}
    .routeList > h1,h2,h3,h4,h5,h6{
        margin-bottom:0;
    }
    .routeList > ul{
        margin:8px 0;
        padding-left: 25px;
        font-size: .9rem;
    }
    
    .routeList > ul > li::before{
        content:"> ";
    }
.footer{
    grid-area:footer;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background-color: var(--footer-color);
    font-size: 0.8rem;
   
}
    .footer label {
        margin-bottom: 10px;
    }
@media screen and (min-width: 950px){
    .header logo {
        left: 0;
        position: absolute;
        margin-left: 20px;
    }
    .header{
        flex-wrap:nowrap;
    }    
}
@media screen and (min-width: 627px){
    .grid {
        grid-auto-rows: 80px auto 50px;
        padding: 0;
    }
}