/*Colors for all pages*/
:root {
  --white100: rgb(250, 250, 250);
  --white200: rgb(240, 240, 240);

  --gray100: rgb(194, 194, 194);
  --gray200: rgb(169, 169, 169);
  --gray300: rgb(46, 46, 46);
  --gray350: rgb(46, 46, 46, 0.75);

  --black800: rgb(39, 39, 39);
  --black900: rgb(20, 20, 20);

  --blue500: rgb(0, 0, 255);
  --blue700: rgb(0, 0, 122);
  --blue800: rgb(0, 0, 83);

  --green500: rgb(0, 128, 0);
  --green700: rgb(0, 122, 0);
  --green800: rgb(0, 83, 0);

  --red500: rgb(255, 0, 0);
  --red700: rgb(122, 0, 0);
  --red800: rgb(82, 0, 0);
}

/*Themes*/
.dark {
  --bg0: var(--white100);
  --bg1: var(--gray300);
  --bg2: var(--black800);
  --bg3: var(--gray200);
  --bg4: var(--gray350);
  --bg5: var(--black900);
  --nav1: var(--gray300);
  --nav2: var(--black800);
  --head-text: var(--white100);
  --main-text: var(--white200);
}

.red {
  --nav1: var(--red700);
  --nav2: var(--red800);
  --text: var(--white100);
}

.green {
  --nav1: var(--green700);
  --nav2: var(--green800);
  --text: var(--white100);
}

.blue {
  --nav1: var(--blue700);
  --nav2: var(--blue800);
  --text: var(--white100);
}