/* 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." */

body {
  font-family: "Georgia", Arial, sans-serif;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #F9EBE8;
  color: #333;
}


  /* Create left and right bars */
    body::before,
    body::after {
      content: "";
      position: fixed;
      top: 0;
      bottom: 0;
      width: 40px; /* thickness of bars */
      background-color: #c04b37; /* adjust to your brand color */
      z-index: -1; /* keeps bars behind content */
    }

    body::before {
      left: 0;
    }

    body::after {
      right: 0;
    }


    /* Main content area */
    .content {
      margin: 0 40px;   /* aligns content with inside edge of bars */
      padding: 2rem;
      box-sizing: border-box;
      max-width: 1000px; /* optional: limit line length for readability */
    } 
    
    
  /* Responsive: hide bars + reset only side margins */
@media (max-width: 768px) {
  body::before,
  body::after {
    display: none;
  }
  .content {
    margin-left: 0;
    margin-right: 0;
    padding: 1rem; /* keep some padding for readability */
  }
}



header {
  text-align: center;
  margin-bottom: 40px;
}

header h1 {
  margin: 0;
  font-size: 2.5em;
  font-weight: bold;
  color: #4D221A;
}

header p {
  font-style: italic;
  color: #666;
  margin-bottom: 10px;
}

nav {
  margin-top: 15px;
}

nav a {
  color: #007acc;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
}

nav .active {
  border-bottom: 2px solid #007acc;
}

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

main h2 {
  font-size: 1.8em;
  margin-bottom: 15px;
  color: #4D221A;
}

main h3 {
  margin-top: 40px;
  margin-bottom: 10px;
  color: #4D221A;
}

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  margin-bottom: 10px;
}

a {
  color: #0066cc;
  text-decoration: none;
}



a:link {
  color: #9A4434;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #CD5B45;
}

a:visited {
  color: #DA8474;
  background-color: transparent;
  text-decoration: none;
}


footer {
  text-align: center;
  margin-top: 60px;
  font-size: 0.9em;
  color: #DA8474;
}
}