body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
}

h1 {
    text-align: center;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.gallery img {
    max-width: 200px;
    height: auto;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.gallery img:hover {
    transform: scale(1.05);
    border-color: #888;
}

* {
  box-sizing: border-box; /* Ensures width includes padding and border */
}

.info-box {
  width: 250px;           /* Sets a specific width for the box */
  padding: 15px;          /* Space between the content and the border */
  border: 1px solid #ccc; /* A thin, solid gray border */
  margin: 10px;           /* Space outside the box, separating it from other elements */
  background-color: #f9f9f9; /* A light background color */
  border-radius: 5px;     /* Slightly rounded corners for a softer look */
  font-family: sans-serif; /* Readable font */
}

.info-box h3 {
  margin-top: 0;          /* Remove default top margin from the heading */
  font-size: 1.1em;       /* Adjust the title font size */
}

.info-box p {
  margin-bottom: 0;       /* Remove default bottom margin from the paragraph */
  font-size: 0.9em;       /* Adjust the description font size */
  color: #555;            /* Softer color for the description text */
}