Add Simon functionality with ugly arrows

ktane.css

@@ -54,7 +54,7 @@ button {
     border: 1px solid black;
 }
 
-.active {
+section .active { /* ugh, specificity */
     opacity: 1;
 }
 .inactive {
@@ -126,6 +126,7 @@ h2 {
 #simonBoard {
     display: inline-block;
     padding-bottom: 40px; /* Compensate for height increase as a result of rotation */
+    position: relative;
     transform: rotate(45deg);
 }
 #simonBoard > div > div {
@@ -147,6 +148,83 @@ h2 {
     border-right-width: 4px;
 }
 
+.arrow {
+    background-color: magenta;
+    height: 10px;
+    width: 50px;
+    opacity: 0;
+    position: absolute;
+}
+.arrow::after {
+    content: '';
+    border-top: 10px solid transparent;
+    border-left: 20px solid magenta;
+    border-bottom: 10px solid transparent;
+    height: 0;
+    width: 0;
+    margin-left: 50px;
+    position: absolute;
+    top: -5px;
+}
+#arrowRB {
+    top: 70px;
+    left: 10px;
+    transform: rotate(-90deg);
+}
+#arrowBR {
+    top: 60px;
+    left: 10px;
+    transform: rotate(90deg);
+}
+#arrowBY {
+    top: 30px;
+    left: 45px;
+}
+#arrowYB {
+    top: 30px;
+    left: 45px;
+    transform: rotate(180deg);
+}
+#arrowYG {
+    top: 60px;
+    left: 80px;
+    transform: rotate(90deg);
+}
+#arrowGY {
+    top: 70px;
+    left: 80px;
+    transform: rotate(-90deg);
+}
+#arrowGR {
+    top: 100px;
+    left: 45px;
+    transform: rotate(180deg);
+}
+#arrowRG {
+    top: 100px;
+    left: 45px;
+}
+#arrowRY {
+    top: 66px;
+    left: 44px;
+    transform: rotate(-45deg);
+}
+#arrowYR {
+    top: 66px;
+    left: 44px;
+    transform: rotate(135deg);
+}
+#arrowBG {
+    top: 64px;
+    left: 44px;
+    transform: rotate(45deg);
+}
+#arrowGB {
+    top: 64px;
+    left: 44px;
+    transform: rotate(-135deg);
+}
+
 #sectionDisplay {
     white-space: nowrap;
 }