body {
	
	font-family: monospace;
	color: white;
	background-image: url(https://warpunderweather.neocities.org/floral-pattern-6994636_1280.png);
	background-repeat: repeat;
	background-size: 500px;
	background-position: 50%;
	padding-top: 40px;
	border-top: 1px solid transparent;
}


.header-graphic {
    display: block;      /* Makes the image a block element so margins can center it */
    margin: 20px auto 10px; /* Centers the image horizontally, adds space above and below */
    max-width: 235px;    /* Controls the size of your graphic */
    height: auto;        /* Ensures the image doesn't get distorted */
}


.gallery-container {
    display: grid;
    /* This creates a responsive grid: 
       It automatically fits as many columns of at least 300px width as possible. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* Space between the images */
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    background-color: black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s;
}


.gallery-item img {
    width: 100%; /* Image takes up full width of its container */
    height: 400px; /* Fixed height for uniform gallery appearance */
    object-fit: cover; /* Ensures images cover the area without stretching */
    display: block;
}


.caption {
    padding: 7px;
    font-size: 11px;
    font-style: italic; 
    text-align: center;
}

.content {
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}