:root {
  --bg-color: #181818;
  --font-color: #f9f9f9;
}

.splash-screen {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #181818;
}

.splash-screen img {
  height: 200px;
  width: 200px;
}

.splash-screen p,
.splash-screen span {
  color: #f9f9f9;
}

.splash-screen .text-wrapper {
  width: 432px;
  margin-left: 50px;
}

.splash-screen .text-wrapper .placeholder,
.splash-screen .text-wrapper .animated-text {
  display: flex;
  flex-direction: column;
  font-size: 100px;
  font-weight: bold;
  color: #f9f9f9;
}

.splash-screen .text-wrapper .placeholder {
  position: absolute;
  opacity: 0.1;
}

.splash-screen .text-wrapper .animated-text {
  width: 100%;
  overflow: hidden;
  animation: letterbyletter 2s steps(6, end);
}

@keyframes letterbyletter {
  from {
    width: 0;
  }
}

.splash-screen .text-wrapper .animated-text span {
  animation: blinker 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .splash-screen img {
    height: 100px;
    width: 100px;
  }

  .splash-screen .text-wrapper {
    width: 216px;
    margin-left: 30px;
  }

  .splash-screen .text-wrapper .placeholder,
  .splash-screen .text-wrapper .animated-text {
    font-size: 50px;
  }
}

@media (max-width: 420px) {
  .splash-screen img {
    height: 80px;
    width: 80px;
  }

  .splash-screen .text-wrapper {
    width: 180px;
    margin-left: 20px;
  }

  .splash-screen .text-wrapper .placeholder,
  .splash-screen .text-wrapper .animated-text {
    font-size: 42px;
  }
}