/* fonts */
@font-face {
  font-family: "raybeesWeb";
  font-display: block;
  src: url("../fonts/raybees.woff") format("woff");
}
@font-face {
  font-family: "pixelWeb";
  src: url("../fonts/disposable-digi.woff") format("woff");
}
@font-face {
  font-family: "comicWeb";
  src: url("../fonts/sunday-comics.woff") format("woff");
}
@font-face {
  font-family: "comicWeb";
  font-weight: bold;
  src: url("../fonts/sunday-comics-bold.woff") format("woff");
}

/* viewport */
@-ms-viewport {
  width: device-width;
  zoom: 1;
  min-zoom: 1;
  user-zoom: zoom;
}
@viewport {
  width: 100vw;
  zoom: 1;
  min-zoom: 1;
  user-zoom: zoom;
}

/* reset etc */
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: "comicWeb", "Verdana", sans-serif;
  line-height: 1.2;
  background: #202020;
}
html,
body {
  position: relative;
}
body {
  overflow: hidden;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
  position: relative;
}
label,
button,
input[type="submit"],
input[type="radio"],
input[type="checkbox"],
select {
  cursor: pointer;
}
*[hidden] {
  display: none !important;
}
template {
  display: none;
}

/* general styles */
html[data-scrolling="1"] main {
  width: 100%;
  min-height: 70vh;
  min-height: calc(100vh - 554px);
  margin: 0 0 554px 0;
}
h1,
h2,
h3 {
  font-size: 1em;
  font-weight: normal;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
iframe {
  border: none;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
strong,
em {
  font-weight: bold;
  font-style: normal;
  font-size: 0.925em;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 1em;
}
th,
td {
  text-align: left;
  vertical-align: top;
  font-size: 1em;
}
body > div[data-nosnippet] {
  display: inline;
}
.raybees {
  font-family: "raybeesWeb", sans-serif;
  line-height: 0.9;
}
html[data-ok="1"] .raybees:not([aria-label]) {
  visibility: hidden;
}

/* form stuff */
button,
input[type="submit"] {
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
textarea,
input[type="text"],
input[type="url"],
input[type="email"],
input[type="number"],
code,
blockquote,
select {
  font-family: "pixelWeb", sans-serif;
  font-size: 20px;
  letter-spacing: -0.05em;
}
textarea,
input[type="text"],
input[type="url"],
input[type="email"],
input[type="number"],
select {
  background: #f4f4f4;
  color: #101010;
  padding: 10px;
  background-clip: padding-box;
  border: 3px dashed #101010;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.2;
  vertical-align: middle;
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.5;
}
::placeholder {
  color: inherit;
  opacity: 0.5;
}
button {
  display: inline-block;
  font-family: "raybeesWeb", sans-serif;
  font-size: 23px;
  color: #f4f4f4;
  background: #101010;
  padding: 10px 12px 10px 13px;
  margin: 10px 4px 10px 4px;
  text-align: center;
  min-width: 80px;
  line-height: 1.2;
  letter-spacing: 0;
  -webkit-transform: skew(5deg, -2deg);
  transform: skew(5deg, -2deg);
  vertical-align: middle;
  white-space: nowrap;
}
button::before {
  opacity: 0.65;
  margin-right: 7px;
}
button:nth-child(2n + 2) {
  -webkit-transform: skew(-4deg, 2deg);
  transform: skew(-4deg, 2deg);
}
button[disabled] {
  cursor: default;
  background-color: #808080 !important;
  color: #c0c0c0 !important;
}
button:not([disabled]):active {
  padding-top: 12px;
  padding-bottom: 8px;
}
input[aria-hidden="true"] {
  display: block !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  font-size: 1px !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* nav */
#_nav p {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
}
html[data-audio="1"] #_nav p {
  display: block;
}
#_nav p label {
  position: relative;
  display: block;
  overflow: hidden;
  width: 102px;
  height: 34px;
  background: url("./images/nav-sound.svg")
    right top no-repeat;
  background-size: 102px 34px;
  font-size: 1px;
  color: rgba(0, 0, 0, 0);
}
#_nav p label:active {
  background-position: 0 -2px;
}
#_nav p input#_navSound + label::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 9px;
  width: 23px;
  height: 23px;
  background: url("./images/nav-sound-checked.svg")
    no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(3);
  transform: scale(3);
  opacity: 0;
}
#_nav p input#_navSound:checked + label::before {
  transition: transform 0.2s, opacity 0.2s;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}
