/* examples/base.css */
:root {
  --padding: 24px;
  --padding-half: calc(var(--padding) * .5);
  --color: #fff;
  --background-color: #1e1e1e;
  --background-secondary-color: #252525;
  --link-color: #61dafb;
  --link-visited-color: #bb86fc;
  --ins-color: #4ade80;
  --del-color: #f87171;
  --ins-background-color: #0f3321;
  --del-background-color: #3f1d25;
}

@media (prefers-color-scheme: light) {
  :root {
    --color: #000;
    --background-color: #fff;
    --background-secondary-color: #f9f9f9;
    --link-color: #00e;
    --link-visited-color: #551a8b;
    --ins-color: #004d00;
    --del-color: #6e0000;
    --ins-background-color: #daffcc;
    --del-background-color: #ffd6dd;
  }
}

* {
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  color: var(--color);
  background-color: var(--background-color);
  flex-flow: column;
  min-width: 320px;
  min-height: 100vh;
  font-family: Arial, "serif";
}

body > section > .container {
  max-width: 1440px;
  margin: 0 auto;
}

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

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

body ul {
  padding-left: 15px;
}