:root {
  --tools-brand: #343b3a;
  --tools-brand-soft: #dfe5e2;
}

.site-header .site-brand .site-mark {
  border-color: var(--tools-brand);
  background: transparent;
  color: var(--tools-brand);
  box-shadow: none;
  transform: translate(0,0);
  transition:
    transform .18s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.site-header .site-brand:hover .site-mark {
  transform: translate(-2px,-2px);
  border-color: var(--tools-brand);
  background: var(--tools-brand);
  color: #fff;
  box-shadow: 5px 5px 0 var(--tools-brand-soft);
}

html[data-theme="terminal"] .site-header .site-brand .site-mark {
  border-color: var(--tools-brand-soft);
  color: var(--tools-brand-soft);
}

html[data-theme="terminal"] .site-header .site-brand:hover .site-mark {
  border-color: var(--tools-brand);
  background: var(--tools-brand);
  color: #fff;
  box-shadow: 5px 5px 0 var(--tools-brand-soft);
}

@media (prefers-reduced-motion: reduce) {
  .site-header .site-brand .site-mark {
    transition: none;
  }
}