body {
	display:grid;
	padding-top: 1dvh;
	padding-bottom: 1dvh;
	min-height: 98dvh;
	padding-left: 20dvw;
	padding-right: 20dvw;
	grid-template-rows: auto 1fr auto;
	font-family: Lato;
	font-size: 0.9rem;
	line-height: 1.75;
	
}


.main-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

}

.main-footer {
	display: flex;
	justify-content: center; /* Changed from space-between */
	align-items: center;     /* Fixed spelling */
	text-align: center;
}

.main-footer > p {
	font-size: 0.8rem;
	color: #888888;
}

/* Removed the ">" so it successfully targets the links inside the <p> */
.main-footer a {
	font-size: 0.8rem;
	color: #888888;
}

.main-footer a {
	font-size: 0.8rem;
	color: #888888;
}






a {
        color: #555555;
        text-decoration: none;
      }


/* GALLERY STUFF HERE */

#gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            padding: 0px;
        }
        
        /* Figure resets default browser margins */
        .gallery-item {
            margin: 0; 
            display: flex;
            flex-direction: column;
            background: #f9f9f9;
            border-radius: 0px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Forces the height to exactly match the width */
    object-fit: cover;   /* Prevents the image from squishing */

        }

        .gallery-item .bracket-text {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.9em;
    color: #666; /* Gives it a subtle gray look */
}

        /* Styling for the text underneath */
        .gallery-item figcaption {
            padding: 10px;
            text-align: left;
            font-size: 0.9em;
            color: #555;
            text-transform: none; /* Automatically capitalizes the first letters */
        }


/* FORM FORMATTING */
/* Form Container Styling */
.form-container {
  margin: 2rem auto;
  padding: 2.5rem;
  background-color: #ffffff;
}

.form-container h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: #333333;
  text-align: center;
  font-size: 1.5rem;
}

/* Input Field Grouping */
.form-group {
  margin-bottom: 1.25rem;
}

/* Labels */
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #555555;
}

/* Inputs & Textarea */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #cccccc;
  border-radius: 6px;
  box-sizing: border-box; /* Ensures padding stays inside the width */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus States for Accessibility */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #888888;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Button Styling */
.submit-btn {
  width: 100%;
  padding: 0.875rem;
  background-color: #888888;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.submit-btn:hover {
  background-color: #666666;
}

.submit-btn:active {
  transform: scale(0.98);
}






@media (max-width: 768px) {
  body {
    padding-left: 5dvw;  /* Leaves just a little breathing room on the edges */
    padding-right: 5dvw;
  }
}