@keyframes tutorialPointer {
  0%{
    top: 75%;
  }
  100%{
    top: 25%;
  }
}

.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;
    transition: none !important;
    * {
      transition: none !important;
    }
  }

  &.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;
    }
  }
  &.step-4 {
    .tutorial-text .step-4 {
      display: initial;
      z-index: 9900 !important;
      position: relative;
    }

    #level {
      .segment-row {
        position: inherit;
        > .child-container {
          > .segment-triangle:first-child {
            position: inherit;
            > .child-container {
              > .segment-parent:first-child, > .segment-parent:first-child.rotating {
                z-index: 9900 !important;
                #tutorial-pointer{
                  width: 0.6em;
                  height: 0.6em;
                  //background: red;

                  border-radius: 50%;

                  left: 25%;
                  right: 50%;
                  position: absolute;
                  top: 75%;
                  bottom: 50%;
                  z-index: 1;
                  transform: translate(-50%, -50%);

                  animation: tutorialPointer 2s infinite;
                  pointer-events: none;
                }
              }
            }
          }
        }
      }
    }
  }
}