html[data-nav="0"] #_nav {
  display: none;
}

/* preloads */
#_preloads {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  font-size: 1px;
  overflow: hidden;
  z-index: 0;
}
#_preloads img,
#_preloads span {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}
#_preloads span:nth-child(1) {
  font-family: "raybeesWeb";
}
#_preloads span:nth-child(2) {
  font-family: "pixelWeb";
}
#_preloads span:nth-child(3) {
  font-family: "comicWeb";
}
#_preloads span:nth-child(4) {
  font-family: "comicWeb";
  font-weight: bold;
}

/* loading overlay */
#_loading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #202020;
  background-size: cover;
  color: rgba(244, 244, 244, 0.5);
  z-index: 1000;
}
#_loading::after {
  content: "Loading";
  font-family: "raybeesWeb", sans-serif;
  font-size: 23px;
  text-align: center;
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
}

/* nag screen */
#_nag {
  display: none;
  position: fixed;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 10vmin;
  text-align: center;
  z-index: 1000;
}
#_nag > div {
  position: absolute;
  width: 10em;
  height: 8em;
  top: calc(50% - 4em);
  left: calc(50% - 5em);
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s, opacity 0.5s;
}
#_nag._nagMessage > div {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
#_nag h2 {
  font-size: 1em;
  margin: 0 0 0.4em 0;
}
#_nag p {
  font-size: 0.6em;
  line-height: 1.4;
  margin: 0 0 0.4em 0;
}
#_nag a {
  text-decoration: underline;
}
#_nag span {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 50vmin;
  height: 50vmin;
  border-radius: 50%;
  border: 2.5vmin solid currentColor;
  opacity: 0.15;
  margin: -25vmin 0 0 -25vmin;
  -webkit-transform-origin: 45% 40%;
  transform-origin: 45% 40%;
}
@media (min-width: 500px) and (min-height: 500px) {
  #_nag {
    font-size: 50px;
  }
}

