*{
    box-sizing:border-box;
}

html{
    display:block;
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}

body{
    display:flex;
    position:relative;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;

    font-family:sans-serif;
}

body>nav{
    display:flex;
    position:relative;
    flex-flow:column nowrap;
    width:10rem;
    height:100%;

    background-color:#282828;
}
body>nav>section{
    display:block;
    position:relative;
    width:100%;
    height:auto;
}
body>nav>section:first-of-type{
    flex-grow:1;
}
body>nav>section>button{
    display:block;
    position:relative;
    width:100%;
    height:2.5rem;
    padding:0 1rem 0 1rem;

    text-align:left;
    font-size:1.25rem;
    cursor:pointer;

    background-color:#282828;
    color:#c0c0c0;
    border:0;
    outline:0;
}
body>nav>section>button.selected{
    background-color:#343434;
}
body>nav>section>button:hover{
    background-color:#383838;
    color:hsl(0, 0%, 88%);
}

body>nav>header{
    display:block;
    position:relative;
    width:100%;
    height:3rem;

    line-height:3rem;
    text-align:center;
    font-size:1.8rem;
    font-weight:bold;
    font-variant:small-caps;

    color:#d0d0d0;
    border-bottom:1px solid #404040;
}

main{
    display:flex;
    position:relative;
    flex-flow:column nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    width:100%;
    height:100%;

    flex-grow:1;

    background-color:#202020;
}

main>nav{
    display:flex;
    position:relative;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    width:100%;
    height:3rem;
    flex-shrink: 0;
    padding:0 0 0 0.25rem;

    background-color:#282828;
    border-bottom:1px solid #404040;
}

main>nav>section:first-child{
    display:flex;
    position:relative;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    height:100%;
}

main>nav>section:last-child{
    display:flex;
    position:relative;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content:flex-end;
    height:100%;
    flex-grow:1;
}

main>nav>section>button{
    display:block;
    position:relative;
    width:auto;
    height:calc(100% - 6px);
    padding:0 1rem 0 1rem;
    margin:3px 0.25rem 0 0;
    text-align:left;
    font-size:1.25rem;
    cursor:pointer;

    background-color:inherit;
    color:#c0c0c0;
    border:0;
    border-radius:0.5rem;
    outline:0;
}
main>nav>section>button:hover{
    background-color:#383838;
    color:#e0e0e0;
}
main>nav>section:first-child>button {
    background-color:#353535;
}
main>nav>section:first-child>button:hover {
    background-color:#404040;
    color:#e0e0e0;
}

main>nav>section>div{
    display:block;
    position:relative;
    width:auto;
    height:100%;
    padding:0 1rem 0 1rem;

    line-height:3rem;
    text-align:left;
    font-size:1.25rem;

    color:#e0e0e0;
}