body {
    /* Always provide a background color fallback in case the image fails to load */
    background-color: #2c3e50; 
    
    /* Define the source path of your graphic file */
    background-image: url('https://sadhost.neocities.org/images/tiles/aquagalaxy_small.gif'); 
    
    background-repeat: repeat;           /* Tiles both horizontally and vertically (Default) */
  background-repeat: repeat-x;         /* Tiles horizontally only (left to right) */
  background-repeat: repeat-y;         /* Tiles vertically only (top to bottom) */
  background-repeat: space;            /* Tiles but tiles evenly spreads them with gaps */
  background-repeat: round;  
    
    /* Keep the background stationary when scrolling through layout data */
    background-attachment: fixed; 
    
    /* Erase browser margins to avoid white border gaps */
  margin: 0; /* Reset browser defaults first */
  padding-top: 20px;
  padding-left: 80px;
  padding-right: 80px;
    height: 100vh;
}



.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content; 
  gap: 16px 16px;
  height: auto; 
  min-height: 200px; 
  margin: 90px 80px 0px; /* Added 'px' units here */
}

/* 2. Tell the first item to stretch across the grid */
.item-1 {
  grid-column: span 3; /* This lets the header use all 3 columns */
}

.grid-item {
  border-radius: 4px;
  display: block; 
  text-align: left; /* Lowercase 'left' */
  height: auto; 
  align-self: start; 
  padding: 1px;
  color: white;
  font-weight: 600;
  
  /* 3. Give the text elements room to breathe vertically */
  line-height: 1.5; 
}

.item-1 {
  padding: 5px;
 line-height: 12px;
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background-color: #ff66ff;
}

.item-2 {
   padding: 5px;
 line-height: 12px;
 
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  background-color: #66b3ff;
}

.item-3 {
  Padding: 10px;
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background-color: #009973;
}

.item-4 {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  background-color: #f59e0b;
}

/* Tablet styles */
@media (max-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 16px 16px;
  }
}

/* Mobile styles */
@media (max-width: 640px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 16px 16px;
  }
}