* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
body {
    background: #111;
    color: #eee;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    flex-direction: column;
}

h1 {
    margin-bottom: 0px;
    margin-top: 50px;
}
p {
    margin-bottom: 50px;
}

.clock-container {
    width: 50vh;
    height: 50vh;
    max-width: 75vw;
    max-height: 75vw;
    position: relative;
}
.clock-face {
    border: 5px solid #eee;
    border-radius: 100%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.clock-face * {
    position: absolute;
}

.ordinal {
    font-size: 5vh;
    z-index: 99;
}
.twelve {
    left: calc( 50% - .6em );
    top: 2px;
}
.three {
    left: calc( 100% - .5em - 5px);
    top: calc( 50% - .5em );
}
.six {
    top: calc( 100% - 1em - 5px);
    left: calc( 50% - .25em );
}
.nine {
    top: calc( 50% - .5em );
    left: 5px;
}

.hour {
    border-right: 3px solid #eee;
    width: 1px;
    height: 100%;
    left: 50%;
}
.hour:nth-child(5) {
    transform: rotate(30deg);
}
.hour:nth-child(6) {
    transform: rotate(60deg);
}
.hour:nth-child(7) {
    transform: rotate(120deg);
}
.hour:nth-child(8) {
    transform: rotate(150deg);
}

.center-mask-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;            
}
.center-face-mask {
    width: 80%;
    height: 80%;
    background: #111;
    border-radius: 100%;
}
.center-point-mask {
    width: 3%;
    height: 3%;
    background: #999;
    border-radius: 100%;
    z-index: 101;
}

.hands-container {
    width: 100%;
    height: 100%;           
    --hour-hand-color: red;
    --minute-hand-color: yellow;
    --second-hand-color: deepskyblue;
}
.hand {
    width: 1px;
    left: 50%;
    top: 50%;
    transform-origin: top;
    z-index: 100;
}
.hour-hand {
    border-right: 2px solid var(--hour-hand-color);
    height: 25%;
}
.minute-hand {
    border-right: 2px solid var(--minute-hand-color);
    height: 35%;
}
.second-hand {
    border-right: 2px solid var(--second-hand-color);
    height: 45%;
}

.hour::before {
    content: "";
    width: 1px;
    border-right: 3px solid #eee;
    height: 10px;
    position: absolute;
    top: -5px;
    left: -1px;
    z-index: 99;
}
.hour::after {
    content: "";
    width: 1px;
    border-right: 3px solid #eee;
    height: 10px;
    position: absolute;
    bottom: -5px;
    left: -1px;
    z-index: 99;
}
.hand::before {
    content: '\27A4';
    position: absolute;
    bottom: -15px;
    left: -6px;
    transform: rotate(90deg);
}
.hour-hand::before {
    color: var(--hour-hand-color);
}
.minute-hand::before {
    color: var(--minute-hand-color);
}
.second-hand::before {
    color: var(--second-hand-color);
}