/* Basic styling for the entire page */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

/* This is the main container that will hold our two columns */
.container {
    display: flex; /* This activates Flexbox! */
    min-height: 100vh; /* Make the container at least the full height of the viewport */
}

/* Styling for the left-side navigation menu */
.nav-menu {
    flex: 0 0 200px; /* Don't grow, don't shrink, and have a base width of 200px */
    background-color: #333;
    padding: 20px;
    color: white;
}

/* Styling the list within the nav menu */
.nav-menu ul {
    list-style-type: none; /* Remove the default bullet points */
    padding: 0;
    margin: 0;
}

/* Styling each menu item */
.nav-menu li a {
    display: block; /* Make the entire area clickable, not just the text */
    color: white;
    text-decoration: none; /* Remove the underline from links */
    padding: 12px;
    margin-bottom: 5px;
    border-radius: 5px;
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Change background color when hovering over a menu item */
.nav-menu li a:hover {
    background-color: #575757;
}

/* This is for the main content area on the right */
.main-content {
    flex-grow: 1; /* This makes the content area take up all remaining space */
    padding: 40px;
}

/* Styling for headers in the main content */
.main-content h1 {
    color: #333;
}