/*****************************************************************************************/
/*
/* This script will use the correct @Media Device Breakpoints for the FORGOTTEN screen
/* The top_row is taken care of by the 'breakpoints_home_header.css' script
/*
/*****************************************************************************************/

@media only screen {

    /* DEFAULT Setting */
    .whole_page {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 5fr 3fr 3fr 4fr 5fr;
        grid-template-rows: repeat(6, auto) 1fr auto;
        grid-template-areas:
                "top_row top_row top_row top_row top_row"
                "navbar navbar navbar navbar navbar"
                ". block_1 block_1 block_1 ."
                ". block_2 block_3 . ."
                ". block_4 block_4 block_4 ."
                ". block_5 block_5 block_5 ."
                ". block_6 block_6 block_6 ."
                ". footer footer footer .";
    }

    /* Screen Drag 2480 -  */
    @media only screen and (max-width: 2480px) {
        .whole_page {
            display: grid;
            grid-template-columns: 3fr 3fr 3fr 4fr 3fr;
        }
    }

    /* Screen Drag 1800 -  */
    @media only screen and (max-width: 1800px) {
        .whole_page {
            display: grid;
            grid-template-columns: 1fr 3fr 3fr 4fr 1fr;
        }
    }

    /* Screen Drag 1480 -  */
    @media only screen and (max-width: 1480px) {
        .whole_page {
            display: grid;
            grid-template-columns: 1fr 3fr 3fr 4fr 1fr;
        }
    }

    /* Hide the Navbar links and display the Menu Hamburger */
    @media(max-width: 1024px){
        .whole_page {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 0.5fr 1fr 7fr 1fr 0.5fr;
            grid-template-rows: repeat(7, auto) 1fr auto;
            grid-template-areas:
                    "top_row top_row top_row top_row top_row"
                    "navbar navbar navbar navbar navbar"
                    ". block_1 block_1 block_1 ."
                    ". block_2 block_2 block_2 ."
                    ". block_3 block_3 block_3 ."
                    ". block_4 block_4 block_4 ."
                    ". block_5 block_5 block_5 ."
                    ". block_6 block_6 block_6 ."
                    ". footer footer footer .";
        }
    }

    /* Screen Drag 800 */
    @media only screen and (max-width: 800px) {
        .whole_page {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 0.5fr 1fr 7fr 1fr 0.5fr;
            grid-template-rows: repeat(7, auto)  1fr auto;
            grid-template-areas:
                    "top_row top_row top_row top_row top_row"
                    "navbar navbar navbar navbar navbar"
                    ". block_1 block_1 block_1 ."
                    ". block_2 block_2 block_2 ."
                    ". block_3 block_3 block_3 ."
                    ". block_4 block_4 block_4 ."
                    ". block_5 block_5 block_5 ."
                    ". block_6 block_6 block_6 ."
                    ". footer footer footer .";
        }
    }

    /* Screen Drag 600 */
    @media only screen and (max-width: 600px) {
        .whole_page {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 0.5fr 1fr 7fr 1fr 0.5fr;
            grid-template-rows: repeat(7, auto)  1fr auto;
            grid-template-areas:
                    "top_row top_row top_row top_row top_row"
                    "navbar navbar navbar navbar navbar"
                    ". block_1 block_1 block_1 ."
                    ". block_2 block_2 block_2 ."
                    ". block_3 block_3 block_3 ."
                    ". block_4 block_4 block_4 ."
                    ". block_5 block_5 block_5 ."
                    ". block_6 block_6 block_6 ."
                    ". footer footer footer .";
        }
    }

    /* Screen Drag 450 - A sneaky way of not displaying the LOGO, but also to maintain the integrity of the display. */
    @media only screen and (max-width: 450px) {
        .whole_page {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 0.5fr 1fr 5fr 1fr 0.5fr;
            grid-template-rows: repeat(7, auto)  1fr auto;
            grid-template-areas:
                    "top_row top_row top_row top_row top_row"
                    "navbar navbar navbar navbar navbar"
                    ". block_1 block_1 block_1 ."
                    ". block_2 block_2 block_2 ."
                    ". block_3 block_3 block_3 ."
                    ". block_4 block_4 block_4 ."
                    ". block_5 block_5 block_5 ."
                    ". block_6 block_6 block_6 ."
                    ". footer footer footer .";
        }
    }

    /* Screen Drag 350 - Dinosaur Devices */
    @media only screen and (max-width: 350px) {
        .whole_page {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 0.5fr 1fr 5fr 1fr 0.5fr;
            grid-template-rows: repeat(7, auto)  1fr auto;
            grid-template-areas:
                    "top_row top_row top_row top_row top_row"
                    "navbar navbar navbar navbar navbar"
                    ". block_1 block_1 block_1 ."
                    ". block_2 block_2 block_2 ."
                    ". block_3 block_3 block_3 ."
                    ". block_4 block_4 block_4 ."
                    ". block_5 block_5 block_5 ."
                    ". block_6 block_6 block_6 ."
                    ". footer footer footer .";
        }
    }
}