:root {
  --lightmode-main-text-color: #303132;
  --lightmode-main-bg-color: #f0f0f0;
  --lightmode-panel-bg-color: #ffffff;
  --darkmode-main-text-color: #f0f0f0;
  --darkmode-panel-bg-color: #202020;
  --darkmode-main-bg-color: #303030;
  --lightmode-meteorik-nominee-bg-color: #e5e5e5;
  --lightmode-meteorik-runnerup-bg-color: #aae5ff;
  --lightmode-meteorik-winner-bg-color: #ffe5aa;
  --darkmode-meteorik-nominee-bg-color: #555555;
  --darkmode-meteorik-runnerup-bg-color: #205064;
  --darkmode-meteorik-winner-bg-color: #645020;
  --lightmode-dropdown-bg-color: #ffffff;
  --lightmode-dropdown-divider-color: #d0d0d0;
  --lightmode-dropdown-hover-color: #f0f0f0;
  --darkmode-dropdown-bg-color: #404040;
  --darkmode-dropdown-divider-color: #101010;
  --darkmode-dropdown-hover-color: #383838;
  --lightmode-outline-color: #000000;
  --darkmode-outline-color: #ffffff;
  --main-text-color: var(--lightmode-main-text-color);
  --panel-bg-color: var(--lightmode-panel-bg-color);
  --main-bg-color: var(--lightmode-main-bg-color);
  --meteorik-nominee-bg-color: var(--lightmode-meteorik-nominee-bg-color);
  --meteorik-runnerup-bg-color: var(--lightmode-meteorik-runnerup-bg-color);
  --meteorik-winner-bg-color: var(--lightmode-meteorik-winner-bg-color);
  --dropdown-bg-color: var(--lightmode-dropdown-bg-color);
  --dropdown-divider-color: var(--lightmode-dropdown-divider-color);
  --dropdown-hover-color: var(--lightmode-dropdown-hover-color);
  --outline-color: var(--lightmode-outline-color);
  --image-margin: 0px;
  --theme-transition-duration: 150ms;
  --theme-transition-easing: ease-in-out; }

[data-theme="dark"] {
  --main-text-color: var(--darkmode-main-text-color);
  --panel-bg-color: var(--darkmode-panel-bg-color);
  --main-bg-color: var(--darkmode-main-bg-color);
  --meteorik-nominee-bg-color: var(--darkmode-meteorik-nominee-bg-color);
  --meteorik-runnerup-bg-color: var(--darkmode-meteorik-runnerup-bg-color);
  --meteorik-winner-bg-color: var(--darkmode-meteorik-winner-bg-color);
  --dropdown-bg-color: var(--darkmode-dropdown-bg-color);
  --dropdown-divider-color: var(--darkmode-dropdown-divider-color);
  --dropdown-hover-color: var(--darkmode-dropdown-hover-color);
  --outline-color: var(--darkmode-outline-color); }

* {
  box-sizing: border-box; }

html {
  height: 100%;
  font-family: 'Muli', sans-serif; }

body {
  margin: 0 auto;
  height: 100%;
  background: var(--main-bg-color);
  text-align: center;
  padding: 12px;
  transition: background-color var(--theme-transition-duration) var(--theme-transition-easing); }

a {
  text-decoration: none; }

img {
  width: auto;
  height: auto; }

.navbar,
.content {
  width: 100%; }

.content {
  margin: 24px auto; }

.navbar {
  margin-left: auto;
  margin-right: auto;
  padding: 8px 16px; }
  .navbar .entry {
    padding: 8px 16px;
    color: var(--main-text-color);
    transition: color var(--theme-transition-duration) var(--theme-transition-easing); }
    .navbar .entry.active {
      font-weight: 600; }
    .navbar .entry.active, .navbar .entry:hover, .navbar .entry:focus {
      border-bottom: 1px solid var(--main-text-color);
      transition: color var(--theme-transition-duration) var(--theme-transition-easing), border-color var(--theme-transition-duration) var(--theme-transition-easing); }

