@font-face {
  font-family: "Roboto";
  src: url("assets/Roboto-Thin.eot");
  src: url("assets/Roboto-Thin.woff") format("woff"), url("assets/Roboto-Thin.ttf") format("truetype"), url("assets/Roboto-Thin.svg") format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("assets/Roboto-Regular.eot");
  src: url("assets/Roboto-Regular.woff") format("woff"), url("assets/Roboto-Regular.ttf") format("truetype"), url("assets/Roboto-Regular.svg") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("assets/Roboto-Bold.eot");
  src: url("assets/Roboto-Bold.woff") format("woff"), url("assets/Roboto-Bold.ttf") format("truetype"), url("assets/Roboto-Bold.svg") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "RobotoCondensed";
  src: url("assets/Roboto-BoldCondensed.eot");
  src: url("assets/Roboto-BoldCondensed.woff") format("woff"), url("assets/Roboto-BoldCondensed.ttf") format("truetype"), url("assets/Roboto-BoldCondensed.svg") format("svg");
  font-weight: 700;
  font-style: normal;
}
body.ludum {
  line-height: 120%;
  /*
  #filters:has(#show-all:checked) + #games {
      label:nth-of-type(4n+1)>div { left: 0; }
      label:nth-of-type(4n+2)>div { left: -200px; }
      label:nth-of-type(4n+3)>div { left: -400px; }
      label:nth-of-type(4n)>div { left: -600px; }
  }
  #filters:has(#show-ld:checked) + #games {
      :nth-child(4n+1 of label.game-ld)>div { left: 0; }
      :nth-child(4n+2 of label.game-ld)>div { left: -200px; }
      :nth-child(4n+3 of label.game-ld)>div { left: -400px; }
      :nth-child(4n of label.game-ld)>div { left: -600px; }
  }
  #filters:has(#show-akj:checked) + #games {
      :nth-child(4n+1 of label.game-akj)>div { left: 0; }
      :nth-child(4n+2 of label.game-akj)>div { left: -200px; }
      :nth-child(4n+3 of label.game-akj)>div { left: -400px; }
      :nth-child(4n of label.game-akj)>div { left: -600px; }
  }
  #filters:has(#show-1hgj:checked) + #games {
      :nth-child(4n+1 of label.game-1hgj)>div { left: 0; }
      :nth-child(4n+2 of label.game-1hgj)>div { left: -200px; }
      :nth-child(4n+3 of label.game-1hgj)>div { left: -400px; }
      :nth-child(4n of label.game-1hgj)>div { left: -600px; }
  }
  #filters:has(#show-other:checked) + #games {
      :nth-child(4n+1 of label.game-other)>div { left: 0; }
      :nth-child(4n+2 of label.game-other)>div { left: -200px; }
      :nth-child(4n+3 of label.game-other)>div { left: -400px; }
      :nth-child(4n of label.game-other)>div { left: -600px; }
  }
  */
  /*
  #filters:has(#show-all:checked) + #games .game-ld {
      display: inline-block;
  }
  #filters:has(#show-all:checked) + #games .game-akj {
      display: inline-block;
  }
  #filters:has(#show-all:checked) + #games .game-1hgj {
      display: inline-block;
  }
  #filters:has(#show-all:checked) + #games .game-other {
      display: inline-block;
  }
  */
  /*
      :nth-child(4n+1 of #filters:has(#show-ld:checked) + #games .game-ld,
      #filters:has(#show-akj:checked) + #games .game-akj,
      #filters:has(#show-1hgj:checked) + #games .game-1hgj,
      #filters:has(#show-other:checked) + #games .game-other)>div { left: 0; }
  :nth-child(4n+2 of #filters:has(#show-ld:checked) + #games .game-ld,
      #filters:has(#show-akj:checked) + #games .game-akj,
      #filters:has(#show-1hgj:checked) + #games .game-1hgj,
      #filters:has(#show-other:checked) + #games .game-other)>div { left: -200px; }
  :nth-child(4n+3 of #filters:has(#show-ld:checked) + #games .game-ld,
      #filters:has(#show-akj:checked) + #games .game-akj,
      #filters:has(#show-1hgj:checked) + #games .game-1hgj,
      #filters:has(#show-other:checked) + #games .game-other)>div { left: -400px; }
  :nth-child(4n of #filters:has(#show-ld:checked) + #games .game-ld,
      #filters:has(#show-akj:checked) + #games .game-akj,
      #filters:has(#show-1hgj:checked) + #games .game-1hgj,
      #filters:has(#show-other:checked) + #games .game-other)>div { left: -600px; }
      */
  /*
  :nth-child(4n+1 of #filters:has(#show-ld:checked) + #games .game-ld,
      #filters:has(#show-akj:checked) + #games .game-akj,
      #filters:has(#show-1hgj:checked) + #games .game-1hgj,
      #filters:has(#show-other:checked) + #games .game-other)>div { left: 0; }
  :nth-child(4n+2 of #filters:has(#show-ld:checked) + #games .game-ld,
      #filters:has(#show-akj:checked) + #games .game-akj,
      #filters:has(#show-1hgj:checked) + #games .game-1hgj,
      #filters:has(#show-other:checked) + #games .game-other)>div { left: -200px; }
  :nth-child(4n+3 of #filters:has(#show-ld:checked) + #games .game-ld,
      #filters:has(#show-akj:checked) + #games .game-akj,
      #filters:has(#show-1hgj:checked) + #games .game-1hgj,
      #filters:has(#show-other:checked) + #games .game-other)>div { left: -400px; }
  :nth-child(4n of #filters:has(#show-ld:checked) + #games .game-ld,
      #filters:has(#show-akj:checked) + #games .game-akj,
      #filters:has(#show-1hgj:checked) + #games .game-1hgj,
      #filters:has(#show-other:checked) + #games .game-other)>div { left: -600px; }
  */
}
body.ludum input {
  height: 0;
  left: -3000px;
  position: absolute;
  top: 0;
  width: 0;
  visibility: hidden;
}
body.ludum #filters {
  padding: 0 6px;
}
body.ludum #filters label {
  border-top: 4px solid transparent;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  padding: 8px 16px 0 32px;
  margin-top: 8px;
  position: relative;
  text-decoration: none;
}
body.ludum #filters label::before {
  content: "";
  display: block;
  border: 2px solid #333;
  height: 8px;
  left: 12px;
  position: absolute;
  top: 11px;
  width: 8px;
}
body.ludum #filters label:has(input:checked)::before {
  background-color: #ff8000;
}
body.ludum #filters label:hover {
  background-color: #ccc;
  color: #ff8000;
}
body.ludum #games {
  padding: 0 6px;
}
body.ludum #games > label {
  display: none;
  height: 180px;
  position: relative;
  transition: height 1s;
  vertical-align: top;
  width: 200px;
}
body.ludum #games > label > i {
  cursor: zoom-in;
  image-rendering: pixelated;
  height: 180px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}
