* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: serif;
}

html {
  font-size: 0.3vw;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #000;
}

.wrapper {
  display: inline-flex;
  justify-content: center;
}

.wrapper .dynamic-txts {
  height: 9rem;
  line-height: 9rem;
  overflow: hidden;
}

.dynamic-txts li {
  text-align: center;
  color: #fff;
  list-style: none;
  font-size: 8rem;
  top: 0;
  position: relative;
  animation: slide 24s steps(6) infinite;
}

@keyframes slide {
  100%{
      top: -54rem;
  }
}

.dynamic-txts li span{
  position: relative;
}

.dynamic-txts li span::after{
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  border-left: 2px solid #fff;
  animation: typing 4s steps(21) infinite;
}

@keyframes typing {
  40%, 60%{
    left: calc(100% + 1px);
  }
  100%{
    left: 0;
  }
}

.linkit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.linkki {
  flex: 1;
}

.linkki:nth-child(1) {
  cursor: w-resize
}

.linkki:nth-child(2) {
  cursor: e-resize
}