/* General styling for the page */
html, body {
    margin: 0;
    padding: 0;
    background-color: transparent; /* Light gray background */
    color: white; /* Default text color */
}

/* Styling for the clock container */
#currentTimeContainer {
    font-family: Arial, sans-serif;
    position: fixed; /* Sticks the clock to the screen */
    top: 0px; /* Positions it 10px from the top */
    left: 50%; /* Centers the container horizontally */
    transform: translateX(-50%); /* Ensures true horizontal centering */
    background-color: rgba(255, 255, 255, 0); /* Semi-transparent background */
    text-align: center; /* Align text to the start */
    padding: 2px 10px; /* Padding inside the clock container */
    border-radius: 30px; /* Rounded corners */
    box-shadow: 0 8px 10px rgba(252, 1, 1, 0.5); /* Subtle shadow for depth */
    display: flex; /* Enables horizontal alignment of children */
    align-items: center; /* Align items at the start */
    justify-content: flex-start; /* Ensures content aligns at the start of the container */
    gap: 2px; /* Adds space between time, seconds, and AM/PM */
}

/* Styling for the time */
#currentTimeContainer .clock-time {
    font-size: 13vw;
    font-weight: bold;
    transform: translateY(-13%); /* Moves the Big Clock slightly upward */
}

/* Styling for seconds and AM/PM */
#currentTimeContainer .seconds-ampm {
    display: inline-flex; /* Align seconds and AM/PM in one row */
    flex-direction: row; /* Ensure items are in a horizontal line */
    align-items: center; /* Vertically aligns items together */
    gap: 0; /* No space between seconds and AM/PM */
    transform: translateY(10%); /* Slightly move downward */
}

#currentTimeContainer .clock-seconds {
    font-size: 3vw;
    color: red;
    line-height: 1;
    text-align: center;
    transform: translateY(-5%);
}

#currentTimeContainer .clock-ampm {
    font-size: 3vw;
    font-weight: bold;
    color: green;
    transform: translateY(-20%); /* Slightly move AM/PM downward */
}

/* Blinking animation for colon */
.blinking {
    animation: blink 1s step-end infinite; /* Blinking effect */
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Adjustments for devices with a max width of 1280px  */
@media (max-width: 1280px) {
    .clock-time {
        font-size: 10vw;
        font-weight: bold;
        letter-spacing: 1px;
        top: 2vh;
        left: 15%;
    }
    .colon {
        font-size: 13vw;
        transition: visibility 0.5s ease-in-out; /* Optional smooth transition */
    }
} 

/* Adjustments for devices with a max width of 1024px 
@media (max-width: 1024px) {
    .clock-time {
        font-size: 13vw;
        font-weight: bold;
        letter-spacing: 1px;
        top: 5%;
        left: 15%;
    }

    .colon {
        font-size: 24px;
        transition: visibility 0.5s ease-in-out; /* Optional smooth transition 
    }
} */