*,
*:before,
*:after {
  box-sizing: inherit;
  box-sizing: border-box;

  z-index: 1;
}

:root {
  color-scheme: light dark;

  --lightBackground: #f7f7f7;
  --darkBackground: #121212;

  --lightWindowBackground: #ffffff80;
  --darkWindowBackground: #343a4050;

  --lightWindow: #ffffff18;
  --darkWindow: #343a4018;

  --lightFont: #272727;
  --darkFont: #f1faee;

  --lightAnchor: #234e97;
  --darkAnchor: #5fbcbf;

  --lightSelection: #457b9d50;
  --darkSelection: #a8dadc50;

  --lightShadow: hsla(0, 0%, 0%, 0.14);
  --darkShadow: rgba(0,0,0, 0.86);

  /* font-family: monospace; */
}

:root {
  --background: var(--lightBackground);
  --font: var(--lightFont);
  --windowBackground: var(--lightWindowBackground);
  --a: var(--lightAnchor);
  --selection: var(--lightSelection);
}

body {
  margin: 0px;
  padding: 0px;

  background-color: #f8f9fa;
  color: #34252f;

  font-family: "Work Sans", sans-serif;
}

dialog > div {

  background-color: #e9ecef;

}

header {
  background-color: #e9ecef;
}

@media (prefers-color-scheme: light) {
  :root {
    --base: #ffffff;
    --background: var(--lightBackground);
    --font: var(--lightFont);
    --windowBackground: var(--lightWindowBackground);
    --window: var(--lightWindow);
    --a: var(--lightAnchor);
    --selection: var(--lightSelection);
    --shadow: var(--lightShadow);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: #000000;
    --background: var(--darkBackground);
    --font: var(--darkFont);
    --windowBackground: var(--darkWindowBackground);
    --window: var(--darkWindow); /* focus */
    --a: var(--darkAnchor);
    --selection: var(--darkSelection);
    --shadow:var(--darkShadow);
  }
}

::-moz-selection {
  background: var(--selection);
}
::selection {
  background: var(--selection);
}

/* ::-webkit-scrollbar {
  width: 18px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px none;
  background-color: var(--background);
}

::-webkit-scrollbar-thumb {
  background: #88888888;
  border-radius: 50vmin;
  border: 4px solid var(--background);
}

::-webkit-scrollbar-thumb:hover {
  background: #888888;
} */

body {
  margin: 0px;
  padding: 0px;

  background-color: var(--background);
  color: var(--font);
}

@media print {
  html,
  body {
    display: none; /* hide whole page while printing */
  }
}


@supports not (display: grid) {
  main div {
    float: right;
  }
}