body {
  background: #0d0a14;
  padding: 40px 20px;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color: #9d9aa4;
}

.bard {
  margin: 0 auto 40px;
  width: 65em;
  height: 62em;
  font-size: 2px;
}
@media (min-width: 360px) {
  .bard {
    font-size: 3px;
  }
}
@media (min-width: 600px) {
  .bard {
    font-size: 4px;
  }
}
@media (min-width: 1000px) {
  .bard {
    font-size: 5px;
  }
}

.bard img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
}

.strip {
  overflow: hidden;
  position: relative;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background-size: 100% auto;
  background-image: url(data:image/png;base64,[encoded data, 9624 characters]);
}

@keyframes glitch-5 {
  0.00%, 33.33%, 43.33%, 66.67%, 76.67%, 100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%, 43.23% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -4px 0 rgba(0, 0, 255, 0.1));
  }
  66.77%, 76.57% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-1px 0px 0 rgba(255, 0, 0, 0.1));
  }
}
@keyframes glitch-6 {
  0.00%, 33.33%, 41.67%, 66.67%, 75.00%, 100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%, 41.57% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-2px 3px 0 rgba(255, 0, 0, 0.1));
  }
  66.77%, 74.90% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px -2px 0 rgba(0, 0, 255, 0.1));
  }
}
@keyframes glitch-7 {
  0.00%, 33.33%, 40.48%, 66.67%, 73.81%, 100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%, 40.38% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -3px 0 rgba(0, 0, 255, 0.1));
  }
  66.77%, 73.71% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(4px 1px 0 rgba(255, 0, 0, 0.1));
  }
}
@keyframes glitch-8 {
  0.00%, 33.33%, 39.58%, 66.67%, 72.92%, 100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%, 39.48% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-1px -1px 0 rgba(0, 0, 255, 0.1));
  }
  66.77%, 72.82% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(3px -1px 0 rgba(0, 0, 255, 0.1));
  }
}
@keyframes glitch-9 {
  0.00%, 33.33%, 38.89%, 66.67%, 72.22%, 100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%, 38.79% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(1px -3px 0 rgba(255, 0, 0, 0.1));
  }
  66.77%, 72.12% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.1));
  }
}
@keyframes glitch-10 {
  0.00%, 33.33%, 38.33%, 66.67%, 71.67%, 100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%, 38.23% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(3px -1px 0 rgba(255, 0, 0, 0.1));
  }
  66.77%, 71.57% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px 2px 0 rgba(255, 0, 0, 0.1));
  }
}
p {
  margin: 20px auto 0;
  position: relative;
  max-width: 400px;
  text-align: center;
  line-height: 1.3;
  font-size: 0.875rem;
}

a {
  color: #6be1e9;
}

a:focus,
a:hover,
a:visited {
  opacity: 0.8;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.debug {
  margin: 40px auto 0;
  position: relative;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.code {
  margin: 10px auto 0;
}
@media (min-width: 600px) {
  .code {
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: flex-start;
  }
}

.heading {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: bold;
}

.column {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 4px;
  color: #e8c57d;
}

.column + .column {
  color: #aa95bd;
}