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

:root {
    --background: #E7E7E7;
    --text-primary: #080808;
    --clock-frame-diameter: 300px;
    --clock-frame-border: 20px;
    --hands-width: 5px;
    --hour-hand-height: 60px;
    --minute-hand-height: 90px;
    --second-hand-height: 120px;
    --rotation: 0;
}

body {
    margin: 0;
    height: 100vh;
    background-color: var(--background);
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.clocks-wrapper, .clock-markings-wrapper {
    display: flex;
    transform: translateY(50%);
    align-self: end;
}

.clocks-wrapper_top {
    transform: translateY(-50%);
    align-self: start;
}

.clock-markings {
    width: var(--clock-frame-diameter);
    height: var(--clock-frame-diameter);
    border: var(--clock-frame-border) solid var(--text-primary);
    border-radius: 50%;
    /* background-color: #fafafa; */
    filter: drop-shadow(0 0 0.5rem gray);
    transform: translateZ(0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.hands-wrapper {
    transform: translateX(calc(0.5 * var(--clock-frame-diameter)));
}


.hour-hand, .minute-hand, .second-hand {
    filter: drop-shadow(0 0 0.5rem gray);
    position: absolute;
    transform-origin: bottom;
    bottom: calc(0.5 * var(--clock-frame-diameter));
    transform: rotate(calc(var(--rotation) * 1deg)) translateZ(0);
}

.hour-hand {
    outline: calc(0.5*var(--hands-width)) solid var(--text-primary);
    height: var(--hour-hand-height);
}

.minute-hand {
    outline: calc(0.5*var(--hands-width)) solid var(--text-primary);
    height: var(--minute-hand-height);
}

.second-hand {
    outline: calc(0.25*var(--hands-width)) solid crimson;
    height: var(--second-hand-height);
}

/* 
@media(max-width: 800px) {
  
  .clocks-wrapper {
    transform: rotate(-90deg) translateY(50%);
    align-self: center;
  }
  
} */