body {
    background-color: #000000;
    color: #00ff00;
    font-size: 22px;
    padding: 40px;
}

@font-face {
  font-family: 'knd';
  src: url('/fonts/knd.ttf') format('truetype');
}

.typewriter-container {
    display: inline-block;
    white-space: pre;
    position: relative;
}

.caret {
    display: inline-block;
    width: 15px;
    height: 1em;
    background-color: #00ff00;
    margin-left: 10px;
    animation: blink 0.7s steps(1) infinite;
    vertical-align: bottom;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}


/* HTML: */
.loader {
  width: 40px;
  aspect-ratio: 1;
  position: relative;
}
.loader:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  --c:#00000000, #f03355 1deg 120deg,#00000000 121deg;
  background:
    conic-gradient(from 0deg,  var(--c)) top right,
    conic-gradient(from 120deg,var(--c)) bottom,
    conic-gradient(from 240deg,var(--c)) top left;
  background-size: 40px 40px;
  background-repeat: no-repeat;
  animation: l25 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l25 {
   33%  {inset:-8px;transform: rotate(0deg)}
   66%  {inset:-8px;transform: rotate(180deg)}
   100% {inset:0   ;transform: rotate(180deg)}
}
.loader-wrapper {
  position: fixed;
  inset: 0;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.loader.zoom-out {
  animation: zoomOut 0.8s ease-out forwards;
}