* {
    box-sizing: border-box;
}

*:focus-visible {
    outline: 2px solid currentColor;
}

body {
    color: var(--fg);
    background-color: var(--bg);
    margin:0;
    padding:0;
    font-family: 'Crimson Pro';
    font-size: 1.25rem;
}

h1 {
  color: var(--accent);
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block: .75rem;
}

h2 {
  color: var(--accent);
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block: .75rem;
}

h3 {
  color: var(--accent);
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block: .75rem;
}

h4 {
  color: var(--accent);
  display: block;
  font-size: 1em;
  font-weight: bold;
  margin-block: .75rem;
}

h5 {
  color: var(--accent);
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin-block: .75rem;
}

h6 {
  color: var(--accent);
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin-block: .75rem;
}

a {
    color: var(--accent);
}

a:visited {
    color: var(--link-visited);
}

.underline-hover a {
    text-decoration: none;
}

.underline-hover a:hover {
    text-decoration: underline;
}

.nowrap {
    white-space: nowrap;
}

::selection {
    background-color: var(--accent-bg);
    color: var(--bg);
}

blockquote {
    margin-inline: 1.5em;
    border-left: .25em solid var(--faint);
    padding-left: .5em;
}

.tabnum {
    font-variant-numeric: tabular-nums;
}

input,
textarea,
label:has(input) {
    background-color: var(--input-bg);
    border: 2px solid var(--accent);
    border-radius: 3px;
    padding: 0.5rem;
    font-size: 1em;
    font-family: 'Crimson Pro';
}

input:focus-visible,
textarea:focus-visible,
label:has(input):focus-within {
    outline: 2px solid var(--accent);
    border-radius: 1px;
}

input:user-invalid,
textarea:user-invalid,
label:has(input:user-invalid) {
  border-color: var(--invalid);
}

input:focus-visible:user-invalid,
textarea:focus-visible:user-invalid,
label:has(input:focus-visible:user-invalid) {
  outline-color: var(--invalid);
}

label:has(input) {
    color: var(--accent);
}

label:has(input:user-invalid) {
    color: var(--invalid);
}

label > input {
    border: none !important;
    padding: 0 !important;
    margin-left: 0.75rem;
}

label > input:focus-visible {
    outline: none;
}

button {
    background-color: var(--accent-bg);
    color: var(--bg);
    border: none;
    border-radius: 3px;
    padding: 0.5rem;
    font-size: 1em;
    font-family: 'Crimson Pro';
    cursor: pointer;
}

button:focus-visible {
    outline: 2px solid var(--accent-bg);
    outline-offset: 1px;
}

button:hover {
    outline: 2px solid var(--accent-bg);
    border-radius: 1px;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: 0;
}


img {
    align-items: center;
    max-width: calc(min(30rem, 100%));
}