/* =============================================================== */
/* HTML Elements                                                   */
/* =============================================================== */

html {
  scroll-padding-top: var(--header-height);
}

main,
section,
article,
aside,
header,
footer {
  display: block;
  max-width: 100%;
}

figure {
  margin: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  height: auto;
  /*   aspect-ratio: initial;
  object-fit: cover; */
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, var(--font-base, system-ui, -apple-system, "Segoe UI", sans-serif));
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: var(--space-2xs) 0;
  color: var(--heading-fg);
  page-break-after: avoid;
  break-after: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  margin-bottom: 0;
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

p+p {
  margin: var(--space-m) 0 0 0;
}

p {
  orphans: var(--orphans);
  widows: var(--widows);
  page-break-inside: avoid;
  break-inside: avoid;
}

small {
  font-size: var(--font-size-small);
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

em,
i {
  font-style: italic;
}

ul,
ol {
  margin: var(--space-list-box);
  list-style-position: outside;
  page-break-before: avoid;
  break-before: avoid;
  orphans: var(--orphans);
  widows: var(--widows);
}

li {
  margin: var(--space-list-item);
  page-break-inside: avoid;
  break-inside: avoid;
  orphans: var(--orphans);
  widows: var(--widows);
}

dl {
  margin: var(--space-list-box);
}

dt {
  margin: var(--space-list-item);
}

dd {
  margin: var(--space-list-item);
}

blockquote {
  font-weight: var(--font-weight-bold);
  font-style: italic;
  position: relative;
  margin: var(--space-m) 0;
  padding: 0 3em;
  color: var(--color-gray);
  page-break-inside: avoid;
  break-inside: avoid;
  orphans: var(--orphans);
  widows: var(--widows);
}

blockquote::before,
blockquote::after {
  color: var(--color-green-dark);
  font-size: 4em;
  position: absolute;
  pointer-events: none;
}

blockquote::before {
  content: "«";
  top: -.5em;
  left: 0;
}

blockquote::after {
  content: "»";
  right: 0;
  bottom: 0;
}

cite {
  font-style: normal;
  font-weight: var(--font-weight-normal);
  color: var(--color-gray);
}

q {
  quotes: "«" "»" "‹" "›";
}

abbr {
  text-decoration: underline dotted;
  cursor: help;
}

address {
  margin: var(--space-m) 0;
  font-style: normal;
}

kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  background-color: var(--color-gray-light);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

samp {
  font-family: monospace;
}

var {
  font-style: italic;
}

sub,
sup {
  vertical-align: baseline;
  position: relative;
  line-height: 0;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

mark {
  font-weight: var(--font-weight-bold);
  background-color: var(--color-yellow);
  color: inherit;
  padding: 0.1em 0.2em;
  border-radius: var(--radius);
}

ins {
  text-decoration: none;
  background-color: rgba(114, 190, 68, 0.2);
}

del,
s {
  text-decoration: line-through;
  opacity: 0.7;
}

dfn {
  font-style: italic;
}

time,
data {
  font-variant-numeric: tabular-nums;
}

hr {
  border: none;
  height: var(--border);
  background-color: var(--main-fg);
  margin: var(--padding) 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--padding) 0;
}

th {
  font-weight: var(--font-weight-bold);
}

caption {
  text-align: left;
  margin-bottom: var(--space-s);
}

colgroup,
col {
  border: none;
}

tbody,
tfoot {
  border-top: var(--border);
}

th,
td {
  padding: var(--space-s);
  text-align: left;
  border-bottom: var(--border);
}

thead th {
  color: var(--color-green-dark);
}

code,
pre {
  font-family: var(--font-monospace);
}

code {
  background-color: var(--color-gray-light);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

pre {
  padding: var(--space-m);
  background-color: var(--color-gray-light);
  border-radius: var(--radius);
  overflow: auto;
  page-break-inside: avoid;
  break-inside: avoid;
}

form {
  display: grid;
}

fieldset {
  margin: var(--space-m) 0;
  padding: var(--space-m);
  border: var(--border);
  border-radius: var(--radius);
}

legend {
  padding: 0 var(--space-xs);
}

label {
  font-weight: var(--font-weight-semibold);
  margin: var(--padding) 0 0 0;
}

input,
textarea,
select {
  width: 100%;
  padding: var(--space-s);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="checkbox"],
input[type="radio"] {
  margin: var(--padding) var(--space-xs) 0 0;
  min-width: 0;
  width: auto;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-green-dark);
  box-shadow: var(--focus-ring);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

optgroup {
  font-style: normal;
}

option {
  padding: var(--space-xs);
}

output {
  display: inline-block;
  padding: var(--space-xs);
}

datalist {
  display: none;
}

meter,
progress {
  width: 100%;
  height: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}

meter {
  appearance: none;
}

meter::-webkit-meter-bar {
  background-color: var(--color-gray-light);
  border-radius: var(--radius);
}

meter::-webkit-meter-optimum-value {
  background-color: var(--color-green);
}

meter::-moz-meter-bar {
  background-color: var(--color-green);
}

progress {
  appearance: none;
  background-color: var(--color-gray-light);
}

progress::-webkit-progress-bar {
  background-color: var(--color-gray-light);
  border-radius: var(--radius);
}

progress::-webkit-progress-value {
  background-color: var(--color-green-dark);
  border-radius: var(--radius);
}

progress::-moz-progress-bar {
  background-color: var(--color-green-dark);
  border-radius: var(--radius);
}

details {
  margin: var(--space-m) 0;
  padding: var(--space-m);
  border: var(--border);
  border-radius: var(--radius);
}

summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "▶ ";
  display: inline-block;
  transition: transform var(--transition-fast);
}

details[open] summary::before {
  transform: rotate(90deg);
}

dialog {
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--padding);
  max-width: 50rem;
  box-shadow: var(--shadow-strong);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

iframe,
embed,
object {
  max-width: 100%;
  border: none;
}

audio {
  width: 100%;
  margin: var(--space-m) 0;
}

source,
track {
  display: none;
}

map {
  display: inline;
}

area {
  cursor: pointer;
}

noscript {
  display: block;
  width: 100%;
  padding: var(--space-m);
  margin: var(--space-m);
  color: var(--color-yellow);
  background-color: var(--color-red);
  border-radius: var(--radius);
}

noscript h1 {
  color: var(--color-yellow);
}

template,
slot {
  display: none;
}

ruby {
  display: inline-block;
}

rt {
  line-height: 1;
}

rp {
  display: none;
}

bdi,
bdo {
  unicode-bidi: isolate;
}

bdo {
  unicode-bidi: bidi-override;
}

wbr {
  white-space: normal;
}