#matrix-text {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#matrix-text h1 {
  z-index: 2;
  position: absolute!important;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%)!important;
  margin: 0!important;
  font-size: 8vw;
}

.matrix-scroll {
  width: 25px;
  background-color: var(--themeColor);
  position: absolute;
  mix-blend-mode: screen;
  z-index: 1;
}

.matrix-scroll-shiny {
  width: 25px;
  background-image: linear-gradient(to top, var(--secondaryThemeColor) 0%, var(--themeColor) 100%);
  position: absolute;
  mix-blend-mode: screen;
}

#typed-out-box {
  position: absolute;
  display: inline-block;
  bottom: -1px;
  right: 275px;
  height: 30px;
  z-index: 3;
}

#typed-out-text {
  overflow: hidden;
  border-right: 3px solid var(--themeColor);
  width: 0;
  font-family: var(--secondaryFont);
  font-size: 16px;
  color: var(--themeColor);
  white-space: nowrap;
  animation:
          typing 2.5s steps(18, end) forwards;
}

@keyframes typing {
  0% {width: 0}
  50% { width: 0}
  99.9% { width: 100% ; border-right: 3px solid var(--themeColor) }
  100% { width: 100%; border-right: 3px solid var(--mainColor) }
}

#matrix-speed-slider {
  position: absolute;
  bottom: 0;
  right: 135px;
  width: 130px;
  height: 30px;
  z-index: 3;
}

#matrix-density-slider {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 130px;
  height: 30px;
  z-index: 3;
}

#matrix-header-menu-background {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 33px;
  width: 452px;
  background-color: var(--mainColor);
  z-index: 2;
}

@media (max-width: 820px) {

  #matrix-text h1 {
    font-size: 15vw;
  }

}