.clock {
    height: 60px;
    width: 60px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    position: relative;
    margin: auto;
}

.clock__second {
    position: absolute;
    left: calc(50% - 1px);
    width: 2px;
    background: #fafafa;
    transform-origin: bottom center;
    z-index: 2;
    border-radius: 4px;
}

.clock__indicator {
    position: absolute;
    left: calc(50% - 1px);
    width: 2px;
    background: #fafafa;
    transform-origin: bottom center;
    z-index: 2;
    border-radius: 4px;
}

.clock__minute,
.clock__hour {
    position: absolute;
    left: calc(50% - 1.5px);
    width: 3px;
    background: #fafafa;
    transform-origin: bottom center;
    z-index: 2;
    border-radius: 4px;
}

.clock__second {
    height: 25px;
    margin-top: 5px;
    background: #fafafa;
    -webkit-animation: time 60s linear infinite;
    animation: time 60s linear infinite;
    opacity: 0.2;
    z-index: 3;
}

.clock__minute {
    height: 23px;
    margin-top: 7px;
    opacity: 0.9;
    -webkit-animation: time 3600s linear infinite;
    animation: time 3600s linear infinite;
}

.clock__hour {
    height: 18px;
    margin-top: 12px;
    opacity: 0.9;
    -webkit-animation: time 43200s linear infinite;
    animation: time 43200s linear infinite;
}

.clock__indicator {
    /* opacity: 0.2;
    height: 30px;
    border-top: 1px solid #fafafa;
    background: none; */
    opacity: 0.2;
    height: 3px;
    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #fafafa;
    background: none;
    margin-top: 27px;
    background: #fafafa;
    /* margin-bottom: 30px; */
}

.clock__indicator:nth-of-type(5n) {
    opacity: 0.75;
    /* height: 25px; */
    height: 5px;
    margin-top: 25px;
    /* border-top: 5px solid #fafafa; */
    background: #fafafa;
}

.clock__axis {
    background: #4f4f4f;
    width: 6px;
    height: 6px;
    border-radius: 6px;
    position: absolute;
    z-index: 4;
    top: 27px;
    border: solid 1.75px #fafafa;
}

section.clock__indicator:nth-of-type(1) {
    transform: rotateZ(calc(6deg * 1)) translateY(30px);
}

section.clock__indicator:nth-of-type(2) {
    transform: rotateZ(calc(6deg * 2)) translateY(30px);
}

section.clock__indicator:nth-of-type(3) {
    transform: rotateZ(calc(6deg * 3)) translateY(30px);
}

section.clock__indicator:nth-of-type(4) {
    transform: rotateZ(calc(6deg * 4)) translateY(30px);
}

section.clock__indicator:nth-of-type(5) {
    transform: rotateZ(calc(6deg * 5)) translateY(30px);
}

section.clock__indicator:nth-of-type(6) {
    transform: rotateZ(calc(6deg * 6)) translateY(30px);
}

section.clock__indicator:nth-of-type(7) {
    transform: rotateZ(calc(6deg * 7)) translateY(30px);
}

section.clock__indicator:nth-of-type(8) {
    transform: rotateZ(calc(6deg * 8)) translateY(30px);
}

section.clock__indicator:nth-of-type(9) {
    transform: rotateZ(calc(6deg * 9)) translateY(30px);
}

section.clock__indicator:nth-of-type(10) {
    transform: rotateZ(calc(6deg * 10)) translateY(30px);
}

section.clock__indicator:nth-of-type(11) {
    transform: rotateZ(calc(6deg * 11)) translateY(30px);
}

section.clock__indicator:nth-of-type(12) {
    transform: rotateZ(calc(6deg * 12)) translateY(30px);
}

section.clock__indicator:nth-of-type(13) {
    transform: rotateZ(calc(6deg * 13)) translateY(30px);
}

section.clock__indicator:nth-of-type(14) {
    transform: rotateZ(calc(6deg * 14)) translateY(30px);
}

section.clock__indicator:nth-of-type(15) {
    transform: rotateZ(calc(6deg * 15)) translateY(30px);
}

section.clock__indicator:nth-of-type(16) {
    transform: rotateZ(calc(6deg * 16)) translateY(30px);
}

section.clock__indicator:nth-of-type(17) {
    transform: rotateZ(calc(6deg * 17)) translateY(30px);
}

section.clock__indicator:nth-of-type(18) {
    transform: rotateZ(calc(6deg * 18)) translateY(30px);
}

section.clock__indicator:nth-of-type(19) {
    transform: rotateZ(calc(6deg * 19)) translateY(30px);
}

section.clock__indicator:nth-of-type(20) {
    transform: rotateZ(calc(6deg * 20)) translateY(30px);
}

section.clock__indicator:nth-of-type(21) {
    transform: rotateZ(calc(6deg * 21)) translateY(30px);
}

section.clock__indicator:nth-of-type(22) {
    transform: rotateZ(calc(6deg * 22)) translateY(30px);
}

