/* Area that contains the main content */
main div {

    background-color: rgb(255, 255, 255);
    /* White background */
    /* Gives each content box a white background */

    border-radius: 10px;
    /* Curved Corner */
    /* Rounds the corners of the box */

    font-size: 30px;
    /* Make text a little bigger */

    padding: 20px;
    /* Add space on the left and right */
    /* Creates space between the content and the edges of the box */

    text-align: left;
    /* Aline text to the left */
}

/* Main area that holds all the content boxes */
main {

    background-color: rgb(0, 0, 0);
    /* Black background */

    display: grid;
    /* Use a grid layout to arrange the content boxes */

    grid-template-areas:
        '.'
        '.'
        '.'
        '.'
        '.'
        '.';
    /* Stack all content boxes in a single column on small screens */

    grid-gap: 20px;
    /* Add space between each content box */

    padding: 20px;
    /* Add space around the outside of the grid */
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    #container2 {
        grid-area: area2;
        /* Place container2 into the grid area called area2 */
    }

    #container3 {
        grid-area: area3;
        /* Place container3 into the grid area called area3 */
    }

    main {
        grid-template-areas:
            '.      area3   .'
            'area2  area3   .'
            'area2  area3   .';
        /* Rearrange the boxes into a more interesting layout on larger screens */
    }
}