body {
    color: #A66724;
    /* Warm Brown for text */
    background-color: #F3E9D2;
    /* Soft Beige for background */
    margin: 20;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
    text-align: left;
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #FFFDF7;
    /* Creamy White for content background */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {

    font-family: filicudi-solid, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #5C4533;
    /* Dark Brown for headings */
}

h2 {

    font-family: filicudi-solid, sans-serif;
    font-style: normal;
    color: #5C4533;
    /* Dark Brown for headings */
}

a {
    font-weight: bold;

    & i {
        vertical-align: middle;
    }
}

p {
    font-family: Arial, Helvetica, sans-serif;
}

.venue,
.social-media {
    margin: 20px 0;
    padding: 10px;
    background-color: #FFFDF7;
    /* Creamy White for sections */
    border: 1px solid #A67C52;
    /* Warm Brown for border */
}

.venue ul {
    list-style-type: none;
}

.social-media a {
    margin: 0 10px;
    color: #597994;
    /* Light Blue for links */
    text-decoration: none;
}

.social-media a:hover {
    color: #A67C52;
    /* Warm Brown for hover state */
}

footer {
    margin-top: auto;
    width: 100%;
    background-color: #5C4533;
    /* Dark Brown for footer */
    color: #FFFDF7;
    /* Creamy White for footer text */
    text-align: center;
}

#logo {
    max-width: 100%;
    height: auto;
}

@media screen and (min-width: 100px) {
    .gallery {
        display: grid;
        gap: 5px;
        padding: 5px;
        grid-template-columns: repeat(2, 1fr);

        & img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 8px;
        }
    }
}

@media screen and (min-width: 600px) {
    .gallery {
        --size: 100px;
        display: grid;
        grid-template-columns: repeat(6, var(--size));
        grid-auto-rows: var(--size);
        margin-bottom: var(--size);
        place-items: start center;
        gap: 5px;
        justify-content: center;

        &:has(:hover) img:not(:hover),
        &:has(:focus) img:not(:focus) {
            filter: brightness(0.5) contrast(0.5);
        }

        & img {
            object-fit: cover;
            width: calc(var(--size) * 2);
            height: calc(var(--size) * 2);
            clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
            transition: clip-path 0.25s, filter 0.75s;
            grid-column: auto / span 2;
            border-radius: 5px;

            &:nth-child(5n - 1) {
                grid-column: 2 / span 2
            }

            &:hover,
            &:focus {
                clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
                z-index: 1;
                transition: clip-path 0.25s, filter 0.25s;
            }

            &:focus {
                outline: 1px dashed black;
                outline-offset: -5px;
            }
        }
    }
}