body {
  background-color: peachpuff;
}

main {
  background: url(bg.gif) repeat;
  max-width: 45em;
  padding: 15px;
  border: 5px gray ridge;
  outline: 5px gray groove;
  margin: 40px auto;
  color: white;
  overflow: hidden;
}

h1 {
  text-align: center;
}

.mawilebox {
  height: 96px;
  background: url(mawile.gif) repeat-x;
  width: 5000px;
  animation: slide 30s linear infinite alternate;
}

.reverse {
  animation-name: slideReverse;
  animation-direction: alternate-reverse;
}

.pronouns {
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff;

  &:hover {
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 12px #fff,
      0 0 14px #fff,
      0 0 16px #fff,
      0 0 21px #fff;
  }
}

a {
  color: white;
}

section.buttons {
  display: grid;
  width: 60%;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
  place-items: center;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(calc(5000px / 3 * -1), 0, 0);
  }
}

@keyframes slideReverse {
  0% {
    transform: translate3d(0, 0, 0) scaleX(-1);
  }

  100% {
    transform: translate3d(calc(5000px / 3 * -1), 0, 0) scaleX(-1);
  }
}