@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/* light theme / default */
:root {
  --logo-image: url(/images/logo.svg);
  --color: #228;
  --color-bg: #fafafa;
  --color-header-bg: #eee;
  --color-borders: #333;
  --color-table-borders: rgba(128, 128, 128, 0.9);
  --color-a: #118;
  --color-a-hover: #22f;
  --color-a-special: rgba(175, 175, 175, 0.75);
  --color-a-special-hover: rgba(255, 255, 255, 0.9);
  --color-a-special-border: rgba(128, 128, 128, 0.6);
  --color-a-section-bg: rgba(0, 0, 0, 0.1);
  --color-a-section-bg-hover: #668;
  --color-a-section-bg-showing: rgba(0, 0, 0, 0.2);
  --color-a-section-border: #aaa;
  --color-menu-bg: rgba(232, 232, 232, 1);
  --color-menu-top-bg: rgba(228, 228, 228, 1);
  --color-menu-sub-bg: rgba(218, 218, 218, 1);
  --color-menu-bg-hover: rgba(192, 192, 192, 1);
  --color-menu-border-left: rgba(128, 128, 128, 0.4);
  --color-menu-border-right: rgba(128, 128, 128, 0.6);
  --color-social-a-bg: inherit;
  --color-social-a-bg-hover: #aab;
  --color-burger-menu: rgb(34,34,255);
  --color-burger-menu-close: rgb(17,17,136); }

