/* General Page Styles */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #121212;
    color: #ffffff;
    min-height: 100vh;
}

.video-container {
    width: 100%;
    position: relative;
    background-color: #000;
    aspect-ratio: 16 / 9;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    cursor: pointer;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 800px;
    padding: 5px;
    gap: 5px;
    box-sizing: border-box;
}

select, .control-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background-color: #00bcd4;
    color: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
}

select {
    width: 76%;
    text-align: center;
    text-align-last: center;
}

#playPauseButton, #repeatButton {
    width: 22%;
    height: 40px;
}

/* Share Button Styles */
#shareButton {
    width: 40px;
    height: 40px;
    background-color: #00bcd4; /* Blue background */
    border: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

#shareButton img {
    width: 100%;
    height: auto;
    pointer-events: none;
}

#shareButton:hover {
    background-color: #008ba3; /* Hover color */
}

#shareButton:active {
    background-color: #006b7a; /* Active color */
}

.control-button:hover {
    background-color: #008ba3;
}

.control-button:active {
    background-color: #006b7a;
}

.active {
    background-color: #ff5722 !important;
}

.all-active {
    background-color: #4caf50 !important;
}

/* Text Color Animation 1 */
@keyframes textColorAnimation1 {
    0% { color: #ffffff; } /* White */
    20% { color: #001f5b; } /* Dark Blue */
    40% { color: #ffffff; } /* White */
    60% { color: #001f5b; } /* Dark Blue */
    80% { color: #ffffff; } /* White */
    98% { color: #001f5b; } /* Dark Blue before final pause */
    100% { color: #001f5b; } /* Hold Dark Blue during final pause */
}

/* Text Color Animation 2 */
@keyframes textColorAnimation2 {
    0% { color: #001f5b; } /* Dark Blue */
    20% { color: #ffffff; } /* White */
    40% { color: #001f5b; } /* Dark Blue */
    60% { color: #ffffff; } /* White */
    80% { color: #001f5b; } /* Dark Blue */
    98% { color: #ffffff; } /* White before final pause */
    100% { color: #ffffff; } /* Hold White during final pause */
}

/* Text Color Animation 3 */
@keyframes textColorAnimation3 {
    0% { color: #ffffff; } /* White */
    25% { color: #001f5b; } /* Dark Blue */
    50% { color: #ffffff; } /* White */
    75% { color: #001f5b; } /* Dark Blue */
    90% { color: #ffffff; } /* White */
    98% { color: #001f5b; } /* Dark Blue before final pause */
    100% { color: #001f5b; } /* Hold Dark Blue during final pause */
}

/* Text Color Animation 4 */
@keyframes textColorAnimation4 {
    0% { color: #001f5b; } /* Dark Blue */
    25% { color: #ffffff; } /* White */
    50% { color: #001f5b; } /* Dark Blue */
    75% { color: #ffffff; } /* White */
    90% { color: #001f5b; } /* Dark Blue */
    98% { color: #ffffff; } /* White before final pause */
    100% { color: #ffffff; } /* Hold White during final pause */
}

/* Combined Animation with a Global Pause */
@keyframes fullRoutine {
    /* Sweep One */
    0% { background-position: 200% 0; } /* Sweep one start */
    10% { background-position: 0 0; } /* Sweep one end (left-to-right) */
    20% { background-position: -200% 0; } /* Sweep one (right-to-left) */
    30% { background-position: 0 -200%; } /* Sweep one (upward) */
    40% { background-position: 0 200%; } /* Sweep one (downward) */
    45% { background-position: 0 200%; } /* Pause at the end of sweep one */
    
    /* Sweep Two */
    50% { background-position: 0 -200%; } /* Sweep two start (upward) */
    60% { background-position: 0 200%; } /* Sweep two (downward) */
    70% { background-position: 200% 0; } /* Sweep two (left-to-right) */
    80% { background-position: -200% 0; } /* Sweep two (right-to-left) */
    85% { background-position: 0 0; } /* Pause at the end of sweep two */

    /* Sweep Three */
    90% { background-position: -200% 0; } /* Sweep three start (right-to-left) */
    92% { background-position: 0 -200%; } /* Sweep three (upward) */
    94% { background-position: 0 200%; } /* Sweep three (downward) */
    96% { background-position: 200% 0; } /* Sweep three (left-to-right) */
    98% { background-position: 0 0; } /* Pause at the end of sweep three */

    /* Global Pause */
    100% { background-position: 0 0; } /* Additional 5-second pause */
}

#downloadButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    font-size: clamp(13px, 1.5vw, 16px);
    height: auto; /* Adjusts height to content and padding */
    padding: 0.25em 0.85em; /* Adds space around the text */
    border: none;
    border-radius: 5px;
    background: linear-gradient(45deg, #d4af37, #ffd700, #b8860b); /* Gold gradient */
    background-size: 200% 200%; /* Set larger background size for directional sweeps */
    color: #ffffff; /* White text for contrast */
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap; /* Prevents text from wrapping */
    max-width: fit-content; /* Ensures the button only takes as much space as needed */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Add a subtle glow */

    /* Combined animations */
    animation: 
        fullRoutine 45s infinite, /* Background animation */
        textColorAnimation1 45s infinite; /* Text color animation */
}

#downloadButton:nth-child(1) {
    animation: fullRoutine 45s infinite, textColorAnimation1 45s infinite;
}

#downloadButton:nth-child(2) {
    animation: fullRoutine 45s infinite, textColorAnimation2 45s infinite;
}

#downloadButton:nth-child(3) {
    animation: fullRoutine 45s infinite, textColorAnimation3 45s infinite;
}

#downloadButton:nth-child(4) {
    animation: fullRoutine 45s infinite, textColorAnimation4 45s infinite;
}





/* Responsive iframe styles */
#CF_BottomFrame {
    display: block;
    width: 100%;
    max-width: 100%;
    border: none;
    margin: 0 auto;
    background-color: transparent;
    text-align: center;
    height: auto; /* Allow iframe height to scale dynamically */
}

/* Image inside iframe styling */
iframe img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Media Queries for Smaller Screens */
@media (max-width: 768px) {
    .controls {
        gap: 3px;
    }

    .control-button, select {
        font-size: 14px;
        height: 32px;
    }

    select {
        width: 78%;
    }
	
	#shareButton {
        width: 35px;
        height: 32px;
    }

    #playPauseButton, #repeatButton {
        width: 21%;
        height: 32px;
    }

    #downloadButton {
        font-size: 14px;
        height: 23px;
    }

    #CF_BottomFrame {
        width: 100%;
    }
}