$color-primary: hsl(0, 0%, 10%);
$color-text: hsl(0, 0%, 20%);
$color-subtext: hsl(0, 0%, 30%);
$color-border: hsl(0, 0%, 85%);
$color-box-background: mix($color-primary, white, 4%);
$border-radius: 4px;
$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
  sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

body {
  box-sizing: content-box;
  font-family: $font-family;
  margin: 0 auto;
  line-height: 1.7;
  padding: 4vh 6vw;
  overflow-x: hidden;
  color: $color-text;
  font-size: 1rem;
  max-width: 63em;

  @media (min-width: 820px) {
    font-size: 1.2rem;
  }
}

time {
  display: block;
  color: $color-subtext;
  margin: 0.5em 0 1em;
}

footer {
  margin: 2em 0;
  font-size: 0.8em;
  color: mix($color-text, white, 80%);
  padding-top: 1em;
}

img {
  max-width: 100%;
  display: block;
  max-height: 75vh;
  border-radius: $border-radius;
}

blockquote {
  padding: 1.5em;
  margin: 0;
  font-size: 0.88em;
  background: $color-box-background;
  border-radius: $border-radius;

  p {
    margin: 0;
  }
}

hr {
  width: 100%;
  border: 0;
  height: 1px;
  margin: 1.5em 0;
  background: $color-border;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  margin-bottom: 0;
  padding-bottom: 0;
}

a {
  transition: background 300ms;
  padding: 0 0.1em;
  text-decoration: none;
  border-bottom: 1px solid $color-border;
  color: $color-primary;
  &:hover {
    color: black !important;
    background: #fffaf1;
  }
  &:after {
    position: relative;
    top: -0.5em;
    font-size: 0.7em;
    content: "↗";
    color: #aaaaaa;
  }
  &.internal-link:after,
  &.footnote:after,
  &.reversefootnote:after {
    content: "";
  }
}

*:focus {
  background: #ffe8bc !important;
  color: black !important;
}

nav {
  margin: 1em 0 3em;
}

#notes-entry-container {
  display: grid;
  grid-gap: 2em;
  grid-template-areas:
    "content"
    "side";

  @media (min-width: 700px) {
    grid-template-columns: 2fr 3fr;
    grid-template-areas: "content side";
  }
}

#all-links-container {
  display: grid;
  grid-gap: 1em;
  grid-template-areas:
    "content"
    "side";

  @media (min-width: 700px) {
    grid-template-columns: 2fr 2fr;

  }
}

.backlink-box {
  background: $color-box-background;
  padding: 1em;
  border-radius: $border-radius;
}

code {
  background: #f5f5f5;
  padding: 0.1em 0.2em;
  border-radius: 4px;
}

.invalid-link {
  color: #444444;
  cursor: help;
  background: #fafafa;
  padding: 0 0.1em;
}

.invalid-link-brackets {
  color: #ccc;
  cursor: help;
}