:root {
  color-scheme: light, dark;

  /* Page Layout */
  --bg-color: light-dark(#efefef, #212121);
  --fg-color: light-dark(#000, #fff);

  --font-family--page:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Settings for Generated CSS Menu */
  --font-family--top-nav: var(--font-family--page);

  --top-nav--bg-color: linear-gradient(90deg, #1e40af, #2563eb);
  --top-nav--fg-color: white;
  --top-nav--border: 0px solid #1e3a8a;
  --top-nav--li-a-hover-bg-color: #1d4ed8;
  --top-nav--li-a-hover-fg-color: #bfdbfe;

  --foot-nav--bg-color: linear-gradient(90deg, #1e40af, #2563eb);
  --foot-nav--fg-color: white;
  --foot-nav--border: 0px solid #1e3a8a;
  --foot-nav--li-a-hover-bg-color: #1d4ed8;
  --foot-nav--li-a-hover-fg-color: #bfdbfe;

  --top-nav--dropdown-bg-color: #1e3a8a;
  --top-nav--dropdown-fg-color: #dbeafe;
  --top-nav--dropdown-hover-bg-color: #1d4ed8;
  --top-nav--dropdown-hover-fg-color: white;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
  hyphens: auto;
  /* outline: 1px solid red; */
}

* {
  padding: 0;
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  block-size: 100%;
  scrollbar-gutter: stable;
}

body {
  min-block-size: 100%;
  background-color: var(--bg-color);
  color: var(--fg-color);
  font-family: var(--font-family--page);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  position: sticky;
  top: 0;
}

main {
  padding: 1rem;
}

img,
iframe,
audio,
video,
canvas {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

svg {
  max-inline-size: 100%;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

textarea {
  resize: vertical;
}

fieldset,
iframe {
  border: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
  font-variant-numeric: proportional-nums;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-variant-numeric: lining-nums;
}

p,
blockquote,
q,
figcaption,
li {
  hanging-punctuation: first allow-end last;
}

input,
label,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

math,
time,
table {
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

code {
  font-variant-numeric: slashed-zero;
}

table {
  border-collapse: collapse;
}

abbr {
  font-variant-caps: all-small-caps;
  text-decoration: none;

  &[title] {
    cursor: help;
    text-decoration: underline dotted;
  }
}

sup,
sub {
  line-height: 0;
}

:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

:focus-visible {
  outline-offset: 0.2rem;
}