/*
font-family: 'Comfortaa', cursive;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
*/
html, body {
    margin: 0;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

body.light-mode {
    background-color: rgb(227, 227, 227);
    color: #322c3a;
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 100px auto 100px;
    grid-template-areas:
    "aside header"
    "aside main"
    "footer footer";
}

aside {
    width: 80px;
    background-color: #BDBDBD;
    grid-area: aside;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}
aside a.menu{
    text-align: center;
    display: block;
    text-decoration: none;
    color: #322c3a;
    font-size: 12px;
    margin-bottom: 15px;
}
aside a.menu .material-icons{
    background-color: #BDBDBD;
    display: block;
    color: #322c3a;
    border-radius: 50px;
    font-size: xx-large;
    margin-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
    width: 62px;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}
aside a.menu:hover .material-icons{
    background-color: #E0E0E0;
}
aside a.menu.ativo .material-icons{
    background-color: #d2e28b;
}
header {
    grid-area: header;
    font-family: 'Comfortaa', cursive;
    padding-left: 20px;
    font-size: xxx-large;
    line-height: 100px;
    color: #322c3a;
}
main {
    background-color: #eeeeee;
    grid-area: main;
}



footer {
    grid-area: footer;
}