/* light theme (specific) */
/* dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --logo-image: url(/images/logo-dark.svg);
    --color: #FAE4F8;
    --color-bg: #111;
    --color-header-bg: #222;
    --color-borders: #333;
    --color-table-borders: rgba(128, 128, 128, 0.9);
    --color-a: #E1B4E0;
    --color-a-hover: #FAF4F8;
    --color-a-special: rgba(48, 48, 48, 0.75);
    --color-a-special-hover: rgba(128, 128, 128, 0.9);
    --color-a-special-border: rgba(128, 128, 128, 0.6);
    --color-a-section-bg: rgba(200, 200, 200, 0.1);
    --color-a-section-bg-hover: #668;
    --color-a-section-bg-showing: rgba(200, 200, 200, 0.2);
    --color-menu-bg: rgba(0, 0, 0, 0.7);
    --color-menu-top-bg: rgba(48, 48, 48, 1);
    --color-menu-sub-bg: rgba(48, 48, 48, 1);
    --color-menu-bg-hover: rgba(96, 96, 96, 1);
    --color-menu-border-left: rgba(128, 128, 128, 0.4);
    --color-menu-border-right: rgba(128, 128, 128, 0.6);
    --color-social-a-bg: inherit;
    --color-social-a-bg-hover: #668;
    --color-burger-menu: rgb(180,140,160);
    --color-burger-menu-close: rgb(238,170,170); } }

@media screen {
  @keyframes appear {
    from {
      opacity: 0; }
    to {
      opacity: 1; } }
  body,
  html {
    width: 100%;
    height: 100%;
    color: var(--color);
    padding: 0;
    margin: 0;
    font-family: "Space Mono", monospace;
    font-size-adjust: auto;
    background: var(--color-bg);
    fill: var(--color);
    stroke: var(--color); }
  html {
    background-repeat: no-repeat;
    background-position: left;
    background-blend-mode: lighten;
    background-image: none;
    background-size: cover;
    background-attachment: fixed; }
  #top {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    font-size: 3em;
    font-weight: 700;
    text-align: center;
    font-stretch: expanded;
    background: var(--color-header-bg);
    border-bottom: var(--color-borders) 1px solid;
    z-index: 1001; }
    #top h1 {
      display: block;
      position: relative;
      top: -0.1em;
      font-size: 3em;
      text-align: left;
      padding: 0 5%;
      margin: 0;
      width: 100%;
      opacity: 0.9;
      box-sizing: border-box; }
    #top p {
      font-size: 0.4em;
      position: absolute;
      top: 0.5em;
      right: 1em;
      text-align: right; }
  #logo {
    display: block;
    width: 98%;
    margin-left: 1%;
    padding-top: 13%;
    border-radius: 0;
    background-image: var(--logo-image);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center; }
  svg {
    stroke: var(--color-a);
    fill: var(--color-a); }
    svg:hover {
      stroke: var(--color-a-hover);
      fill: var(--color-a-hover); }
  #bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 0.2em;
    height: 1.5em;
    font-size: 2em;
    text-align: center;
    background: var(--color-header-bg);
    border-top: var(--color-borders) 1px solid;
    z-index: 1001;
    animation-name: appear;
    animation-duration: 1s;
    transition: opacity 1s; }
    #bottom img, #bottom object, #bottom svg {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      stroke: var(--color-a);
      fill: var(--color-a); }
      #bottom img:hover, #bottom object:hover, #bottom svg:hover {
        stroke: var(--color-a-hover);
        fill: var(--color-a-hover); }
    #bottom .social {
      display: inline-block;
      margin: 0 0.5em;
      padding: 0;
      height: 1.5em;
      width: 100%;
      text-align: left;
      position: absolute;
      overflow: visible;
      left: 0; }
      #bottom .social a {
        display: inline-block;
        margin: 0;
        padding: 0;
        height: 29px;
        width: 29px;
        position: relative;
        top: -0.175em;
        border-radius: 3px;
        background-color: var(--color-social-a-bg);
        text-decoration: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover; }
        #bottom .social a:hover {
          background-color: var(--color-social-a-bg-hover); }
    #bottom .copyright {
      right: 1em;
      position: absolute;
      font-size: 0.5em; }
  #audio {
    position: absolute;
    top: 1em;
    left: 1em;
    z-index: 9999; }
  #player_container {
    display: none; }
    #player_container.active {
      width: 3em;
      display: inline-block;
      overflow: visible;
      position: relative; }
      #player_container.active #player {
        width: 3em;
        height: 3em;
        position: absolute;
        top: -2.75em;
        left: 0;
        display: inline-block;
        z-index: 1001; }
  #score_link {
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
    overflow: hidden;
    bottom: 1.2em;
    z-index: 900; }
    #score_link:after {
      content: "Score";
      display: inline-block;
      position: relative;
      width: 3em;
      height: 1em;
      bottom: 0;
      left: 3.6em;
      font-size: 0.8em;
      border: var(--color-a-special-border) solid 1px;
      border-radius: 0.4em;
      transition: background 0.5s;
      background: var(--color-a-special);
      z-index: 1001; }
      #score_link:after:hover, #score_link:after:active {
        background: var(--color-a-special-hover); }
  h1, h2, h3, h5 {
    font-size: 3em;
    text-align: center;
    padding: 0.4em 0;
    margin: 0;
    width: 100%;
    font-family: "Inconsolata", monospace; }
  h2, h3 {
    font-size: 2em; }
  h2, h5 {
    text-align: left; }
  h3 {
    text-align: right; }
  h4 {
    text-align: center;
    font-size: 1.4em;
    font-weight: normal;
    font-family: "Inconsolata", monospace;
    padding: 0.4em 0;
    margin: 0; }
  h5 {
    font-size: 1.4em;
    font-weight: bold;
    list-style-type: circle;
    list-style-position: inside;
    display: list-item;
    cursor: pointer;
    padding: 0.2em 0;
    border-radius: 0.4em; }
    h5.showing {
      list-style-type: disc;
      background-color: var(--color-a-section-bg-showing); }
    h5:hover {
      background-color: var(--color-a-section-bg-hover); }
  .section_H5 {
    transition: transform 250ms ease-in-out, max-height 250ms ease-in-out;
    transform-origin: 50% 0;
    transform: rotateX(0);
    max-height: 100em;
    background-color: var(--color-a-section-bg);
    border-radius: 0.4em;
    border: 1px solid var(--color-a-section-border);
    border-top: none;
    padding: 0.5em; }
  .hide {
    max-height: 0;
    overflow: hidden;
    transform: rotateX(90deg); }
  a {
    color: var(--color-a);
    text-decoration: none; }
    a:active, a:hover {
      color: var(--color-a-hover); }
  p {
    width: 100%; }
  blockquote p {
    margin-top: 0.4em;
    margin-bottom: 0.4em; }
  #content {
    font-family: "Space Mono", monospace;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    padding: 0 10% 5em 10%;
    margin-bottom: 4em;
    animation-name: appear;
    animation-duration: 1s;
    transition: opacity 1s; }
  #menu {
    width: 100%;
    height: 3em;
    overflow: visible;
    font-family: "Space Mono", monospace;
    background: var(--color-menu-bg);
    vertical-align: top;
    text-align: center;
    box-sizing: border-box; }
    #menu li {
      padding: 0;
      margin: 0;
      width: 20%;
      height: 100%;
      display: inline-block;
      position: relative;
      vertical-align: top;
      box-sizing: border-box; }
    #menu ul, #menu ul ul li {
      position: relative;
      box-sizing: border-box;
      vertical-align: top;
      overflow-y: hidden;
      overflow-x: visible;
      list-style: none;
      display: inline-block;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%; }
      #menu ul:hover, #menu ul:active, #menu ul ul li:hover, #menu ul ul li:active {
        overflow-y: visible; }
    #menu ul ul li {
      opacity: 0; }
    #menu ul ul li:last-child {
      border-radius: 0 0 0.5em 0.5em;
      overflow: hidden; }
    #menu ul ul li:first-child {
      opacity: 1;
      border-radius: 0; }
    #menu ul ul:hover li, #menu ul ul:active li {
      transition: opacity 0.25s;
      opacity: 1; }
    #menu a {
      box-sizing: border-box;
      vertical-align: middle;
      font-size: 1.5em;
      line-height: 2em;
      font-weight: bold;
      text-rendering: optimizeLegibility;
      text-align: center;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      border-left: var(--color-menu-border-left) solid 1px;
      border-right: var(--color-menu-border-right) solid 1px;
      border-collapse: collapse;
      display: inline-block;
      transition: background 0.5s;
      background: var(--color-menu-sub-bg);
      z-index: 1001;
      position: relative; }
      #menu a:hover, #menu a:active {
        background: var(--color-menu-bg-hover); }
  input.burger, input.burger + svg {
    display: none; }
  table {
    width: 100%;
    box-sizing: border-box;
    border-collapse: collapse; }
    table tr, table td, table th {
      border-collapse: collapse;
      border: 1px var(--color-table-borders) solid;
      padding: 0.1em 1em; }
  img {
    border-radius: 20px; }
  .banner1, img[src*="#banner1"] {
    box-sizing: border-box;
    width: 100%; }
  .banner2, img[src*="#banner2"] {
    box-sizing: border-box;
    width: 60%;
    float: left;
    clear: left;
    margin-right: 1.25em; }
  .banner3, .banner3_big, img[src*="#banner3"], img[src*="#banner3_big"], .banner3_small, img[src*="#banner3_small"] {
    box-sizing: border-box;
    margin-left: 0.5em;
    width: 40%;
    float: right;
    clear: right; }
  .banner3_big, img[src*="#banner3_big"] {
    width: 60%; }
  .banner3_small, img[src*="#banner3_small"] {
    width: 30%; } }

@media only screen and (max-width: 768px) {
  #top {
    height: auto; }
    #top p {
      font-size: 0.25em; }
  input.burger {
    display: block;
    width: 0em;
    height: 0em;
    position: absolute;
    transform: translate(-999999px); }
  input.burger + svg + ul,
  input.burger + ul {
    transform: translateX(100%); }
  input.burger.left + svg + ul,
  input.burger.left + ul {
    transform: translateX(-100%); }
  input.burger:checked + svg + nav,
  input.burger:checked + nav {
    transform: translateX(0); }
  input.burger + svg {
    width: 2.5em;
    height: 2.5em;
    display: block;
    border-radius: 10%;
    position: absolute;
    z-index: 999; }
  input.burger + svg .line1,
  input.burger + svg .line2,
  input.burger + svg .line3,
  input.burger + svg .line4 {
    transition: 0.25s;
    stroke: var(--color-burger-menu);
    stroke-width: 20%;
    stroke-linecap: round;
    transform-origin: center center; }
  input.burger:checked + svg .line1 {
    stroke: var(--color-burger-menu-close);
    transform-origin: 5% 35%;
    transform: translate(-3%, 0%) rotate(45deg) scale(1); }
  input.burger:checked + svg .line2,
  input.burger:checked + svg .line3,
  input.burger.left:checked + svg .line2,
  input.burger.left:checked + svg .line3 {
    stroke: var(--color-burger-menu-close);
    transform-origin: 50% 50%;
    transform: translate(0%, 0%) rotate(-45deg) scale(0.1); }
  input.burger:checked + svg .line4 {
    stroke: var(--color-burger-menu-close);
    transform-origin: 5% 70%;
    transform: translate(-1.5%, -3%) rotate(-45deg) scale(1); }
  #menu {
    padding: 0;
    background-color: inherit;
    height: 0;
    overflow-y: visible; }
  #burger + svg + ul {
    padding: 0;
    opacity: 0;
    overflow-y: visible;
    height: auto;
    transform-origin: top;
    transform: scaleY(0);
    transition: opacity 0.4s, transform 0.3s;
    width: 100%;
    box-sizing: border-box; }
    #burger + svg + ul li {
      display: block;
      width: 100%;
      box-sizing: border-box; }
    #burger + svg + ul ul {
      height: auto;
      border-bottom: var(--color-menu-border-left) solid 1px;
      border-top: var(--color-menu-border-right) solid 1px; }
      #burger + svg + ul ul li {
        opacity: 1;
        border-radius: 0; }
        #burger + svg + ul ul li:first-child a {
          background: var(--color-menu-top-bg); }
          #burger + svg + ul ul li:first-child a:hover, #burger + svg + ul ul li:first-child a:active {
            background: var(--color-menu-bg-hover); }
        #burger + svg + ul ul li:last-child {
          border-radius: 0; }
    #burger + svg + ul a {
      width: 100%; }
  #burger:checked + svg + ul {
    opacity: 1;
    transform: scaleY(1); }
  img {
    border-radius: 20px; }
  .banner1, img[src*="#banner1"],
  .banner2, img[src*="#banner2"],
  .banner3, img[src*="#banner3"],
  .banner3_big, img[src*="#banner3_big"],
  .banner3_small, img[src*="#banner3_small"] {
    box-sizing: border-box;
    float: none;
    width: 100%;
    margin: 0.5em; } }

@media print {
  html {
    font-family: "Space Mono", monospace; }
  #top,
  #menu,
  #bottom,
  #burger,
  #header,
  #audio,
  #player_container {
    display: none  !important; }
  a {
    color: #60f;
    text-decoration: none; }
  h1 {
    text-align: center; }
  h2 {
    text-align: left; }
  h3 {
    text-align: right; }
  table {
    width: 100%;
    box-sizing: border-box;
    border-collapse: collapse; }
    table tr, table td, table th {
      border-collapse: collapse;
      border: 1px #333 solid;
      padding: 0.1em 1em; }
  img {
    border: 1px solid #fff; } }

.p4video {
  text-align: center;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }

.p4video iframe, .p4video embed, .p4video object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

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