/* 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 {
      background-image: url('../pics/empty_room.png');
      text-align: center;
      position: relative; 
      background-position: top;
      background-color: #242424;
      background-repeat: no-repeat;            
      background-size: cover;                 
      background-attachment: fixed; 
      color: #e2e8f0;
      font-family:ms gothic;
      padding: 20px;
      padding-bottom: 250px; 
      margin: 0;
    }
    


    h1 {
      color: #a1a100;
      /*text-shadow: 2px 2px #000;*/
      margin-bottom: 10px;
      font-weight: 700;
    }
    
    p {
      color: #a1a100;
      /*text-shadow: 2px 2px #000;*/
      margin-bottom: 10px;
    }
  

    .neocities-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 15px;
      max-width: 1000px;
      margin: 0 auto;
      padding: 10px;
    }

    .neocities-gallery img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border: 3px solid #F20000;
      /*box-shadow: 4px 4px 0px #000;*/
      cursor: pointer;
      background-color: #121215; 
    }

    .neocities-gallery img:hover {
      transform: translate(-2px, -2px);
      /*box-shadow: 6px 6px 0px #121215;*/
      border-color: #003BFF;
    }

    .overlay {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.85);
      justify-content: center;
      align-items: center;
    }

    .overlay img {
      max-width: 100%;
      max-height: 65vh; 
      width: auto;
      height: auto;
      border: 4px solid #440a7f;
      /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);*/
      object-fit: contain;
    }
    
    .overlay-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 75vw; 
      max-height: 85vh;
    }
    
    #overlay-caption {
      margin-top: 15px;
      color: #a1a100;
      font-size: 1.2rem;
      text-shadow: 2px 2px #000;
    }
    
    .close-btn {
      position: absolute;
      top: 20px;
      right: 35px;
      color: #440a7f;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.2s;
    }

    .close-btn:hover {
      color: #a1a100;
    }
    
    .gallery-wrapper {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 20px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 10px;
    }
    
    /*.side-png {*/
    /*  width: 150px; */
    /*  height: auto;*/
    /*  position: sticky;*/
    /*  top: 20px; */
    /*}*/
    
    /*.side-png-1 {*/
    /*  width: 140px; */
    /*  height: auto;*/
    /*  position: sticky;*/
    /*  top: 20px;*/
    /*  margin-top: 60px;*/
    /*}*/
    
    .kilroy {
      position: absolute;
      bottom: 0;                   
      left: 50%;                  
      transform: translateX(-50%); 
      max-width: 200px;           
      height: auto;
      z-index: 10;
    }
    
    .neocities-gallery {
      flex: 1;
      max-width: 1000px;
      margin: 0;
    }

    
    .hive-link {
      display: block;            
      text-align: center;
      color: #F20000;            
      text-shadow: 2px 2px #000;
      margin: 15px auto;
      font-size: 1.1rem;
      text-decoration: underline;
    }
    
    .hive-link:hover {
      color: #003BFF;            
    }

    /*.corner-wrapper {*/
    /*  position: fixed;*/
    /*  z-index: 500;*/
    /*  display: flex;*/
    /*  flex-direction: column;*/
    /*  align-items: center;*/
    /*  text-decoration: none;*/
    /*}*/

    /*.corner-wrapper.bottom-left {*/
    /*  left: 0;*/
    /*  bottom: -100px;*/
    /*}*/

    /*.corner-wrapper.bottom-right {*/
    /*  right: 0;*/
    /*  bottom: -50px;*/
    /*}*/

    /*.speech-bubble {*/
    /*  background-color: #121215;*/
    /*  color: #e2e8f0;*/
    /*  border: 2px solid #a1a100;*/
    /*  border-radius: 8px;*/
    /*  padding: 8px 14px;*/
    /*  font-size: 0.95rem;*/
    /*  box-shadow: 3px 3px 0px #000;*/
    /*  margin-bottom: 12px;*/
    /*  opacity: 0;*/
    /*  transform: translateY(10px);*/
    /*  transition: opacity 0.2s ease, transform 0.2s ease;*/
    /*  pointer-events: none;*/
    /*  white-space: nowrap;*/
    /*  position: relative;*/
    /*}*/

    /*.speech-bubble::after {*/
    /*  content: '';*/
    /*  position: absolute;*/
    /*  bottom: -8px;*/
    /*  left: 50%;*/
    /*  transform: translateX(-50%);*/
    /*  border-width: 8px 8px 0;*/
    /*  border-style: solid;*/
    /*  border-color: #a1a100 transparent;*/
    /*  display: block;*/
    /*  width: 0;*/
    /*}*/
    
    /*.bottom-right .speech-bubble {*/
    /*  border-color: #440a7f; */
    /*}*/
    
    /*.bottom-right .speech-bubble::after {*/
    /*  border-color: #440a7f transparent;*/
    /*}*/

    /*.corner-wrapper:hover .speech-bubble {*/
    /*  opacity: 1;*/
    /*  transform: translateY(0);*/
    /*}*/

    /*.corner-decor {*/
    /*  height: 450px; */
    /*  width: auto;*/
    /*  pointer-events: auto;*/
    /*  cursor: pointer;*/
    /*}*/
    
    /*.corner-decor-2 {*/
    /*  height: 500px; */
    /*  width: auto;*/
    /*  pointer-events: auto;*/
    /*  cursor: pointer;*/
    /*}*/
    
    
    .header-banner {
      display: flex;
      justify-content: center;  
      align-items: center;     
      gap: 20px;               
      max-width: 1000px;
      margin: 0 auto 30px auto;
    }
    
   
    /*.header-sprites {*/
    /*  width: 100px; */
    /*  height: auto;*/
    /*  object-fit: contain;*/
    /*}*/
    
    /*.header-sprites.turn {*/
    /*  transform: scaleX(-1);*/
    /*}*/
    
    .marquee {
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
    }
    .marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: scroll 10s linear infinite;
    }
    @keyframes scroll {
      0% { transform: translate(0, 0); }
      100% { transform: translate(-100%, 0); }
    }
        
    
    @media (max-width: 768px) {
      .header-decor {
        display: none; /* Hides top decor on mobile screens */
      }
    }
    
    @media (max-width: 900px) {
      .side-png, .side-png-1 {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .corner-wrapper {
        display: none;
      }
      body {
        padding-bottom: 20px;
      }
    }