@charset "UTF-8";
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/literata.woff2") format("woff2"); }

@font-face {
  font-family: 'CommitMono';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/commit-mono.woff2") format("woff2"); }

@font-face {
  font-family: 'Fraunces';
  src: url("Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.woff2") format("woff2");
  font-weight: 100 900;
  /* Adjust the range based on your font's weight variations */
  font-style: italic;
  /* Since the font is italic */ }

@font-face {
  font-family: 'Fraunces';
  /* Same font family name for consistency */
  src: url("Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2") format("woff2");
  font-weight: 100 900;
  /* Adjust the range based on your font's weight variations */
  font-style: normal;
  /* If you have a normal style version, otherwise omit this */ }

.primary-navigation {
  position: fixed;
  right: 20px;
  z-index: 999; }
  .primary-navigation img.author-image {
    box-shadow: 0 0 20px 5px; }
  .primary-navigation > ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .primary-navigation > ul > li {
      position: relative;
      list-style: none; }
      .primary-navigation > ul > li:hover > ul {
        display: block; }
      .primary-navigation > ul > li > ul {
        position: absolute;
        top: 100%;
        right: 25px;
        background-color: #fff;
        list-style-type: none;
        margin: 0;
        width: 120px;
        padding: 10px;
        box-shadow: 2px 2px 20px silver;
        display: none; }
        .primary-navigation > ul > li > ul > li {
          padding-block: 10px;
          list-style: none; }
          .primary-navigation > ul > li > ul > li:hover {
            background-color: #f5f5f5;
            font-weight: bold; }
      .primary-navigation > ul > li > a {
        display: inline-block;
        padding: 10px;
        text-decoration: none;
        color: #333; }

/**
 * For now using CSS variables.
 * Still thinking about using SCSS variables
 **/
:root {
  --font-family-quote: Fraunces, 'Roboto Serif2', 'Libre Baskerville2', serif;
  --font-family-monospace: CommitMono, monospace;
  --font-size-body-text: 22px;
  /*21px*/
  --font-size-code: 20px;
  /*18px*/
  --font-size-quote: 24px;
  --font-size-h1: 40px;
  --light-bg: #ffffff;
  --light-text: #333333;
  --dark-bg: #131313;
  --dark-text: #e0e0e0;
  --bg-color: var(--light-bg);
  --text-color: var(--light-text);
  --accent-color: var(--highlight-color); }

.alert {
  padding: 16px;
  margin: 8px;
  /* width: 512px; */
  /* max-width: 90%; */ }
  .alert .alert-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 120%; }
  .alert .alert-content {
    color: #555555;
    margin: 0;
    font-size: 95%;
    font-style: italic; }
  .alert .alert-cite {
    font-size: 14px;
    text-align: right; }
    .alert .alert-cite::before {
      content: '— '; }

.alert-1-primary {
  background-color: rgba(77, 77, 255, 0.05); }
  .alert-1-primary .alert-title {
    color: #4d4dff; }

.alert-1-warning {
  background-color: rgba(255, 186, 0, 0.05); }
  .alert-1-warning .alert-title {
    color: #ffba00; }

.alert-2-success {
  border-left: 4px solid #2ec946;
  background-color: rgba(46, 201, 70, 0.05); }
  .alert-2-success .alert-title {
    color: #2ec946; }

.alert-2-secondary {
  border-left: 4px solid #666666;
  background-color: rgba(102, 102, 102, 0.05); }
  .alert-2-secondary .alert-title {
    color: #666666; }

.alert-3-primary {
  border: 1px solid #cdcdff;
  border-radius: 8px;
  background-color: rgba(77, 77, 255, 0.05); }
  .alert-3-primary .alert-title {
    color: #4d4dff; }

.alert-3-danger {
  border: 1px solid #ffb8b8;
  border-radius: 8px;
  background-color: rgba(255, 56, 56, 0.05); }
  .alert-3-danger .alert-title {
    color: #ff3838; }

@use "variables";
@use "font-faces";
* {
  box-sizing: border-box; }
  * ::before,
  * ::after {
    box-sizing: border-box; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

.text-center {
  text-align: center; }

.center {
  text-align: center; }

.right {
  text-align: right; }

ul li {
  list-style: disc; }

.ad-chit {
  font-size: 85%;
  background-color: #f5f5f5;
  border: 1px solid #ebe3e3;
  border-radius: 5px;
  padding-inline: 25px;
  padding-block: 20px;
  margin-bottom: 20px; }
  .ad-chit p, .ad-chit div, .ad-chit ul, .ad-chit ol {
    font-size: 85%; }
  .ad-chit p {
    margin-bottom: 10px; }

.ad-caption {
  font-size: 85%;
  font-weight: bold;
  padding-inline: 25px;
  padding-block: 20px;
  margin-bottom: 20px; }
  .ad-caption p, .ad-caption div, .ad-caption ul, .ad-caption ol {
    font-size: 85%; }
  .ad-caption p {
    margin-bottom: 10px; }

@use "effects";
@use "variables";
/* Dark mode background and text colors */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: var(--dark-bg);
    --text-color: var(--dark-text); } }

body {
  background-color: var(--bg-color);
  color: var(--text-color); }

[data-theme="dark"] {
  --bg-color: var(--dark-bg);
  --text-color: var(--dark-text);
  --heading-color: var(--accent-color); }

[data-theme="light"] {
  --bg-color: var(--light-bg);
  --text-color: var(--light-text);
  --heading-color: var(--accent-color); }

.menu-item-🌙 {
  text-align: center; }

/*.blog {
  border: 1px solid #ddd;
  box-shadow: 5px 5px 20px 3px;
  padding-inline: 40px;
  padding-block: 40px;
}*/
pre {
  margin-bottom: 30px; }

:not(pre) > code {
  padding-inline: 10px;
  font-size: var(--font-size-code);
  font-style: normal;
  font-weight: bold;
  box-sizing: border-box;
  color: var(--highlight-color); }
  :not(pre) > code:hover {
    padding-block: 4px;
    border-radius: 5px;
    background-color: #eee; }

.wrapper {
  max-width: 800px !important;
  height: 90vh;
  display: flex;
  flex-direction: column; }

.blog .content img {
  box-shadow: 0 0 20px 5px; }

@media (min-width: 768px) {
  .intro {
    margin-bottom: 25px; } }

@media (max-width: 767px) {
  .intro {
    margin-bottom: 15px; } }

.intro h1 {
  font-size: var(--font-size-h1);
  width: unset;
  margin-bottom: 20px;
  line-height: 1.5; }

.intro img.featured_image, .intro img.image {
  width: 100%;
  box-shadow: 0 0 20px 5px; }

.home-links {
  display: flex;
  justify-content: space-evenly; }

.page-home .intro {
  text-align: center; }
  .page-home .intro h1 {
    font-family: Special Elite, fantasy;
    transition: transform 0.3s ease-in-out;
    text-shadow: 0 15px 5px rgba(0, 0, 0, 0.1), 10px 20px 5px rgba(0, 0, 0, 0.05), -10px 20px 5px rgba(0, 0, 0, 0.05); }
    .page-home .intro h1:hover {
      transform: scale(1.2); }
  .page-home .intro .intro-content p {
    width: unset; }

.header {
  justify-content: flex-end; }

.content * {
  line-height: 1.7 !important; }

.content p {
  font-size: var(--font-size-body-text); }

.content ul li {
  font-size: var(--font-size-body-text); }
  @media (max-width: 767px) {
    .content ul li {
      margin-left: 20px; } }
.content blockquote p {
  font-size: var(--font-size-quote);
  font-weight: bold; }

.content .highlight {
  margin-bottom: 30px; }
  .content .highlight pre {
    box-shadow: 5px 7px 10px #75715e;
    border-radius: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 16px; }
    .content .highlight pre::-webkit-scrollbar {
      display: none; }

.intro-content {
  margin-top: 120px; }
  .intro-content p {
    font-family: var(--font-family-monospace), monospace;
    font-size: 20px; }
    .intro-content p:hover {
      font-weight: bold;
      color: maroon; }

.highlight {
  background-color: unset;
  /*border: 1px solid #ebe3e3;
  border-radius: 7px;*/
  /* &:hover {
    background-color: #f5f5f5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 50px rgba(255, 255, 196, 0.5);
    box-shadow: 3px 4px 10px 7px #aaaac4;
  } */ }

.author {
  display: flex;
  /*justify-content: space-between;
  align-items: center;*/
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 0;
  font-size: 85%; }
  .author > * {
    display: flex;
    align-items: center; }
  .author > *:not(:last-child)::after {
    content: "•";
    margin-left: 10px; }

[class^="page "][class*="page-"][class$="-list"] h1 {
  color: var(--highlight-color); }

[class^="page "][class*="page-"][class$="-list"] .summary .summary-title a:hover {
  text-shadow: 1px 1px; }

[class^="page "][class*="page-"][class$="-single"] h1 {
  color: var(--highlight-color); }

[class^="page "][class*="page-"][class$="-single"] .author {
  margin-top: unset; }

.summary {
  --summary-padding-inline: 25px;
  margin-bottom: 20px;
  padding-inline: var(--summary-padding-inline);
  padding-block: 25px;
  border: 1px solid #ddd; }
  .summary:hover {
    box-shadow: 10px 10px 15px 5px; }
  .summary img {
    height: 300px;
    width: 100%; }
  .summary table {
    font-size: 75%; }
  .summary .summary-description {
    width: unset; }
  .summary .summary-title {
    border-bottom: 1px solid #ccc; }
    @media (min-width: 768px) {
      .summary .summary-title {
        font-size: 36px;
        width: unset; } }
    @media (max-width: 767px) {
      .summary .summary-title {
        font-size: 32px;
        width: unset; } }
  .summary .highlight {
    box-shadow: 5px 7px 10px #75715e;
    border-radius: 7px;
    margin-block: 10px;
    /* width: 80%; */
    font-size: 90%; }
    .summary .highlight pre {
      padding: 30px;
      border-radius: 7px;
      overflow-x: auto;
      overflow-y: hidden; }
      .summary .highlight pre::-webkit-scrollbar {
        display: none; }
  .summary ul {
    padding-inline: var(--summary-padding-inline);
    /* li {
      list-style: disc;
    } */ }

div.tags {
  margin-block: 15px; }
  div.tags:not(.wiki) {
    text-align: center; }
  div.tags span {
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    text-transform: lowercase;
    background-color: silver;
    border-radius: 5px;
    padding-inline: 7px;
    padding-block: 3px; }
    div.tags span:hover {
      cursor: pointer;
      background-color: deeppink;
      color: snow; }

.footer {
  text-align: center;
  margin-top: auto; }

a:hover {
  cursor: pointer;
  text-decoration: none; }

.footnotes p,
.footnotes code {
  font-size: 85%; }

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 30px; }
  table thead {
    background-color: var(--highlight-color);
    color: snow; }
  table th,
  table td {
    border-bottom: 1px solid #cccccc; }
  table tr:nth-child(even) {
    background-color: #efefef; }

.content figure {
  display: flex;
  flex-direction: column;
  margin: 0 auto 30px;
  border: 1px solid #ddd;
  padding: 5px;
  box-shadow: 5px 7px 10px #75715e;
  text-align: center; }
  .content figure img {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee; }
  .content figure figcaption {
    font-size: 0.9em;
    font-weight: bold;
    color: #666;
    margin-top: 0.5em; }
  .content figure h4 {
    font-size: 1.2em;
    margin-top: 0.5em;
    margin-bottom: 0; }

.slashes .wrapper table {
  font-size: 140%;
  margin-block: 20px; }
  .slashes .wrapper table td, .slashes .wrapper table th {
    min-width: 100px;
    max-width: 300px; }
  .slashes .wrapper table, .slashes .wrapper table th, .slashes .wrapper table td, .slashes .wrapper table tr {
    border: none;
    background-color: transparent; }
  .slashes .wrapper table td {
    padding-block: 10px; }
  .slashes .wrapper table tr:hover {
    font-weight: bold; }

.links p {
  font-size: var(--font-size-body-text);
  line-height: 2.0; }

iframe[src*="goatcounter"] {
  width: 30px;
  height: 25px;
  padding-block-start: 4px; }

#stats {
  display: inline-block;
  /* width: 50px; */
  position: relative;
  top: -1px; }

.faqs {
  font-size: var(--font-size-body-text); }
  .faqs li {
    line-height: 1.6;
    margin-block: 10px; }
  .faqs .footnotes {
    font-size: small;
    margin-block: 40px; }

.shake-once {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s; }

.shake-forever, .intro-content p:hover {
  font-weight: bold;
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;
  /* When the animation is finished, start again */
  animation-iteration-count: infinite; }

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg); }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg); }
  20% {
    transform: translate(-3px, 0px) rotate(1deg); }
  30% {
    transform: translate(3px, 2px) rotate(0deg); }
  40% {
    transform: translate(1px, -1px) rotate(1deg); }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg); }
  60% {
    transform: translate(-3px, 1px) rotate(0deg); }
  70% {
    transform: translate(3px, 1px) rotate(-1deg); }
  80% {
    transform: translate(-1px, -1px) rotate(1deg); }
  90% {
    transform: translate(1px, 2px) rotate(0deg); }
  100% {
    transform: translate(1px, -2px) rotate(-1deg); } }

#help-overlay {
  color: white;
  position: fixed;
  /* Sit on top of the page content */
  display: none;
  /* Hidden by default */
  width: 100%;
  /* Full width (cover the whole page) */
  height: 100%;
  /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  /* Black background with opacity */
  z-index: 2;
  /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer;
  /* Add a pointer on hover */ }
  #help-overlay h3 {
    color: white; }
  #help-overlay #help-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); }
  #help-overlay a {
    color: snow; }
    #help-overlay a:hover {
      color: var(--highlight-color); }
  #help-overlay table {
    border-collapse: separate;
    border-spacing: 0 10px;
    width: 100%;
    margin-bottom: 30px; }
    #help-overlay table thead {
      display: none; }
    #help-overlay table th,
    #help-overlay table td {
      border-bottom: none; }
    #help-overlay table tr {
      margin-bottom: 10px; }
      #help-overlay table tr:nth-child(even) {
        background-color: unset; }