body.ludum #games > label > i::after {
  display: block;
  height: 16px;
  width: 32px;
  background-image: url("assets/blog.png");
  background-position: -400px -288px;
  background-repeat: no-repeat;
  content: "";
  left: 32px;
  position: absolute;
  top: 164px;
  display: none;
}
body.ludum #games > label > a {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
body.ludum #games > label > h3 {
  background-color: rgba(238, 238, 238, 0.7);
  color: #333;
  font-size: 16px;
  left: 0;
  opacity: 0;
  padding: 4px;
  position: relative;
  text-shadow: 0 2px rgba(238, 238, 238, 0.8);
  transition: opacity 0.2s;
}
body.ludum #games > label > div {
  background: #eee;
  height: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 180px;
  transition: opacity 0.2s, height 1s;
  width: 800px;
}
body.ludum #games > label > div .tags {
  color: #999;
  font-size: 12px;
  font-style: italic;
}
body.ludum #games > label > div nav a {
  border-top: 4px solid transparent;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  padding: 8px 16px 0 16px;
  margin-top: 8px;
  position: relative;
  text-decoration: none;
}
body.ludum #games > label > div nav a:hover {
  background-color: #ddd;
  color: #ff8000;
}
body.ludum #games > label label[for=deselect] {
  cursor: zoom-out;
  display: none;
  height: 180px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}
body.ludum #games > label:hover h3 {
  opacity: 1;
}
body.ludum #games > label:has(input:checked) {
  height: 360px;
}
body.ludum #games > label:has(input:checked) > i::after {
  display: block;
}
body.ludum #games > label:has(input:checked) > h3 {
  border-bottom: 2px solid #a00;
  padding-bottom: 2px;
  opacity: 1;
}
body.ludum #games > label:has(input:checked) > div {
  top: 180px;
  opacity: 1;
  height: 180px;
}
body.ludum #games > label:has(input:checked) label[for=deselect] {
  display: block;
}
body.ludum #filters:has(#show-ld:checked) + #games .t1-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-ld:checked) + #games .t1-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-ld:checked) + #games .t1-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-ld:checked) + #games .t1-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-akj:checked) + #games .t2-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-akj:checked) + #games .t2-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-akj:checked) + #games .t2-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-akj:checked) + #games .t2-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked) + #games .t3-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked) + #games .t3-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked) + #games .t3-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked) + #games .t3-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-1hgj:checked) + #games .t4-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-1hgj:checked) + #games .t4-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-1hgj:checked) + #games .t4-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-1hgj:checked) + #games .t4-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-1hgj:checked) + #games .t5-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-ld:checked):has(#show-1hgj:checked) + #games .t5-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-1hgj:checked) + #games .t5-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-1hgj:checked) + #games .t5-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-akj:checked):has(#show-1hgj:checked) + #games .t6-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-akj:checked):has(#show-1hgj:checked) + #games .t6-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-akj:checked):has(#show-1hgj:checked) + #games .t6-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-akj:checked):has(#show-1hgj:checked) + #games .t6-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-1hgj:checked) + #games .t7-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-1hgj:checked) + #games .t7-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-1hgj:checked) + #games .t7-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-1hgj:checked) + #games .t7-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-other:checked) + #games .t8-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-other:checked) + #games .t8-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-other:checked) + #games .t8-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-other:checked) + #games .t8-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-other:checked) + #games .t9-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-ld:checked):has(#show-other:checked) + #games .t9-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-other:checked) + #games .t9-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-other:checked) + #games .t9-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-akj:checked):has(#show-other:checked) + #games .t10-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-akj:checked):has(#show-other:checked) + #games .t10-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-akj:checked):has(#show-other:checked) + #games .t10-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-akj:checked):has(#show-other:checked) + #games .t10-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-other:checked) + #games .t11-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-other:checked) + #games .t11-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-other:checked) + #games .t11-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-other:checked) + #games .t11-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-1hgj:checked):has(#show-other:checked) + #games .t12-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-1hgj:checked):has(#show-other:checked) + #games .t12-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-1hgj:checked):has(#show-other:checked) + #games .t12-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-1hgj:checked):has(#show-other:checked) + #games .t12-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t13-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-ld:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t13-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t13-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t13-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-akj:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t14-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-akj:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t14-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-akj:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t14-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-akj:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t14-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t15-0 > div {
  left: 0;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t15-1 > div {
  left: -200px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t15-2 > div {
  left: -400px;
}
body.ludum #filters:has(#show-ld:checked):has(#show-akj:checked):has(#show-1hgj:checked):has(#show-other:checked) + #games .t15-3 > div {
  left: -600px;
}
body.ludum #filters:has(#show-ld:checked) + #games .game-ld,
body.ludum #filters:has(#show-akj:checked) + #games .game-akj,
body.ludum #filters:has(#show-1hgj:checked) + #games .game-1hgj,
body.ludum #filters:has(#show-other:checked) + #games .game-other {
  display: inline-block;
}

