/* Light Mode Theme */
:root {
  color-scheme: light dark;
  --background-color: light-dark(#fefefe, #333);
  --font-color: light-dark(#222, #eee);
  --header-color: light-dark(#222, #111);

  --anchor-color: light-dark(RoyalBlue, CornflowerBlue);
  --anchor-visited-color: light-dark(Brown, Crimson);

  --code-block: #161b22;
  --code-block-font: #fff;

  --code-inline: light-dark(#f1f5f9, #161b22);
  --code-inline-font: light-dark(#292929, #fff);

  --block-quote: #ddd;

  --table-border: light-dark(#333, #eee);
  --table-padding: 0.8em;
  --table-separator-width: 0.4em;

  --regular-font: sans-serif;

  --mono-font: monospace;
  --code-font: monospace;

  --icon-size: 30px;

  --width: 80vw;
  --max-width: 1024px;

  --grid: 1rem;

  --radius: 4px;
}


/* Mobile Theme */
@media screen and (max-device-width: 960px) {
  :root {
    --width: 94vw;
  }

  audio {
    width: 100%;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc((var(--icon-size) + var(--grid) * 2));
}

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion) {
  @view-transition {
    navigation: none;
  }
}

body {
  font-family: var(--regular-font);
  background-color: var(--background-color);
  color: var(--font-color);
  /*font-feature-settings: "palt";*/
  margin: 0;
  padding: 0;
}

code {
  font-family: var(--mono-font);
}

img {
  display: block;
  height: auto;
}

video {
  display: block;
  max-width: 100%;
  height: auto;
  border: solid 1px #333;
}

hr {
  margin: 0;
  padding: 0;
}

iframe {
  display: block;
  max-width: 100%;
  margin-block-start:  var(--grid);
  margin-block-end:    var(--grid);
  margin-inline-start: 0;
  margin-inline-end:   0;
}