html {
  scroll-behavior: smooth;
}
body {
  background-color: #0b0d12;
}
.bg-grid {
  background-image:
    linear-gradient(to right, #171a24 1px, transparent 1px),
    linear-gradient(to bottom, #171a24 1px, transparent 1px);
  background-size: 44px 44px;
}
.glow-php {
  box-shadow:
    0 0 0 1px rgba(136, 146, 191, 0.25),
    0 0 60px -12px rgba(136, 146, 191, 0.35);
}
.caret {
  display: inline-block;
  width: 9px;
  height: 1.1em;
  background: #8892bf;
  margin-left: 4px;
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.type-line {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing 2.4s steps(40, end) forwards;
}
@keyframes typing {
  to {
    width: 100%;
  }
}
.fade-up {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.7s ease forwards;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.25s;
}
.delay-3 {
  animation-delay: 0.4s;
}
.delay-4 {
  animation-delay: 0.55s;
}
.php-tag::before {
  content: "<?php";
  color: #565c82;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}
::selection {
  background: #8892bf;
  color: #0b0d12;
}