/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


.page {
  display: none;
  padding: 20px;
}

.page.active {
  display: block;
}

.nav-button {
  cursor: pointer;
  margin-bottom: 15px; /* Space between nav items */
  text-decoration: underline;
  color: blue;
  background: none;
  border: none;
  font-size: 1.2rem;
  display: block; /* Forces each button to take its own line */
  width: 100%; /* Makes them fill the sidebar width */
  text-align: left; /* Keeps text left-aligned */
  padding: 10px 15px; /* Adds clickable space around text */
  border-radius: 8px; /* Optional: rounded corners */
  transition: background-color 0.2s; /* Smooth hover effect */
}

/* Optional: Add a hover effect so users know it's clickable */
.nav-button:hover {
  background-color: #e0e0e0;
}

.app-container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 200px;
  background-color: #f4f4f4;
  padding: 30px 20px;
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  padding: 40px;
  background-color: #ffffff;
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    order: 2;
  }
}
.nav-button {
  display: inline-block;
  width: auto;
  margin-bottom: 0;
  font-size: 0.9rem;
  padding: 5px 10px;
}

.main-content {
  padding: 20px;
  order: 1;
}