@import url(https://db.onlinewebfonts.com/c/2545d122b16126676225a5b52283ae23?family=VCR+OSD+Mono);

h1 {
  font-family: 'VCR OSD Mono';
  font-size: 60px;
  color: white;
  text-align: center;
  letter-spacing: 4px;
}

p {
  font-family: fixedsys;
}

body {
  background: black;
  color: white;
  text-align: center;
}

.fade-in-shadow-o {
  animation: fadeInShadowO 1s ease-in-out forwards;
}

.fade-in-shadow-c {
  animation: fadeInShadowC 1s ease-in-out forwards;
}

.fade-in-yt {
  animation: fadeInYT 1s ease-in-out forwards;
}

.fade-in-bsky {
  animation: fadeInBsky 1s ease-in-out forwards;
}

.fade-in-fedi {
  animation: fadeInFedi 1s ease-in-out forwards;
}

.fade-in-disc {
  animation: fadeInDisc 1s ease-in-out forwards;
}

@keyframes fadeInShadowO {
  from {
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0);
  }

  to {
    text-shadow: 5px 5px 5px #f7630c;
  }
}

@keyframes fadeInShadowC {
  from {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
  }

  to {
    text-shadow: 2px 2px 5px cyan;
  }
}

@keyframes fadeInYT {
  from {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
  }

  to {
    text-shadow: 2px 2px 5px red;
  }
}

@keyframes fadeInBsky {
  from {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
  }

  to {
    text-shadow: 2px 2px 5px #1185fe;
  }
}

@keyframes fadeInFedi {
  from {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
  }

  to {
    text-shadow: 2px 2px 5px orange;
  }
}

@keyframes fadeInTwit {
  from {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
  }

  to {
    text-shadow: 2px 2px 5px white;
  }
}

@keyframes fadeInDisc {
  from {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
  }

  to {
    text-shadow: 2px 2px 5px #5865F2;
  }
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.blink {
  animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
  49% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }
}

a {
  background-color: transparent;
  transition: background-color 0.3s ease;
  border-radius: 10px;
}

a:hover {
  animation: fadeIn 0.5s linear infinite;
  background-color: indigo;
  border-radius: 10px;
}

.subtext {
  color: gray;
  text-align: center;
}

.back {
  color: white;
  font-size: 35px;
  padding: 10px 5px 5px;
  background-size: 48px 48px;
  background-position: left center;
  background-repeat: no-repeat;
  text-decoration: none;
}

.back::before {
  content: '← ';
}