* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root {
    --background: #E7E7E7;
    --text-primary: #080808;
    --slot-size: 8rem;
    --margin: 0.5rem;
}

body {
    margin: 0;
    height: 100vh;
    background-color: var(--background);
}

.center {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.hour, .minute, .second {
    display: flex;
    margin: var(--margin);
}

.container {
    width: var(--slot-size);
    height: var(--slot-size);
    background-color: white;
    border-radius: 20%;
    margin: var(--margin);
    box-shadow: inset 0 0 10px rgb(0, 0, 0, 0.5);    
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.symbols {
    font-size: calc(0.6*var(--slot-size));
    line-height: var(--slot-size);
    mix-blend-mode: multiply;
    top: 50vh;
    /* transform: translateY(calc(-1*var(--slot-size))); */
    transition: 0.5s ease;
}

.dot {
    border-radius: 50%;
    width: calc(var(--margin)*1.8);
    height: calc(var(--margin)*1.8);
    box-shadow: inset 0 0 5px rgb(0, 0, 0, 0.5);
    margin: calc(var(--margin)*2) 0;
}

@media(max-width: 900px) {

    :root {
        --slot-size: 3rem;
        --margin: 0.25rem;
    }

}