:root {
  --pastel-orange-blade: #c1d9ff;
  --pastel-purple-blade: #b1cdfc;
  --pastel-green-blade:  #9bc0ff;
  --pastel-red-blade:    #7babfe;
  --pastel-yellow-blade: #649dff;
  --pastel-blue-blade:   #94EBF2;
}

slash-blade {
  display: block;
  width: 6em;
  height: calc(100vh);
  opacity: 0.7;
  z-index: 30;
}

.sb-color-orange {
  background-color: var(--pastel-orange-blade);
  animation: move-right-to-left 8.1s ease-in-out infinite;
}

.sb-color-purple {
  background-color: var(--pastel-purple-blade);
  animation: move-left-to-right 7.2s ease-in-out infinite;
}

.sb-color-green {
  background-color: var(--pastel-green-blade);
  animation: move-right-to-left 9.3s ease-in-out infinite;
}

.sb-color-red {
  background-color: var(--pastel-red-blade);
  animation: move-right-to-left 6.4s ease-in-out infinite;
}

.sb-color-yellow {
  background-color: var(--pastel-yellow-blade);
  animation: move-left-to-right 8.5s ease-in-out infinite;
}

.sb-color-blue {
  background-color: var(--pastel-blue-blade);
  animation: move-right-to-left 10.6s ease-in-out infinite;
}

.ex-sb-color-orange {
  background-color: var(--pastel-orange-blade);
  animation: move-right-to-left 7.6s ease-in-out infinite;
}

.ex-sb-color-purple {
  background-color: var(--pastel-purple-blade);
  animation: move-left-to-right 8.5s ease-in-out infinite;
}

.ex-sb-color-green {
  background-color: var(--pastel-green-blade);
  animation: move-right-to-left 6.8s ease-in-out infinite;
}

.ex-ex-sb-color-red {
  background-color: var(--pastel-red-blade);
  animation: move-left-to-right 7.3s ease-in-out infinite;
}

.ex-sb-color-yellow {
  background-color: var(--pastel-yellow-blade);
  animation: move-right-to-left 8.2s ease-in-out infinite;
}

.ex-sb-color-blue {
  background-color: var(--pastel-blue-blade);
  animation: move-left-to-right 9.1s ease-in-out infinite;
}

.sb-first {
  animation: move-to-left 8.1s ease-in-out infinite;
}

@keyframes move-to-left {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(40%);
  }
  100% {
    transform: translateX(0%);
  }
}


@keyframes move-right-to-left {
  0% {
    transform: translateX(40%);
  }
  50% {
    transform: translateX(-40%);
  }
  100% {
    transform: translateX(40%);
  }
}


@keyframes move-left-to-right {
  0% {
    transform: translateX(-40%);
  }
  50% {
    transform: translateX(40%);
  }
  100% {
    transform: translateX(-40%);
  }
}