@charset 'UTF-8';

.js-clock-container {
    position: relative;
}

.js-clock-container::before {
    content: '';
    display: block;
    
    --size: 100%;
    width: var(--size);
    height: var(--size);
    
    position: absolute;
    top: 0;
    left: 0;
    
    border: 1px solid black;
    border-radius: 50%;
}

.js-clock-container::after {
    content: '';
    display: block;
    
    --size: 12%;
    width: var(--size);
    height: var(--size);
    
    position: absolute;
    top: calc(50% - var(--size) / 2);
    left: calc(50% - var(--size) / 2);
    /*top: 50%;
    left: 50%;*/
    
    background: black;
    border-radius: 50%;
}
 
.js-clock-hour,
.js-clock-minute,
.js-clock-second {
    position: absolute;
    background: black;
    border-radius: .5rem;
    transform-origin: bottom;
}
 
.js-clock-hour {
    width: 7%;
    height: 25%;
    top: 24.5%;
    left: 48.85%;
    opacity: 0.8;
}
 
.js-clock-minute {
    width: 5%;
    height: 30%;
    top: 19.5%;
    left: 48.9%;
    opacity: 0.8;
}
 
.js-clock-second {
    width: 3%;
    height: 40%;
    top: 9.5%;
    left: 49.25%;
    opacity: 0.8;
}