/* Hello Computer Science 3 students. You may copy and edit anyting you find here to use when making your own websites. Remember to include the Creative Commons copyright notice! */

@media (min-width: 1200px) {
    .jacksbox {
        display: grid;
        grid-template-columns: 8em 1fr;
        grid-template-rows: 
            8em
            1fr 
            8em;
        grid-template-areas:
            "h h"
            "n c"
            "n f";
    }

    .ham-menu {
        display: flex;
        flex-direction: column;

    }
    
    .ham-link{
        font-size: medium;
        display:flex; 
        flex-direction:column;
        padding: 8px;
    }
    
    
    /* make the navagation look like a tab */
    .main-nav {
        border-top-left-radius: 0px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 20px;
    }
}



/*FOOTNOTE: 

The common advice is that @media should do the following checks.

    Smaller than 640px is a cellphone
    Smaller than 768px is an iPad in portrat mode
    Smaller than 1024px is an iPad in landscape mode
    Smaller than 1280px is a laptop
    Everything else is a projector

I do not like this system for two reasons. First, I can never remember the exact numbers. Second, I can never remember if it is 'less than' or if it is 'less than or equal too'. So instead, I use the following breakpoints.

    Assume the screen is a cellphone.
    Bigger than 600, assume it is an iPad in portrait mode.
    Bigger than 900, assume it is an iPad in landscape mode.
    Bigger than 1200, assume it is a laptop.
    Bigger than 1800, assume it is a projector.

These numbers are much more easy to remember, and also do not have edge cases because all common devices are between these numbers and not exactly on these numbers.

As a final important item, this website only has three leayouts and not five layouts. Both kinds of iPads use the same layout and also laptops and projectors use the same layout. So even though I would check those breakpoints for any other website, I ignore those breakpoints for this website.

*/