styles.css

@font-face {
  font-family: "Grandstander";
  src: url("./Grandstander-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}

:root {
  --color1: #aa00ff;
  --color2: #440066;
}

html {
  height: 100dvh;
  width: 100%;

  display: grid;
  place-items: center;
}

body {
  margin: 0;
  padding: 4px;

  display: grid;
  place-items: center;
  grid-template-rows: repeat(2, min-content);

  background-color: hsl(280, 100%, 90%);
}

.peephole {
  width: 100%;
  max-height: 600px;
  aspect-ratio: 1/1;

  border-radius: 50%;

  background-image: url(img/bg.webp);
  background-size: 200%;
  background-position: 200% 50%;

  animation: bg-scroll 3s infinite;
  animation-timing-function: linear;

  overflow: hidden;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(0, 0, 0, 0.1),
    0 0 0 6px rgba(0, 0, 0, 0.05);
}

@keyframes bg-scroll {
  to {
    background-position: 0% 50%;
  }
}

svg {
  display: block;
  width: 100%;

  filter: drop-shadow(0 0 6px yellow)
    drop-shadow(0 8px 12px hsl(270, 100%, 71%))
    drop-shadow(-8px 0 12px hsl(330, 100%, 71%));
}

#head {
  animation: head 0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center left;
}

@keyframes head {
  to {
    transform: translate(-3px, -1px);
  }
}

#neck {
  animation: head 0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center left;
}

@keyframes neck {
  to {
    transform: translate(0.001rem, 0);
  }
}

#left-arm,
#right-arm {
  animation: left-arm 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center left;
}

@keyframes left-arm {
  to {
    transform: translate(-4px, 1px) rotate(0.15deg);
  }
}

#torso {
  animation: torso 0.25s ease-in-out infinite alternate-reverse;
  transform-origin: center;
}

@keyframes torso {
  to {
    transform: translate(-3px, -1px) rotate(1deg);
  }
}

#flame {
  animation: flaming;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center center;
}

@keyframes flaming {
  to {
    transform: scaleX(1.02);
  }
}

@keyframes hop {
  to {
    transform: rotate(0.5deg) rotateX(2deg);
  }
}

#upper-left-leg {
  animation: hop;
  animation-duration: 0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: top center;
}

#lower-left-leg,
#lower-right-leg {
  animation: lower-leg;
  animation-duration: 0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: top center;
}

@keyframes lower-leg {
  to {
    transform: rotate(0.5deg) rotateX(-5deg);
  }
}

#horse-body,
#horse-head {
  transform: rotate(0deg);
  animation: bob 0.25s;
  animation-iteration-count: infinite;
}

@keyframes bob {
  to {
    transform: rotate(0.25deg) rotateX(5deg);
  }
}

p {
  --color1: hsl(290, 100%, 34%);
  --color2: hsl(295, 100%, 34%);

  -webkit-background-clip: text;
  background-image: repeating-linear-gradient(
    0deg,
    var(--color1),
    var(--color1) 20%,
    var(--color2) 20%,
    var(--color2) 50%
  );
  background-position: center;

  font-family: "Grandstander", serif;
  font-size: 2rem;
  font-weight: 600;

  color: transparent;
  filter: drop-shadow(0 -2px 1px hsl(280deg 100% 0% / 0.75));

  text-align: center;
  margin: 1rem;
  padding: 2rem;
}