/* :root {
  --font-family-quote: Fraunces, 'Roboto Serif2', 'Libre Baskerville2', serif;
  --font-family-quote: $fontFamilyQuote;
} */
.quote-card {
  background: #fff;
  color: #222222;
  font-style: none;
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  box-shadow: 0 2px 14px rgba(34, 34, 34, 0.12);
  box-shadow: 10px 10px 12px 14px rgba(34, 34, 34, 0.12);
  position: relative;
  overflow: hidden;
  min-height: 120px;
  margin-bottom: 50px !important;
  /* &:after {
    font-family: Georgia, serif;
    content: "”";
    position: absolute;
    bottom: -110px;
    line-height: 100px;
    right: -15px;
    font-size: 25em;
    color: rgba($defaultSecondaryTextColor, 0.8);
    font-weight: normal;
  } */ }
  .quote-card p {
    /* font-family: $fontFamilyQuote; */
    font-family: var(--font-family-quote);
    font-size: 22px;
    font-style: normal !important;
    line-height: 1.5;
    /* margin: 0; */
    margin-left: 25px;
    max-width: 80%; }
  .quote-card cite {
    font-family: 'Special Elite', fantasy;
    font-size: 16px;
    font-style: normal;
    margin-top: 10px;
    display: block;
    opacity: 0.8;
    font-weight: bold;
    text-align: center; }
  .quote-card::before {
    font-family: Georgia, serif;
    content: "“";
    position: absolute;
    top: -20px;
    left: 10px;
    font-size: 5em;
    color: rgba(238, 238, 238, 0.8);
    font-weight: normal; }
  @media (max-width: 640px) {
    .quote-card:after {
      font-size: 22em;
      right: -25px; } }
  .quote-card.blue-card {
    background: #303F9F;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24); }
    .quote-card.blue-card:before, .quote-card.blue-card:after {
      color: #3F51B5; }
  .quote-card.red-card {
    background: #D32F2F;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24); }
    .quote-card.red-card:before, .quote-card.red-card:after {
      color: #F44336; }
  .quote-card.yellow-card {
    background: #F9A825;
    color: #222222;
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24); }
    .quote-card.yellow-card:before, .quote-card.yellow-card:after {
      color: #FBC02D; }

.credits {
  margin-top: 80px; }
  .credits a {
    color: #222222;
    text-decoration: none;
    text-shadow: 0 0 2px rgba(34, 34, 34, 0.24);
    padding-bottom: 1px;
    display: inline-block;
    border-bottom: 1px dashed rgba(34, 34, 34, 0.24);
    opacity: 0.6;
    transition: 0.3s all ease-in; }
    .credits a:hover {
      border-bottom-style: solid;
      opacity: 1; }