@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.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[href="/"], body.static header nav a[href="/"] {
  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[href="/"] i:nth-of-type(1), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(2), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(3), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(4), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(5), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(6), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(7), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(8), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(9), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(10), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(11), body.static header nav a[href="/"] 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[href="/"] i:nth-of-type(12), body.static header nav a[href="/"] 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[href="/"]:hover, body.static header nav a[href="/"]:hover {
  top: -90px;
}
body.blog header nav a[href="/"]:hover i:nth-of-type(1), body.static header nav a[href="/"]: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[href="/"]:hover i:nth-of-type(3), body.static header nav a[href="/"]:hover i:nth-of-type(3) {
  animation-duration: 0.2s;
}
body.blog header nav a[href="/"]:hover i:nth-of-type(9), body.static header nav a[href="/"]:hover i:nth-of-type(9) {
  animation: logovisor2 0.9s infinite step-end;
}
body.blog header nav a[href="/"]:hover i:nth-of-type(11), body.static header nav a[href="/"]:hover i:nth-of-type(11) {
  left: -256px;
  position: absolute;
  top: 2px;
}
body.blog header nav a[href="/"]:hover i:nth-of-type(12), body.static header nav a[href="/"]:hover i:nth-of-type(12) {
  left: 812px;
  position: absolute;
  top: 2px;
}

@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;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: #333;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

body.blog, body.static {
  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 {
  margin: 0 auto;
  width: 812px;
}
body.blog header, body.static 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 {
  padding-left: 120px;
  position: absolute;
  top: 88px;
  left: 0;
}
body.blog header nav a, body.static 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 {
  border-top: 4px solid #999;
  color: #aa0000;
  height: 32px;
}
body.blog header nav a:hover, body.static header nav a:hover {
  background-color: #ccc;
  color: #ff8000;
}
body.blog main, body.static 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 {
  padding: 16px 16px 0;
}
body.blog main h1, body.static 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 {
  color: #999;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 400;
}
body.blog main h2, body.static 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 {
  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 {
  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 {
  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) {
  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 {
  background: #333;
  display: block;
  max-height: 640px;
  object-fit: contain;
  width: 100%;
}
body.blog main .flashhold, body.static 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 {
  max-width: 100%;
}
body.blog main time, body.static 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 {
  font-size: 20px;
}
body.blog main a, body.static 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 {
  color: transparent;
}
body.blog main .ha:hover, body.blog main .ha:focus, body.static main .ha:hover, body.static main .ha:focus {
  text-decoration: none;
}
body.blog main .parahead, body.static 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 {
  height: 280px;
  left: 0;
  position: absolute;
  top: 0;
  width: 812px;
}
body.blog main .parahead h1, body.static 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 {
  background-color: #000;
  border-bottom: 4px solid #ccc;
  position: relative;
}
body.blog main .ldres, body.static 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 {
  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 {
  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 {
  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 {
  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 {
  background-image: url("assets/blog.png");
  background-position: -96px -212px;
  background-repeat: no-repeat;
}
body.blog footer, body.static 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 {
  color: #999;
  display: block;
  height: 32px;
  float: right;
  width: 96px;
  text-decoration: none;
}
body.blog footer a:hover, body.static footer a:hover {
  text-decoration: underline;
}
body.blog footer:hover, body.static footer:hover {
  border-top: 4px solid #ff8000;
  color: #ccc;
}
body.blog footer:hover a, body.static footer:hover a {
  color: #ff8000;
}

@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 */