body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: black; /* Background color for the page */
}

/* Grid container styling */
.grid-container {
  display: grid;
  grid-template-areas:
    "top-left top-center top-right"
    "middle-left center middle-right"
    "bottom-left bottom-center bottom-right";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  height: 100vh; /* Full viewport height */
  gap: 10px; /* Space between items */
  align-items: stretch; 
  justify-items: stretch;
  z-index: 1;
}

/* Grid item styling */
.grid-item {
  background-color: #black; /* Background color for grid items */
  color: white; /* Text color for contrast */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 0px solid #fff; /* Optional: border for better visibility */
  z-index: 1;
  
}
  /*Force the iframe to occupy the full width and height of its grid cell */
/*.grid-item iframe {
    width: 100%;
    height: 200vh;
    border: none; /* Optional: removes default border 
    display: block; /* Prevents tiny gaps at the bottom of the frame */

}

/* Specific area styling */
.top-left { grid-area: top-left; }
.top-center { grid-area: top-center; }
.top-right { grid-area: top-right; }
.middle-left { grid-area: middle-left; }
.center { grid-area: center; }
.middle-right { grid-area: middle-right; }
.bottom-left { grid-area: bottom-left; }
.bottom-center { grid-area: bottom-center; }
.bottom-right { grid-area: bottom-right; }
.middle-right { grid-area: middle-right; }
.bottom-left { grid-area: bottom-left; }
.bottom-center { grid-area: bottom-center; }
.bottom-right { grid-area: bottom-right; }

}

/*.walking-spider { position: fixed; top: 0; left: -150px; 
  z-index: 9999;
  width: 100px; 
animation: crawl 12s linear infinite, walk 0.5s ease-in-out infinite alternate;
  
/* Controls the spider moving across the screen *
@keyframes crawl { 0% { left: -150px; transform: translateY(0); } 100% { left: 100vw; 
            
transform: translateY(0); } }
/* Controls the up/down walking motion (legs/body) *
@keyframes walk { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-10px) rotate(5deg); 
                                                                      
                                      } }*/
  



.spider {
  position: absolute;
  top: 45px;
  left: 50%;
  animation: walk 2s linear infinite alternate; 
    transform: translateX(-50%);
  width: 100px;
  height: 100px; 
  /* Adjust timing as needed */
}

@keyframes walk {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100% - 50px));