/* Version tag for cache busting: v=2.3 */

/* Define custom colors */
:root {
    --dtiapos-muted-pink: #ff9999; /* Darker muted pink */
    --dtiapos-muted-blue: #3a506b; /* Muted blue */
    --dtiapos-muted-red: #b22234; /* Muted red */
    --dtiapos-muted-grey: #666; /* Muted grey */
    --dtiapos-white: #fff; /* White */
}

/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--dtiapos-muted-pink); /* Use the updated darker pink color */
    color: #333;
}

/* Header Styles */
header {
    background-color: var(--dtiapos-muted-blue); /* Use the custom blue color */
    color: #fff; /* White text */
    text-align: center;
    padding: 20px 10px;
}

header h1 {
    font-size: 2em;
    margin: 0;
}

header .version {
    font-size: 0.9em;
    margin-top: 5px;
    color: var(--dtiapos-muted-red); /* Use the custom red color */
}

/* Countdown Styles */
.countdown-container {
    text-align: center;
    margin: 20px auto;
}

.countdown {
    font-size: 3em; /* Large countdown numbers */
    font-weight: bold;
    color: var(--dtiapos-muted-red); /* Custom red */
    margin: 0;
}

.countdown-text-lite {
    font-size: 1.5em; /* Larger than translation text */
    color: var(--dtiapos-white); /* Custom grey */
    margin: 5px 0 10px 0;
}

.countdown-text-dark {
    font-size: 1.25em; /* Larger than translation text */
    color: var(--dtiapos-muted-blue); /* Custom grey */
    margin: 5px 0 10px 0;
}

/* Image Rotator Styles */
.image-rotator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    width: 500px;
    max-width: 90%; /* Responsive adjustment */
    /*overflow: hidden; */
    padding: 16px; /* Add padding to fit the shadows */
    box-sizing: content-box; /* Ensure padding doesn’t shrink the image */
}

.image-rotator img {
    width: 80%;
    height: 80%; /* Maintain aspect ratio */
    border-radius: 15px 75px;
    border: 6px solid var(--dtiapos-muted-blue); /* Innermost blue border */
    box-shadow:
        0 0 0 6px var(--dtiapos-white),      /* Middle white border */
        0 0 0 12px var(--dtiapos-muted-red); /* Outermost red border */
    transition: clip-path 0.3s ease-in-out; /* Smooth effect */
}

.image-rotator img:hover {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Translation Text Styles */
.translation {
    text-align: center;
    font-size: 1.5em;
    color: var(--dtiapos-white); /* Use the custom white color */
    margin-top: 10px;
}