.commands-page-heading {
  grid-column: 1 / -1;
  padding: 18px 0 4px;
}

.commands-page-heading .section-number {
  margin-bottom: 9px;
}

.commands-page-heading h1 {
  display: inline-block;
  margin: 0;
  color: var(--ink);
  font: 700 clamp(34px, 5vw, 64px)/1 'Pixelify Sans', sans-serif;
  text-shadow: 4px 4px 0 var(--skin);
  animation: page-title-bob 2.6s steps(5, end) infinite;
}

.commands-page-heading h1::after {
  display: inline-block;
  margin-left: 12px;
  color: var(--orange);
  content: '✦';
  font-size: .55em;
  animation: page-title-spark 1.2s steps(3, end) infinite;
}

.commands-page-heading p {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.command-sidebar h2 {
  margin: 0 0 18px;
  font: 700 22px/1.1 'Pixelify Sans', sans-serif;
}

@keyframes page-title-bob {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(0, 1px); }
  75% { transform: translate(-2px, -1px); }
}

@keyframes page-title-spark {
  0%, 100% { opacity: .35; transform: scale(.7) rotate(0); }
  50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}

@media (max-width: 800px) {
  .commands-page-heading { padding-top: 8px; }
  .commands-page-heading h1 { font-size: 40px; }
}
