.dark {
  --background-color: #0c0d10;
  --primary-color: #9cb9dd;
  --primary-color-light: #b4d5ff;
  --blog-title-color: #fff;

  font-weight: 200;
}

.light {
  --background-color: #fff;
  --primary-color: #031833ff;
  --primary-color-light: #062c5d;
  --blog-title-color: #062c5d;

  font-weight: 500;
}

html {
  --date-text-gradient: linear-gradient(140deg, #22272e -10%, #9cb9dd 10%);
  --size-12px: 0.75rem;
  --size-14px: 0.875rem;
  --size-16px: 1rem;
  --size-18px: 1.125rem;
  --size-20px: 1.25rem;
  --size-22px: 1.375rem;
  --size-28px: 1.75rem;
  --size-40px: 2.5rem;
}

html,
body {
  height: 100%;
  font-family: sans-serif;
  color: #9cb9dd;
  color: var(--primary-color);
  background-color: #22272e;
  background-color: var(--background-color);
  transition: color 0.5s ease, background-color 0.5s ease;
}

.content-container {
  width: 80%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  min-height: calc(100% - 151px);
  counter-reset: footnotes;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-content {
  color: var(--primary-color);
  font-size: var(--size-18px);
}

@media (min-width: 640px) {
  .main-content {
    font-size: var(--size-20px);
  }
}

.basic-link {
  color: var(--primary-color);
}

.basic-link:hover {
  color: var(--primary-color-light);
  text-decoration-color: var(--primary-color-light);
}

.strong-text {
  color: #111;
  font-weight: 600;
  line-height: 1;
  position: relative;
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
}

.strong-text a {
  text-decoration: none;
  color: #222;
}

.strong-text::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2px;
  left: 0;
  right: 0;
  bottom: -2px;
  margin: auto;
  border-radius: 4px;
  background-color: #9cb9dd;
  transition: all 0.2s 0s ease-in-out;
}

.strong-text:hover::before {
  transition-delay: 0s;
  transition-duration: 0.2s;
  transform: scale(1.02, 1.02);
  background-color: #b4d5ff;
}

/* footnote text */

/**
  * Actual numbered references
  * 1. Display the current state of the counter (e.g. `[1]`)
  * 2. Align text as superscript
  * 3. Make the number smaller (since it's superscript)
  * 4. Slightly offset the number from the text
  * 5. Reset link styles on the number to show it's usable
  */

a[aria-describedby="footnote"] {
  counter-increment: footnotes;
  text-decoration: none;
  color: var(--primary-color);
  cursor: default;
  outline: none;
}

a[aria-describedby="footnote"]::after {
  content: counter(footnotes);
  vertical-align: super;
  font-size: var(--size-14px);
  margin-left: 2px;
  color: var(--primary-color);
  cursor: pointer;
}

/*
a[aria-describedby="footnote"]:hover::after {
  color: #6d88a9;
}
*/

/*
#footnote:target {
  background: yellow;
}
*/

.footnote-text {
  font-size: var(--size-16px);
  padding-inline-start: 20px;
}

[aria-label="Back to content"] {
  color: var(--primary-color);
  font-size: var(--size-12px);
  margin-left: 4px;
}

/* blog styles */
.blog-index-item {
  display: flex;
}

.blog-index-item-date {
  flex-grow: 1;
  align-self: center;
  font-size: var(--size-16px);
  font-weight: bold;
  background: var(--primary-color);
  background: linear-gradient(140deg, #22272e -20%, #9cb9dd 40%);
  color: transparent;
  -webkit-background-clip: text;
}

.blog-index-item-link {
  color: var(--primary-color);
  flex-grow: 5;
}

.blog-index-item-link:hover {
  color: var(--primary-color-light);
  text-decoration-color: var(--primary-color-light);
}