*{
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
  }
  
  .header {
    background-color: #333;
    color: #fff;
    padding: 1rem 2rem;
    display: flex;
  }
  
  .logo {
    font-size: 1.5rem;
  }
  
  /* New styles for positioning the menu */
  nav.navigation {
    position: fixed; /* Fix the menu to the viewport */
    top: 60px; /* Start at the top */
    left: 0; /* Position at the left */
    width: 200px; /* Set a width for the menu */
    height: 100vh; /* Set height to 100% viewport height */
    background-color: #333; /* Match header background color */
    color: #fff; /* Match header text color */
    padding: 1rem;
  }
  
  .navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .navigation li {
    margin-bottom: 1rem; /* Add some space between menu items */
  }
  
  .navigation a {
    color: #fff;
    text-decoration: none;
    display: block; /* Make navigation items full width */
    padding: 0.5rem 1rem; /* Add padding for better clicks */
  }
  
  .navigation a:hover {
    color: #ddd;
  }
  
  .main {
    padding: 1rem 2rem;
    margin-left: 200px; /* Make space for the fixed menu */
  }
  
  .content {
    background-color: #eee;
    padding: 1rem;
  }