header {
  z-index: 1;
}

.intro {
  position: relative;
  z-index: 1;
  text-align: center;
}

.profile-pic {
  width: 220px;
  height: 220px;
  margin-bottom: 20px;
  object-fit: cover;
  user-select: none;
}

.full-name {
  margin-bottom: 0;
  font-size: 2rem;
}

.role {
  margin-bottom: 20px;
  color: var(--control-text);
  font-size: 1.2rem;
  font-weight: 400;
}

.social-icons {
  margin-top: 20px;
  user-select: none;
}

.social-icons a {
  margin: 0 15px;
  color: var(--color-text-secondary);
  font-size: 2rem;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.social-icons i {
  transition: filter 0.3s ease-in-out;
}

.social-icons a:hover i {
  filter: drop-shadow(0 0 4px var(--color-highlight-strong));
}

.social-icons a[href*="github.com"]:hover {
  color: var(--color-text-white);
}

.social-icons a[href*="linkedin.com"]:hover {
  color: var(--color-brand-linkedin);
}

.social-icons a[href*="itch.io"]:hover {
  color: var(--color-brand-itch);
}

.floating-text.typewriter {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  color: var(--color-home-typewriter);
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(4rem, 12.5vw, 15rem);
  font-weight: 700;
  letter-spacing: 0.5rem;
  white-space: nowrap;
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: color-dodge;
}

.floating-text.typewriter::before {
  content: "";
  animation: type-lichevskii 8s steps(30, end) infinite;
}

.floating-text.typewriter::after {
  content: "";
  margin-left: 5px;
  border-right: 2px solid currentColor;
  animation: blink 0.7s infinite;
}

@keyframes type-lichevskii {
  0% { content: ""; }
  3.75% { content: "L"; }
  7.5% { content: "LI"; }
  11.25% { content: "LIC"; }
  15% { content: "LICH"; }
  18.75% { content: "LICHE"; }
  22.5% { content: "LICHEV"; }
  26.25% { content: "LICHEVS"; }
  30% { content: "LICHEVSK"; }
  33.75% { content: "LICHEVSKI"; }

  /* Hold completed text for four seconds */
  37.5%,
  87.5% { content: "LICHEVSKII"; }

  88.75% { content: "LICHEVSKI"; }
  90% { content: "LICHEVSK"; }
  91.25% { content: "LICHEVS"; }
  92.5% { content: "LICHEV"; }
  93.75% { content: "LICHE"; }
  95% { content: "LICH"; }
  96.25% { content: "LIC"; }
  97.5% { content: "LI"; }
  98.75% { content: "L"; }
  100% { content: ""; }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


@media screen and (max-width: 480px) {
 .floating-text.typewriter {
    font-size: 0rem;
  }
}