* {
    margin: 0px;
    padding: 0px;
}

body {
    color: #FDFDFD;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;

    display: grid;
    grid-gap: 5px;
    grid-template-areas:
        "header header header"
        "aside main main"
        "footer footer footer"
    ;
    grid-template-columns: 20vw auto auto;
    grid-template-rows: 50px calc(100vh - 100px) 50px;
}

.header {
    align-items: center;
    background-color: #e22020;
    display: flex;
    grid-area: header;
    padding: 0px 10px;
}

.aside {
    background-color: #56bffc;
    grid-area: aside;
    padding: 10px;
}

.main {
    background-color: #BC20E2;
    grid-area: main;
    padding: 10px;
}

.footer {
    align-items: center;
    background-color: #81e220;
    display: flex;
    grid-area: footer;
    justify-content: center;
}