wordRotator/src/client/sass/_tutorial.scss

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

.tutorial-blanket {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  z-index: 9001;
  background: rgba(55, 55, 55, 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;
    }

    .top-bar {
      z-index: 9900 !important;
    }

    .help-action {
      margin-top: 0;
      padding-top: 10px;

      position: relative;
      //z-index: 9900 !important;
      overflow: visible;
      margin-right: 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-parent.layer-2, > .segment-parent.layer-2.rotating {
            z-index: 9900 !important;

            #tutorial-pointer {
              width: 0.6em;
              height: 0.6em;
              //background: red;

              border-radius: 50%;

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

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

#tutorial-site {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;

  #tutorial-1, #tutorial-2, #tutorial-3{
    text-align: center;
    margin-top: 0.7rem;
    margin-bottom: 0.5rem;
  }

  #tutorial-2 .help-action{
    width: 100%;
    margin-bottom: 0.3rem;
  }
  #tutorial-3 .tutorial-wrapper{
    position: relative;
    #tutorial-pointer {
      width: 0.6em;
      height: 0.6em;

      border-radius: 50%;

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

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