.analog {
    position:absolute;
    min-width:50em;
    min-height:50em;
    border-radius:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    box-shadow: 
        -10px -10px 30px var(--shadow-light), 
        10px 10px 30px var(--shadow-dark);
}

.analog:before,
.analog:after,
.horizontal-indicators:before,
.horizontal-indicators:after {
    position:absolute;
    text-align:center;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.analog:before,
.analog:after {
    left: 49%;
    left: calc(50% - 0.5em);
    width: 0.5em;
    height: 5em;
}

.horizontal-indicators:before,
.horizontal-indicators::after {
    top: 49%;
    top: calc(50% - 4px);
    width: 5em;
    height: 4px;
}

.analog:before, 
.analog:after,
.horizontal-indicators:before,
.horizontal-indicators::after {
    z-index: 2; 
    content: "";
    background-color: var(--background);
    border-radius: 2px;
    box-shadow: 
        -2px -2px 4px var(--shadow-light), 
        2px 2px 4px var(--shadow-dark);
}

.analog::before{
    top:0em;
}

.analog:after {
    bottom:0em;
}

.horizontal-indicators::before {
    left:0em;
}

.horizontal-indicators:after {
    right:0em;
}

.hour-hand,
.minute-hand,
.second-hand,
.clock-center {
    position: absolute;
    background-color:var(--background);
}

.hour-hand,
.minute-hand,
.second-hand{
    z-index:3;   
    left: 50%;
    left: calc(50% - 0.5em);
    width:0.5em;
    border-radius: 2px;
}

.hour-hand,
.minute-hand{
    box-shadow: 
    -2px -2px 4px var(--shadow-light), 
    2px 2px 4px var(--shadow-dark);
    transform-origin: 50% 99%; /*left, top*/
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.hour-hand{
    height: 25%;
    top: 25%;
}

.minute-hand{
    height: 45%;
    top: 5%;
}

.second-hand{
    height: 55%;
    transform-origin: 50% 80%; /*left, top*/
    background-color: var(--accent);
    top: 5%;
}

.clock-center{
    z-index: 4;
    border-radius: 50%;
    height: 1em;
    width: 1em;
    top: 50%;
    left: calc(50% - 1em);
    top: calc(50% - 1em);
}