:root {
    --hue: 223;
    --bg: hsl(var(--hue), 90%, 90%);
    --fg: hsl(var(--hue), 10%, 10%);
    --primary: hsl(var(--hue), 90%, 55%);
    --trans-dur: 0.3s;
    font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}

.clock {
    display: flex;
    justify-content: space-evenly;
    /* Убрано width: 100%; и justify-content: space-between; для центрирования */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 5px;
    scroll-margin-top: 0px;
    font-family: "Cormorant Garamond" !important;
}

/* КОНТЕЙНЕР ДЛЯ БЛОКА ВРЕМЕНИ И ПОДПИСИ */
.time-group-container {
    display: flex;
    flex-direction: column;
    /* Цифра над подписью */
    align-items: center;
    margin: 0 0.5rem;
    margin-top: 30px;
    /* Небольшой отступ между группами */
}

.clock__block {
    position: relative;
    /* background-color: hsl(var(--hue), 10%, 90%); */
    border-radius: 0.5rem;
    border-radius: 50%;
    /* box-shadow: 0 1rem 2rem hsla(var(--hue), 90%, 50%, 0.3); */
    font-size: 3em;
    line-height: 2;
    /* Убираем margin и оставляем только в .time-group-container */
    margin: 0;
    overflow: hidden;
    text-align: center;
    width: 6rem;
    /* Фиксированная ширина для всех блоков */
    height: 6rem;
    transition:
        background-color var(--trans-dur),
        box-shadow var(--trans-dur);
    background: white !important;

    box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.098), 25px 35px 20px rgba(0, 0, 0, 0.09), 25px 30px 30px rgba(0, 0, 0, 0.09), inset -20px -20px 25px rgba(255, 255, 255, 0.9) !important;
}

.clock__block_day {
    border-radius: 69% 31% 57% 43% / 42% 43% 57% 58%;
}

.clock__block_time {
    border-radius: 52% 48% 41% 59% / 51% 64% 36% 49%;
}

.clock__block_minuts {
    border-radius: 65% 35% 42% 58% / 53% 49% 51% 47%;
}

.clock__block_second {
    border-radius: 50% 50% 31% 69% / 59% 61% 39% 41%;
}

/* Увеличиваем ширину для дней, чтобы вместить 3+ цифры, если нужно */
/* .time-group-container[data-time-group="days"] .clock__block { */
/* width: 8rem; */
/* font-size: 2.5em; */
/* Слегка уменьшим шрифт для дней, чтобы вместить больше цифр */
/* } */

.clock__block--small {
    display: none;
}

/* Убираем двоеточия, если вы хотите использовать только текст */
.clock__colon {
    display: none !important;
}

/* СТИЛЬ ДЛЯ ПОДПИСИ ВНИЗУ */
.time-label {
    font-size: 1em;
    font-weight: bold;
    color: var(--fg);
    color: black;
    /* Цвет текста */
    opacity: 0.4;
    margin-bottom: 0.25rem;
}

.clock__digit-group {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
}

.clock__digits {
    width: 100%;
    height: 100%;
    color: black;
}

.clock__block--bounce {
    animation: bounce 0.75s;
}

.clock__block--bounce .clock__digit-group {
    animation: roll 0.75s ease-in-out forwards;
    transform: translateY(-50%);
}

.clock__block--delay1,
.clock__block--delay1 .clock__digit-group {
    animation-delay: 0.1s;
}

.clock__block--delay2,
.clock__block--delay2 .clock__digit-group {
    animation-delay: 0.2s;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue), 10%, 10%);
        --fg: hsl(var(--hue), 10%, 90%);
    }

    .clock__block {
        background-color: hsl(var(--hue), 90%, 40%);
        box-shadow: 0 1rem 2rem hsla(var(--hue), 90%, 60%, 0.4);
    }
}

/* Beyond mobile */
@media (min-width: 768px) {
    .clock {
        flex-direction: row;
    }

    .clock__block {
        height: 6rem;
        /* Возвращаем стандартную высоту */
    }
}

/* Animations */
@keyframes bounce {

    from,
    to {
        animation-timing-function: ease-in;
        transform: translateY(0);
    }

    50% {
        animation-timing-function: ease-out;
        transform: translateY(15%);
    }
}

@keyframes roll {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}