Tutorial angefangen

src/scss/_tutorial.scss

@@ -0,0 +1,74 @@
+.tutorial-blanket {
+  display: none;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  z-index: 9001;
+  background: rgba(98, 98, 98, 0.51);
+}
+
+.tutorial {
+  .tutorial-blanket {
+    display: block;
+  }
+  .tutorial-text {
+    color: white;
+    font-size: 1.5rem;
+    display: flex;
+  }
+
+  &.step-1 {
+    #level {
+      .segment-row {
+        position: inherit;
+      }
+      .segment-parent:nth-child(3), .segment-parent:nth-child(3).rotating {
+        z-index: 9900 !important;
+      }
+    }
+    .tutorial-text .step-1 {
+      display: initial;
+      z-index: 9900 !important;
+      position: relative;
+    }
+  }
+
+  &.step-2 {
+    #level {
+      z-index: 9900 !important;
+    }
+    .tutorial-text .step-2 {
+      display: initial;
+      z-index: 9900 !important;
+      position: relative;
+    }
+  }
+
+  &.step-3 {
+    .tutorial-text .step-3 {
+      display: initial;
+      z-index: 9900 !important;
+      position: relative;
+    }
+
+    #help-button {
+      position: relative;
+      z-index: 9900 !important;
+      overflow: visible;
+      margin-right: 10px;
+      margin-top: 10px;
+        box-shadow: 0 0 10px 5px #fff;
+      //&:after {
+      //  content: "";
+      //  position: absolute;
+      //  top: 0;
+      //  left: 0;
+      //  bottom: 0;
+      //  right: 0;
+      //}
+    }
+  }
+}

src/scss/wordRotator.scss

@@ -1,3 +1,5 @@
+@import "tutorial";
+
 //ActionBar
 nav.top-bar.title-bar {
   padding: 0.3rem 0.6rem 0;
@@ -286,12 +288,7 @@ $animationDuration: .25s;
 //Won-screen
 #site-content > :not(.won) {
   .show-when-won {
-    //visibility: hidden;
     display: none;
-    //transition: none;
-    //* {
-    //  transition: none;
-    //}
   }
 }