body {
  margin: 0;
  background-color: #f9f9f9;
}

#splash-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f9f9f9;
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  opacity: 1;
}

.splash-inner {
  display: flex;
  align-items: center;
  opacity: 0;
  animation: fadeIn 0.7s ease forwards;
  animation-delay: 0.3s;
}

.splash-logo {
  width: 60px;
  height: 60px;
  margin-right: 1ch;
}

.text-container {
  width: 0;
  border-right: 0.3ch solid;
  border-right-color: transparent;
  overflow: hidden;
  color: #3E3935;
  text-align: left;
  direction: ltr;
  transition: width 1s ease, text-align 0s;
}

.text-container.full-width {
  width: 20.2ch;
  overflow: hidden;
}

.text-container.align-right {
  direction: rtl;
}

.text-container.collapse-container {
  width: 0;
}

.splash-text {
  display: inline;
  font-size: 2rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
}

.splash-text.animate {
  animation: fadeTextIn 0.5s ease forwards;
}

.text-container.typing {
  animation: typing 1.4s steps(11, end) forwards;
}

.text-container.blink-once {
  animation: caretBlinkOnce 1s steps(50, end);
}

.text-container.blink-twice {
  animation: caretBlinkTwice 2s steps(50, end);
}

.hidden {
  display: none;
}

.fade-out {
  animation: fadeOut 1s ease forwards;
}

/* Animations */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeTextIn {
  to {
    opacity: 1;
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 11ch;
  }
}

@keyframes caretBlinkOnce {
  0%, 49%  { border-right-color: #3E3935; }
  50%, 100% { border-right-color: transparent; }
}

@keyframes caretBlinkTwice {
  0%, 24%, 50%, 74%  { border-right-color: transparent; }
  25%, 49%, 75%, 100%  { border-right-color: #3E3935; }
}


@keyframes fadeOut {
  to {
    opacity: 0;
  }
}