@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');

body
{
    background: #E5E0D5;
    font-family: "Crimson Pro", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
}

button 
{
    background: white url('../images/crown-small.png') center left no-repeat; /* Button background color */
    background-size: contain;
    color: black; /* Text color */
    border: 1px solid #ccc; /* Subtle border for the button */

    margin: 0 0.8rem 0.8rem 0;
    padding: 10px 15px 10px 40px; /* Button padding */
    font-size: 16px; /* Font size for text */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
    cursor: pointer; /* Pointer cursor for hover */
    transition: all 0.3s ease; /* Smooth hover effect */
}

button.christmas { background-color: #cc0000; color: white; }

button:hover 
{
    background-color: #f8f9fa; /* Slightly darker background on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
}

button:active 
{
    transform: scale(0.98); /* Slightly shrink button on click */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Adjust shadow on active state */
}

section.inner
{
    line-height: 1.5;
    margin: 2rem 0;
    margin-inline: auto;
    max-width: 1000px;
    padding: 0 2rem;
    text-align: center;
    width: 90%;
}

h1, h2, h3 { color: #485A68; }
p { font-size: 1.2rem; color: #444; }

img.smaller { max-width: 300px; width: 100%; }

section.video, section.splash
{
    overflow: hidden;
    width: 100%;
}

section.video video, section.splash img
{
    height: auto;
    display: block;
    width: 100%;
}


/* Main for text and images in aside */

main
{
    /* background: gold; */
    align-items: flex-start;
    display: flex;
    gap: 1rem; /* Space between the article and aside */
    line-height: 1.5;
    margin: 2rem 0;
    margin-inline: auto;
    max-width: 1000px;
    padding: 0;
    width: 90%;
    box-sizing: border-box; /* Include padding in total width */
}

article
{
    box-sizing: border-box;
    flex: 1 1 60%; /* Allow article to take up 60% of the width */
}

aside
{
    box-sizing: border-box;
    flex: 1 1 40%; /* Allow aside to take up 40% of the width */
}

aside img
{
    display: block;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    width: 100%; /* Make images and iframe responsive */
    height: auto; /* Maintain aspect ratio */
}

aside iframe
{
    display: block;
    width: 100%; /* Make images and iframe responsive */
    aspect-ratio: 1 / 1; /* Ensures the iframe is a square */
    height: auto; /* Maintain aspect ratio */
}

/* Ensure side-by-side layout on smaller screens */
@media (max-width: 600px) {
    main {
        flex-direction: column; /* Stack elements vertically */
    }

    article,
    aside {
        flex: 1 1 100%; /* Take up full width when stacked */
    }
}

/* Form */

    form dl dd { margin: 0; padding: 0; }
    form dl dd input { max-width: 300px; padding: 0.5rem; width: 100%; }
    form dl dd textarea { height: 100px; max-width: 300px; padding: 0.5rem; width: 100%; }

/* Footer */

footer { background: #485A68; padding: 1.5rem; text-align: center; }
footer a { color: inherit; }
footer img { width: 200px; }
footer img, footer h3, footer p { margin-top: 1rem; }
footer h3, footer p { color: #E5E0D5 !important; }