body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: white;
  color: black;
}

#menu-toggle {
  display: none;      /* hide by default */
}

/* Centers the whole nav+main area */
#content-wrapper {
  display: flex;
  justify-content: center;   /* centers horizontally */
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

/* Container width: 75% of browser on wide screens */
#content-wrapper > nav,
#content-wrapper > main {
  box-sizing: border-box;
}

#content-wrapper {
  max-width: 75%;
  margin: 0 auto;
}

/* Sidebar and main layout */
nav {
  background-color: #fff;
  width: 25%;                /* relative to wrapper */
  min-width: 180px;
  max-width: 250px;
}

main {
  flex: 1;
  width: 100%;                /* relative to wrapper */
  padding: 20px;
  background-color: white;
  box-sizing: border-box;
}

/* Menu styling */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  border-bottom: 1px solid #fff;
}

nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
  background-color: #fff;
}

nav a.active,
nav a:hover {
  background-color: #a9d44a;
  color: white;
}

/* Submenu */
.submenu {
  display: none;
  background-color: #fff;
}

.submenu li a {
  padding-left: 30px;
}

.submenu a.active,
.submenu a:hover {
  background-color: #cce58f;
  color: black;
}

/* Headings in content */
main h1,
main h2 {
  background-color: #a9d44a;
  padding: 10px;
  color: white;
}

main a {
  color: #ff9726;
  text-decoration: none; /* optional: removes underline */
}

main a:hover {
  color: #cc6f00; /* darker version on hover */
  text-decoration: underline; /* or keep none */
}

main a.active,
main a:active {
  color: #ff9726;
}

main li + li {
  margin-top: 10px;
}

ul.logo {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

img.newsimg {
  width: 85% !important;
  max-width: 700px !important;
  height: auto !important;
}


/* Responsive: stack vertically on small screens */
@media (max-width: 800px) {
  #content-wrapper {
    flex-direction: column;
    max-width: 100%;
  }

  nav {
    display: none;
    width: 100%;
  }

  nav.active {
    display: block;
  }

  #menu-toggle {
    display: block;
    background-color: #a9d44a;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    font-size: 1em;
  }

}

@media print {
  #menu-toggle {
    display: none;
  }
  body {
    font-size: 95%;
    transform: scale(0.90);
    transform-origin: top left;
  }
  img.logo {
    width: 50% !important;
    max-width: 400px !important;
    height: auto !important;
  }
}