.switch {
  position: absolute;
  top: 12px; }
  .switch .label {
    /* vertically center text */
    display: flex;
    align-items: center;
    padding: 4px;
    cursor: pointer;
    text-transform: lowercase;
    color: var(--main-text-color);
    transition: color var(--theme-transition-duration) var(--theme-transition-easing); }
    .switch .label span {
      opacity: 0;
      transition: opacity 150ms ease-in-out; }

/* show the text label... */
.switch:hover .label span {
  /* ...on mouseover */
  opacity: 0.75; }

.switch:focus-visible .label span,
.switch-dropdown:focus-within .label span,
.switch-toggle input[type=checkbox]:focus-visible + .label span {
  /* ...on tab-highlight of an invisible checkbox */
  opacity: 0.75; }

/*
a brief aside:
"Why's the :hover one separate?", I hear you ask.
It seems that macOS Safari doesn't support :focus-visible, at least as of version 15.1 (17612.2.9.1.20)
Which in turn means the :hover doesn't work if it's part of the multi-rule block containing :focus-visible,
because the lack of support for :focus-visible invalidates the entire selector.
*/
/* hide the actual checkbox */
/* but keep it *technically* visible for tab-navigation */
.switch-toggle input[type=checkbox] {
  opacity: 0.00001;
  width: 0;
  height: 0;
  position: absolute;
  margin: 0; }

/* override the focus-visible outline style
   so we can make the hacky theme toggle
   look somewhat visually consistent */
.switch {
  outline: none; }

.switch .label,
.switch-dropdown .dropdown .item,
.navbar .entry {
  outline-style: solid;
  outline-color: var(--outline-color);
  outline-width: 0px;
  transition: outline-color var(--theme-transition-duration) var(--theme-transition-easing); }

.switch-dropdown .dropdown .item {
  outline-offset: -4px; }

.switch-toggle input[type=checkbox]:focus-visible + .label,
.switch-dropdown:focus-visible .label,
.switch-dropdown .dropdown .item:focus-visible,
.navbar .entry:focus-visible {
  outline-width: 2px; }

.switch-right {
  right: 12px; }

.switch-left {
  left: 12px; }

.switch-right .label span {
  padding-right: 8px; }

.switch-left .label span {
  padding-left: 8px; }

/* CSS-only dropdown */
/* loosely based on https://stackoverflow.com/a/20058341 */
/* with accessibility notes from https://css-tricks.com/solved-with-css-dropdown-menus/ */
.switch .mousetrap {
  display: none;
  position: absolute;
  top: 40px;
  left: 8px;
  outline: none; }

.switch:active .mousetrap,
.switch:focus .mousetrap,
.switch:focus-within .mousetrap {
  display: block; }

@media (hover: none) {
  /* kinda hacky, but this stops the dropdown from flickering in on iOS Safari */
  .switch:hover .mousetrap {
    display: block; } }
.switch .dropdown {
  margin: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15); }

.switch .dropdown .item {
  display: block;
  background-color: var(--dropdown-bg-color);
  list-style: none;
  color: var(--main-text-color);
  padding: 8px 12px;
  border-bottom: 1px solid var(--dropdown-divider-color); }

.switch .dropdown .item:last-child {
  border: none; }

.switch .dropdown .item:hover,
.switch .dropdown .item:focus {
  background: var(--dropdown-hover-color); }

