body {
  margin: 0;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  background: #f6f4ee; /* soft beige background */
  color: #3d2c1d; /* dark brown text */
}

.box {
  max-width: 1000px;
  margin: 40px auto; 
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 250px minmax(0,1fr);
}

/* Shared section styling */
header, nav, main, footer {
  border-radius: 10px;
  padding: 20px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
}
header, footer {
  box-shadow: none;
}

/* Header */
header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  background: transparent;
  color: #5b7a5a; /* muted green */
  text-align: center;
  padding: 10px;
  border: none;
}

/* Nav */
nav {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  background: #d6c7b0; /* warm tan */
  height: max-content;
  text-align: center;
}

nav h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #3d2c1d;
}

nav a {
  display: block;
  margin: 6px 0;
  padding: 10px;
  text-decoration: none;
  color: #2e2e2e;
  background: #cbbfa9;
  border: 1px solid #b5a689;
  border-radius: 5px;
  transition: background 0.25s, color 0.25s;
}

nav a:hover,
nav a.active {
  background: #5b7a5a; /* muted green */
  color: #fff;
}

/* Main */
main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: #fffdf9; /* soft cream */
  border: 0.5px solid #c0a98b;
}

main h2 {  
  text-align: center;
  color: #5b7a5a;
}

main h3 {
  text-align: left;
  color:#5b7a5a;
}

main h4 { 
  text-align: left; 
  color:  #c0a98b;
  
}

main a {
  color: #5b7a5a; /* muted green */
  text-decoration: underline;
}

main a:hover {
  color: #3d2c1d; /* dark brown */
}

/* Footer */
footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
  background: #5b7a5a; /* muted green */
  color: #fff;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background: #d6c7b0; /* warm tan */
  border-radius: 30px;
}

::-webkit-scrollbar-thumb {
  background-color: #5b7a5a;
  border-radius: 30px;
  border: 3px solid #d6c7b0;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #3d2c1d; /* dark brown */
}

/* Mobile fix: keep same layout */
@media (max-width: 700px) {
  .box {
    grid-template-columns: 120px minmax(0,1fr); /* narrower nav, wider main */
  }

  nav {
    font-size: 0.9em;
    padding: 10px;
  }

  main {
    font-size: 0.95em;
    padding: 15px;
  }

.cbox-wrapper {
  max-width: 600px;       /* keeps it from being too wide */
  margin: 30px auto;      /* centers it and adds space */
  padding: 15px;
  background-color: #fffdf9; /* soft cream */
  border: 1px solid #c0a98b; /* soft tan border */
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}