:root {
    color-scheme: light dark;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Theme-aware styles */
body {
    color: light-dark(#333b3c, #efefec8c);
    background-color: light-dark(#efedea, #223a2c);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Header styles */
header {
   background-color: #007acc;
    color: #ffffff;
    padding: 1rem;
    text-align: left;
    display: flex;
    align-items: center;
}

header > a {
    margin-right: 20px;
}

header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: inline;
}

/* Navigation styles */
nav {
    background-color: #333;
    color: #ffffff;
    width: 20%;
    min-height: 100vh;
    float: left;
}

nav ul {
    list-style: none;
    padding: 1rem;
}

nav ul li {
    margin-bottom: 1rem;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    display: block;
}

/* Main content styles */
.main-content {
    padding: 1rem;
    margin-left: 20%; /* Adjust to match nav width */
}