/* no-scrolling pages */
html[data-scrolling="0"],
html[data-scrolling="0"] body {
  height: auto;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -ms-touch-action: none;
  touch-action: none;
}
html[data-scrolling="0"] {
  position: fixed;
}
main {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
html[data-scrolling="0"] main {
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
html[data-scrolling="0"] #_share {
  position: absolute;
  padding: 0;
}
html[data-scrolling="0"] #_suggest {
  position: absolute;
  bottom: -554px;
  /*transition: bottom 0.4s;*/
  z-index: 1000;
}
html[data-scrolling="0"] #_suggest label {
  display: block;
  position: absolute;
  width: 170px;
  bottom: 554px;
  margin: 0;
  left: calc(50% - 85px);
  font-family: "raybeesWeb", sans-serif;
  font-size: 23px;
  color: #f4f4f4;
  background: #101010;
  padding: 10px 12px 10px 12px;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
  text-shadow: none;
  -webkit-transform: skew(4deg, 0);
  transform: skew(4deg, 0);
  z-index: 1000;
}
html[data-scrolling="0"] #_suggest label::before {
  display: inline-block;
  text-align: left;
  content: "^";
  width: 23px;
  color: #bac47d;
}
html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest {
  bottom: 0;
  transition: bottom 0.4s; /* */
}
html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest label {
  bottom: calc(554px - 3px);
  background: #545069;
  text-shadow: inherit;
}
html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest label::before {
  content: "|";
  color: rgba(255, 255, 255, 0.65);
}
@media (min-width: 972px) and (max-height: 599px) {
  html[data-scrolling="0"] #_promos p a:nth-child(4),
  html[data-scrolling="0"] #_promos p a:nth-child(5),
  html[data-scrolling="0"] #_promos p a:nth-child(6) {
    display: none;
  }
  html[data-scrolling="0"] #_suggest {
    bottom: -330px;
  }
  html[data-scrolling="0"] #_suggest,
  html[data-scrolling="0"] #_promos {
    height: 330px;
  }
  html[data-scrolling="0"] #_suggest label {
    bottom: 330px;
  }
  html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest label {
    bottom: calc(330px - 3px);
  }
}
@media (min-width: 740px) and (max-width: 971px) and (max-height: 599px) {
  html[data-scrolling="0"] #_promos p a:nth-child(3),
  html[data-scrolling="0"] #_promos p a:nth-child(4) {
    display: none;
  }
  html[data-scrolling="0"] #_suggest {
    bottom: -330px;
  }
  html[data-scrolling="0"] #_suggest,
  html[data-scrolling="0"] #_promos {
    height: 330px;
  }
  html[data-scrolling="0"] #_suggest label {
    bottom: 330px;
  }
  html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest label {
    bottom: calc(330px - 3px);
  }
}
@media (max-width: 739px) and (max-height: 634px) {
  html[data-scrolling="0"] #_promos p a:nth-child(6) {
    display: none;
  }
  html[data-scrolling="0"] #_suggest {
    bottom: calc(-554px + 78px);
  }
  html[data-scrolling="0"] #_suggest,
  html[data-scrolling="0"] #_promos {
    height: calc(554px - 78px);
  }
  html[data-scrolling="0"] #_suggest label {
    bottom: calc(554px - 78px);
  }
  html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest label {
    bottom: calc(554px - 78px - 3px);
  }
}
@media (max-width: 739px) and (max-height: 556px) {
  html[data-scrolling="0"] #_promos p a:nth-child(5) {
    display: none;
  }
  html[data-scrolling="0"] #_suggest {
    bottom: calc(-554px + 78px + 78px);
  }
  html[data-scrolling="0"] #_suggest,
  html[data-scrolling="0"] #_promos {
    height: calc(554px - 78px - 78px);
  }
  html[data-scrolling="0"] #_suggest label {
    bottom: calc(554px - 78px - 78px);
  }
  html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest label {
    bottom: calc(554px - 78px - 78px - 3px);
  }
}
@media (max-width: 739px) and (max-height: 478px) {
  html[data-scrolling="0"] #_promos p a:nth-child(4) {
    display: none;
  }
  html[data-scrolling="0"] #_suggest {
    bottom: calc(-554px + 78px + 78px + 78px);
  }
  html[data-scrolling="0"] #_suggest,
  html[data-scrolling="0"] #_promos {
    height: calc(554px - 78px - 78px - 78px);
  }
  html[data-scrolling="0"] #_suggest label {
    bottom: calc(554px - 78px - 78px - 78px);
  }
  html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest label {
    bottom: calc(554px - 78px - 78px - 78px - 3px);
  }
}
@media (max-width: 739px) and (max-height: 400px) {
  html[data-scrolling="0"] #_promos p a:nth-child(3) {
    display: none;
  }
  html[data-scrolling="0"] #_suggest {
    bottom: calc(-554px + 78px + 78px + 78px + 78px);
  }
  html[data-scrolling="0"] #_suggest,
  html[data-scrolling="0"] #_promos {
    height: calc(554px - 78px - 78px - 78px - 78px);
  }
  html[data-scrolling="0"] #_suggest label {
    bottom: calc(554px - 78px - 78px - 78px - 78px);
  }
  html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest label {
    bottom: calc(554px - 78px - 78px - 78px - 78px - 3px);
  }
}

/* sorry message */
html[data-ok="0"] body::after {
  content: "Sorry, modern JavaScript-enabled browser needed to work properly";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #401810;
  color: #f4f4f4;
  font-size: 15px;
  z-index: 100000;
  padding: 5px 0 5px 0;
  text-align: center;
}
html[data-ok="0"] #_share button {
  display: none;
}
html[data-ok="0"][data-scrolling="0"] #_suggest {
  display: none;
}
html[data-ok="0"] #_nav p {
  display: none;
}

/* preview indicator */
html[data-preview="1"] body::after {
  content: "PREVIEW";
  font-family: "pixelWeb", sans-serif;
  font-size: 24px;
  color: #f4f4f4;
  background: #cc0000;
  padding: 1px 14px 1px 14px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #_nav ul,
  #_nav input#_navToggle:checked + h2 + ul,
  #_nag > div,
  html[data-scrolling="0"] input#_promosToggle:checked ~ #_suggest {
    -webkit-transition: none;
    transition: none;
  }
  #_nav input#_navToggle:checked + h2 label::after {
    background: none;
  }
}