body {
    margin: 0;
    font-family: "Jersey 10", sans-serif;
    font-size: 5vmin;
    font-weight: 700;
    background-color: #000;
}

.clockFace {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vmin;
    height: 90vmin;
    /* background-color: #111; */
}


.letter {
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0.1;
    color: rgba(44, 0, 39, 0.1);
    text-shadow: 0 0 0.2em rgba(44, 0, 39, 0.1);
    transition: 1s;
    filter: blur(0.2em);
    font-size: 2em;
}

.letterOn {
    opacity: 1;
    color: rgb(233, 235, 255);
    text-shadow: 0 0 0.2em rgb(223, 248, 255);
    filter: blur(0);
    font-size: 1em;
}

.letterOnDark {
    color: rgb(49, 108, 233);
    text-shadow: 0 0 0.2em #c9deff;
}

:root {
    --numberOfColumns: 19;
    --horizontalPadding: 10%;
    --numberOfRows: 7;
    --verticalPadding: 20%;
}

.col0 {
    left: calc(0 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col1 {
    left: calc(1 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col2 {
    left: calc(2 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col3 {
    left: calc(3 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col4 {
    left: calc(4 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col5 {
    left: calc(5 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col6 {
    left: calc(6 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col7 {
    left: calc(7 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col8 {
    left: calc(8 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col9 {
    left: calc(9 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col10 {
    left: calc(10 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col11 {
    left: calc(11 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col12 {
    left: calc(12 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col13 {
    left: calc(13 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col14 {
    left: calc(14 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col15 {
    left: calc(15 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col16 {
    left: calc(16 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col17 {
    left: calc(17 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.col18 {
    left: calc(18 * (100% - 2 * var(--horizontalPadding)) / (var(--numberOfColumns) - 1) + var(--horizontalPadding));
}

.row0 {
    top: calc(0 * (100% - 2 * var(--verticalPadding)) / (var(--numberOfRows) - 1) + var(--verticalPadding));
}

.row1 {
    top: calc(1 * (100% - 2 * var(--verticalPadding)) / (var(--numberOfRows) - 1) + var(--verticalPadding));
}

.row2 {
    top: calc(2 * (100% - 2 * var(--verticalPadding)) / (var(--numberOfRows) - 1) + var(--verticalPadding));
}

.row3 {
    top: calc(3 * (100% - 2 * var(--verticalPadding)) / (var(--numberOfRows) - 1) + var(--verticalPadding));
}

.row4 {
    top: calc(4 * (100% - 2 * var(--verticalPadding)) / (var(--numberOfRows) - 1) + var(--verticalPadding));
}

.row5 {
    top: calc(5 * (100% - 2 * var(--verticalPadding)) / (var(--numberOfRows) - 1) + var(--verticalPadding));
}

.row6 {
    top: calc(6 * (100% - 2 * var(--verticalPadding)) / (var(--numberOfRows) - 1) + var(--verticalPadding));
}