/* Based on Stockholm extension, https://github.com/annaesvensson/yellow-stockholm */

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght,MONO@0,300..800,1;1,300..800,1&display=swap');
/* Colors and fonts */

:root {
  color-scheme: light dark;
  --bg: light-dark(#fff, #131313);
  --code-bg: light-dark(#f7f7f7, #1f1f1f);
  --important-bg: light-dark(#f0f8fe, #222);
  --heading: light-dark(#222, #ddd);
  --text: light-dark(#111, #eee);
  --text-secondary: light-dark(#555,#888);
  --code: light-dark(#242, #dfd);
  --link: light-dark(#25c, #09e);
  --link-active: light-dark(#36d, #07a);
  --blockquote-accent: light-dark(#17d, #035);
  --important-accent: light-dark(#08e, #035);
  --separator: light-dark(#ddd, #444);
  --border: light-dark(#bbd, #224);
  --font: "Bitter", Helvetica, sans-serif;
  --monospace-font: "Google Sans Code", Menlo, Courier, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

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

/* General */

html,
body,
div,
form,
pre,
span,
tr,
th,
td,
img {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

body {
  margin: 1em;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading);
  font-weight: 400;
}

h1 {
  font-size: 2em;
}

hr {
  height: 1px;
  background: var(--separator);
  border: 0;
}

strong {
  font-weight: bold;
}

code {
  font-size: 1.1em;
}

a {
  color: var(--link);
  font-weight: 400;
  text-decoration: none;

  &:hover {
    color: var(--link);
    text-decoration: underline;
  }
}

ul,
ul ul {
  padding: 0 1.25em;
}

/* Content */
.content {
  h1 {
    margin: 1em 0;

    a {
      color: var(--heading);

      &:hover {
        text-decoration: none;
      }
    }
  }

  img {
    max-width: 100%;
    height: auto;
  }

  form {
    margin: 1em 0;
  }

  table {
    border-spacing: 0;
    border-collapse: collapse;
  }

  th:not([align]) {
    text-align: left;
  }

  th,
  td {
    padding: 0.3em;
    padding-left: 2em;
  }

  th:first-child,
  td:first-child {
    padding: 0.3em;
  }

  th {
    border-bottom: 1px solid var(--separator);
  }

  code,
  pre {
    font-family: var(--monospace-font);
    font-size: 90%;
  }

  code {
    padding: 0.15em 0.4em;
    margin: 0;
    background-color: var(--code-bg);
    color: var(--code);
    border-radius: 3px;
  }

  pre>code {
    padding: 0;
    margin: 0;
    white-space: pre;
    background: transparent;
    border: 0;
    font-size: inherit;
  }

  pre {
    padding: 1em;
    overflow: auto;
    line-height: 1.45;
    background-color: var(--code-bg);
    color: var(--code);
    border-radius: 3px;
  }

  blockquote {
    margin-left: 0;
    padding-left: 1em;
    font-weight: bold;
    border-left: 3px solid var(--blockquote-accent);
  }

  details summary {
    margin: inherit;
    cursor: pointer;
  }

  details>* {
    margin: 1em 0 1em 1em;
  }

  .important {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: var(--important-bg);
    border-left: 10px solid var(--important-accent);
  }

  .flexible {
    position: relative;
    padding-top: 0;
    padding-bottom: 56.25%;
  }

  .flexible iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .task-list-item {
    list-style-type: none;
  }

  .task-list-item input {
    margin: 0 0.2em 0.25em -1.75em;
    vertical-align: middle;
  }

  .toc {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .wikipages ul,
  .wikitags ul,
  .wikilinks ul {
    padding: 0;
    list-style: none;
    column-width: 19em;
  }

  .previousnext .previous {
    margin-right: 1em;
  }

  .pagination .previous {
    margin-right: 1em;
  }

  .pagination {
    margin: 1em 0;
  }

  .left {
    float: left;
    margin: 0 1em 0 0;
  }

  .center {
    display: block;
    margin: 0 auto;
  }

  .right {
    float: right;
    margin: 0 0 0 1em;
  }

  .rounded {
    border-radius: 4px;
  }
}


/* Header */

.header {
  margin: 2em 0;

  .sitename {
    display: block;
    float: left;

    h1 {
      margin: 0;
      font-size: 1em;
      font-weight: 300;

      a {
        color: var(--text);
        border-bottom: solid 3px var(--bg);
        text-decoration: none;
        padding: 0.5em 0;

        &:hover {
          color: var(--link);
          border-bottom: solid 3px var(--link-active);
        }
      }

    }

    p {
      margin-top: 0;
      color: var(--text);
    }
  }

}


/* Navigation */

.navigation {
  display: block;
  float: right;
  
  a {
    color: var(--text);
    border-bottom: solid 3px var(--bg);
    text-decoration: none;
    padding: 0.5em 0;
    margin: 0 0.5em;
    
    &:hover {
      color: var(--link);
      border-bottom: solid 3px var(--link-active);
    }
  }
  
  ul {
    margin: 0 -0.5em;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline;
    
    a.active {
      border-bottom: solid 3px var(--link-active);
    }
  }
}

.navigation-banner {
  clear: both;
}


/* Footer */

.footer {
  margin: 2em 0;
  
  .siteinfo {
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    
    gap: 2em;

    p {
      font-size: .8rem;
    }

    a {
      color: var(--text-secondary);
      text-decoration: underline;
      
      &:hover {
        color: var(--link);
      }
    }
  }
}


/* Forms and buttons */

.form-control {
  margin: 0;
  padding: 2px 4px;
  display: inline-block;
  min-width: 7em;
  background-color: var(--bg);
  color: var(--text);
  background-image: linear-gradient(to bottom, var(--bg), var(--bg));
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.9em;
  font-family: inherit;
  font-weight: normal;
  line-height: normal;
}

.btn {
  margin: 0;
  padding: 4px 22px;
  display: inline-block;
  min-width: 7em;
  background-color: #eaeaea;
  color: #333333;
  background-image: linear-gradient(to bottom, #f8f8f8, #e1e1e1);
  border: 1px solid var(--border);
  border-color: #c1c1c1 #c1c1c1 #aaaaaa;
  border-radius: 4px;
  outline-offset: -2px;
  font-size: 0.9em;
  font-family: inherit;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.btn:hover,
.btn:focus,
.btn:active {
  color: #333333;
  background-image: none;
  text-decoration: none;
}

.btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive and print */

.page {
  margin: 0 auto;
  max-width: 1000px;
}

@media screen and (min-width: 62em) {
  body {
    width: 60em;
    margin: 1em auto;
  }

  .page {
    margin: 0;
    max-width: none;
  }
}

@media screen and (max-width: 32em) {
  body {
    margin: 0.5em;
    font-size: 0.9em;
  }

  .content h1,
  .content h2 {
    font-size: 1.5em;
  }
}

@media print {
  .page {
    border: none !important;
  }
}


/* Style the main admin top bar / pane container */
.yellow-pane,
.yellow-dialog {
  background-color: var(--code-bg);
  color: var(--text-color);
  border-color: var(--separator);
}

/* Style the links inside the user dropdown menu */
.yellow-dialog a,
.yellow-dialog-links a {
  color: var(--text-color);
}

/* Style the hover state for menu items */
.yellow-dialog a:hover,
.yellow-dialog-links a:hover {
  background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
  color: var(--accent-color);
}

.entry-meta,
.entry-tags {
  font-size: .875rem;
  font-style: italic;
}

.footnotes {
  hr {
    display: none;
  }

  ol {
    font-size: .875rem;
    padding-left: 1.5rem;
  }
}

/* Custom */

.caption, .caption p {
  font-size: .875em;
  font-style: italic;
  margin: 0;
}

.embed-50 {
  border: none;
  border-radius: .5em;
  float: right;
  width: 50%;
  aspect-ratio: 1;
  margin: 0 0 1.5rem 1.5rem;
}

button#theme-toggle {
  font-size: 1rem;

  &:hover {
    color: var(--link);
  }
}