/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}@font-face {
  font-family: "inconsolata";
  src: url("./inconsolata-U3UC7dql.ttf");
}
* {
  box-sizing: border-box;
}
*:focus {
  outline: none;
}
* {
  user-select: none;
}

.lucide {
  width: 1em;
  height: 1em;
}

.isHidden {
  display: none !important;
}

html {
  font-size: 20px;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
}

main {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen {
  width: 1900px;
  height: 1300px;
}

#screen {
  background-color: #000;
  color: #fff;
  overflow-y: scroll;
}

#screen[src=""] {
  display: none;
}

.windowpane-ui, #wp-replay-overlay, #wp-loading, #wp-startbutton, #wp-skip-page, #wp-help, .wp-ui-help, .windowpane-bar, #wp-bookmark,
#wp-volume, #wp-infobar {
  font-family: "inconsolata";
  background-color: black;
  color: white;
}

.windowpane-bar, #wp-bookmark,
#wp-volume, #wp-infobar {
  position: absolute;
  bottom: 0px;
  display: flex;
  gap: 0.5rem;
  font-size: 1rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.2rem;
  overflow: hidden;
}

.wp-ui-help h1 {
  font-size: 4rem;
}
.wp-ui-help h2 {
  font-size: 1.5rem;
}
.wp-ui-help h3,
.wp-ui-help p,
.wp-ui-help ul {
  text-align: right;
}
.wp-ui-help p:has(+ ul) {
  margin-top: 1rem;
}

.next-page {
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: underline;
}
.next-page:hover {
  opacity: 50%;
  cursor: pointer;
}

.wp-continue:hover {
  cursor: pointer;
}

#wp-infobar {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.3rem;
}
#wp-infobar button {
  all: unset;
  text-decoration: underline;
}
#wp-infobar button:hover {
  opacity: 50%;
  cursor: pointer;
}
#wp-infobar h1,
#wp-infobar h2 {
  text-overflow: ellipsis;
  overflow: hidden;
}
#wp-infobar h1,
#wp-infobar h2,
#wp-infobar h3,
#wp-infobar button {
  white-space: nowrap;
  text-align: center;
  margin-bottom: 0.3rem;
}

#wp-help {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid white;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1266.6666666667px;
  height: 866.6666666667px;
  padding: 1.5rem;
}
#wp-help h2 {
  font-size: 3rem;
}
#wp-help h2,
#wp-help h3,
#wp-help h4 {
  display: flex;
  gap: 0.5rem;
}
#wp-help ul, #wp-help li {
  width: 100%;
}
#wp-help li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

#wp-skip-page {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid white;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1266.6666666667px;
  height: 866.6666666667px;
  padding: 1.5rem;
}
#wp-skip-page h1 {
  font-size: 3rem;
  display: flex;
  gap: 0.5rem;
}
#wp-skip-page h2 {
  font-size: 1.5rem;
}
#wp-skip-page input {
  all: unset;
  font-size: 5rem;
  width: 80%;
  text-align: center;
  background-color: black;
  color: white;
}
#wp-skip-page span {
  display: flex;
  gap: 0.5rem;
}

#wp-startbutton {
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  transition: opacity 1s;
}
#wp-startbutton button {
  all: unset;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  cursor: pointer;
  font-size: 1.5rem;
}
#wp-startbutton em {
  font-size: 2rem;
  font-weight: bold;
}

#wp-loading {
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  transition: opacity 1s;
  font-size: 3rem;
}

#viewer:has(#wp-replay-overlay) {
  display: grid;
}
#viewer:has(#wp-replay-overlay) #screen,
#viewer:has(#wp-replay-overlay) #wp-replay-overlay {
  grid-area: 1/1;
}

#wp-replay-overlay {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1900px;
  height: 1300px;
  font-size: 3rem;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.5058823529);
  cursor: pointer;
}
#wp-replay-overlay p, #wp-replay-overlay em {
  background-color: black;
  color: white;
  padding: 1rem;
}
#wp-replay-overlay em {
  font-size: 8rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-height: calc(1300px + 3rem)) {
  #wp-infobar {
    display: none;
  }
}
@media (max-width: 1900px), (max-height: 1300px) {
  #viewer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #screen {
    object-fit: contain;
    aspect-ratio: 1.4615384615;
  }
  #wp-replay-overlay {
    display: none;
  }
  main {
    overflow: hidden;
  }
}
@media (max-height: 1300px) and (min-aspect-ratio: 1) {
  #screen {
    height: 100vh;
    width: auto;
  }
}
@media (max-width: 1900px) and (max-aspect-ratio: 1) {
  #screen {
    width: 100vw;
    height: auto;
  }
}@font-face {
  font-family: "Dolly";
  src: url("../fonts/DollyProReg.otf");
}
.simple #screen, .simple-centered #screen, .simple-sidebar #screen, .simple-bg #screen {
  border: 1px solid white;
}
.simple .text, .simple-centered .text, .simple-sidebar .text, .simple-bg .text {
  padding: 1rem;
  font-family: "Dolly";
}
.simple .text h1, .simple-centered .text h1, .simple-sidebar .text h1, .simple-bg .text h1 {
  font-size: 2rem;
  text-align: center;
  width: 100%;
  background-color: white;
  color: black;
  padding: 0.5rem;
}
.simple .text p, .simple-centered .text p, .simple-sidebar .text p, .simple-bg .text p {
  margin-top: 1rem;
  line-height: 1.5rem;
  font-size: 1.2rem;
}
.simple .text a, .simple-centered .text a, .simple-sidebar .text a, .simple-bg .text a {
  color: white;
}
.simple .text a:hover, .simple-centered .text a:hover, .simple-sidebar .text a:hover, .simple-bg .text a:hover {
  opacity: 50%;
}
.simple .text table, .simple-centered .text table, .simple-sidebar .text table, .simple-bg .text table {
  margin: 1rem;
  border: 1px solid white;
}
.simple .text table caption, .simple-centered .text table caption, .simple-sidebar .text table caption, .simple-bg .text table caption {
  caption-side: bottom;
}
.simple .text table th, .simple-centered .text table th, .simple-sidebar .text table th, .simple-bg .text table th, .simple .text table td, .simple-centered .text table td, .simple-sidebar .text table td, .simple-bg .text table td {
  border: 1px solid white;
  padding: 1rem;
}
.simple .text code, .simple-centered .text code, .simple-sidebar .text code, .simple-bg .text code {
  font-family: monospace;
  background-color: white;
  color: black;
}
.simple video, .simple-centered video, .simple-sidebar video, .simple-bg video {
  object-fit: fill;
}
.simple .video-ended, .simple-centered .video-ended, .simple-sidebar .video-ended, .simple-bg .video-ended {
  opacity: 50%;
  transition: 2s;
}

.simple-bg {
  background-image: url("/images/checkerboard.gif");
}

.simple-sidebar #viewer {
  width: 1900px;
  display: flex;
  justify-content: flex-end;
  background-image: url("/images/checkerboard.gif");
}
.simple-sidebar #screen {
  border-left: 1px solid white;
  width: 1520px;
  overflow: scroll;
  scrollbar-color: white transparent;
}

.simple-centered #screen {
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}