/* Global / base styles */
body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* Round icon buttons used on the cards */
.icon-btn {
  width: 48px;
  height: 48px;
  border: var(--border);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--color-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.icon-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-ink);
}
.icon-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--color-ink);
}
.icon-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn svg .fill { fill: currentColor; }