@font-face {
  font-family: AtkinsonHyperlegible;
  src: url('/fonts/atkin/AtkinsonHyperlegible-Regular.ttf');
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    width: 100vw;
    font-size: 1em;
    font-family: AtkinsonHyperlegible, Muli-Regular, Calibri;
}

#content {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "header header"
        "nav nav"
        "aside main"
        "footer footer";

    height: 100vh;
    background-color: #f0f0f0;
    padding: 20px;
}

header, nav, aside, main, footer, section, article {
    padding: 20px;
    margin: 10px 0px;
    border-radius: 1rem;
}

header {
    grid-area: header;
    background-color: #fef7e0;
    border: 1px solid #d56e0c;
}

nav {
    grid-area: nav;
    background-color: #fce8e6;
    border: 1px solid #ea4335;
}

aside {
    grid-area: aside;
    background-color: #ceead6;
    border: 1px solid #188038;
    margin-right: 20px;
}

aside ul {
    padding-left: 20px;
}

aside li::marker {
    color: #d0cce3;
}

main {
    grid-area: main;
    background-color: #e8f0fe;
    border: 1px solid #1967d2;
    min-height: 0;
}

footer {
    grid-area: footer;
    background-color: #fce8e6;
    border: 1px solid #ea4335;
}

section {
    background-color: #ceead6;
    border: 1px solid #188038;

    height: 95%;
    min-height: 0;
}

article {
    background-color: #fef7e0;
    border: 1px solid #d56e0c;
    height: 90%;
}


/** end menu collapsible */


@media only screen and (max-width: 600px) {
    body {
        
    }
}