.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg, rgba(255,123,34,.18) 50%, transparent 50%),
    linear-gradient(rgba(255,123,34,.14) 50%, transparent 50%);
  background-size: 8px 8px;
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--orange);
  cursor: pointer;
  font: 20px/1 'Pixelify Sans', sans-serif;
  animation: theme-pixel-idle 3s steps(4, end) infinite;
  transition: transform .18s steps(2, end), box-shadow .18s steps(2, end), color .18s;
}

.theme-toggle::before {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  background: var(--orange);
  content: '';
  box-shadow: -9px -10px 0 var(--orange), 8px -16px 0 var(--orange);
  opacity: .8;
}

.theme-toggle:hover {
  color: #fff;
  background-color: var(--orange);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--brown);
}

[data-theme='dark'] .theme-toggle {
  color: #fff7ef;
  background-color: #3b2923;
}

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

@media (max-width: 800px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
  }
}