/* Custom CSS for Isle Royale Website
   Added styles for countdown clock, video embed, and other customizations
   Any CSS formatting added to the form or site is in this external CSS file */

/* Countdown Clock Styling */
#countdown-container {
    text-align: center;
    margin: 2em 0;
    padding: 1.5em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

#countdown {
    display: flex;
    justify-content: center;
    gap: 1.5em;
    flex-wrap: wrap;
}

.countdown-item {
    display: inline-block;
    font-size: 2.5em;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    min-width: 80px;
}

.countdown-item small {
    display: block;
    font-size: 0.35em;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.3em;
}

.countdown-expired {
    font-size: 1.5em;
    color: #ffffff;
    font-style: italic;
}

/* Video Container */
.video-container {
    text-align: center;
    margin: 1.5em 0;
}

.video-container iframe {
    max-width: 100%;
    border: 0;
}

/* Figure and Figcaption */
figure {
    margin: 1.5em 0;
}

figure img.image.main {
    display: block;
    width: 100%;
}

figcaption {
    font-style: italic;
    text-align: center;
    padding: 0.5em 0;
    color: rgba(255, 255, 255, 0.6);
}

/* Audio Player */
audio {
    display: block;
    margin: 1em auto;
    width: 100%;
    max-width: 500px;
}