@use "colours.scss";

body {
  background-color: colours.$background;
  font-family: 'Roboto Mono';
  font-size: large;
}

a:link,
a:visited,
a:hover,
a:active {
  color: colours.$links;
  background-color: transparent;
  text-decoration: none;
}

// Headers. 
h1 {
  font-size: 2.5em;
  color: colours.$h1;
}

h2 {
  color: colours.$h2;
}

h3 {
  color: colours.$h3;
}

h4 {
  color: colours.$h4;
}

h5 {
  color: colours.$h5;
}

h6 {
  color: colours.$h6;
}

blockquote>p {
  color: colours.$blockquote;
}

ul li {
  color: colours.$text;
}

ol li {
  color: colours.$text;
}

code {
  color: colours.$code;
}

li {
  color: colours.$white;
}

em,
strong {
  color: colours.$blockquote;
}

hr {
  background: linear-gradient(to right, colours.$h1, colours.$h1, colours.$h2, colours.$h3, colours.$h4, colours.$h5, colours.$h6, colours.$h6);
  height: 5px;
  border: 0;
}

#vaxandi_forritari {
  color: colours.$h1;
}

#aspiring_game_developer {
  color: colours.$h2;
}

#amateur_linguist {
  color: colours.$h3;
}

#frolicking_photographer {
  color: colours.$h4;
}

#adventuring_animator {
  color: colours.$h5;
}

#music_enjoyer {
  color: colours.$h6;
}

#subtitle {
  color: colours.$dates;
}

#text,
p {
  color: colours.$text;
}