* {
    box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;    margin: 0;
  padding: 0;
  line-height: 1.5;
  background: #111;
  color: #f5f5f5;
}

header, main, footer {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

h1, h2, h3 {
  font-weight: 700;
}


/* reset default list styling for the gallery */
.gallery {
    list-style: none;              /* remove bullets */
    padding: 0;                    /* remove default ul padding */
    margin: 2rem auto 0;           /* space above, centered */
    
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px;                     /* space between items */
    width: 90%;
}

/* each item in the gallery */
.item img {
    width: 100%;
    height: 200px;        /* same height for all */
    object-fit: cover;    /* crop without distortion */
    border-radius: 10px;
}

.item p {
    text-align: center;
    margin-top: 8px;
    font-size: 16px;
}

/*CSS for to adjust for different screen sizes*/
@media (max-width: 800px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/*CSS for cool effects for images*/
li:hover {
    transform: scale(1.03);      /* small zoom */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.intro:hover {
    transform: scale(1.03);      /* small zoom */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

h1:hover {
    transform: scale(1.03);      /* small zoom */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

h2:hover {
    transform: scale(1.03);      /* small zoom */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

footer:hover {
    transform: scale(1.03);      /* small zoom */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}