/*
 * TODO: 
 * -> bring the column concept into here 
 * -> and check to see how well it can be used from here
 */

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: unset;
}

@supports (display: grid) {
    /* code that will only run if CSS Grid is supported by the browser  */

    .header {
        grid-area: header;
        width: 100%;
    }

    .main {
        grid-area: main;
    }



    .footer {
        grid-area: footer;
    }

    /* .grid-container>div {
    position: relative;
    /* background-color: rgba(255, 255, 255, 0.8); 
    padding: 20px;
} */

    /*----------------------------------------------------------------------------------------*/



    /* -------------------------------------------------------------------------------------- */

    /* Mobile First */
    .grid-container {
        height: 100%;
        display: grid;
        grid-template-rows: 60px calc(100% - 60px) 0px;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }

    /* -------------------------------------------------------------------------------------- */

    /*For tablets*/
    /* @media only screen and (min-width: 481px) {
    .grid-container {
        display: grid;
        grid-template-areas:
            "header"
            "main"
            "footer";
 */
    /* gap: 10px; */
    /* padding: 10px; */
    /* background-color: #2196f3; */
    /*     }
}
 */
    /* -------------------------------------------------------------------------------------- */

    /*For laptops and Tablets*/
    /* @media only screen and (min-width: 768px) {
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 8fr 1fr;
            grid-template-areas:
                "header header header"
                ". main ."
                "footer footer footer";
        }
    } */

    /*For laptops and Tablets*/
    @media only screen and (min-width: 768px) {

        .grid-container {
            grid-template-rows: 75px calc(100% - 75px) 0px;
        }
    }

    /* -------------------------------------------------------------------------------------- */

    /*For Desktops*/
    @media only screen and (min-width: 1025px) {
        left-pane {
            grid-area: left-pane;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 1fr 4fr 1fr;
            grid-template-areas:
                "header header header"
                "left-pane main ."
                "footer footer footer";

        }
    }
}

@supports not (display: grid) {
    .grid-container {
        height: 100%;
    }

    .main {
        height: calc(100% - 60px)
    }



    /*For laptops and Tablets*/
    @media only screen and (min-width: 768px) {
        .grid-container {
            grid-template-rows: 75px calc(100% - 75px) 0px;
        }
    }

    /* -------------------------------------------------------------------------------------- */

    /*For Desktops*/
    @media only screen and (min-width: 1025px) {
        /* .grid-container {} */
    }
}