:root {
  --now: #e67e22;
  --later: #f1c40f;
  --done: #2ecc71;
  --deleted: #e74c3c;
  --red: #c0392b;
  --blue: #009ddc;
  --white: hsl(0deg, 0%, 95%);
  --lightgrey: hsl(0deg, 0%, 90%);
  --grey: hsl(0deg, 0%, 60%);
  --darkgrey: hsl(0deg, 0%, 20%);
  --black: hsl(0deg, 0%, 10%);

  --background: var(--white);
  --header: var(--lightgrey);
  --text: var(--darkgrey);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--black);
    --header: var(--darkgrey);
    --text: var(--white);
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

html {
    overflow: hidden;
}

body {
  overflow: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--background);
}