@charset "utf-8";
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

* {
  box-sizing: border-box;
  font-size: inherit;
  line-height: inherit;
  font-weight: normal;
  color: currentcolor;
  border-color: currentColor;
  font-family: inherit;
  margin: 0;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

html {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  font-display: optional;
  font-size: 150%;
  word-break: break-word;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: system-ui, /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ Segoe UI, /* Android 4+ */ Roboto,
    /* Ubuntu 10.10+ */ Ubuntu, /* Gnome 3+ */ Cantarell,
    /* KDE Plasma 5+ */ Noto Sans, /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji", /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol", /* Linux emoji */ "Noto Color Emoji";
}

code,
kbd,
pre,
samp {
  font-family:
    /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas,
    /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace,
    /* KDE Plasma 5+ */ Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono,
    /* Linux/OpenOffice fallback */ Liberation Mono, /* fallback */ monospace;
}

body {
  font-size: 0.666666667rem;
  line-height: 1rem;
}

a {
  background-color: transparent;
}

img {
  max-width: 100%;
}

svg:not([fill]) {
  fill: currentColor;
}

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

table {
  border-collapse: collapse;
}

sub,
sup {
  font-size: 0.75em;
  line-height: 1em;
}
sub {
  vertical-align: bottom;
}
sup {
  vertical-align: top;
}

ol,
ul {
  padding-left: 1rem;
}

nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled="true"],
[disabled] {
  cursor: default;
}

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* Custom tools */

hr {
  background-color: currentcolor;
  height: auto;
  width: auto;
  min-height: 1px;
  min-width: 1px;
}

.padding {
  padding: 1rem;
}
.padding.double {
  padding: 2rem;
}
.padding-half {
  padding: 0.5rem;
}

.full-width {
  width: 100%;
}

.all-caps {
  text-transform: uppercase;
}

.looser {
  letter-spacing: 1px;
}

.tighter {
  letter-spacing: -1px;
}

/* Nice links */

a,
.link {
  text-decoration: underline;
}

a:hover,
.link:hover {
  filter: contrast(162%);
}

a:active,
.link:active {
  filter: contrast(62%);
}

a > *,
.link > * {
  text-decoration: none;
}

/* Type presets */

.h1 {
  font-size: 2.5em;
  line-height: 2rem;
}

.h2 {
  font-size: 1.618em;
  line-height: 1.5rem;
}

.h3 {
  font-size: 1.2em;
}

.small {
  font-size: 0.8em;
}

/* Layout helpers */
html {
  --gridSize: 9rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--gridSize), 1fr));
}

.grid > * {
  --span: -1;
  grid-column: span var(--span);
}

.align-center {
  align-self: center;
}
.grid.align-center {
  align-items: center;
}
.justify-center {
  justify-self: center;
}
.grid.justify-center {
  justify-items: center;
}

.align-start {
  align-self: start;
}
.grid.align-start {
  align-items: start;
}
.justify-start {
  justify-self: start;
}
.grid.justify-start {
  justify-items: start;
}

.align-end {
  align-self: end;
}
.grid.align-end {
  align-items: end;
}
.justify-end {
  justify-self: end;
}
.grid.justify-end {
  justify-items: end;
}

.gap:not(.grid) > * + * {
  margin-top: 1rem;
}
.gap-double:not(.grid) > * + * {
  margin-top: 2rem;
}
.gap-half:not(.grid) > * + * {
  margin-top: 0.5rem;
}

.grid.gap {
  grid-gap: 1rem;
}
.grid.gap-double {
  grid-gap: 2rem;
}
.grid.gap-half {
  grid-gap: 0.5rem;
}