.content-thing {
  text-align: left;
  font-size: 12pt;
  margin: 0 auto 32px;
  background-color: var(--panel-bg-color);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 5px rgba(0, 0, 0, 0.05);
  width: fit-content;
  width: -moz-fit-content;
  max-width: 100%;
  transition: background-color var(--theme-transition-duration) var(--theme-transition-easing); }
  .content-thing.slim {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto; }
  .content-thing .meteorik {
    padding: 8px;
    text-align: center;
    font-weight: 600;
    float: right;
    border: 0px solid transparent;
    border-bottom-width: 1px;
    border-left-width: 1px;
    margin-top: -4px;
    margin-right: 12px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 5px rgba(0, 0, 0, 0.05);
    color: var(--main-text-color);
    transition: color var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing); }
    .content-thing .meteorik.meteorik-nominee {
      background: var(--meteorik-nominee-bg-color); }
    .content-thing .meteorik.meteorik-runnerup {
      background: var(--meteorik-runnerup-bg-color); }
    .content-thing .meteorik.meteorik-winner {
      background: var(--meteorik-winner-bg-color); }
  .content-thing .image {
    padding: var(--image-margin);
    padding-top: 0; }
    .content-thing .image img {
      display: block;
      max-width: 100%;
      max-height: 80vh; }
  .content-thing .text {
    padding: 12px;
    color: var(--main-text-color);
    transition: color var(--theme-transition-duration) var(--theme-transition-easing); }
    .content-thing .text a {
      color: inherit; }
    .content-thing .text .author {
      font-weight: 400; }
    .content-thing .text .title {
      font-size: 15pt;
      font-weight: 800;
      font-style: italic; }
    .content-thing .text .author,
    .content-thing .text .title,
    .content-thing .text .party,
    .content-thing .text .subtitle {
      margin-bottom: 0.3em;
      display: inline-block; }
    .content-thing .text > *:last-child {
      margin-bottom: 0; }
    .content-thing .text .question {
      font-size: 14pt;
      font-weight: 600; }
    .content-thing .text .answer p {
      margin-block-end: 0; }
      .content-thing .text .answer p a[href] {
        text-decoration: underline;
        text-decoration-style: dotted;
        text-decoration-thickness: from-font; }
        .content-thing .text .answer p a[href]:hover, .content-thing .text .answer p a[href]:focus {
          text-decoration-style: solid; }

.content-thing:hover .text .title,
.content-thing a:focus .text .title {
  text-decoration: underline; }

.footer {
  padding-bottom: 24px;
  color: var(--main-text-color);
  transition: color var(--theme-transition-duration) var(--theme-transition-easing); }
  .footer .pouet-credit {
    display: none; }

@media only screen and (max-width: 600px) {
  * {
    transition: none !important; }

  /* hide text labels for toggles on smaller screens */
  .switch .label span {
    display: none; }

  /* more compact navbar for smaller screens */
  .navbar .entry {
    padding: 8px 8px; }

  /* new-style corner banner with reduced font size */
  .content-thing .meteorik {
    font-size: 10pt;
    padding: 4px;
    max-width: 120px; } }
/* disable animated effects for users who prefer reduced motion */
@media (prefers-reduced-motion) {
  * {
    transition: none !important; } }
/* larger hit area for devices without fine-grained pointer control (i.e. mobile touchscreens) */
@media (any-pointer: coarse) {
  .switch .dropdown .item {
    padding: 10px 14px; } }