body.splash > div {
  width: 500px;
  margin: 50px auto 10px;
  position: relative;
}
body.splash > div > nav {
  left: 70px;
  position: absolute;
  top: 228px;
  z-index: 1;
}
body.splash > div > nav a {
  display: block;
  background-color: rgba(170, 0, 0, 0.8);
  border-bottom: 2px solid #502;
  border-right: 2px solid #502;
  height: 24px;
  color: #fff;
  font-weight: bold;
  width: 300px;
  padding-left: 70px;
  text-decoration: none;
  transition: background-color 0.4s, width 0.4s, padding-left 0.25s;
}
body.splash > div > nav a:hover {
  background-color: #ff8000;
  padding-left: 90px;
  width: 320px;
}
body.splash main {
  padding-top: 20px;
  position: relative;
  left: 110px;
  width: 400px;
  z-index: 3;
}
body.splash main p {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0 5px 0 5px;
  padding: 0.5em 0.5em;
  position: relative;
  width: 400px;
}
body.splash main p:nth-child(2) {
  left: 10px;
  width: 390px;
}
body.splash main p:nth-child(3) {
  left: 20px;
  width: 380px;
}
body.splash main a {
  background-color: #a00;
  background-image: linear-gradient(180deg, rgb(170, 0, 0) 0%, rgb(255, 128, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #a00;
  text-decoration: none;
  transition: color 0.2s;
}
body.splash main a:hover {
  color: transparent;
}
body.splash footer {
  left: 180px;
  position: absolute;
  top: 420px;
  width: 120px;
}
body.splash #mebg, body.splash #me, body.splash #mefg1, body.splash #mefg2, body.splash #mefg3 {
  background-image: url("assets/me.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  display: block;
  image-rendering: pixelated;
  margin-top: 50px;
  pointer-events: none;
  position: absolute;
}
body.splash #mebg {
  background-position: -448px 0;
  top: -350px;
  transition: left 0.5s;
  left: -342px;
  width: 576px;
  height: 784px;
  z-index: 0;
}
body.splash #me {
  top: 0;
  transition: left 0.5s;
  left: -248px;
  width: 378px;
  height: 434px;
  z-index: 4;
}
body.splash #mefg1 {
  background-position: 0 -448px;
  height: 108px;
  left: -204px;
  opacity: 0;
  top: 110px;
  transition: opacity 0.2s;
  width: 268px;
  z-index: 6;
}
body.splash #mefg2 {
  background-position: -288px -784px;
  height: 64px;
  left: -348px;
  opacity: 0;
  top: 320px;
  transition: opacity 0.2s;
  width: 256px;
  z-index: 1;
}
body.splash #mefg3 {
  background-position: -608px -784px;
  height: 164px;
  left: -224px;
  opacity: 0;
  top: 80px;
  transition: opacity 0.2s, top 0.2s;
  width: 368px;
  z-index: 6;
}
body.splash #mefg3::after {
  animation: 0.5s fggame step-end infinite;
  background-image: url("assets/me.png");
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 44px;
  left: 24px;
  image-rendering: pixelated;
  pointer-events: none;
  position: absolute;
  top: 32px;
  width: 264px;
}
body.splash *:has(a[href="/about"]:hover) ~ #mebg {
  left: -348px;
}
body.splash *:has(a[href="/about"]:hover) ~ #me {
  left: -254px;
}
body.splash *:has(a[href="/ctf"]:hover) ~ #mefg1 {
  animation: 0.2s fgctf step-start infinite;
  opacity: 0.7;
}
body.splash *:has(a[href="https://prusti.ethz.ch/"]:hover) ~ #mefg2,
body.splash *:has(a[href="/research"]:hover) ~ #mefg2 {
  opacity: 0.7;
}
body.splash *:has(a[href="https://ludum.thenet.sk/"]:hover) ~ #mefg3 {
  opacity: 1;
  top: 86px;
}

