:root {
  --bg-color: #353535;
  --text-color: #bdbdbd;
  --font-family: "sourcesanspro";
  --titlebar-color: #212121;
  --bottomnav-color: #555555;
  --bottomnav-icon-color: #c7c7c7;
  --bottomnav-icon-active-color: #456c47;
  --bottomnav-active-color: #7ca74b;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  color-scheme: dark;
  color: var(--text-color);
  background-color: var(--bg-color);
  font-family: var(--font-family);
}

.center {
  display: flex;
  justify-content: center;
}

main {
  width: 100%;
  max-width: 900px;
}

@font-face {
  font-family: "sourcesanspro";
  font-style: "normal";
  font-weight: 400;
  src: url(/fonts/SourceSansPro-Regular.ttf) format("truetype");
}

@font-face {
  font-family: "sourcesanspro";
  font-style: "normal";
  font-weight: 300;
  src: url(/fonts/SourceSansPro-Light.ttf) format("truetype");
}

@font-face {
  font-family: "sourcesanspro";
  font-style: "normal";
  font-weight: 200;
  src: url(/fonts/SourceSansPro-ExtraLight.ttf) format("truetype");
}