@font-face {
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/source_sans_3_400.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/static/fonts/source_sans_3_500.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/static/fonts/source_sans_3_600.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/static/fonts/source_sans_3_700.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/static/fonts/source_sans_3_800.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 900;
  src: url('/static/fonts/source_sans_3_900.woff2') format('woff2');
}


:root {
  /* dark background tones */
  --base03: #262527;
  --base02: #333135;

  /* content tones */
  --base01: #565454;
  --base00: #657a81;
  --base0: #6c767a;
  --base1: #c1c7c9;

  /* light background tones */
  --base2: #e8ebed;
  --base3: #ffffff;

  /* accent colors */
  --purple: #9c7fa4;
  --purple-dark: #671f7d;
  --purple-light: #f9e7ff;
  --grey: #9babb2;
  --charcoal: #414042;
  --orange: #C55B05;
  --dark_orange: #cd7e3e;
  --light_yellow: #FFFF66;
  --pink: #d1808e;
  --aqua: #00a9bf;
  --aqua-header: #00a9bf;
  --aqua-dark: #008ea6;
  --aqua-light: #dff1f3;
  --blue: #557288;
  --white: #fff;
  --parchment: #FBF8F5;
  --parchment_grey: #f4f5f5;
}


body.dark_mode {
  --base3: #262527;
  --base2: #333135;
  --base1: #61696b;
  --base0: #6c767a;
  --base00: #939c9f;
  --base01: #a0a8ab;
  --base02: #e8ebed;
  --base03: #ffffff;
  
  --aqua: #49dff3;
  --parchment: #121212;
  --parchment_grey: #121212;
}


body {
  margin: 0;
  font-family: 'Source Sans', sans-serif;
  line-height: 1.4;
  background: var(--base3);
  color: var(--base02);
  font-size: 18px;
}

a {
  color: var(--aqua);
  text-decoration: none;
}

input[type=text]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

h1, h2, h3, h4, h5 {
  font-weight: 900;
  color: var(--base01);
}

p {
  margin-bottom: 0;
}

p:first-child {
  margin-top: 0;
}

.clearfix:after {
  clear: both;
  content: " ";
  height: 0;
  display: block;
}