/* silly rounded-corner mode */
/*:root {
	--content-thing-border-radius: 10px;
	--image-margin: 5px;
}
.navbar .entry {
	&.active,
	&:hover,
	&:focus {
		border: none;
		border-radius: 5px;
		background-color: var(--panel-bg-color);
		box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
		transition: background-color var(--theme-transition-duration) var(--theme-transition-easing);
	}
}
.content-thing {
	border-radius: var(--content-thing-border-radius);
	.meteorik {
		border-radius: calc(var(--content-thing-border-radius) - var(--image-margin));
		border-width: 0px;
		margin: var(--image-margin);
		box-shadow: none;
	}
	img {
		border-radius: calc(var(--content-thing-border-radius) - var(--image-margin));
	}
	.text {
		padding: 10px;
	}
}*/
/* april fools theme */
[data-theme="pouet"] {
  --main-text-color: #ffffff;
  --panel-bg-color: #446688;
  --main-bg-color: #3a6ea5;
  --dropdown-bg-color: #224488;
  --dropdown-hover-color: #224488;
  --dropdown-divider-color: #000000;
  font-family: 'Tahoma', 'Verdana', 'Arial', 'Helvetica', sans-serif;
  font-size: 9pt; }
  [data-theme="pouet"] body {
    padding: 12px 0px;
    background: var(--main-bg-color) url("https://content.pouet.net/styles/001/gfx/trumpet.svg"); }
  [data-theme="pouet"] #switch-theme {
    display: none; }
  [data-theme="pouet"] #switch-lang svg {
    display: none; }
  [data-theme="pouet"] #switch-lang span {
    opacity: 1;
    font-weight: bold;
    text-transform: none;
    display: inline-block !important; }
  [data-theme="pouet"] .switch-dropdown .mousetrap {
    top: 100%; }
  [data-theme="pouet"] .switch-dropdown .dropdown {
    border: 1px solid #000000;
    border-top: none;
    border-radius: 0px;
    box-shadow: none; }
  [data-theme="pouet"] .switch-dropdown .dropdown .item {
    color: #9FCFFF;
    font-weight: bold;
    padding: 4px; }
  [data-theme="pouet"] .switch-dropdown .dropdown .item:hover,
  [data-theme="pouet"] .switch-dropdown .dropdown .item:focus {
    text-decoration: underline; }
  [data-theme="pouet"] .navbar {
    background-color: #224488;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    padding: 0px; }
    [data-theme="pouet"] .navbar .entry {
      display: inline-block;
      border: none;
      font-weight: bold;
      padding: 3px 4px; }
      [data-theme="pouet"] .navbar .entry:hover, [data-theme="pouet"] .navbar .entry:focus {
        text-decoration: underline; }
      [data-theme="pouet"] .navbar .entry:first-letter {
        color: #9FCFFF; }
  [data-theme="pouet"] .content {
    padding: 0px 12px; }
  [data-theme="pouet"] .content-thing {
    box-shadow: none;
    border: 2px solid #000000;
    max-width: 760px; }
    [data-theme="pouet"] .content-thing.slim {
      max-width: 500px; }
    [data-theme="pouet"] .content-thing .text {
      padding: 3px; }
      [data-theme="pouet"] .content-thing .text,
      [data-theme="pouet"] .content-thing .text .author,
      [data-theme="pouet"] .content-thing .text .title,
      [data-theme="pouet"] .content-thing .text .party,
      [data-theme="pouet"] .content-thing .text .subtitle,
      [data-theme="pouet"] .content-thing .text .question {
        font-size: 9pt;
        font-weight: normal;
        font-style: normal; }
      [data-theme="pouet"] .content-thing .text a[href] {
        font-weight: bold;
        color: #9FCFFF;
        text-decoration: none; }
        [data-theme="pouet"] .content-thing .text a[href]:hover, [data-theme="pouet"] .content-thing .text a[href]:focus {
          text-decoration: underline;
          text-decoration-style: solid; }
      [data-theme="pouet"] .content-thing .text .title,
      [data-theme="pouet"] .content-thing .text .question {
        font-weight: bold; }
      [data-theme="pouet"] .content-thing .text .question {
        display: block;
        margin: -4px;
        padding: 3px;
        border: 1px solid #000000;
        background: #224488; }
      [data-theme="pouet"] .content-thing .text .answer p {
        margin-block-start: 6px; }
    [data-theme="pouet"] .content-thing .image {
      border-top: 1px solid #000000; }
    [data-theme="pouet"] .content-thing .meteorik {
      background-color: transparent;
      background-position: top right;
      background-repeat: no-repeat;
      font-size: 11px;
      border: 0;
      padding: 0;
      padding-top: 2px;
      padding-right: 22px;
      margin: 8px;
      height: 16px;
      box-shadow: none; }
      [data-theme="pouet"] .content-thing .meteorik.meteorik-winner {
        background-image: url("https://content.pouet.net/gfx/sceneorg/meteorikwinner.gif"); }
      [data-theme="pouet"] .content-thing .meteorik.meteorik-nominee {
        background-image: url("https://content.pouet.net/gfx/sceneorg/meteoriknominee.gif"); }
    [data-theme="pouet"] .content-thing:not(.slim) .text {
      background: #224488; }
  [data-theme="pouet"] .footer .pouet-credit {
    display: block; }

/*# sourceMappingURL=style.css.map */