@import './reset.css';
@import './normalize.css';
@import './font.css';
@import './variables.css';

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--colour--white);
  font-family: var(--font-body);
  font-size: var(--font-size--default);
  color: var(--colour--grey);
}

::selection {
  background-color: var(--colour--darkGrey);
  color: var(--colour--white);
}

::-moz-selection {
  background-color: var(--colour--darkGrey);
  color: var(--colour--white);
}

::-webkit-selection {
  background-color: var(--colour--darkGrey);
  color: var(--colour--white);
}

a {
  text-decoration: none;
}

/* ------- Header & Navigation ------- */

h1 {
  margin: 0;
  padding: 20px;
  font-family: var(--font-header);
  font-size: var(--font-size--large);
  color: var(--colour--grey);
  text-transform: uppercase;
}

/* ------- Main ------- */

main{
  margin: 0;
  padding: 0 20px;
  width: 70%;
}

main h2.sectionHeader {
  font-family: var(--font-header);
  font-size: calc(var(--font-size--default) + 0.7rem);
  color: var(--colour--grey);
}

main h2 {
  padding: 15px 0;
  font-family: var(--font-header);
  font-size: var(--font-size--default);
  color: var(--colour--lightGrey);
}

main p {
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: calc(var(--font-size--small) - 0.01rem);
  color: var(--colour--grey);
  line-height: 1.3;
}

main .footnote {

}

/* ------- Media Queries ------- */

@media only screen and (max-width: 600px) {
  main {
    width: 100%;
  }
}