@media (prefers-color-scheme: dark) {
  html {
    --primary: #fff;
    --secondary: #0071de;
    --success: #189418;
    --warning: #ddcd45;
    --danger: #ff8c86;
    --muted: #868e96;
    --primary-light: white;
    --secondary-light: #007ef8;
    --success-light: #1caa1c;
    --warning-light: #e1d35b;
    --danger-light: #ffa4a0;
    --muted-light: #949ba2;
    --primary-dark: gray;
    --secondary-dark: black;
    --success-dark: #031003;
    --warning-dark: #746a15;
    --danger-dark: #a00800;
    --muted-dark: #313538;
    --primary-light-10: white;
    --secondary-light-10: #128bff;
    --success-light-10: #1fc01f;
    --warning-light-10: #e5d970;
    --danger-light-10: #ffbcb9;
    --muted-light-10: #a1a8ae;
    --primary-dark-10: #e6e6e6;
    --secondary-dark-10: #0057ab;
    --success-dark-10: #116811;
    --warning-dark-10: #cab925;
    --danger-dark-10: #ff5c53;
    --muted-dark-10: #6c757d;
    --primary-shaded-50: #343332;
    --primary-shaded-70: #2f2e2d;
    --white-dark: rgba(255, 255, 255, 0.03);
    --white-dark-light-80: rgba(255, 255, 255, 0.03);
    --light-dark: rgba(255, 255, 255, 0.7);
    --white: white;
    --main-background: #41403e;
    --main-background-light: #c1c0bd;
    --black: black;
    --primary-text: #41403e;
    --secondary-text: #0057ab;
    --success-text: #116811;
    --warning-text: #cab925;
    --danger-text: #ff5c53;
    --muted-text: #6c757d;
    --shadow-color-regular: rgba(0, 0, 0, 0.2);
    --shadow-color-hover: rgba(0, 0, 0, 0.3);
    --primary-inverse: #41403e;
  }
}
body {
  background-color: var(--main-background);
}
.to-top {
  opacity: 1;
  display: inline-block;
  padding: 1em;
  position: fixed;
  bottom: 1em;
  right: 0em
}
.to-top .paper-btn {
  padding: .6em 1em;
  border-top-left-radius: 185px 160px;
  border-top-right-radius: 200px 195px;
  border-bottom-right-radius: 160px 195px;
  border-bottom-left-radius: 185px 190px
}
nav .nav-brand span {
  margin: 0;
  margin-bottom: 0.2rem;
  font-size: 2rem;
}
.category-list-count, .archive-list-count {
  text-indent: 0;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  color: #41403e;
  color: var(--white);
  background-color: #41403e;
  background-color: var(--muted);
  border-color: #41403e;
  border-color: var(--primary);
  border: 2px solid;
  border-color: transparent;
  display: inline-block;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  padding: 0.25em 0.4em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;

  margin-left: 0.5em;
}
h1, h2, h3 { text-shadow: 2px 2px 25px var(--muted); }

.article-meta span {
  padding-right: 1em;
}
blockquote {
  padding: 20px 30px 20px 30px;
  margin: 25px auto;
  border: 2px solid #41403e;
  border-color: var(--primary);
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  box-shadow: 13px 13px 0 0,
              15px 15px 0 0,
              15px 11px 0 0,
              11px 15px 0 0;
}
cite {
  padding-top: 15px;
  display: block;
  font-style: italic;
  text-align: right;
}
cite::before { content: "― "; }
.article-footer section {  padding-top: 25px; }

.text-capitalize { text-transform: capitalize; }
.text-right { text-align: right; }

.toc-container .collapsible { width: 100%; }
@media only screen and (min-width: 768px) {
  .toc-container {
    float: right;
    margin-left: 25px;
    max-width: 50%;
  }
  .card {
    max-width: 315px;
    margin: 0 25px 25px 0;
    float: left;
  }
  blockquote {
    width: 50%;
    max-width: 500px;
    margin: 25px;
    float: right;
  }
}