body {
    margin: 0;
    font-family: 'Space Mono', monospace;
    background-color: rgb(34, 34, 34);
    
}


div.clockface {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgb(0, 0, 0, 0.2);
    width: 90vmin;
    height: 90vmin;
    border-radius: 5px;
}

@keyframes slightFloat {
    0% {
        transform: translate(-50%, -50%) translateY(-4px); 
    }
    50% {
        transform: translate(-50%, -50%) translateY(0); 
    }
    100% {
        transform: translate(-50%, -50%) translateY(-4px); 
    }
}


.letter {
    position: absolute;
    transform: translate(-50%, -50%) translateY(-4px); 
    animation: slightFloat 3s ease-in-out infinite alternate;
    opacity: 0.15;
    font-size: 4vmin;
    color: rgb(255, 255, 255);
    transition: opacity 0.5s;
}

@keyframes pulseGlow {
  0% { text-shadow: 0 0 5px #ffffff; }
  50% { text-shadow: 0 0 15px #ffffff, 0 0 30px #00aaff; }
  100% { text-shadow: 0 0 5px #ffffff; }
}

.letterOn {
    opacity: 1;
    color: #fff;
    text-shadow:   
        0 0 20px #ffffff;  
    animation: 
        pulseGlow 4s infinite alternate, 
        slightFloat 3s ease-in-out infinite alternate;
}

/* 9 rows, 25 columns*/
:root {
    --numberofColumns: 25;
    --numberofRows: 9;
    --horizontalMargin: 10%;
    --verticalMargin: 10%;
}

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

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

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

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

.col6 {
    left: calc(6 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}
.col7 {
    left: calc(7 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}.col8 {
   left: calc(8 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}

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

.col10 {
    left: calc(10 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}
.col11 {
    left: calc(11 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}.col12 {
   left: calc(12 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}

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

.col14 {
    left: calc(14 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}
.col15 {
    left: calc(15 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}.col16 {
   left: calc(16 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}

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

.col18 {
    left: calc(18 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}
.col19 {
    left: calc(19 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}.col20 {
   left: calc(20 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}

.col21 {
    left: calc(21 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}

.col22 {
    left: calc(22 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}
.col23 {
    left: calc(23 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}
.col24 {
    left: calc(24 *(100% - 2 * var(--horizontalMargin)) / (var(--numberofColumns) - 1) + var(--horizontalMargin));
}
 
.row0 {
     top: calc(0 *(100% - 2 * var(--verticalMargin)) / (var(--numberofRows) - 1) + var(--verticalMargin));
}
.row1 {
     top: calc(1 *(100% - 2 * var(--verticalMargin)) / (var(--numberofRows) - 1) + var(--verticalMargin));
}
.row2 {
     top: calc(2 *(100% - 2 * var(--verticalMargin)) / (var(--numberofRows) - 1) + var(--verticalMargin));
}
.row3 {
     top: calc(3 *(100% - 2 * var(--verticalMargin)) / (var(--numberofRows) - 1) + var(--verticalMargin));
}
.row4 {
     top: calc(4 *(100% - 2 * var(--verticalMargin)) / (var(--numberofRows) - 1) + var(--verticalMargin));
}
.row5 {
     top: calc(5 *(100% - 2 * var(--verticalMargin)) / (var(--numberofRows) - 1) + var(--verticalMargin));
}
.row6 {
     top: calc(6 *(100% - 2 * var(--verticalMargin)) / (var(--numberofRows) - 1) + var(--verticalMargin));
}
.row7 {
     top: calc(7 *(100% - 2 * var(--verticalMargin)) / (var(--numberofRows) - 1) + var(--verticalMargin));
}
.row8 {
     top: calc(8 *(100% - 2 * var(--verticalMargin)) / (var(--numberofRows) - 1) + var(--verticalMargin));
}