:root {
  --twilight-blue: #1a1a2e;
  --deep-indigo: #dcdaf2;
  --twilight-purple: #d9c4f0;
  --soft-gold: #f5eecb;
}

body {
  font-family: 'Lato', sans-serif;
  background-color: var(--twilight-blue);
  color: var(--soft-gold);
}

.bg-deep-indigo {
  background-color: var(--deep-indigo);
}

.bg-twilight-purple {
  background-color: var(--twilight-purple);
}

.bg-soft-gold {
  background-color: var(--soft-gold);
}

.bg-twilight-blue {
  background-color: var(--twilight-blue);
}

.deep-indigo {
  color: var(--deep-indigo);
}

.twilight-purple {
  color: var(--twilight-purple);
}

.soft-gold {
  color: var(--soft-gold);
}

.b--twilight-purple {
  border-color: var(--twilight-purple);
}

.b--soft-gold {
  border-color: var(--soft-gold);
}

h1,
h2,
h3,
h4 {
  font-family: 'Playfair Display', serif;
  color: var(--deep-indigo);
}

.post-content {

  h2,
  h3,
  h4 {
    font-weight: 600;
    font-size: 1.5rem;
  }

  p {
    line-height: 1.5;
    font-size: 1.25rem;
    max-width: 30em;
  }

  a {
    font-weight: 600;
    display: block;
    color: #357edd;
    text-decoration: none;
    transition: opacity 0.15s ease-in;
    opacity: 1;

    &:link,
    &:visited,
    &:hover,
    &:active,
    &:focus {
      transition: opacity .15s ease-in;
    }

    &:focus {
      outline: 1px dotted currentColor;
    }

    &:hover,
    &:focus {
      opacity: .5;
    }

    &:active {
      opacity: .8;
    }
  }
}

@media screen and (min-width: 30em) {
  .post-content p {
    font-size: 1.5rem;
  }
}

/*
@media (prefers-color-scheme: dark) {

} */