@import '/assets/fonts.css';

:root {
  --fonts-default: Raleway, sans-serif;
  --fonts-headline: Vollkorn, serif;
  --fonts-headlines-sc: Vollkorn SC, serif;
  --font-weight-normal: 500;
  --font-weight-headline: 600;

  --color-base: #212121;
  --color-standout: #000;
  --color-background: #f9f9f9;
  --color-invert: #fff;
  --color-invert-background: #000;
  --color-link: #026ad8;

  --space-max-text-flow: 70ch;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-base: #dadada;
    --color-standout: #e4e4e4;
    --color-background: #131313;
    --color-invert: var(--color-standout);
    --color-invert-background: #000;
    --color-link: #02afd8;

    --space-max-text-flow: 70ch;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
  font-size: 20px;
  line-height: 1.8em;
  font-family: var(--fonts-default);
  font-weight: var(--font-weight-normal);
  color: var(--color-base);
  background: var(--color-background);
}

@media screen and (max-width: 500px) {
  html, body {
    font-size: 16px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonts-headline);
  font-weight: var(--font-weight-headline);
  line-height: 1.2em;
  margin: 4rem 0 1rem;
  color: var(--color-standout);

  & a {
    text-decoration: none;
    color: inherit;

    &:hover,
    &:active,
    &:focus {
      text-decoration: underline;
    }
  }
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-position: from-font;
  margin-bottom: 4rem;
}

h1 {
  font-size: 4rem;
  text-decoration: underline;
  text-underline-position: from-font;
  margin-bottom: 4rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.8rem;
}

p {
  font-size: 1rem;
  margin: 1em 0;
}

video {
  max-width: 100%;
}

.global-header {
  text-align: right;

  & a {
    text-decoration: none;
    color: inherit;

    &:hover,
    &:active,
    &:focus {
      text-decoration: underline;
    }
  }
}

.posts-list,
.lead,
.blog-post,
.global-header,
.footer-content {
  max-width: var(--space-max-text-flow);
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
}


.posts-list {
  list-style: none;
  display: block;
}

.lead {
  padding: 4rem 1rem;

  & h1 {
    margin-top: 0;
  }
}

.header-separator {
  text-decoration: underline;
  text-underline-position: from-font;
  font-family: var(--fonts-headlines-sc);
  text-align: center;
  padding: 1em 0;
  background: var(--color-invert-background);
  color: var(--color-invert);
  text-transform: uppercase;
  text-decoration-line: overline;
  margin: 1rem 0;
}

footer {
  margin: 2rem 0 0;
  padding: 0;

  & .footer-content {
    padding: 4rem 1rem 1rem;

    & h2 {
      margin-top: 0;
      text-decoration-line: overline;
    }

    &__text {
      margin-bottom: 4rem;
    }
  }
}


main {
  & img,
  & video {
    width: 100%;
    max-width: 100%;
  }
}


code {
  font-size: smaller;
}