/* Import external font styles */
@import url("https://use.typekit.net/yup4bjk.css");

/* General body styling */
body {
    margin: 0;
    padding: 0; 
}

/* Header styling */
header {
    text-align: center;
    background-color: #f4f4f4;
    padding: 1rem;
    border-bottom: 2px solid #ffdca5;
}

/* Main heading styling */
h1 {
    margin: 0;
}

/* Gallery grid layout */
.gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    gap: 1.5rem; /* Spacing between items */
    padding: 1rem;
}

/* Gallery item styling */
.gallery-item {
    border: 2px solid #ffdca5;
    border-radius: 5px;
    padding: 0.5rem;
    text-align: center;
}

/* Ensure gallery images appear as square thumbnails */
.gallery-item img {
    width: 100%; /* Ensures images adapt to container width */
    aspect-ratio: 1 / 1; /* Forces images to be square */
    object-fit: cover; /* Ensures images fill the square without stretching */
    display: block; /* Removes extra space below images */
    border-radius: 5px; /* Optional rounded corners */
}

/* Gallery item heading styling */
.gallery-item h2 {
    margin: 0.5rem 0;
}

/* Gallery item paragraph styling */
.gallery-item p {
    font-size: 0.9rem;
    color: #555;
}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal image styling */
.modal-content {
    width: auto;  /* Keeps original aspect ratio */
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; /* Prevent cropping */
    border-radius: 5px;
}

/* Modal close button styling */
.close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    font-size: 3em;
    color: #ffdca5; /* Change this to your desired color */
    cursor: pointer;
    z-index: 1001;
}

/* Modal navigation buttons styling */
.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ffdca5; /* Change this to your desired color */
    font-size: 3em; /* Increase the size of the icons */
    cursor: pointer;
    z-index: 1001;
}

/* Position the previous button on the left */
#prevImage {
    left: 10px;
}

/* Position the next button on the right */
#nextImage {
    right: 10px;
}

/* Caption styling */
#caption {
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 10px;
}

/* Responsive design adjustments */

/* For screens with a width less than 800px: 3 columns */
@media (max-width: 800px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* For screens with a width less than 500px: 2 columns */
@media (max-width: 500px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}