reworked text display, with colors

style.css

@@ -112,8 +112,8 @@ summary {
   width: 100%;
   height: 100%;
   background-color: #fff;
-  opacity: 0;
-  transition: opacity 5s;
+  opacity: 1;
+  transition: opacity 3s;
   pointer-events: none;
 }
 
@@ -169,21 +169,64 @@ summary {
 }
 
 #text-log {
-  position: absolute;
+  /* position: absolute;
   top: 20px;
   left: 0;
-  width: 100%;
-  line-height: 150%;
-  text-align: center;
+  width: 100%; */
+
   z-index: 2;
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  /* left: 50%; */
+  /* transform: translate(-50%, 0); */
+
+  padding: 10px;
+  border-radius: 10px;
+
+  /* text-align: center; */
+  line-height: 150%;
   font-size: 1.25em;
   color: #000;
+  background-color: rgba(255, 255, 255, 0.23);
+
   opacity: 0;
   transition: opacity 0.5s;
   pointer-events: none;
   user-select: none;
 }
 
+.color-f {
+  color: #0bf;
+}
+
+.color-b {
+  color: #023;
+}
+
+.color-d {
+  color: #f05;
+}
+
+.color-h {
+  color: #0d9;
+}
+
+.color-e {
+  color: #a10;
+}
+
+.color-s {
+  color: #066;
+  font-weight: 900;
+  letter-spacing: 2px;
+}
+
+.faded {
+  opacity: 0.7;
+  font-size: 90%;
+}
+
 .box {
   padding: 3px 8px 3px 8px;
   border: 2px solid #444;
@@ -191,10 +234,6 @@ summary {
   background-color: rgba(255, 255, 255, 0.5);
 }
 
-.faded {
-  opacity: 0.5;
-  font-size: 85%;
-}
 
 .wrapper {
   display: grid;