html, body {
    font-family: Stem;
    margin:0;
    color:var(--text-color);
}

#app {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0, 1fr) auto;
    grid-template-areas: 
        'header'
        'main'
        'footer'
    ;
   box-sizing: border-box;
}
    #app > #top-container {
        grid-area: header;
        height:30pt;
        display: grid;
        grid-template-columns: minmax(350px, 600px) minmax(min-content, max-content) 1fr;
        position: sticky;
        top:0;
        z-index:300;
        background-color: var(--primary-bg-color);

    }
        #logo-container {
            display:flex;
            grid-area: 1 / 1 / span 1 / span 1;
            background-image: url("/img/logo.svg");
            background-repeat:no-repeat;
            background-size:35pt;
            background-position: 0% 50%;
            padding-left:50pt;
            align-items: center;
            cursor:pointer;
        }
        #menu-container {
            grid-area: 1 / 2 / span 1 / span 1; /* Row start, Column start, row end, column end */
            display:grid;
            grid-auto-flow: column;
        }
    #app > #main_container {
        grid-area:main;
        display:grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        /*grid-auto-rows: 350px;*/
        gap:5pt;
    }
        .button-container {
            height:30px;
            grid-column-end: span 6;
        }
        .graph-container {
            height:350px;
            border:var(--border-color);
            border-radius:5pt;
            align-items: center;
            justify-content: center;
            position:relative;
            grid-column-end: span 2;
        }
        .graph-container.full {
            grid-column-end: span 6;
        }
        .graph-container.half {
            grid-column-end: span 3;
        }
    #footer {
        grid-area:footer;
        display:flex;
        align-items: center;
        justify-content: center;
        height:30pt;
    }