@import url("/css/colors.css");
@import url("/css/header.css");
@import url("/css/footer.css");
@import url("/css/progress.css");

:root {
  font-family: "Crimson Text", sans-serif;
  font-size: var(--font-size);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--background-color);
  color: var(--font-color);
  position: relative;
}

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

hr {
  color: var(--sub-font-color);
}

/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Crimson Text", serif;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;

  line-height: 1.1;

  & ~ p {
    margin-top: 0;
  }
}

header,
main,
footer {
  max-width: 900px;

  margin-left: 45px;
  margin-right: 45px;
}

@media screen and (max-width: 990px) {
  header,
  main,
  footer {
    margin-left: 15px;
    margin-right: 15px;
  }
}