.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  padding: 11px 20px;
  overflow: hidden;
  color: #fff;
  background-color: var(--orange);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
    linear-gradient(rgba(255,255,255,.1) 50%, transparent 50%);
  background-position: 0 0, 0 0;
  background-size: 8px 8px;
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--brown);
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
  animation: pixel-button-idle 2.8s steps(4, end) infinite;
  transition: transform .18s steps(2, end), box-shadow .18s steps(2, end);
}

.hero-actions .button-primary {
  gap: 10px;
}

.hero-actions .button {
  height: 50px;
  padding: 8px 18px;
  font-size: 16px;
}

.hero-discord-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

.hero-note .paw {
  position: static;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.nav-links a::before {
  position: absolute;
  top: -30%;
  left: -35%;
  width: 28%;
  height: 160%;
  background: rgba(255,255,255,.3);
  content: '';
  transform: skewX(-18deg);
  animation: pixel-button-shine 3.8s steps(8, end) infinite;
}

.nav-links a:hover {
  color: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--brown);
}

@keyframes pixel-button-idle {
  0%, 100% { background-position: 0 0, 0 0; }
  50% { background-position: 8px 0, 0 8px; }
}

@keyframes pixel-button-shine {
  0%, 55% { left: -35%; }
  75%, 100% { left: 125%; }
}

@media (max-width: 800px) {
  .nav-links a {
    min-width: 96px;
    padding: 9px 16px;
    font-size: 15px;
  }
}