body {
  margin: 0;
  font-family: 'Karla', sans-serif;
  background-color: #003153; /* Prussian Blue */
  color: #fdfdfd;
  padding: 2rem;
  line-height: 1.6;
}

/* General section box styling */
.box {
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  color: #fff;
}

/* Section title style */
.box h2 {
  background-color: rgba(0,0,0,0.15); /* default fallback, overridden below */
  padding: 0.5rem 1rem;
  border-radius: 8px;
  margin-top: 0;
}

/* --- Section-specific boxes --- */

.title-box {
  background-color: #001d33;
}
.title-box h2 {
  background-color: #002b4c;
}

.journal-box {
  background-color: #001d33;
}
.journal-box h2 {
  background-color: #002b4c;
}

.fragment-box {
  background-color: #5b2c6f;
}
.fragment-box h2 {
  background-color: #4a225c;
}

.yap-box {
  background-color: #375a00; /* --- ogcolor: #804000--- */
}
.yap-box h2 {
  background-color: #264000; /* --- ogcolor: #5c2f00--- */
}

.philosophy-box {
  background-color: #5a2e2e; /* --- ogcolor: #375a00--- */
}
.philosophy-box h2 {
  background-color: #421f1f; /* --- ogcolor: #264000--- */
}

.about-box {
  background-color: #4a4a00; /* --- ogcolor: #5a2e2e--- */
}
.about-box h2 {
  background-color: #353500; /* --- ogcolor: #421f1f--- */
}

.contact-box {
  background-color: #f2beb9; /* --- ogcolor: --- */
}
.contact-box h2 {
  background-color: #db4437; /* --- ogcolor: --- */
}

.bingo-box {
  background-color: #004d4d;
}
.bingo-box h2 {
  background-color: #003838;
}

.color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    vertical-align: middle;
    background-color: #0337E2;
}

/* Footer nav styling */
.footer-nav {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
}

.footer-nav a {
  color: #0FFF50;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
}

.footer-nav a:hover {
  text-decoration: underline;
}