1 files changed, 98 insertions, 0 deletions
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2bcc6d1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,98 @@
+
+
+html,body {
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden;
+        height: 100%;
+}
+
+body {
+        color: #bbb;
+        background: #444;
+        font-family: sans-serif;
+}
+
+h1 {
+        font-family: 'Sarpanch', sans-serif;
+        font-size: 32pt;
+        border-bottom: 2px solid #f80;
+        padding: 2.1em 1.5em 0.1em 1.5em;
+        box-shadow: inset 0 0 60px 10px #111;
+        margin: 0 -1em -1em -1em;
+        position: relative;
+        top: -2em;
+}
+
+h1>em {
+        font-style: normal;
+        color: #ddd;
+}
+
+h1>span {
+        font-style: normal;
+        color: #777;
+}
+
+.box {
+        color: black;
+        display: inline-block;
+        padding: 1em;
+        margin: 1.4em;
+        box-shadow:6px 6px 10px 2px #111;
+        border-radius: 0.5em;
+}
+
+.box:hover {
+    cursor: pointer;
+}
+
+.pass {
+        background: #77ee77;
+        border: 2px solid #00dd00;
+}
+
+.fail {
+        background: #ff8888;
+        border: 2px solid #ff0000;
+}
+
+.active {
+        -webkit-animation:active 1s linear infinite;
+        animation:active 1s linear infinite;
+}
+
+@-webkit-keyframes active {
+          0%{box-shadow:0 0 0 1px #444, 0 0 0  4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111}
+        100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0  ),6px 6px 10px 2px #111}
+}
+
+@keyframes active {
+          0%{box-shadow:0 0 0 1px #444, 0 0 0  4px rgba(255, 255, 78, 0.7),6px 6px 10px 2px #111}
+        100%{box-shadow:0 0 0 5px #444, 0 0 0 14px rgba(255, 255, 78, 0  ),6px 6px 10px 2px #111}
+}
+
+.visualisation {
+        font-size: 90%;
+        position: absolute;
+        text-align: center;
+        width: 100%;
+        top: 45%;
+}
+
+.detail {
+    background: #eee;
+    color: black;
+    display: inline-block;
+    padding: 1em;
+    border-radius: 0.5em;
+    width: 50%;
+}
+
+.detail-contents {
+    text-align: left;
+}
+
+.container {
+    height: 85%;
+}