/*
    Defaults
*/
*{
    box-sizing: border-box
}

body{
    color: #888888;
    background: #0b0b0f;
    font-family: Helvetica, sans-serif;
    font-size: x-large;
}

#wrapper{
    margin: 0 auto;
    width: 80%;
    background: #0b0b0f;
    display: grid;
    grid-gap: 10px;
    grid-template:
        'header header' auto
        'main main' auto
        '. footer'  /
        5fr 1fr;  
}

header{
    padding: 1px 10px;
    margin: 10px;
    grid-area: header;
    background-color: #38344b;
}

main{
    padding: 10px 30px;
    grid-area: main;
    background-color: #38344b;
    display: block;
}

footer{
    grid-area: footer;
    margin: 10px;
    font-size: 70%;
    text-align: center;
    padding: 10px;
    background: #38344b;
}