html {
  --body-background: white;
  --header-background: #3c113e;
  --title-color: #3c113e;
  --header-color: white;
  --text-background: white;
  --text-color: #222;
  --light-text-color: lighten(#222, 20%);
  --lighter-text-color: lighten(#222, 30%);
  --link-color: #0000ee;
  --visited-link-color: #551a8b;
  --gray: gray;
  --note-background: #fbf7c1;
  --blockquote-background: #eeeefd; }

@media (prefers-color-scheme: dark) {
  html {
    --body-background: #113;
    --header-background: black;
    --text-background: #113;
    --title-color: #eef;
    --text-color: #eef;
    --light-text-color: lighten(#eef, 20%);
    --lighter-text-color: lighten(#eef2, 30%);
    --link-color: #aaf;
    --visited-link-color: #b767ff;
    --gray: gray;
    --note-background: #867f11;
    --blockquote-background: #223; } }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/Light/OpenSans-Light.woff2") format("woff2"), url("../xstatic/fonts/Light/OpenSans-Light.woff") format("woff"), url("../xstatic/fonts/Light/OpenSans-Light.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/Light/OpenSans-Light.ttf?#iefix") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/LightItalic/OpenSans-LightItalic.woff2") format("woff2"), url("../xstatic/fonts/LightItalic/OpenSans-LightItalic.woff") format("woff"), url("../xstatic/fonts/LightItalic/OpenSans-LightItalic.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/LightItalic/OpenSans-LightItalic.ttf?#iefix") format("truetype");
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/Regular/OpenSans-Regular.woff2") format("woff2"), url("../xstatic/fonts/Regular/OpenSans-Regular.woff") format("woff"), url("../xstatic/fonts/Regular/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/Regular/OpenSans-Regular.ttf?#iefix") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/Italic/OpenSans-Italic.woff2") format("woff2"), url("../xstatic/fonts/Italic/OpenSans-Italic.woff") format("woff"), url("../xstatic/fonts/Italic/OpenSans-Italic.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/Italic/OpenSans-Italic.ttf?#iefix") format("truetype");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/Semibold/OpenSans-Semibold.woff2") format("woff2"), url("../xstatic/fonts/Semibold/OpenSans-Semibold.woff") format("woff"), url("../xstatic/fonts/Semibold/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/Semibold/OpenSans-Semibold.ttf?#iefix") format("truetype");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff2") format("woff2"), url("../xstatic/fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff") format("woff"), url("../xstatic/fonts/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/SemiboldItalic/OpenSans-SemiboldItalic.ttf?#iefix") format("truetype");
  font-weight: 600;
  font-style: italic; }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/Bold/OpenSans-Bold.woff2") format("woff2"), url("../xstatic/fonts/Bold/OpenSans-Bold.woff") format("woff"), url("../xstatic/fonts/Bold/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/Bold/OpenSans-Bold.ttf?#iefix") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/BoldItalic/OpenSans-BoldItalic.woff2") format("woff2"), url("../xstatic/fonts/BoldItalic/OpenSans-BoldItalic.woff") format("woff"), url("../xstatic/fonts/BoldItalic/OpenSans-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/BoldItalic/OpenSans-BoldItalic.ttf?#iefix") format("truetype");
  font-weight: 700;
  font-style: italic; }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/ExtraBold/OpenSans-ExtraBold.woff2") format("woff2"), url("../xstatic/fonts/ExtraBold/OpenSans-ExtraBold.woff") format("woff"), url("../xstatic/fonts/ExtraBold/OpenSans-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/ExtraBold/OpenSans-ExtraBold.ttf?#iefix") format("truetype");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url("../xstatic/fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff2") format("woff2"), url("../xstatic/fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff") format("woff"), url("../xstatic/fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix") format("embedded-opentype"), url("../xstatic/fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf?#iefix") format("truetype");
  font-weight: 800;
  font-style: italic; }

body {
  font-family: "Open Sans", sans-serif;
  background: var(--body-background);
  color: var(--text-color);
  font-size: 100%;
  padding: 0;
  margin: 0;
  display: flex; }
  @media screen and (max-width: 50em) {
    body {
      flex-direction: column; } }
a {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: 0.1em dotted var(--link-color); }
  a:visited {
    color: var(--visited-link-color);
    border-color: var(--visited-link-color); }
  a:hover {
    border-bottom-style: solid; }

header {
  background: var(--header-background);
  color: var(--header-color);
  display: inline-block;
  position: relative;
  z-index: 2;
  max-width: 20em;
  min-height: 100vh; }
  header .header-title {
    font-size: 2em;
    font-weight: normal;
    text-transform: uppercase;
    margin: 4rem 1rem 2rem 1rem;
    padding: 0 0.5em;
    display: inline-block;
    transform: rotate(-2deg); }
  header a {
    color: inherit;
    border-color: var(--header-color); }
    header a:visited {
      color: inherit;
      border-color: inherit; }
  header p.contact {
    margin: 1rem 2rem; }
  header nav {
    font-weight: bold; }
    header nav ul {
      margin: 1rem 2rem;
      padding: 0;
      list-style: none; }
      header nav ul li {
        margin: 0;
        padding: 0; }
    header nav span {
      display: block;
      font-size: 90%;
      font-weight: normal; }
  header .about {
    margin-top: 1em; }
  @media screen and (max-width: 50em) {
    header {
      max-width: inherit;
      min-height: inherit; }
      header .header-title {
        margin-top: 1em; }
      header nav ul {
        margin-top: 0;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        gap: 1em; }
      header nav span {
        display: none; }
      header .about {
        margin-top: 0; } }
h1, h2, h3 {
  color: var(--title-color); }

div.actions {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  z-index: 100; }
  div.actions a {
    background: white;
    padding: 2px;
    border: 1px solid black;
    border-radius: 3px;
    color: black;
    margin-right: 1rem; }

main, footer {
  margin: 0 4em;
  padding: 1em;
  max-width: 70em; }
  @media screen and (max-width: 50em) {
    main, footer {
      margin: 0; } }
main {
  position: relative;
  background: var(--text-background);
  min-height: 70vh;
  flex: 1; }

article {
  margin-top: 2em;
  max-width: 50em; }
  article h1 {
    margin: 0;
    font-size: 300%;
    font-weight: bold;
    text-transform: uppercase; }
    @media screen and (max-width: 50em) {
      article h1 {
        font-size: 200%; } }
  article .meta {
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    color: var(--lighter-text-color); }
  article div.figure {
    text-align: center;
    margin: 1em 0; }
    article div.figure img {
      border: 1px solid var(--gray);
      padding: 3px;
      max-width: 90%;
      max-height: 70vh; }
    article div.figure .caption {
      margin-top: 0;
      font-style: italic; }
  article p {
    line-height: 160%; }
  article code,
  article pre.screen {
    background: #111;
    color: white;
    padding: 2px;
    overflow: auto; }
  article div.note {
    background: var(--note-background);
    padding: 0.2em 0.5em 0.2em 2em; }
    article div.note p {
      margin: 0.5em 0; }
  article blockquote {
    background: var(--blockquote-background);
    padding: 0.1em 1em;
    clip-path: polygon(0px 0px, 94.27% 2px, 99.63% 2.65%, 98.39% 97.48%, 10% 100%, 0% 100%, 0px 0px); }

.post-list {
  margin-top: 2em; }
  .post-list h1 {
    margin: 0;
    font-size: 300%;
    font-weight: bold;
    text-transform: uppercase; }
    @media screen and (max-width: 50em) {
      .post-list h1 {
        font-size: 200%; } }
  .post-list ul + h2 {
    margin-top: 1.5em; }
  .post-list ul, .post-list li {
    margin: 0;
    padding: 0;
    list-style: none; }
  .post-list li {
    display: inline; }
  .post-list li.unpublished {
    opacity: 0.5; }
  .post-list a {
    text-transform: uppercase;
    text-decoration: none;
    font-size: 150%;
    font-weight: bold;
    margin-right: 1em; }
    .post-list a span {
      font-size: 60%; }

.older.post-list {
  margin: 5em 0 2em 0;
  padding: 1em 0;
  border-top: 0.1em dotted var(--link-color);
  border-bottom: 0.1em dotted var(--link-color);
  line-height: 200%; }
  .older.post-list li {
    display: inline; }
    .older.post-list li a {
      padding-top: 0;
      display: inline;
      font-size: 120%; }

footer p {
  text-align: right;
  font-size: 100%; }

div[contenteditable=true]:focus-within {
  outline: 1px solid var(--gray);
  outline-offset: 3px; }

.inline-style-popup,
.block-style-popup {
  background: white;
  box-shadow: 0 0 5px #666; }
  .inline-style-popup input,
  .block-style-popup input {
    display: none;
    padding: 3px;
    border: 1px inset #ccc;
    background: white;
    width: 0px;
    transition: width ease 2s; }
    .inline-style-popup input.shown,
    .block-style-popup input.shown {
      display: inline-block;
      width: 400px; }
  .inline-style-popup button,
  .block-style-popup button {
    padding: 0 0.5em;
    height: 2em;
    text-align: center;
    background: #eee;
    border: 0px; }
    .inline-style-popup button:hover,
    .block-style-popup button:hover {
      background: #ccc; }
    .inline-style-popup button[data-action=createLink],
    .block-style-popup button[data-action=createLink] {
      color: blue;
      text-decoration: underline; }
    .inline-style-popup button.on,
    .block-style-popup button.on {
      background: #444;
      color: white; }
  .inline-style-popup.inline-style-popup button,
  .block-style-popup.inline-style-popup button {
    width: 2em;
    padding: 0; }
  .inline-style-popup.block-style-popup.selected button,
  .block-style-popup.block-style-popup.selected button {
    display: none; }
    .inline-style-popup.block-style-popup.selected button.on,
    .block-style-popup.block-style-popup.selected button.on {
      display: block; }

#quickedit {
  position: sticky;
  bottom: 10px;
  display: flex;
  justify-content: flex-end; }
  #quickedit label {
    display: inline-block;
    margin-left: 6px;
    cursor: pointer; }
  #quickedit input {
    display: none; }
  #quickedit button,
  #quickedit span {
    display: inline-block;
    font-weight: normal;
    background: white;
    border: 1px solid #386ede;
    box-shadow: 0 0 0 5px white;
    padding: 1ex;
    border-radius: 3px;
    color: #386ede;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit; }
  #quickedit button:hover:hover {
    color: white;
    background: #386ede; }
  #quickedit button.error {
    background: red;
    color: white; }
    #quickedit button.error:hover {
      background: #cc0000; }
  #quickedit input:checked + span {
    background: #386ede;
    color: white; }

main.post [contenteditable=true] div.figure {
  cursor: pointer; }

main.post div.figure {
  text-align: center;
  line-height: initial; }
  main.post div.figure span.empty::before {
    min-height: 50px;
    margin: 0 auto;
    display: block;
    width: 90%;
    background: #eee;
    padding: 1rem;
    font-size: 200px;
    content: "(image)";
    color: #aaa; }

.wiki-anchor-auto {
  display: none; }

#image-upload, #document-upload {
  display: none; }