@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap');

/* Table of contents
--------------------------------------------------

- Theme values
- Grid
- Base Styles
- Typography
- Links
- Code
- Spacing
- Utilities
- Motion
- Misc

*/

/* Theme values
-------------------------------------------------- */
:root {
  --slate-bg: #3f4d61;
  --slate-accent: #535f71;
  --slate-accent-rim: #7b8492;
  --slate-accent-hover: #606c7c;
  --slate-accent-hover-rim: #929aa6;
  --slate-accent-strong: #657080;
  --slate-accent-strong-rim: #a2a8b2;
  --slate-grid: #ffffff;
  --slate-ink: #f2f5fa;
  --slate-ink-strong: #ffffff;
  --slate-muted: #c0c7cd;
  --slate-line: rgba(255, 255, 255, .3);
  --slate-surface: rgba(255, 255, 255, .055);
  --slate-radius: 18px;
  --slate-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Grid
--------------------------------------------------

The template nests the page in .container > .row > .column and prints the share
button before that container. The three wrappers are dropped to
`display: contents`, so every page element becomes a direct flex item of <body>
and `order` can put the share button under the last link. <body> then carries
the page box: 560px of content, whatever the wrappers do.
-------------------------------------------------- */
body > .container,
.row,
.column,
.columns {
  display: contents;
}

/* Reading order on the page: links, then share button */
.sharediv {
  order: 1;
}

/* Everything the background grid must stay behind */
.column > * {
  position: relative;
  z-index: 1;
}

/* A container that is not the page wrapper keeps its box */
.container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
}
.row,
.column,
.columns {
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
}

/* Base Styles
-------------------------------------------------- */
html {
  font-size: 100%;
  color-scheme: dark;
  background-color: var(--slate-bg);
}
body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  /* the admin bar sets its own margin-top from a later stylesheet */
  margin: 0 auto;
  padding: 52px 20px 40px;
  min-height: 100vh;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  text-align: center;
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  body {
    padding: 64px 20px 48px;
  }
}

/* Background grid */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .10;
  background-image:
    linear-gradient(var(--slate-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--slate-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: slateDrift 9s linear infinite;
  will-change: background-position;
  -webkit-mask-image: radial-gradient(77% 60.5% at 50% 20%, #000 0%, transparent 100%);
  mask-image: radial-gradient(77% 60.5% at 50% 20%, #000 0%, transparent 100%);
}

footer,
main,
.content {
  position: relative;
  z-index: 1;
}

/* Typography
-------------------------------------------------- */
h1,
h2,
h3,
.name,
#name {
  color: var(--slate-ink);
  font-weight: 800;
  letter-spacing: -.04em;
  text-align: center;
  text-wrap: pretty;
}
h1 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.05;
}
h2 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.15;
}

/* Larger than phablet */
@media (min-width: 550px) {
  h1 {
    font-size: 38px;
  }
}

/* The verification badge carries margin: 5px on all four sides, from a <style>
   inside the SVG file itself. The right one joins the centred line box, so the
   name and the badge together sit 2.5px left of centre. Only the gap before the
   badge is kept, which centres the pair on what is actually drawn. A heading
   with no badge is unaffected and centres on its own. */
h1 svg.badge,
h2 svg.badge,
svg.badge {
  margin: 0 0 0 .3em;
}

p,
.description,
#description,
.bio,
small {
  color: var(--slate-muted);
  font-weight: 300;
  line-height: 1.55;
}
p,
.description,
#description,
.bio {
  margin: 0 0 24px;
  text-align: center;
}

/* Links
-------------------------------------------------- */
a {
  color: var(--slate-ink);
  text-decoration: none;
}
a:hover {
  color: var(--slate-ink-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Code
-------------------------------------------------- */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  color: var(--slate-ink);
  background: var(--slate-surface);
  border: 1px solid var(--slate-line);
  border-radius: 4px;
}
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}

/* Spacing
-------------------------------------------------- */
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
ol,
ul {
  margin-bottom: 2rem;
}

/* Utilities
-------------------------------------------------- */
.u-full-width {
  width: 100%;
  box-sizing: border-box;
}
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}
.u-pull-right {
  float: right;
}
.u-pull-left {
  float: left;
}

/* Motion
-------------------------------------------------- */
@keyframes slateDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}

@keyframes slateRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.column > *,
.container:not(:has(.column)) > * {
  animation: slateRise 460ms var(--slate-ease) both;
}
.column > *:nth-child(2),
.container:not(:has(.column)) > *:nth-child(2) {
  animation-delay: 60ms;
}
.column > *:nth-child(3),
.container:not(:has(.column)) > *:nth-child(3) {
  animation-delay: 120ms;
}
.column > *:nth-child(n + 4),
.container:not(:has(.column)) > *:nth-child(n + 4) {
  animation-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  body::before {
    animation: none !important;
    transition: none !important;
  }
}

/* Misc
-------------------------------------------------- */
hr,
.divider {
  width: 40px;
  margin: 20px auto;
  border: none;
  border-top: 1px solid var(--slate-line);
}