body {
    margin: 0;
    font-family: sans-serif;
    font-size: 2vmin;
    font-size: 400;
}


.ClockFace {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vmin;
    height: 90vmin;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
    border: 10px;
    border-color: #ffffff;
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    backdrop-filter: blur(16px);
}

.letter {
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0.1;
    transition: 1s;
    color: rgba(255, 255, 255, 0.1);
}

.letterOn {
    opacity: 1;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 1em #000000;
    font-size: larger;
    animation-duration: 5s;
}

:root {
    --numberofColumns: 16;
    --horizotalPadding: 10%;
    --numberofRows: 8;
    --verticalPadding: 8%;

}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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));
}

.row7 {
    top: calc(7 * (100% - 2 * var(--verticalPadding))/(var(--numberofRows) - 1) + var(--verticalPadding));
}