/* header,
 nav,
 main,
 #logo,
 #content,
 footer {
     border: 1px red solid;
 } */

 /* Global Styles */
 body {
     margin: 0;
     font-family: Arial, sans-serif;
 }

 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
     background-color: #f0f0f0;
 }

 #logo {
     flex: 0 0 auto;
 }

 #menuToggle {
     font-size: 24px;
     background: none;
     border: none;
     cursor: pointer;
 }

 /* nav {
            display: none;
        } */

 .hidden {
     display: none;
 }

 /* Sub and main navigation styling */
 #mainNavigation ul,
 #subNavigation ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
 }

 #mainNavigation ul li,
 #subNavigation ul li {
     margin: 10px 0;
 }

 /* Content Styling */
 main {
     display: block;
     padding: 10px;
 }

 #subNavigation {
     background-color: #e0e0e0;
     padding: 10px;
 }

 #content {
     padding: 10px;
 }

 /* Footer Styling */
 footer {
     text-align: center;
     padding: 20px;
     background-color: #f0f0f0;
 }

 h1 {
     text-align: center;
 }

 /* Mobile First - Navigation is hidden by default */
 @media (min-width: 768px) {
     h1 {
         text-align: left;
     }

     #menuToggle {
         display: none;
     }

     /* nav {
                display: block;
            } */

     header {
         justify-content: flex-start;
     }

     #mainNavigation {
         flex: 1;
         display: flex;
         justify-content: flex-start;
     }

     main {
         display: flex;
     }

     #subNavigation {
         flex: 0 0 200px;
         display: block;
     }

     #content {
         flex: 1;
     }
 }