@keyframes fgctf {
  0% {
    background-position: 0 -560px;
  }
  25% {
    background-position: 0 -672px;
  }
  50% {
    background-position: 0 -784px;
  }
  75% {
    background-position: 0 -896px;
  }
  100% {
    background-position: 0 -560px;
  }
}
@keyframes fggame {
  0% {
    background-position: -608px -960px;
    opacity: 1;
  }
  10% {
    background-position: -608px -1008px;
    opacity: 1;
  }
  20% {
    background-position: -608px -1056px;
    opacity: 1;
  }
  30% {
    background-position: -608px -1104px;
    opacity: 1;
  }
  40% {
    background-position: -608px -1600px;
    opacity: 0;
  }
  99% {
    background-position: -608px -960px;
    opacity: 0;
  }
  100% {
    background-position: -608px -960px;
    opacity: 1;
  }
}
body.blog header nav a:first-of-type, body.static header nav a:first-of-type {
  background-image: url("assets/blog.png");
  border: none;
  color: transparent;
  display: block;
  height: 120px;
  image-rendering: pixelated;
  left: 0;
  position: absolute;
  top: -88px;
  width: 120px;
}
body.blog header nav a:first-of-type i:nth-of-type(1), body.static header nav a:first-of-type i:nth-of-type(1) {
  left: 0;
  position: absolute;
  top: 0;
  display: block;
  height: 120px;
  width: 120px;
  background-image: url("assets/blog.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}
body.blog header nav a:first-of-type i:nth-of-type(2), body.static header nav a:first-of-type i:nth-of-type(2) {
  left: 58px;
  position: absolute;
  top: 66px;
  display: block;
  height: 26px;
  width: 16px;
  background-image: url("assets/blog.png");
  background-position: 0 -192px;
  background-repeat: no-repeat;
  animation: logoleg1 3s infinite step-end;
}
body.blog header nav a:first-of-type i:nth-of-type(3), body.static header nav a:first-of-type i:nth-of-type(3) {
  left: 46px;
  position: absolute;
  top: 66px;
  display: block;
  height: 8px;
  width: 28px;
  background-image: url("assets/blog.png");
  background-position: 0 -176px;
  background-repeat: no-repeat;
  animation: logoburner 3s infinite step-end;
}
body.blog header nav a:first-of-type i:nth-of-type(4), body.static header nav a:first-of-type i:nth-of-type(4) {
  left: 50px;
  position: absolute;
  top: 74px;
  display: block;
  height: 18px;
  width: 20px;
  background-image: url("assets/blog.png");
  background-position: 0 -128px;
  background-repeat: no-repeat;
  animation: logoflame 2s infinite step-end;
}
body.blog header nav a:first-of-type i:nth-of-type(5), body.static header nav a:first-of-type i:nth-of-type(5) {
  left: 30px;
  position: absolute;
  top: 66px;
  display: block;
  height: 34px;
  width: 16px;
  background-image: url("assets/blog.png");
  background-position: -16px -192px;
  background-repeat: no-repeat;
  animation: logoleg2 3s infinite step-end;
}
body.blog header nav a:first-of-type i:nth-of-type(6), body.static header nav a:first-of-type i:nth-of-type(6) {
  left: 76px;
  position: absolute;
  top: 64px;
  display: block;
  height: 36px;
  width: 14px;
  background-image: url("assets/blog.png");
  background-position: -32px -192px;
  background-repeat: no-repeat;
  animation: logoleg3 3s infinite step-end;
}
body.blog header nav a:first-of-type i:nth-of-type(7), body.static header nav a:first-of-type i:nth-of-type(7) {
  left: 30px;
  position: absolute;
  top: 48px;
  display: block;
  height: 18px;
  width: 60px;
  background-image: url("assets/blog.png");
  background-position: -96px -216px;
  background-repeat: no-repeat;
  animation: logobody 3s infinite step-end;
}
body.blog header nav a:first-of-type i:nth-of-type(8), body.static header nav a:first-of-type i:nth-of-type(8) {
  left: 24px;
  position: absolute;
  top: 44px;
  display: block;
  height: 4px;
  width: 72px;
  background-image: url("assets/blog.png");
  background-position: -160px -176px;
  background-repeat: no-repeat;
  animation: logomid 2s infinite step-end;
}
body.blog header nav a:first-of-type i:nth-of-type(9), body.static header nav a:first-of-type i:nth-of-type(9) {
  left: 24px;
  position: absolute;
  top: 32px;
  display: block;
  height: 6px;
  width: 72px;
  background-image: url("assets/blog.png");
  background-position: -240px -176px;
  background-repeat: no-repeat;
  animation: logovisor 1s infinite step-end;
}
body.blog header nav a:first-of-type i:nth-of-type(10), body.static header nav a:first-of-type i:nth-of-type(10) {
  left: 30px;
  position: absolute;
  top: 16px;
  display: block;
  height: 28px;
  width: 60px;
  background-image: url("assets/blog.png");
  background-position: -320px -128px;
  background-repeat: no-repeat;
}
body.blog header nav a:first-of-type i:nth-of-type(11), body.static header nav a:first-of-type i:nth-of-type(11) {
  left: -256px;
  position: absolute;
  top: 0;
  display: block;
  height: 256px;
  width: 256px;
  background-image: url("assets/blog.png");
  background-position: 0 -240px;
  background-repeat: no-repeat;
  pointer-events: none;
}
body.blog header nav a:first-of-type i:nth-of-type(12), body.static header nav a:first-of-type i:nth-of-type(12) {
  left: 812px;
  position: absolute;
  top: 0;
  display: block;
  height: 256px;
  width: 64px;
  background-image: url("assets/blog.png");
  background-position: -272px -240px;
  background-repeat: no-repeat;
  max-width: calc((100vw - 812px) / 2);
  pointer-events: none;
}
body.blog header nav a:first-of-type:hover, body.static header nav a:first-of-type:hover {
  top: -90px;
}
body.blog header nav a:first-of-type:hover i:nth-of-type(1), body.static header nav a:first-of-type:hover i:nth-of-type(1) {
  left: 0;
  position: absolute;
  top: 2px;
  background-image: url("assets/blog.png");
  background-position: -128px 0;
  background-repeat: no-repeat;
}
body.blog header nav a:first-of-type:hover i:nth-of-type(3), body.static header nav a:first-of-type:hover i:nth-of-type(3) {
  animation-duration: 0.2s;
}
body.blog header nav a:first-of-type:hover i:nth-of-type(9), body.static header nav a:first-of-type:hover i:nth-of-type(9) {
  animation: logovisor2 0.9s infinite step-end;
}
body.blog header nav a:first-of-type:hover i:nth-of-type(11), body.static header nav a:first-of-type:hover i:nth-of-type(11) {
  left: -256px;
  position: absolute;
  top: 2px;
}
body.blog header nav a:first-of-type:hover i:nth-of-type(12), body.static header nav a:first-of-type:hover i:nth-of-type(12) {
  left: 812px;
  position: absolute;
  top: 2px;
}

body.ludum header nav a:first-of-type {
  background-image: url("assets/blog.png");
  border: none;
  color: transparent;
  display: block;
  height: 120px;
  image-rendering: pixelated;
  left: 0;
  position: absolute;
  top: -88px;
  width: 120px;
}
body.ludum header nav a:first-of-type i:nth-of-type(1) {
  left: 0;
  position: absolute;
  top: 0;
  display: block;
  height: 120px;
  width: 120px;
  background-image: url("assets/blog.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}
body.ludum header nav a:first-of-type i:nth-of-type(2) {
  left: -256px;
  position: absolute;
  top: 0;
  display: block;
  height: 256px;
  width: 256px;
  background-image: url("assets/blog.png");
  background-position: 0 -240px;
  background-repeat: no-repeat;
  pointer-events: none;
}
body.ludum header nav a:first-of-type i:nth-of-type(3) {
  left: 812px;
  position: absolute;
  top: 0;
  display: block;
  height: 256px;
  width: 64px;
  background-image: url("assets/blog.png");
  background-position: -272px -240px;
  background-repeat: no-repeat;
  max-width: calc((100vw - 812px) / 2);
  pointer-events: none;
}
body.ludum header nav a:first-of-type i:nth-of-type(4) {
  left: -6px;
  position: absolute;
  top: 18px;
  display: block;
  height: 88px;
  width: 128px;
  background-image: url("assets/blog.png");
  background-position: -480px -128px;
  background-repeat: no-repeat;
}
body.ludum header nav a:first-of-type i:nth-of-type(5) {
  left: -64px;
  position: absolute;
  top: 88px;
  display: block;
  height: 32px;
  width: 66px;
  background-image: url("assets/blog.png");
  background-position: -480px -336px;
  background-repeat: no-repeat;
  pointer-events: none;
}
body.ludum header nav a:first-of-type i:nth-of-type(6) {
  left: 0px;
  position: absolute;
  top: 48px;
  display: block;
  height: 32px;
  width: 48px;
  background-image: url("assets/blog.png");
  background-position: -512px -224px;
  background-repeat: no-repeat;
  animation: ludummleft 3s infinite step-end;
  pointer-events: none;
}
body.ludum header nav a:first-of-type i:nth-of-type(7) {
  left: 14px;
  position: absolute;
  top: 10px;
  display: block;
  height: 32px;
  width: 64px;
  background-image: url("assets/blog.png");
  background-position: -560px -224px;
  background-repeat: no-repeat;
  animation: ludumtop 3.8s infinite step-end;
}
body.ludum header nav a:first-of-type i:nth-of-type(8) {
  left: -6px;
  position: absolute;
  top: 36px;
  display: block;
  height: 16px;
  width: 48px;
  background-image: url("assets/blog.png");
  background-position: -512px -256px;
  background-repeat: no-repeat;
  animation: ludumtleft 3.5s infinite step-end;
  pointer-events: none;
}
body.ludum header nav a:first-of-type i:nth-of-type(9) {
  left: 38px;
  position: absolute;
  top: 40px;
  display: block;
  height: 32px;
  width: 48px;
  background-image: url("assets/blog.png");
  background-position: -560px -256px;
  background-repeat: no-repeat;
  animation: ludumcore 4.7s infinite step-end;
  pointer-events: none;
}
body.ludum header nav a:first-of-type i:nth-of-type(10) {
  left: 82px;
  position: absolute;
  top: 34px;
  display: block;
  height: 32px;
  width: 48px;
  background-image: url("assets/blog.png");
  background-position: -480px -272px;
  background-repeat: no-repeat;
  animation: ludumtright 3.9s infinite step-end;
  pointer-events: none;
}
body.ludum header nav a:first-of-type i:nth-of-type(11) {
  left: 40px;
  position: absolute;
  top: 80px;
  display: block;
  height: 24px;
  width: 40px;
  background-image: url("assets/blog.png");
  background-position: -480px -304px;
  background-repeat: no-repeat;
  animation: ludumbot 4s infinite step-end;
  pointer-events: none;
}
body.ludum header nav a:first-of-type i:nth-of-type(12) {
  left: 96px;
  position: absolute;
  top: 60px;
  display: block;
  height: 40px;
  width: 32px;
  background-image: url("assets/blog.png");
  background-position: -528px -272px;
  background-repeat: no-repeat;
  animation: ludumlright 4.2s infinite step-end;
  pointer-events: none;
}
body.ludum header nav a:first-of-type i:nth-of-type(13) {
  left: -12px;
  position: absolute;
  top: 56px;
  display: block;
  height: 48px;
  width: 18px;
  background-image: url("assets/blog.png");
  background-position: -480px -224px;
  background-repeat: no-repeat;
  animation: ludumlleft 4s infinite step-end;
  pointer-events: none;
}
body.ludum header nav a:first-of-type:hover {
  top: -90px;
}
body.ludum header nav a:first-of-type:hover i:nth-of-type(1) {
  left: 0;
  position: absolute;
  top: 2px;
  background-image: url("assets/blog.png");
  background-position: -128px 0;
  background-repeat: no-repeat;
}
body.ludum header nav a:first-of-type:hover i:nth-of-type(2) {
  left: -256px;
  position: absolute;
  top: 2px;
}
body.ludum header nav a:first-of-type:hover i:nth-of-type(3) {
  left: 812px;
  position: absolute;
  top: 2px;
}
body.ludum header nav a:first-of-type:hover i:nth-of-type(5) {
  left: -64px;
  position: absolute;
  top: 90px;
  background-image: url("assets/blog.png");
  background-position: -480px -368px;
  background-repeat: no-repeat;
}

@keyframes ludumlleft {
  0% {
    left: -12px;
    top: 56px;
  }
  20% {
    left: -12px;
    top: 56px;
  }
  40% {
    left: -14px;
    top: 56px;
  }
  60% {
    left: -14px;
    top: 58px;
  }
  80% {
    left: -12px;
    top: 58px;
  }
  100% {
    left: -12px;
    top: 56px;
  }
}
@keyframes ludummleft {
  0% {
    left: 0px;
    top: 48px;
  }
  25% {
    left: 0px;
    top: 48px;
  }
  50% {
    left: -2px;
    top: 48px;
  }
  75% {
    left: -2px;
    top: 46px;
  }
  100% {
    left: 0px;
    top: 48px;
  }
}
@keyframes ludumtop {
  0% {
    left: 14px;
    top: 10px;
  }
  20% {
    left: 14px;
    top: 10px;
  }
  40% {
    left: 12px;
    top: 10px;
  }
  60% {
    left: 14px;
    top: 10px;
  }
  80% {
    left: 16px;
    top: 10px;
  }
  100% {
    left: 14px;
    top: 10px;
  }
}
@keyframes ludumtleft {
  0% {
    left: -6px;
    top: 36px;
  }
  20% {
    left: -6px;
    top: 36px;
  }
  40% {
    left: -6px;
    top: 34px;
  }
  60% {
    left: -8px;
    top: 34px;
  }
  80% {
    left: -8px;
    top: 36px;
  }
  100% {
    left: -6px;
    top: 36px;
  }
}
@keyframes ludumcore {
  0% {
    left: 38px;
    top: 40px;
  }
  20% {
    left: 38px;
    top: 40px;
  }
  40% {
    left: 38px;
    top: 42px;
  }
  60% {
    left: 38px;
    top: 40px;
  }
  80% {
    left: 38px;
    top: 38px;
  }
  100% {
    left: 38px;
    top: 40px;
  }
}
@keyframes ludumtright {
  0% {
    left: 82px;
    top: 34px;
  }
  20% {
    left: 82px;
    top: 34px;
  }
  40% {
    left: 82px;
    top: 32px;
  }
  60% {
    left: 84px;
    top: 32px;
  }
  80% {
    left: 84px;
    top: 34px;
  }
  100% {
    left: 82px;
    top: 34px;
  }
}
@keyframes ludumbot {
  0% {
    left: 40px;
    top: 80px;
  }
  20% {
    left: 40px;
    top: 80px;
  }
  40% {
    left: 42px;
    top: 80px;
  }
  60% {
    left: 40px;
    top: 80px;
  }
  80% {
    left: 38px;
    top: 80px;
  }
  100% {
    left: 40px;
    top: 80px;
  }
}
@keyframes ludumlright {
  0% {
    left: 96px;
    top: 60px;
  }
  16.6666666667% {
    left: 96px;
    top: 60px;
  }
  33.3333333333% {
    left: 98px;
    top: 60px;
  }
  50% {
    left: 100px;
    top: 60px;
  }
  66.6666666667% {
    left: 98px;
    top: 60px;
  }
  83.3333333333% {
    left: 96px;
    top: 60px;
  }
  100% {
    left: 96px;
    top: 60px;
  }
}
@keyframes logoleg1 {
  0% {
    left: 58px;
    top: 66px;
  }
  20% {
    left: 58px;
    top: 66px;
  }
  40% {
    left: 56px;
    top: 66px;
  }
  60% {
    left: 58px;
    top: 66px;
  }
  80% {
    left: 60px;
    top: 66px;
  }
  100% {
    left: 58px;
    top: 66px;
  }
}
@keyframes logoleg2 {
  0% {
    left: 30px;
    top: 66px;
  }
  20% {
    left: 30px;
    top: 66px;
  }
  40% {
    left: 32px;
    top: 66px;
  }
  60% {
    left: 30px;
    top: 66px;
  }
  80% {
    left: 30px;
    top: 66px;
  }
  100% {
    left: 30px;
    top: 66px;
  }
}
@keyframes logoleg3 {
  0% {
    left: 76px;
    top: 64px;
  }
  20% {
    left: 76px;
    top: 64px;
  }
  40% {
    left: 74px;
    top: 64px;
  }
  60% {
    left: 76px;
    top: 64px;
  }
  80% {
    left: 76px;
    top: 64px;
  }
  100% {
    left: 76px;
    top: 64px;
  }
}
@keyframes logobody {
  0% {
    background-position: -400px -216px;
  }
  0% {
    background-position: -400px -216px;
  }
  12.5% {
    background-position: -400px -196px;
  }
  25% {
    background-position: -400px -176px;
  }
  37.5% {
    background-position: -400px -196px;
  }
  50% {
    background-position: -400px -216px;
  }
  62.5% {
    background-position: -400px -236px;
  }
  75% {
    background-position: -400px -256px;
  }
  87.5% {
    background-position: -400px -236px;
  }
  100% {
    background-position: -400px -216px;
  }
}
@keyframes logoburner {
  0% {
    background-position: 0 -176px;
  }
  0% {
    background-position: 0 -176px;
  }
  33.3333333333% {
    background-position: -32px -176px;
  }
  66.6666666667% {
    background-position: -64px -176px;
  }
  100% {
    background-position: 0 -176px;
  }
}
@keyframes logoflame {
  0% {
    background-position: 0 -128px;
  }
  0% {
    background-position: 0 -128px;
  }
  3.8461538462% {
    background-position: -24px -128px;
  }
  7.6923076923% {
    background-position: -48px -128px;
  }
  11.5384615385% {
    background-position: -72px -128px;
  }
  15.3846153846% {
    background-position: -96px -128px;
  }
  19.2307692308% {
    background-position: -120px -128px;
  }
  23.0769230769% {
    background-position: -144px -128px;
  }
  26.9230769231% {
    background-position: -168px -128px;
  }
  30.7692307692% {
    background-position: -192px -128px;
  }
  34.6153846154% {
    background-position: -216px -128px;
  }
  38.4615384615% {
    background-position: -240px -128px;
  }
  42.3076923077% {
    background-position: -264px -128px;
  }
  46.1538461538% {
    background-position: -288px -128px;
  }
  50% {
    background-position: 0 -148px;
  }
  53.8461538462% {
    background-position: -24px -148px;
  }
  57.6923076923% {
    background-position: -48px -148px;
  }
  61.5384615385% {
    background-position: -72px -148px;
  }
  65.3846153846% {
    background-position: -96px -148px;
  }
  69.2307692308% {
    background-position: -120px -148px;
  }
  73.0769230769% {
    background-position: -144px -148px;
  }
  76.9230769231% {
    background-position: -168px -148px;
  }
  80.7692307692% {
    background-position: -192px -148px;
  }
  84.6153846154% {
    background-position: -216px -148px;
  }
  88.4615384615% {
    background-position: -240px -148px;
  }
  92.3076923077% {
    background-position: -264px -148px;
  }
  96.1538461538% {
    background-position: -288px -148px;
  }
  100% {
    background-position: 0 -128px;
  }
}
@keyframes logovisor {
  0% {
    background-position: -240px -176px;
  }
  0% {
    background-position: -240px -176px;
  }
  16.6666666667% {
    background-position: -240px -182px;
  }
  33.3333333333% {
    background-position: -240px -188px;
  }
  50% {
    background-position: -240px -194px;
  }
  66.6666666667% {
    background-position: -240px -200px;
  }
  83.3333333333% {
    background-position: -240px -206px;
  }
  100% {
    background-position: -240px -176px;
  }
}
@keyframes logovisor2 {
  0% {
    background-position: -320px -176px;
  }
  0% {
    background-position: -320px -176px;
  }
  8.3333333333% {
    background-position: -320px -182px;
  }
  16.6666666667% {
    background-position: -320px -188px;
  }
  25% {
    background-position: -320px -194px;
  }
  33.3333333333% {
    background-position: -320px -200px;
  }
  41.6666666667% {
    background-position: -320px -206px;
  }
  50% {
    background-position: -320px -212px;
  }
  58.3333333333% {
    background-position: -320px -218px;
  }
  66.6666666667% {
    background-position: -240px -188px;
  }
  75% {
    background-position: -240px -194px;
  }
  83.3333333333% {
    background-position: -240px -200px;
  }
  91.6666666667% {
    background-position: -240px -206px;
  }
  100% {
    background-position: -320px -176px;
  }
}
@keyframes logomid {
  0% {
    background-position: -160px -176px;
  }
  0% {
    background-position: -160px -176px;
  }
  6.25% {
    background-position: -160px -180px;
  }
  12.5% {
    background-position: -160px -184px;
  }
  18.75% {
    background-position: -160px -188px;
  }
  25% {
    background-position: -160px -192px;
  }
  31.25% {
    background-position: -160px -196px;
  }
  37.5% {
    background-position: -160px -200px;
  }
  43.75% {
    background-position: -160px -204px;
  }
  50% {
    background-position: -160px -208px;
  }
  56.25% {
    background-position: -160px -212px;
  }
  62.5% {
    background-position: -160px -216px;
  }
  68.75% {
    background-position: -160px -220px;
  }
  75% {
    background-position: -160px -224px;
  }
  81.25% {
    background-position: -160px -228px;
  }
  87.5% {
    background-position: -160px -232px;
  }
  93.75% {
    background-position: -160px -236px;
  }
  100% {
    background-position: -160px -176px;
  }
}
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

.hljs {
  color: #2a2c2d;
  background: #e6e6e6;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

.hljs-link {
  text-decoration: underline;
}

.hljs-comment, .hljs-quote {
  color: #676b79;
  font-style: italic;
}

.hljs-params {
  color: #676b79;
}

.hljs-attr, .hljs-punctuation {
  color: #2a2c2d;
}

.hljs-char.escape_, .hljs-meta, .hljs-name, .hljs-operator, .hljs-selector-tag {
  color: #c56200;
}

.hljs-deletion, .hljs-keyword {
  color: #d92792;
}

.hljs-regexp, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-variable.language_ {
  color: #cc5e91;
}

.hljs-code, .hljs-formula, .hljs-property, .hljs-section, .hljs-subst, .hljs-title.function_ {
  color: #3787c7;
}

.hljs-addition, .hljs-bullet, .hljs-meta .hljs-string, .hljs-selector-class, .hljs-string, .hljs-symbol, .hljs-title.class_, .hljs-title.class_.inherited__ {
  color: #0d7d6c;
}

.hljs-attribute, .hljs-built_in, .hljs-doctag, .hljs-link, .hljs-literal, .hljs-meta .hljs-keyword, .hljs-number, .hljs-selector-id, .hljs-tag, .hljs-template-tag, .hljs-template-variable, .hljs-title, .hljs-type, .hljs-variable {
  color: #7641bb;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: #333;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
body .broken-egg {
  background: linear-gradient(#94bbe9 10%, #94bbe9 11%, #eeaeca 30%, #eeaeca 31%, #dddddd 50%, #eeaeca 69%, #eeaeca 70%, #94bbe9 89%, #94bbe9 90%);
  -webkit-background-clip: text;
  color: #dddddd;
  transition: color 0.2s;
}
body .broken-egg:hover {
  color: transparent;
}

body.blog, body.static, body.ludum {
  background: linear-gradient(90deg, #ccc 0 4px, #333 4px 816px, #ccc 816px 820px, transparent 820px 821px) repeat-y center 0, linear-gradient(transparent 0 48px, #333 48px 176px, transparent 176px) repeat-x, linear-gradient(90deg, #fff 0, #eee 400px, #ccc 400px 404px, #333 404px 1216px, #ccc 1216px 1220px, #eee 1220px, #fff 1620px) center 0 repeat-y, #fff;
  background-size: 820px, auto, 1620px 1px, auto;
}
body.blog header, body.blog main, body.blog footer, body.static header, body.static main, body.static footer, body.ludum header, body.ludum main, body.ludum footer {
  margin: 0 auto;
  width: 812px;
}
body.blog header, body.static header, body.ludum header {
  background: linear-gradient(transparent 0 88px, #333 88px 92px, transparent 92px 120px) 0 0 repeat-x, #fff;
  height: 120px;
  position: relative;
}
body.blog header nav, body.static header nav, body.ludum header nav {
  padding-left: 120px;
  position: absolute;
  top: 88px;
  left: 0;
}
body.blog header nav a, body.static header nav a, body.ludum header nav a {
  border-top: 4px solid transparent;
  color: #333;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 32px;
  padding: 0 0 0 4px;
  text-decoration: none;
  width: 96px;
}
body.blog header nav a.sel, body.static header nav a.sel, body.ludum header nav a.sel {
  border-top: 4px solid #999;
  color: #aa0000;
  height: 32px;
}
body.blog header nav a:hover, body.static header nav a:hover, body.ludum header nav a:hover {
  background-color: #ccc;
  color: #ff8000;
}
body.blog main, body.static main, body.ludum main {
  background: linear-gradient(rgba(51, 51, 51, 0.12) 0, rgba(51, 51, 51, 0) 8px), linear-gradient(rgba(51, 51, 51, 0.11) 0, rgba(51, 51, 51, 0) 20px), linear-gradient(rgba(51, 51, 51, 0) 0, rgba(51, 51, 51, 0.11) 20px, rgba(51, 51, 51, 0) 21px), #fff;
  background-position-y: 0, 0, bottom 20px, 0;
  position: relative;
  padding: 0 0 16px;
}
body.blog main h1, body.blog main h2, body.blog main h3, body.blog main p, body.blog main ul, body.blog main pre, body.static main h1, body.static main h2, body.static main h3, body.static main p, body.static main ul, body.static main pre, body.ludum main h1, body.ludum main h2, body.ludum main h3, body.ludum main p, body.ludum main ul, body.ludum main pre {
  padding: 16px 16px 0;
}
body.blog main pre:has(code.hljs), body.static main pre:has(code.hljs), body.ludum main pre:has(code.hljs) {
  padding: 16px 0 0;
}
body.blog main h1, body.static main h1, body.ludum main h1 {
  color: #aa0000;
  font-family: "Roboto", sans-serif;
  font-size: 26px;
  font-weight: 400;
}
body.blog main h2, body.blog main h3, body.static main h2, body.static main h3, body.ludum main h2, body.ludum main h3 {
  color: #999;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 400;
}
body.blog main h2, body.static main h2, body.ludum main h2 {
  color: #333;
}
body.blog main p, body.blog main ul, body.blog main pre, body.static main p, body.static main ul, body.static main pre, body.ludum main p, body.ludum main ul, body.ludum main pre {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
}
body.blog main ul, body.blog main ol, body.static main ul, body.static main ol, body.ludum main ul, body.ludum main ol {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 24px 0;
}
body.blog main ul li, body.blog main ol li, body.static main ul li, body.static main ol li, body.ludum main ul li, body.ludum main ol li {
  padding: 4px 0 0;
}
body.blog main p:has(img:only-child), body.blog main p:has(video:only-child), body.static main p:has(img:only-child), body.static main p:has(video:only-child), body.ludum main p:has(img:only-child), body.ludum main p:has(video:only-child) {
  padding: 16px 0 0;
}
body.blog main p img:only-child, body.blog main p video:only-child, body.static main p img:only-child, body.static main p video:only-child, body.ludum main p img:only-child, body.ludum main p video:only-child {
  background: #333;
  display: block;
  max-height: 640px;
  object-fit: contain;
  width: 100%;
}
body.blog main .flashhold, body.static main .flashhold, body.ludum main .flashhold {
  background: #333;
  display: block;
  line-height: 0;
  margin-top: 16px;
  text-align: center;
  width: 100%;
}
body.blog main .flashhold ruffle-player, body.static main .flashhold ruffle-player, body.ludum main .flashhold ruffle-player {
  max-width: 100%;
}
body.blog main time, body.static main time, body.ludum main time {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  background-color: #aa0000;
  border-left: 4px solid #502;
  color: #fff;
  display: block;
  float: left;
  height: 48px;
  left: -8px;
  padding: 4px;
  position: relative;
  text-align: center;
  top: 4px;
  width: 84px;
}
body.blog main time span, body.static main time span, body.ludum main time span {
  font-size: 20px;
}
body.blog main a, body.static main a, body.ludum main a {
  background: linear-gradient(#aa0000, #ff8000), #aa0000;
  -webkit-background-clip: text;
  background-clip: text;
  color: #aa0000;
  text-decoration: none;
  transition: color 0.2s;
}
body.blog main a:hover, body.static main a:hover, body.ludum main a:hover {
  color: transparent;
}
body.blog main .ha:hover, body.blog main .ha:focus, body.static main .ha:hover, body.static main .ha:focus, body.ludum main .ha:hover, body.ludum main .ha:focus {
  text-decoration: none;
}
body.blog main .parahead, body.static main .parahead, body.ludum main .parahead {
  display: block;
  height: 280px;
  overflow: hidden;
  position: relative;
  transition: height 0.8s, margin 0.8s;
  width: 100%;
}
body.blog main .parahead .layer, body.static main .parahead .layer, body.ludum main .parahead .layer {
  height: 280px;
  left: 0;
  position: absolute;
  top: 0;
  width: 812px;
}
body.blog main .parahead h1, body.static main .parahead h1, body.ludum main .parahead h1 {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 40px;
  font-weight: 100;
  left: 0;
  letter-spacing: 2px;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 95px;
  transition: top 0.8s;
  width: 100%;
}
body.blog main .paraover, body.static main .paraover, body.ludum main .paraover {
  background-color: #000;
  border-bottom: 4px solid #ccc;
  position: relative;
}
body.blog main .ldres, body.static main .ldres, body.ludum main .ldres {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0 auto;
  padding: 16px 16px 0;
}
body.blog main .ldres th, body.blog main .ldres td, body.static main .ldres th, body.static main .ldres td, body.ludum main .ldres th, body.ludum main .ldres td {
  padding: 4px 8px;
  position: relative;
  text-align: left;
}
body.blog main .ldres .top1, body.blog main .ldres .top2, body.blog main .ldres .top3, body.static main .ldres .top1, body.static main .ldres .top2, body.static main .ldres .top3, body.ludum main .ldres .top1, body.ludum main .ldres .top2, body.ludum main .ldres .top3 {
  color: transparent;
}
body.blog main .ldres .top1::before, body.blog main .ldres .top2::before, body.blog main .ldres .top3::before, body.static main .ldres .top1::before, body.static main .ldres .top2::before, body.static main .ldres .top3::before, body.ludum main .ldres .top1::before, body.ludum main .ldres .top2::before, body.ludum main .ldres .top3::before {
  left: 16px;
  position: absolute;
  top: 3px;
  display: block;
  height: 18px;
  width: 18px;
  background-image: url("assets/blog.png");
  background-position: -96px -176px;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
}
body.blog main .ldres .top2::before, body.static main .ldres .top2::before, body.ludum main .ldres .top2::before {
  background-image: url("assets/blog.png");
  background-position: -96px -194px;
  background-repeat: no-repeat;
}
body.blog main .ldres .top3::before, body.static main .ldres .top3::before, body.ludum main .ldres .top3::before {
  background-image: url("assets/blog.png");
  background-position: -96px -212px;
  background-repeat: no-repeat;
}
body.blog footer, body.static footer, body.ludum footer {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  background-color: #333;
  border-top: 4px solid #333;
  color: #999;
  padding: 12px 16px 16px;
}
body.blog footer a, body.static footer a, body.ludum footer a {
  color: #999;
  display: block;
  height: 32px;
  float: right;
  width: 96px;
  text-decoration: none;
}
body.blog footer a:hover, body.static footer a:hover, body.ludum footer a:hover {
  text-decoration: underline;
}
body.blog footer:hover, body.static footer:hover, body.ludum footer:hover {
  border-top: 4px solid #ff8000;
  color: #ccc;
}
body.blog footer:hover a, body.static footer:hover a, body.ludum footer:hover a {
  color: #ff8000;
}

#latte {
  box-shadow: 2px 9px 15px 2px rgba(51, 51, 51, 0.19);
  height: 3px;
  margin-bottom: 140px;
  margin-top: 60px;
  padding: 0;
  position: relative;
}

#latte::before {
  background: url("assets/latte.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  pointer-events: none;
  right: -50px;
  top: -310px;
  height: 500px;
  width: 100%;
}

#latte::after {
  content: "This is our cat, Latte.";
  height: 30px;
  position: absolute;
  right: 150px;
  text-align: center;
  top: -290px;
  width: 100px;
}

@media (max-width: 720px) {
  body.splash main p:nth-child(2) {
    left: 5px;
    width: 390px;
  }
  body.splash main p:nth-child(3) {
    left: 10px;
    width: 380px;
  }
  body.splash #mebg, body.splash #me, body.splash #mefg1, body.splash #mefg2, body.splash #mefg3 {
    margin-top: 197.2px;
    margin-left: 160px;
  }
  body.splash > div > nav {
    left: 230px;
    top: 244px;
  }
  body.splash footer {
    left: 404px;
    top: 436px;
  }
}
@media (min-width: 720px) and (max-width: 880px) {
  body.splash #mebg, body.splash #me, body.splash #mefg1, body.splash #mefg2, body.splash #mefg3 {
    margin-top: calc(50px + (880px - 100vw) * 0.92);
    margin-left: calc(880px - 100vw);
  }
  body.splash > div > nav {
    left: calc(70px + 880px - 100vw);
    top: calc(228px + (880px - 100vw) * 0.1);
  }
  body.splash footer {
    left: calc(180px + (880px - 100vw) * 1.4);
    top: calc(420px + (880px - 100vw) * 0.1);
  }
}
@media (max-width: 812px) {
  body.blog header, body.blog main, body.blog footer, body.static header, body.static main, body.static footer {
    width: 100%;
  }
  body.blog header nav a, body.static header nav a {
    width: calc((100vw - 120px) / 5 - 5px);
  }
}

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