:root{
  --font-size: 20px;
  --content-width: 30em;
  --line-height: 1.6em;

  /* light-mode */
  --body-bg: #fff;
  --body-color: #000;
  --inputbox-color:#212529;

  /* lighten the body bg a lil bit */
  --inputbox-bg: var(--body-bg);
  --link-color: blue;
  --link-visited-color: purple;
}

body.dark-mode {
  --body-bg:rgb(28, 27, 34);
  --body-color: #fff;
  --link-color:#222;
  --inputbox-color:#212529;

  /* lighten the body bg a lil bit */
  --inputbox-bg: rgb(58, 57, 66);
  --link-color: rgb(0, 221, 255);
  --link-visited-color: #e675fd;
}
body.light-mode {
  /* light-mode */
  --body-bg: #fff;
  --body-color: #000;
  --inputbox-color:#212529;

  /* lighten the body bg a lil bit */
  --inputbox-bg: var(--body-bg);
  --link-color: blue;
  --link-visited-color: purple;
}


body {
  font-family: sans-serif;
}

.container {
  margin: 0 auto;
  font-size: var(--font-size);
  max-width: var(--content-width);
  line-height: var(--line-height);
  position: relative;
}

img, video {
  max-width: 100%;
  object-fit: contain;
  height: auto;
}

.title{
  line-height: 1.2em;
}

body {
  background-color: var(--body-bg);
  color:var(--body-color);
}

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

.inputbox{
  background-color: var(--inputbox-bg);
  color:var(--body-color);
}

#theme-button {
  position: absolute;
  right: 0;
}

/* TODO: leave the variables in sync with .body.dark-mode */
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg:rgb(28, 27, 34);
    --body-color: #fff;
    --link-color:#222;
    --inputbox-color:#212529;

    --inputbox-bg: rgb(58, 57, 66);
    --link-color: rgb(0, 221, 255);
    --link-visited-color: #e675fd;
 }
}