body {
    background: rgb(6, 6, 6);
    font-size: 0.875em;
    font-size: 11px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 0;
    margin: 0;
    background-image: url(bgimages/gafarm.JPG);
    }
    @font-face {
      font-family:'rascal';
      src: url(fonts/rascal.ttf) format(truetype);
      font-weight: normal;
      font-style: normal;
      font-display: swap; 
    }
    @font-face {
font-family: 'sitetitle' ;
src: url(fonts/sitetitle.woff) format(woff);
font-weight: normal;
      font-style: normal;
      font-display: swap; 
    }
    @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; 
          }
   
    .main-content-container {
        background-color: #f9f5f500; 
        width: 100%;
        max-width: 1080px; 
        margin: 30px auto; 
        padding: 20px;
        display: flex;
        flex-direction: row;
        gap: 30px; 
        align-items: flex-start;
        border-radius: 10px;
    }
   
    .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-container{
          display: flex;
          justify-content: space-evenly;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 5px;
      }
      #post1 img{
        max-width: 70%;
      }
         
        .main {
            flex: 1; 
            display: flex;
            flex-direction: column;
            gap: 30px; 
            position: static; 
            margin: 0;
            min-width: 0; 
           
        }
        .post-date {
          font-weight: bolder;
          font-size: medium;
          color: #828136;
          margin-bottom: 14px;
          font-style: italic;
        }
        .sidebar-right {
            flex: 0 0 250px; 
            display: flex;
            flex-direction: column;
            gap: 30px; 
            position: static; 
            margin: 0; 
        }
          img {
            max-width: 100%;
            max-height: 47%;
          
        }
    
    
      
      
    .wrapper, .links a {
      color: #3b2731;
      font-size: small;
      }
      
    .box {
      font-family: 'kodemono', 'Verdana', Geneva, Tahoma, sans-serif;
      border: 3px double #333;
      background: rgba(235, 220, 201, 0.969);
      padding: 0;
      flex-wrap: wrap;
      border-radius: 10px;
      font-weight: bold;
      line-height: 1.6;
      }
      .box-scroll{
        max-height: auto;
        overflow-x: auto;
            }
  
      .box .update-box{
     max-width: 100%;
      max-width: none;    
        
      }
      .box .update-text{
        max-width: none;
      }
          .update-text{
            display: flex;
            flex-direction: column;
            border: 2px solid rgb(226, 218, 218);
            border-radius: 10px;
            padding: 10px 12px;
          }
      .updates-scroll{
  max-height: 130px;
  overflow-x: auto;
      }
  
  .updates-list{
    margin:0;
    padding-left: 1.25em;         
    line-height: 1.3;
    list-style: disc;              
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    .scroll-box{
      max-height: 450px;
      overflow-x: hidden;
      overflow-y: auto;
      padding-bottom: 10px;
          }
          
          .main .box .inner::-webkit-scrollbar {
            width: 12px; 
            height: 12px; 
        }
        
        .main .box .inner::-webkit-scrollbar-track {
            background: rgba(235, 220, 201, 0.5); 
            border-radius: 10px;
        }
        
        .main .box .inner::-webkit-scrollbar-thumb {
            background: #828136; 
            border-radius: 10px;
            border: 2px solid rgba(235, 220, 201, 0.969); 
        }
        
        .main .box .inner::-webkit-scrollbar-thumb:hover {
            background: #c0bd67; 
        }
        .scroll-box::-webkit-scrollbar {
          display: none;
        }
    .main .box .inner {
      max-height: 600px;
      overflow-y: auto;
      overflow-x: hidden;
  }
    
      
    
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 30px auto 0 auto; 
      padding: 20px 0;
      text-align: center;
    }
    
    
    .header h1 {
      font-size: 4rem; 
      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: 'yay14', 'Verdana', Geneva, Tahoma, sans-serif;
      color: #ffffff;
      text-shadow: 
          2px 2px 4px rgba(0, 0, 0, 0.8),
          -1px -1px 2px rgba(0, 0, 0, 0.6),
          1px 1px 6px rgba(0, 0, 0, 0.9);
    }
    
    /* blog page title */
    .header h1.blog-title {
      font-family: 'chelsea', 'Verdana', Geneva, Tahoma, sans-serif;
      color: #c0bd67;
      font-weight: 900;
    }
    
    /* index/Home page title */
    .header h1.home-title {
      font-family: 'chelsea', 'Verdana', Geneva, Tahoma, sans-serif;
      color: #4f3d46;
      text-shadow: 
          0 0 10px rgba(255, 255, 255, 0.8),
          0 0 20px rgba(255, 255, 255, 0.6),
          0 0 30px rgba(255, 255, 255, 0.4),
          2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    
      .links {
        margin-top: 1em;
        margin-top: 1em;
          }
    
     
    .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/crumpled.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;
      color: rgb(178, 145, 15);
      font-size: 14px;
      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: rgba(128, 128, 0, 0.884);
      margin: 0;
      padding: 0.35em 0.25em 0.3em 0.25em;
      text-align: center;
      border-bottom: 3px double #333;
      font-size: 17px;
      }
      
    .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;
      }
    
    /* for narrower screens*/
     @media(max-width:888px) {
      .wrapper {
        width: calc(340px + 50vw);
        }
      .sidebar-left, .sidebar-right {
        width: 160px;
        }
      .main {
        width: 50vw;
        margin-left: 170px;
        }
      }
    
    /*mobile compatibility.*/  
    @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;
        }
      }