:root {
--blue-primary-0: #202021;
--blue-primary-1: #4C5264;
--blue-primary-2: #6275A9;
--blue-primary-3: #6E7381;
--blue-primary-4: #888888;
--white-background: #FFFFFF;
--source-code-font: 'Source Code Pro', monospace;
--regular-font: 'Baloo 2', cursive;
--font-small: 0.9em;
--font-medium: 1em;
--font-large: 1.3em;
--font-very-large: 1.6em;
}

body {
  font-family: var(--regular-font);
  font-size: var(--font-medium);
  color: var(--blue-primary-0);
}

nav {
  background-color: var(--white-background);
}

h2 {
  color: var(--blue-primary-2);
}

h4 {
  color: var(--blue-primary-4);
}

a {
  color: var(--blue-primary-2);
  font-size: var(--font-medium);
  text-decoration: none;
}

a:hover {
  color: var(--blue-primary-4);
}

.sourceCode {
  font-family: var('Source Code Pro', monospace);
  font-size: var(--font-small);
  color: var(--blue-primary-3);
}

.blogsHeader {
  margin-top: 2rem;
  font-size: 36px;
  color: var(--blue-primary-2);
}