/* Page column, top bar, theme toggle */

.wrap {
  max-width: 604px;
  margin: 0 auto;
  padding: 40px 40px 120px;
}

/* top bar: logo + dark mode toggle, scrolls away with the page */
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 96px; }
/* logo: a "G" in Pixelify Sans; js/pixel-fx.js breaks it into pixels on hover */
.mark { position: relative; display: block; color: var(--ink); text-decoration: none; }
.mark-text { display: block; font-family: "Pixelify Sans", var(--head); font-weight: 600; font-size: 28px; line-height: 1; }
.mark.scrambling .mark-text { visibility: hidden; }
.mark-fx { position: absolute; pointer-events: none; }

/* theme toggle: a single icon. Moon in light mode (tap for dark), sun in dark mode (tap for light) */
.theme {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
  transition: color .2s, background-color .2s;
}
.theme:hover { color: var(--ink); background: var(--hover); }
.theme:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme svg { width: 18px; height: 18px; animation: icon-in .45s cubic-bezier(.3, 1.4, .5, 1); }
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}
@keyframes icon-in { from { opacity: 0; transform: rotate(-90deg) scale(.5); } to { opacity: 1; transform: none; } }