html {
  --body-background: white;
  --text-background: #fafaff;
  --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: black;
    --text-background: #113;
    --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%; }

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 {
  display: inline-block;
  transform: rotate(-2deg);
  position: relative;
  z-index: 2; }
  header h1 {
    font-weight: normal;
    text-transform: uppercase;
    margin: 1em 0 0 1em;
    padding: 0 0.5em;
    color: var(--light-text-color);
    background: var(--text-background);
    display: inline-block; }
    header h1 a {
      border: none; }

div.actions {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  z-index: 100; }
  div.actions a {
    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;
  clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px); }

.home nav a {
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  font-size: 500%;
  font-weight: bold;
  padding-top: 0.5em;
  line-height: 50%;
  width: 100%;
  margin-bottom: 1rem; }
  @media screen and (max-width: 50em) {
    .home nav a {
      font-size: 200%; } }
  .home nav a span {
    font-size: 30%; }
  .home nav a.divers {
    width: 49%; }
  .home nav a.vrac {
    width: 49%;
    text-align: right;
    float: right; }

.home .latest {
  margin-top: 2em; }
  .home .latest h2 {
    margin: 0;
    font-size: 400%;
    font-weight: bold;
    text-transform: uppercase; }
    @media screen and (max-width: 50em) {
      .home .latest h2 {
        font-size: 200%; } }
  .home .latest .meta {
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    color: var(--lighter-text-color); }

.post {
  max-width: 50em; }
  .post div.figure {
    text-align: center;
    margin: 1em 0; }
    .post div.figure img {
      border: 1px solid var(--gray);
      padding: 3px;
      max-width: 90%;
      max-height: 70vh; }
    .post div.figure .caption {
      margin-top: 0;
      font-style: italic; }
  .post p {
    line-height: 160%; }
  .post code,
  .post pre.screen {
    background: #111;
    color: white;
    padding: 2px; }
  .post div.meta {
    margin-top: 3em;
    color: var(--lighter-text-color); }
  .post div.note {
    background: var(--note-background);
    padding: 0.2em 0.5em 0.2em 2em; }
    .post div.note p {
      margin: 0.5em 0; }
  .post 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 ul, .post-list li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block; }

.post-list li.unpublished {
  opacity: 0.5; }

.post-list a {
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  font-size: 200%;
  font-weight: bold;
  padding-top: 0.5em;
  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; }