/* 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 { margin: 0; 
    font-family: Arial, sans-serif; 
    color: #fff; text-align: center; 
    background-image: url("/slow-grain.gif"); 
    background-repeat: repeat; 
    background-size: auto; 
    background-position: top left; 
    background-attachment: fixed;
    padding-bottom: 50px;
    } 
    
    body::before { 
      content: ""; 
      position: fixed; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      background: rgba(0, 0, 0, 0.5); 
      z-index: -1; 
      } 
      
     .hero { 
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  padding: 25px 0;     /* Add normal header padding */
  text-align: center; 
  height: auto;        /* Don't fill the full screen */
}

.hero img { 
  max-width: 90%; 
  height: auto; 
}

.hero .logo { 
  width: 600px;
  max-width: 90%;      /* Keeps it responsive */
  margin-bottom: 25px; 
}

.hero .gif { 
  width: 100px;
  transform: rotate(90deg);
  margin-bottom: 25px;
}
      .videos { 
        display: flex; 
        flex-direction: column; 
        align-items: center; /* this centers everything inside */ 
        padding: 40px 0; 
        
      } 
      
      .video-container { 
        position: relative; 
        width: 100%; 
        max-width: 800px; 
        margin: 0 auto 40px auto; /* ensures horizontal centering */ 
        overflow: hidden; 
        border-radius: 8px; 
        } 
      
      .video-container video { 
          width: 100%; 
          height: 100%; 
          object-fit: cover; /* or contain */ 
          border-radius: 8px; 
          } 
      .video-container iframe { 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; height: 100%; 
        border: none; border-radius: 8px; 
        } 
        
        /* BIG center speaker button */ 
        .mute-btn { 
          position: absolute; top: 50%; left: 50%; 
          transform: translate(-50%, -50%); width: 90px; height: 90px; 
          border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.45); 
          box-shadow: 0 0 18px rgba(0,0,0,0.25); cursor: pointer; display: flex; 
          justify-content: center; 
          align-items: center; /* prevents always-visible problem */ 
          opacity: 0; pointer-events: none; 
          transition: 
          opacity 0.4s ease; 
          } 
          
          /* Desktop hover reveal (does not override JS hide) */ 
          .video-container:hover .mute-btn:not(.hidden) { 
            opacity: 1; pointer-events: auto; } /* JS shows button */ 
            
            .mute-btn.show { 
              opacity: 1; pointer-events: auto; 
              } 
              
             /* JS hides button - mobile fix */ 
             .mute-btn.hidden { opacity: 0; pointer-events: none; } 
             
             /* Optional hover styling */ 
             .mute-btn:hover { 
               opacity: 1; 
               background: rgba(0, 0, 0, 0.75); 
               } 
               
              /* Speaker icon (muted, no soundwave) */ 
              .mute-btn::before { 
              content: ""; 
              width: 24px; 
              height: 24px; 
              background: white; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 9v6h4l5 5V4L7 9H3z'/></svg>") no-repeat center / contain; } 
              /* Speaker waves when unmuted */ 
              .mute-btn.unmuted::after { 
                content: ""; 
                position: absolute; 
                width: 38px; 
                height: 38px; 
                background: white; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M16.5 12c0-1.77-.96-3.29-2.32-4.15v2.18c.5.42.82 1.05.82 1.97s-.32 1.55-.82 1.97v2.18c1.36-.86 2.32-2.38 2.32-4.15z'/><path d='M19 12c0-3.03-1.77-5.64-4.32-6.87v2.23c1.33.99 2.12 2.63 2.12 4.64s-.79 3.65-2.12 4.64v2.23C17.23 17.64 19 15.03 19 12z'/></svg>") no-repeat center / contain; 
                } 
                @media (min-width: 1024px) {
                  .video-container { 
                    width: 50%; 
                    max-width: none; /* allow it to grow to 50% instead of stopping at 800px */ } } /* Mobile: place mute button at bottom center */ 
                    
                @media (max-width: 768px) { 
                  .mute-btn { top: auto; /* remove vertical centering */ 
                  bottom: 20px; /* place near bottom */ 
                  left: 50%; transform: translateX(-50%); /* horizontal center only */ 
                  width: 70px; /* optional: slightly smaller on mobile */ 
                  height: 70px; 
                  opacity: 1; /* visible by default */ pointer-events: auto; /* clickable */ } } 
                  
                  /* About section */ 
                  .about { max-width: 768px; 
                  margin: 0 auto; 
                  padding: 0 20px; 
                  line-height: 1.6; } 
                  .about h1 { font-size: 2em; 
                  margin-bottom: 20px; } 
                  .about p { font-size: 1.1em; 
                  text-align: justify;
                  margin-bottom: 20px; } 
                  .about img { 
                    max-width: 200px; 
                    height: auto; } @media (max-width: 768px) { 
                      
                  .hero .logo { 
                        width: 90%; 
                        margin-bottom: 25px; } 
                        
                  .hero .gif { width: 150px; } 
                  
                  .video-container { max-width: 100%; } 
                  .about { padding: 0 16px; } 
                  .about h1 { font-size: 1.6em; } 
                  .about p { font-size: 1em; } }