body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #80E8D4;
    transition: background-color 3s ease-in-out; /* Change 1s to any time for different transition speeds */
}

.clock-container {
    position: relative;
    max-width: auto; /* Limit maximum size */
    height: auto;
}


.clock-image {
    max-width: 100%; /* Responsive clock size */
    height: auto; /* Maintain aspect ratio */
}

/* Media query for smaller screens */
@media (max-width: 599px) {
    body {
        flex-direction: column;
        background-color: lightcoral;
        display: block; /* Remove flex centering entirely */
    }

    .clock-container {
        width: 100%;
        position: relative;
        top: 10px; /* Adjust as needed */
    }

    
}

@media (min-width: 600px) and (max-width: 899px) {
    body {
        background-color: lightsteelblue; /* For testing */
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    body {
        background-color: lightseagreen; /* For testing */
    }
}

/* Disable scrolling on large screens */
@media (min-width: 1080px) {
    html, body {
        overflow: hidden;
    }
}