body {
    background: rgb(5, 5, 5);
    font-size: 0.875em;
    font-size: 11px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 0;
    margin: 0;
    background-image: url(bgimages/landlinephoto.JPG);
    background-attachment: fixed;
    
  
    }
    @font-face {
      font-family:'chelsea';
      src: url(fonts/chelsea.ttf) format(truetype);
      font-weight: normal;
      font-style: normal;
      font-display: swap; /* improves loading performance */
    }
   
  
    @font-face {
      font-family:'kodemono';
      src: url(fonts/kodemono.ttf) format(truetype);
      font-weight: normal;
      font-style: normal;
      font-display: swap; /* improves loading performance */
    }
  
    .main-content-container {
      background-color: #14131400; 
      width: 100%;
      max-width: 1200px; 
      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; 
      }


/* webamp container box styling */
.webamp-box {
  background:  rgba(12, 12, 12, 0);
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 30px; /* Same spacing as other boxes */
  font-family: 'kodemono', 'Verdana', Geneva, Tahoma, sans-serif;
  font-size: medium;
}



#winamp-container {
  width: 100%;
  min-height: 450px;
  position: relative;
}


#winamp-container > div {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
}


.sidebar-left {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: static;
  margin: 0;
}


        audio {
          max-width: 100%;
        
      }
      .audio-button {
        display: inline-block;
        background: rgba(50, 3, 56, 0.9); 
        color: antiquewhite;
        padding: 10px 20px;
        border: 3px solid #333;
        border-radius: 10px;
        cursor: pointer;
        font-weight: bold;
        font-size: 14px;
        transition: all 0.3s ease;
        margin: 5px 0;
        box-shadow: 1px 1px 5px rgb(23, 23, 23);
    }
    
    .audio-button:hover {
        background: rgba(22, 75, 91, 0.6);
        transform: scale(1.05);
    }
    
    .audio-button:active {
        transform: scale(0.95);
    }
    
    /* hides the actual audio element */
    .hidden-audio {
        display: none;
    }
      img{
        max-width: 100%;
      }
      .keyboard-image {
        width: 550px;        
        height: auto;
        display: block;      
        margin: 0 auto;      
    }
       
      .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%;
        
      }
  
      .img-main {
        max-width: 60%;
      
    }
    .wrapper, .links a {
      color: #73415a;
      }
     
      
    .box {
      border: 3px double;
      background: rgba(12, 12, 12, 0.94);
      padding: 0;
      flex-wrap: wrap;
      border-radius: 10px;
      font-family: 'kodemono', 'Verdana', Geneva, Tahoma, sans-serif;
      }
  
      .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: 'kodemono', 'Verdana', Geneva, Tahoma, sans-serif;
    }
  
  
      
      
   /* 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;
  }
  
 
  .header h1 {
    font-size: 4rem; 
    margin: 0;
    padding: 0;
    line-height: 1.2;
    text-align: center;
  }
  
  
  /* Index/Home page title */
  .header h1.home-title {
    font-family: 'chelsea', 'Verdana', Geneva, Tahoma, sans-serif;
    color: #f3eff1;
  }
  
    .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-color: rgba(69, 99, 96, 0.9); 
    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 {
    text-align: center;
    font-family: 'chelsea', 'Verdana', Geneva, Tahoma, sans-serif;
    color: rgb(246, 251, 251);
    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: rgb(170, 170, 102);
      margin: 0;
      padding: 0.35em 0.25em 0.3em 0.25em;
      text-align: center;
      border-bottom: 3px double;
      font-size: 17px;
      border-radius: 8px;
      }
      
    .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;
      }
  
      
      .interactive-box {
        position: relative;
        min-height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .click-image {
        max-width: 275px;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease;
        margin-bottom: 20px;
      }
      
      .click-image:hover {
        transform: scale(1.05);
      }
      
      .click-text {
        position: absolute;
        top: 10%;
        left: 53%;
        transform: translate(-50%, -50%);
        font-family: 'chelsea', 'Verdana', Geneva, Tahoma, sans-serif;
        color: #5d918b;
        font-size: 24px;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        margin: 0;
        z-index: 10;
      }
      
      .video-container {
        width: 100%;
        max-width: 100%;
        display: none;
      }
      
      .video-player {
        width: 100%;
        height: 400px;
        border-radius: 10px;
        
      }
      
      .video-container.active {
        display: block;
      }
      
      .click-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      
      .click-content.hidden {
        display: none;
      }






      

    /* for smaller screens */
     @media(max-width:888px) {
      .wrapper {
        width: calc(340px + 50vw);
        }
      .sidebar-left, .sidebar-right {
        width: 160px;
        }
      .main {
        width: 50vw;
        margin-left: 170px;
        }
      }
    
    /*mobile compatibility. just 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;
        }
      }