section.clock__indicator:nth-of-type(23) {
    transform: rotateZ(calc(6deg * 23)) translateY(30px);
}

section.clock__indicator:nth-of-type(24) {
    transform: rotateZ(calc(6deg * 24)) translateY(30px);
}

section.clock__indicator:nth-of-type(25) {
    transform: rotateZ(calc(6deg * 25)) translateY(30px);
}

section.clock__indicator:nth-of-type(26) {
    transform: rotateZ(calc(6deg * 26)) translateY(30px);
}

section.clock__indicator:nth-of-type(27) {
    transform: rotateZ(calc(6deg * 27)) translateY(30px);
}

section.clock__indicator:nth-of-type(28) {
    transform: rotateZ(calc(6deg * 28)) translateY(30px);
}

section.clock__indicator:nth-of-type(29) {
    transform: rotateZ(calc(6deg * 29)) translateY(30px);
}

section.clock__indicator:nth-of-type(30) {
    transform: rotateZ(calc(6deg * 30)) translateY(30px);
}

section.clock__indicator:nth-of-type(31) {
    transform: rotateZ(calc(6deg * 31)) translateY(30px);
}

section.clock__indicator:nth-of-type(32) {
    transform: rotateZ(calc(6deg * 32)) translateY(30px);
}

section.clock__indicator:nth-of-type(33) {
    transform: rotateZ(calc(6deg * 33)) translateY(30px);
}

section.clock__indicator:nth-of-type(34) {
    transform: rotateZ(calc(6deg * 34)) translateY(30px);
}

section.clock__indicator:nth-of-type(35) {
    transform: rotateZ(calc(6deg * 35)) translateY(30px);
}

section.clock__indicator:nth-of-type(36) {
    transform: rotateZ(calc(6deg * 36)) translateY(30px);
}

section.clock__indicator:nth-of-type(37) {
    transform: rotateZ(calc(6deg * 37)) translateY(30px);
}

section.clock__indicator:nth-of-type(38) {
    transform: rotateZ(calc(6deg * 38)) translateY(30px);
}

section.clock__indicator:nth-of-type(39) {
    transform: rotateZ(calc(6deg * 39)) translateY(30px);
}

section.clock__indicator:nth-of-type(40) {
    transform: rotateZ(calc(6deg * 40)) translateY(30px);
}

section.clock__indicator:nth-of-type(41) {
    transform: rotateZ(calc(6deg * 41)) translateY(30px);
}

section.clock__indicator:nth-of-type(42) {
    transform: rotateZ(calc(6deg * 42)) translateY(30px);
}

section.clock__indicator:nth-of-type(43) {
    transform: rotateZ(calc(6deg * 43)) translateY(30px);
}

section.clock__indicator:nth-of-type(44) {
    transform: rotateZ(calc(6deg * 44)) translateY(30px);
}

section.clock__indicator:nth-of-type(45) {
    transform: rotateZ(calc(6deg * 45)) translateY(30px);
}

section.clock__indicator:nth-of-type(46) {
    transform: rotateZ(calc(6deg * 46)) translateY(30px);
}

section.clock__indicator:nth-of-type(47) {
    transform: rotateZ(calc(6deg * 47)) translateY(30px);
}

section.clock__indicator:nth-of-type(48) {
    transform: rotateZ(calc(6deg * 48)) translateY(30px);
}

section.clock__indicator:nth-of-type(49) {
    transform: rotateZ(calc(6deg * 49)) translateY(30px);
}

section.clock__indicator:nth-of-type(50) {
    transform: rotateZ(calc(6deg * 50)) translateY(30px);
}

section.clock__indicator:nth-of-type(51) {
    transform: rotateZ(calc(6deg * 51)) translateY(30px);
}

section.clock__indicator:nth-of-type(52) {
    transform: rotateZ(calc(6deg * 52)) translateY(30px);
}

section.clock__indicator:nth-of-type(53) {
    transform: rotateZ(calc(6deg * 53)) translateY(30px);
}

section.clock__indicator:nth-of-type(54) {
    transform: rotateZ(calc(6deg * 54)) translateY(30px);
}

section.clock__indicator:nth-of-type(55) {
    transform: rotateZ(calc(6deg * 55)) translateY(30px);
}

section.clock__indicator:nth-of-type(56) {
    transform: rotateZ(calc(6deg * 56)) translateY(30px);
}

section.clock__indicator:nth-of-type(57) {
    transform: rotateZ(calc(6deg * 57)) translateY(30px);
}

section.clock__indicator:nth-of-type(58) {
    transform: rotateZ(calc(6deg * 58)) translateY(30px);
}

section.clock__indicator:nth-of-type(59) {
    transform: rotateZ(calc(6deg * 59)) translateY(30px);
}

section.clock__indicator:nth-of-type(60) {
    transform: rotateZ(calc(6deg * 60)) translateY(30px);
}

@-webkit-keyframes time {
    to {
        transform: rotateZ(360deg);
    }
}

@keyframes time {
    to {
        transform: rotateZ(360deg);
    }
}