html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
}

.intro-screen {
  text-align: center;
  opacity: 0;
  animation: fadeInBody 2s ease forwards;
  animation-delay: 0.3s;
}

.intro-title {
  font-size: 5em;
  font-weight: bold;
  color: white;
  opacity: 0;
  animation: fadeInText 2s ease forwards;
  animation-delay: 1s;
}

.line-container {
  position: relative;
  width: 500px;
  height: 20px;
  margin: 20px auto 0;
}

.line {
  position: absolute;
  top: 0;
  width: 0;
  height: 20px;
  transform-origin: center;
  opacity: 1;
}

.blue-line {
  background-color: #002bff;
  left: 0;
  transform: skewX(-45deg);
  animation: slideBlue 2.5s ease forwards;
  animation-delay: 1.5s;
}

.white-line {
  background-color: white;
  right: 0;
  transform: skewX(-45deg);
  animation: slideWhite 2.5s ease forwards;
  animation-delay: 1.5s;
}

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

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

@keyframes slideBlue {
  0% { width: 0; }
  100% { width: 50%; }
}

@keyframes slideWhite {
  0% { width: 0; }
  100% { width: 50%; }
}