/* 24-hour-clock.css */

.twenty-four-hour-clock-card {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.twenty-four-hour-clock-container {
    background-color: #ccdee1;
    padding: 110px 220px;
    border-radius: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.twenty-four-hour-clock {
    font-family: 'Seven Segment', sans-serif;
    font-size: 3.63rem;
    font-weight: bold;
    color: red;
    background-color: black;
    padding: 18.15px 36.3px;
    border-radius: 6.05px;
    border: none;
    text-shadow: 0 0 3.63px red;
    position: absolute;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateY(0deg);
}

.twenty-four-hour-clock-back {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Seven Segment', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: black;
    background-color: #fff;
    padding: 18.15px 36.3px;
    border: 2px solid #00454f;
    border-radius: 6.05px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    white-space: normal;
    overflow: hidden;
}

.twenty-four-hour-clock-container.flipped .twenty-four-hour-clock {
    transform: rotateY(180deg);
}

.twenty-four-hour-clock-container.flipped .twenty-four-hour-clock-back {
    transform: rotateY(0deg);
}

.twenty-four-hour-clock-results {
    text-align: center;
    padding: 20px;
}


.twenty-four-hour-clock-start-button, 
.twenty-four-hour-clock-next-button,
.twenty-four-hour-clock-switch,
.twenty-four-hour-clock-restart,
.twenty-four-hour-clock-continue {
	width: 100%;
    background-color: #00454f;
    color: #fff;
    border: 2px solid #00454f;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.twenty-four-hour-clock-start-button:hover, 
.twenty-four-hour-clock-next-button:hover,
.twenty-four-hour-clock-switch:hover,
.twenty-four-hour-clock-restart:hover,
.twenty-four-hour-clock-continue:hover {
	background-color: white;
	color: #00454f;
	border-color: #00454f;
}

/* 24-hour-clock-small-screens.css */

@media (max-width: 768px) {
    .twenty-four-hour-clock-card {
        height: 250px; /* Slightly reduce card height */
    }

    .twenty-four-hour-clock-container {
        padding: 50px 80px; /* Adjust padding to make container smaller */
        border-radius: 20px; /* Adjust border radius */
    }

    .twenty-four-hour-clock {
        font-size: 2.5rem; /* Smaller font size for the clock display */
        padding: 15px 30px; /* Adjust padding */
    }

    .twenty-four-hour-clock-back {
        font-size: 1.5rem; /* Smaller font size for the back of the card */
        padding: 15px 30px; /* Adjust padding */
    }

    .twenty-four-hour-clock-results {
        padding: 15px; /* Reduce padding */
    }

    .twenty-four-hour-clock-start-button,
    .twenty-four-hour-clock-next-button,
    .twenty-four-hour-clock-switch,
    .twenty-four-hour-clock-restart,
    .twenty-four-hour-clock-continue {
        padding: 10px 20px; /* Smaller padding for buttons */
        font-size: 14px; /* Smaller font size for buttons */
    }
}