/* Global Styles */
        
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
         :root {
            --primary-color: #3a4052;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        /* Body Style */
        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Open Sans', Arial, Helvetica, sans-serif;
            background-color: white;
            line-height: 1em;
        }
        /* Anchor Style */
        
        a {
            text-decoration: none;
            color: var(--primary-color);
        }
        /* NAVIGATION STYLE */
        /* Static Black Area at Top */
        
        .mainHeader {
            display: inline-flex;
            background-color: black;
            align-items: center;
            justify-content:space-between;
            width: 100%;
            position: fixed;
            z-index: 10;
            font-size: 7px;
            padding: 0.5em;
        }
        /* MatheMagician | Welcome | Name of Page at Top */
        /* Hidden as default (small) but 12px then 20px when enough space  */
        .pageName h1 {
            color: white;
            }
        /* Any text that is unnecessary on small screens */
        /* Set as hidden when less than 580px width available */
        
        .hide-inline-objects {
            display: none;
        }
        /* Smaller Grey Text in Nav */
        
        .small-nav {
            color: slategray;
            font-size: 60%;
        }
        /* Top Left Logo Setup within mainHeader */
        
        #logo {
            display: inline-flex;
            margin: 0em;
            line-height: 0em;
        }
        /* Top Left Logo Image Size (default 20px then 50px and 80px) */
        
        #logo img {
            height: 20px;
        }
        /* Top Right Main Nav Setup within mainHeader */
        
        #mainNav {
            display: inline-flex;
            margin: 0 1.5em;
        }
        /* Link Anchor - set to 12px at 580px width and 20px at 950px width*/
        
        #mainNav a {
            color: gainsboro;
        }
        /* Floating Top Right Nav Spacing of Div */
        /* Set to 6px left as default and 8px above 950px width */
        
        #mainNav div {
            padding: 2px;
            margin-left: 6px;
        }
        /* Floating Top Right Nav Hover Shrink */
        
        #mainNav div:hover {
            opacity: 0.9;
            transform: scale(0.8);
        }
        /* END OF NAVIGATION STYLE */
        /* WARNING MESSAGE FIXED AT BOTTOM OF PAGE */
        
        .notice {
            /* background-color: silver; */
            color: green;
            width: 100%;
            font-weight: 900;
            font-size: 0.5em;
            position: fixed;
            bottom: 0px;
            left: 0px;
            opacity: 1;
            margin: 0px;
            padding: 10px;
        }
        /* End of WARNING */
        /* RESPONSIVE SETTINGS FOR BROWSERS OVER 580PX */
        
        @media(min-width: 580px) {
            /* Top Left Logo Image Size (default 20px then 50px and 80px) */
            #logo img {
                height: 50px;
            }
            /* MatheMagician | Welcome | Name of Page at Top */
            /* Hidden as default (small) but 12px then 20px when enough space  */
            .pageName h1 {
                font-size: 12px;
                margin: 0;
            }
            /* Any text that is unnecessary on small screens */
            /* Set as hidden when less than 580px width available */
            .hide-inline-objects {
                display: unset;
            }
            /* Floating Top Right Nav Spacing of Div */
            /* Set to 6px left as default and 8px above 950px width */
            #mainNav div {
                margin-left: 6px;
            }
            /* Link Anchor - set to 12px at 580px width and 20px at 950px width*/
            #mainNav a {
                font-size: 12px;
            }
        }
        /* RESPONSIVE SETTINGS FOR BROWSERS OVER 950PX */
        
        @media(min-width: 950px) {
            /* Top Left Logo Image Size (default 20px then 50px and 80px) */
            #logo img {
                height: 80px;
            }
            /* MatheMagician | Welcome | Name of Page at Top */
            /* Hidden as default (small) but 12px then 20px when enough space  */
            .pageName h1 {
                font-size: 20px;
                margin: 0;
            }
            /* Floating Top Right Nav Spacing of Div */
            /* Set to 6px left as default and 8px above 950px width */
            #mainNav div {
                margin-left: 8px;
            }
            /* Link Anchor - set to 12px at 580px width and 20px at 950px width*/
            #mainNav a {
                font-size: 20px;
            }
        }
        /* END OF RESPONSIVE BROWSER MEDIA QUERIES */