html,
body {
    height: 100%;
    margin: 0;
    background-color: #F6F7F8;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    display: grid;
    grid-template-columns: 232px 1fr;
    grid-template-rows: 96px 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar main";
    height: 100vh;
}

#side-bar {
    grid-area: sidebar;
    background: #2A3647;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#header {
    grid-area: header;
    height: 96px;
}

main {
    grid-area: main;
    padding: 40px;
    overflow-y: auto;
    background-color: #F6F7F8;
    box-sizing: border-box;
    max-width: 1920px;
    scrollbar-gutter: stable;
}

@media (max-width: 1100px) {
    main {
        padding: 16px;
    }

    body {
        grid-template-columns: 1fr;
        grid-template-rows: 96px 1fr 80px;
        grid-template-areas:
            "header"
            "main"
            "sidebar";
    }

    #side-bar {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
    }

    main {
        padding-bottom: 80px;
    }

    #greeting-section {
        display: none;
    }
}