@font-face {
  font-family: 'chelsea' ;
  src: url(fonts/chelsea.ttf) format(truetype);
  font-weight: normal;
        font-style: normal;
        font-display: swap; 
      }
      @font-face {
        font-family:'kodemono';
        src: url(fonts/kodemono.ttf) format(truetype);
        font-weight: normal;
        font-style: normal;
        font-display: swap; 
      }

body {
    background: antiquewhite;
    font-size: 0.875em;
    font-size: 11px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 0;
    margin: 0;
    background-image: url(bgimages/pinktree.JPG);
    background-attachment: fixed;
    }

    .main-content-container {
        background-color:rgba(114, 92, 92, 0.9); 
        width: 100%;
        max-width: 1080px; 
        margin: 30px auto; 
        padding: 20px;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        gap: 30px; 
        align-items: flex-start; 
    }
   
    .wrapper {
        background: none;
        margin: 0 auto;
        width: 100%;
        position: relative;
    }
    .wrapper-2 {
        position: static;
        width: 100%;
        margin: 0;
        padding: 0;
    }
      
        .sidebar-left {
            flex: 0 0 250px; 
            display: flex;
            flex-direction: column;
            gap: 30px; 
            position: static; 
            margin: 0; 
        }
          audio {
            max-width: 100%;
          
        }
        img{
          max-width: 100%;
          border-radius: 8px;
        }
        
         
        .main {
            flex: 1; 
            display: flex;
            flex-direction: column;
            gap: 30px; 
            position: static; 
            margin: 0; 
            min-width: 0; 
        }
      
        .sidebar-right {
            flex: 0 0 250px; 
            display: flex;
            flex-direction: column;
            gap: 30px;
            position: static; 
            margin: 0; 
        }
          img {
            max-width: 100%;
          
        }
    
      
      
    .wrapper, .links a {
      color: #4f3d46;
      }
      
    .box {
      border: 3px double;
      color: #7a5634;
      background: rgba(250, 235, 215, 0.93);
      padding: 0;
      flex-wrap: wrap;
      border-radius: 10px;
      font-family: 'kodemono', 'Verdana', Geneva, Tahoma, sans-serif;
      }

      .box-1 {
        border: 3px double;
        color: #7a5634;
        background: rgba(250, 235, 215, 0.344);
        padding: 0;
        flex-wrap: wrap;
        border-radius: 10px;
        font-family: 'kodemono', 'Verdana', Geneva, Tahoma, sans-serif;
        }
  
        .updates-scroll{
          max-height: 450px;
          overflow-x: hidden;
          overflow-y: auto;
          padding-bottom: 10px;
              }
      
    /* header container (centers and positions the title) */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 30px auto 0 auto; 
  padding: 20px 0;
  text-align: center;
}

/* title styling (consistent across all pages) */
.header h1 {
  font-size: 4rem; /* Consistent size */
  margin: 0;
  padding: 0;
  line-height: 1.2;
  text-align: center;
}

/* specific title styling for each page */

/* about page title */
.header h1.about-title {
  font-family: 'chelsea', 'Verdana', Geneva, Tahoma, sans-serif;
  color: rgb(191, 185, 200);
  
}


  .links {
    margin-top: 1em;
    margin-top: 1em;
      }

 /* menu/navbar container (consistent positioning) */
.menu {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 20px auto; 
  padding: 0;
}


.menu ul {
  list-style-type: none;
  text-align: center;
  background-image: url(bgimages/22bdayflower.JPG); 
  overflow: hidden;
  border-radius: 10px;
  border: 3px;
  box-sizing: content-box;
  box-shadow: 1px 1px 5px rgb(23, 23, 23);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; 
  flex-wrap: nowrap;
  font-size: small;
  width: 800px; /* FIXED WIDTH for consistency across all pages */
  max-width: 95vw; 
  padding: 10px;
  margin: 0;
  gap: 5px; 
}


.menu a {
  font-family: 'chelsea', 'Verdana', Geneva, Tahoma, sans-serif;
  text-align: center;
  font-size: 14px;
  color: rgba(208, 146, 146, 0.9);
  font-weight: bold;
  text-decoration: none;
  display: block;
  padding: 10px 15px;
  border-radius: 10px;
  border: 3px;
  transition: transform 0.3s ease;
  white-space: nowrap; 
  flex: 1; 
  min-width: 80px; 
}


.menu a:hover {
  transform: scale(1.3); 
}


.menu li {
  display: flex;
  flex: 1;
}
      
    .title { 
      display: none;
      }
    
    .footer {
      height: 0;
      }
      
    .box h1, .box h2, .box h3, .box h4 {
      font-family: 'chelsea', 'Verdana', Geneva, Tahoma, sans-serif;
      display: block;
      background: rgb(149, 147, 63);
      margin: 0;
      padding: 0.35em 0.25em 0.3em 0.25em;
      text-align: center;
      border-bottom: 3px double;
      border-radius: 8px;
      font-size: 17px;
      color: rgba(247, 229, 206, 0.933);
      }
      
    .inner {
      padding: 0.25em 1em 0.3em 1em;
      font-size: 1.075em;
      }
      
      /*div style for individual links.*/
    .link {
      text-align: center;
      display: inline-block;
      list-style-type: none;
      float: none;
      font-weight: bold;
      font-size: 1.16em;
      padding: 5px;
      margin-right: 10px;
      margin-left: 10px;
      border: 0px solid red;
      }
      
    .link a {
      color: white;
      text-decoration: none;
      }

      .img-container{
        max-width: 100%;
        position: relative;
        overflow: hidden;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.817);
        border-radius: 5px;
        margin: 0 auto; 
        display: block;
    }
    
    .image-container {
      display: flex;
      gap: 10px; 
      margin: 10px 0;
  }
  
  .image-container img {
      flex: 1; 
      max-width: 50%; 
      height: auto; 
      object-fit: cover; 
      border-radius: 8px; 
  } 
    
    /* for narrow screens and phones, and makes the width
     * of the main/center div flexible (sized relative to viewport width.)
     */
     @media(max-width:888px) {
      .wrapper {
        width: calc(340px + 50vw);
        }
      .sidebar-left, .sidebar-right {
        width: 160px;
        }
      .main {
        width: 50vw;
        margin-left: 170px;
        }
      }
    
    /*mobile compatibility. (turns it all into a vertical layout.)*/  
    @media(orientation:portrait) {
      .wrapper {
        width: 96vw;
        margin: 0 auto;
        padding:0;
        position: relative;
        }
      .wrapper-2 {
        width: 94vw;
        margin: 0 auto;
        padding:0;
        position: relative;
        }
      .sidebar-left, .main, .sidebar-right {
        position: relative;
        width: 92vw;
        margin: 0.25rem 1vw;
        }
      }
    /* mobile responsiveness (stacks them vertically on small screens) */
@media (max-width: 768px) {
    .header-nav-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header {
        margin-right: 0;
        margin-bottom: 10px;
        justify-content: center;
    }
    
    .navbar {
        justify-content: center;
    }
}