@import 'colorsJM.css';

/* Style the header */
.Basic-grid-header {
    background-color: var(--colorBC);
    grid-area: header;
    font-size: 2em;
    font-stretch: extra-expanded;
    display: flex;
    align-items: center;
}

    .Basic-grid-header::before, .Basic-grid-header::after {
        flex: 1;
        content: '';
        padding: 0.1em;
        background-color: var(--colorA);
        margin: 1em;
    }

/* The grid container */
.Basic-grid-container {
    display: grid;
    grid-template-areas:
        'header header header'
        'left middle right';
    /*'footer footer footer';*/
    /*grid-template-rows: 5% 90% 5%;*/
    grid-template-rows: 5% 95%;
    grid-template-columns: 10% 80% 10%;
    height: 100vh;
    width: 100vw;
    position: relative;
    z-index: 2;
}

.Basic-grid-left {
    grid-area: left;
    background-color: var(--colorA);
}

.Basic-grid-right {
    grid-area: right;
    background-color: var(--colorA);
}

.Basic-grid-middle {
    overflow-x: auto;
    background-color: var(--colorBC);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 5em;
}


/* Style the footer */
.Basic-grid-footer {
    background-color: orange;
    grid-area: footer;
    /*background-color: red;*/
    padding: 10px;
    text-align: center;
}


@media only screen and (min-width: 451px) and (max-width: 850px) {
    .Basic-grid-container {
        grid-template-rows: 7.5% 92.5%;
    }
}


@media only screen and (max-width: 450px) {
    .Basic-grid-container {
        grid-template-rows: 7.5% 92.5%;
    }
}