:root {
    /* --active-color: #53Fa3e; */
    /* --background-color: #000; */
}

*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 0.8vw;
}

body {
    /*   background-color: var(--background-color); */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.clock {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.05);
}

.clock>div {
    margin: 0 0.8vw;
}

.digit {
    width: 12rem;
    position: relative;
    height: 24rem;
    zoom: 1.32;
    margin: 0 0.4vw;
}

.hours,
.minutes,
.seconds {
    position: relative;
    display: flex;
}

.segment {
    width: 8rem;
    height: 2rem;
    background-color: #53Fa3e;
    opacity: 0.08;
    position: absolute;
    border-radius: 10rem;
    transition: opacity 400ms;
}

.colons {
    display: flex;
    justify-content: space-around;
    height: 12rem;
    flex-direction: column;
    transform: translateX(-2rem);
}

.colon {
    width: 3rem;
    height: 3rem;
    background-color: #53Fa3e;
    border-radius: 50%;
    box-shadow: 0px 0px 6px grey;
}

.segment-2 {
    transform-origin: top left;
    transform: rotate(90deg) translate(1.5rem, -0.05rem);
}

.segment-3 {
    transform-origin: top right;
    transform: rotate(-90deg) translate(-1.5rem, -0.5rem);
}

.segment-4 {
    transform: translateY(9rem);
}

.segment-5 {
    transform-origin: top left;
    transform: rotate(90deg) translate(10.5rem, -0.5rem);
}

.segment-6 {
    transform-origin: top right;
    transform: rotate(-90deg) translate(-10.5rem, -0.5rem);
}

.segment-7 {
    transform: translateY(18rem);
}

.active {
    opacity: 1;
    box-shadow: 0px 0px 6px grey;
}

/*  
  By Mostafa Alvandi
  https://codepen.io/alvandisetvat/pen/WNzJaOB
  */