body {
    margin: 0;
    font-family: sans-serif;
    background-color: rgb(20, 17, 19);
}

#clockFace {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vmin;
    height: 90vmin;
}

.letter {
    position: absolute;
    transform: translate(-50%, -50%);
    color: rgb(42, 39, 41);
    font-size: 1vmin;
    transition: 2s;
}

.letterOn {
    color: rgb(246, 128, 191);
    font-size: 4vmin;
    font-weight: bold;
    text-shadow:
        0 0 5px rgba(246, 128, 191, 0.6),
        0 0 10px rgba(246, 128, 191, 0.5),
        0 0 20px rgba(101, 38, 71, 1);
}

:root {
    --horizontal-margin: 10%;
    --vertical-margin: 10%;
    --number-of-columns: 16;
    --number-of-rows: 8;


}

.col0 {
    left: calc(0 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col1 {
    left: calc(1 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col2 {
    left: calc(2 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col3 {
    left: calc(3 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col4 {
    left: calc(4 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col5 {
    left: calc(5 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col6 {
    left: calc(6 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col7 {
    left: calc(7 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col8 {
    left: calc(8 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col9 {
    left: calc(9 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col10 {
    left: calc(10 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col11 {
    left: calc(11 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col12 {
    left: calc(12 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col13 {
    left: calc(13 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col14 {
    left: calc(14 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.col15 {
    left: calc(15 * (100% - 2 * var(--horizontal-margin)) / (var(--number-of-columns) - 1) + var(--horizontal-margin));
}

.row0 {
    top: calc(0 * (100% - 2 * var(--vertical-margin)) / (var(--number-of-rows) - 1) + var(--vertical-margin));
}

.row1 {
    top: calc(1 * (100% - 2 * var(--vertical-margin)) / (var(--number-of-rows) - 1) + var(--vertical-margin));
}

.row2 {
    top: calc(2 * (100% - 2 * var(--vertical-margin)) / (var(--number-of-rows) - 1) + var(--vertical-margin));
}

.row3 {
    top: calc(3 * (100% - 2 * var(--vertical-margin)) / (var(--number-of-rows) - 1) + var(--vertical-margin));
}

.row4 {
    top: calc(4 * (100% - 2 * var(--vertical-margin)) / (var(--number-of-rows) - 1) + var(--vertical-margin));
}

.row5 {
    top: calc(5 * (100% - 2 * var(--vertical-margin)) / (var(--number-of-rows) - 1) + var(--vertical-margin));
}

.row6 {
    top: calc(6 * (100% - 2 * var(--vertical-margin)) / (var(--number-of-rows) - 1) + var(--vertical-margin));
}

.row7 {
    top: calc(7 * (100% - 2 * var(--vertical-margin)) / (var(--number-of-rows) - 1) + var(--vertical-margin));
}