body {
  font-family: system-ui, sans-serif;
  padding: 0.7em;
  background: white;
  color: #131313;

  @media (prefers-color-scheme: dark) {
    background: #202223;
    color: #f9f7f4;
  }
}

a {
  text-decoration: none;
  color: #5287de;

  @media (prefers-color-scheme: dark) {
    color: #78a9fa;
  }
}

a:hover,
a:visited:hover {
  color: #61acea;

  @media (prefers-color-scheme: dark) {
    color: #9fc1f9;
  }
}

a:visited {
  color: #766bdf;

  @media (prefers-color-scheme: dark) {
    color: #7e83cb;
  }
}

main,
footer {
  max-width: 750px;
  margin: 0 auto;
}

.hi {
  font-size: 180%;
  font-weight: bolder;
}

.intro {
  font-size: 0.9em;
  color: #7c8286;

  @media (prefers-color-scheme: dark) {
    color: #b6c2c9;
  }
}

.quote {
  margin: 60px auto;
}

.quote-metadata {
  width: 80%;
  margin-left: 20%;
  font-size: 0.9em;
  text-align: right;
  color: #838e94;

  @media (prefers-color-scheme: dark) {
    color: #b6c2c9;
  }

  * {
    vertical-align: middle;
  }
}

.quote-metadata p:last-child {
  margin-top: -6px;
}

.quote-date {
  display: inline-block;
  font-size: 0.8em;
  line-height: 1.3em;
  padding: 0.14em 0.8em 0.22em 0.8em;
  margin-left: 4px;
  margin-top: -2px;
  border-radius: 11px;
  corner-shape: squircle;
  background: #c0ccd3;
  color: #737b80;

  @media (prefers-color-scheme: dark) {
    background: #2c3b45;
    color: #b6c2c9;
  }
}

.quote-lang {
  display: inline-block;
  font-size: 0.8em;
  line-height: 1.3em;
  padding: 0.1em 0.5em 0.19em 0.5em;
  margin-left: 4px;
  margin-top: 3px;
  border-radius: 5px;
  corner-shape: squircle;
  font-variant-caps: small-caps;
  background: #dcf0fc;
  color: #3aa0df;

  @media (prefers-color-scheme: dark) {
    background: #1d4e69;
    color: #7da2b9;
  }
}

blockquote {
  margin: 1.7em 0 0.5em 1.3em;
  line-height: 1.35em;

  @media (max-width: 800px) {
    margin-left: 0;
  }

  text-align: justify;
  text-justify: auto;
  quotes: "❝" "❞";
  position: relative;
}

blockquote:before {
  color: #f2f4f4;

  @media (prefers-color-scheme: dark) {
    color: #2d3437;
  }

  content: open-quote;
  font-size: 6em;
  position: absolute;
  top: -0.1em;
  left: -0.7em;
  z-index: -1;
}

cite {
  font-style: normal;
}

footer {
  margin-top: 70px;
  text-align: center;
}

/* AI section colors */

#ecology {
  h2 {
    color: #3acb5e;

    @media (prefers-color-scheme: dark) {
      color: #65d581;
    }
  }

  .quote-date {
    background: #e3f6e8;
    color: #66bf83;

    @media (prefers-color-scheme: dark) {
      background: #38473c;
      color: #8cb89a;
    }
  }
}

#human-exploitation {
  h2 {
    color: #e951a6;

    @media (prefers-color-scheme: dark) {
      color: #e889be;
    }
  }

  .quote-date {
    background: #f9dded;
    color: #cc5296;

    @media (prefers-color-scheme: dark) {
    background: #63073b;
    color: #c67aa4;
    }
  }
}

#copyright {
  h2 {
    color: #63c8a9;

    @media (prefers-color-scheme: dark) {
      color: #7adcbd;
    }
  }

  .quote-date {
    background: #d7f5ed;
    color: #41bf9d;

    @media (prefers-color-scheme: dark) {
      background: #206050;
      color: #43cbba;
    }
  }
}

#capitalism {
  h2 {
    color: #cb4139;

    @media (prefers-color-scheme: dark) {
      color: #c25e57;
    }
  }

  .quote-date {
    background: #fbe5e2;
    color: #d88585;

    @media (prefers-color-scheme: dark) {
      background: #50150c;
      color: #db7777;
    }
  }
}

#leadership {
  h2 {
    color: #f4d228;

    @media (prefers-color-scheme: dark) {
      color: #f2d336;
    }
  }

  .quote-date {
    background: #f9f2cf;
    color: #e1bb02;

    @media (prefers-color-scheme: dark) {
      background: #695a0b;
      color: #d7bf4a;
    }
  }
}

#gains {
  h2 {
    color: #cc6fe0;

    @media (prefers-color-scheme: dark) {
      color: #d664ee;
    }
  }

  .quote-date {
    background: #edd8f2;
    color: #bf64d2;

    @media (prefers-color-scheme: dark) {
      background: #4c2d54;
      color: #c274d2;
    }
  }
}

#medecine {
  h2 {
    color: #7ed5d1;

    @media (prefers-color-scheme: dark) {
      color: #7ed5d1;
    }
  }

  .quote-date {
    background: #d9f8f7;
    color: #5bc9c5;

    @media (prefers-color-scheme: dark) {
      background: #035653;
      color: #17b4ae;
    }
  }
}