/* 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! */



/* when the screen is medium size, we will hide the hamburger icon, then unhide other menu items. We will not need to make any changes to .jacksbox because the layout for small screens and medium screens is the same */



@media (min-width: 600px){
    label{ display: none; }
    
    .main-nav{
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .ham-menu {
        list-style: none;
        display:inline; 
    }
    
    .ham-link{
        font-size: large;
        display:inline;
        
    }
}

/*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.

*/

/* Only when the screen size is large, such as on a desktop, we will make the following changes to the grid layout and also change the formating of some elements */