body {
  background-color: ;
  color: white;
  font-family: Verdana;
  font-size: 0;
  font-family: "arial", sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

html {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* ----------------------- iframe basic shape -------------------- */

.bigiframe {
  width: 77dvh;
  height: 71dvh;
  box-sizing: border-box;
  border: none;
}

.wrapper {
  margin: 0;
  height: 100dvh;
  width: 107.2dvh;
  background-color: ;
}

.windowbox {/* actual exe window size */
  width: 100%;
  height: 92dvh;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(20, 1fr);
  gap: 1dvh;
  padding: 1.5dvh;
  background-color: ;
}

.bottombarbox {/* bottom bar overlay */
  width: 100%;
  height: 5.6dvh;
  margin-top: 2.6dvh;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: 1;
  gap: 1dvh;
  padding: 0.7dvh;
  background-color: ;
  box-sizing: border-box;
}

/* --------------------------- boxes ---------------- */

.test {
  width: 100%;
  height: 100%;
  background-color: green;
  font-size: 2dvh;
}

.box1 { /* story header */
  grid-column: 2 / span 13;
  grid-row: 2 / span 3;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box2 { /* story text under header */
  grid-column: 2 / span 13;
  grid-row: 5 / span 15;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box3 { /* story text */
  grid-column: span 13;
  grid-row: 2 / span 18;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box4 { /* story picture */
  grid-column: span 5;
  grid-row: 2 / span 18;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}


.box5 { /* home - readme */
  grid-column: 2 / span 10;
  grid-row: 4 / span 15;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box6 { /* home - status - news */
  grid-column: 5 / span 12;
  grid-row: 3 / span 16;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box7 { /* ocs - box img left */
  grid-column: 2 / span 6;
  grid-row: 4 / span 14;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box8 { /*  */
  grid-column: 2 / span 18;
  grid-row: 2 / span 4;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;

}

.box9 { /* ocs img box right */
  grid-column: 14 / span 6;
  grid-row: 4 / span 14;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box10 { /* ocs - text box */
  grid-column: 8 / span 6;
  grid-row: 4 / span 14;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box11  { /* ocs box above */
  grid-column: 2 / span 18;
  grid-row: 2 / span 2;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box12  { /* no im not a human game */
  grid-column: 2 / span 18;
  grid-row: 6 / span 13;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box13 { /* text box above no im not a human game */
  grid-column: 4 / span 14;
  grid-row: 2 / span 3;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box14 { /* art thumbnail square */
  grid-column: span 3;
  grid-row: span 4;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}


.box15 { /* art text up top */
  grid-column: 2 / span 18;
  grid-row: 2 / span 2;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box16 { /* art img big */
  grid-column: 3 / span 16;
  grid-row: 2 / span 16;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box17 { /* art img big text */
  grid-column: 5 / span 12;
  grid-row: 18 / span 2;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box18 { /* oc box below 1 */
  grid-column: 2 / span 9;
  grid-row: 18 / span 2;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box19 { /* oc box below 2 */
  grid-column: 11 / span 9;
  grid-row: 18 / span 2;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box20 {  /* music player left */
  grid-column: 2 / span 9;
  grid-row: span 2;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;

}

.box21 { /* stories / timeline */
  grid-column: 10 / span 2;
  grid-row: span 3;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box22 { /* stories / notes */
  grid-column: 4 / span 14;
  grid-row: 3 / span 16;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box23 { /* music player right */
  grid-column: 11 / span 9;
  grid-row: span 2;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;

}

.box24 { /* art vertical */
  grid-column: 2 / span 13;
  grid-row: 1 / span 20;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box25 { /* art horizontal */
  grid-column: 2 / span 18;
  grid-row: 1 / span 16;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box26{ /* text vertical */
  grid-column: 15 / span 5;
  grid-row: 1 / span 20;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box27{ /* text horizontal */
  grid-column: 2 / span 18;
  grid-row: 17 / span 4;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box28{ /* box big */
  grid-column: 2 / span 18;
  grid-row: 2 / span 18;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  padding: 2dvh;
}

.box29{ /* music player embed */
  grid-column: 2 / span 18;
  grid-row: 2 / span 15;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  padding: 1dvh;
}

.box30{ /* music player text */
  grid-column: 2 / span 18;
  grid-row: 17 / span 3;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}

.box31{ /* chapters */
  grid-column: 2 / span 4;
  grid-row: 5 / span 3;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
}
/* ------------------------- invisible boxes ---------------- */

.box01 { /* row */
  grid-column: span 20;
  grid-row: span 1;
}

.box02 {  /* column */
  grid-column: span 1;
  grid-row: span 17;
}

.box03 { /* stories / timeline */
  grid-column: 1 / span 20;
  grid-row: 1 / span 1;
}

.box04 { /*whole column far left */
  grid-column: 1 / span 1;
  grid-row: 1 / span 20;
}
/* ------------------------- text ---------------- */

.maintextcentered {
  font-size: 2dvh;
  text-align: center;
  margin: 0;
  line-height: 2.5dvh;
}

.maintextcentered3 {
  font-size: 2dvh;
  text-align: center;
  margin: 0;
  line-height: 2.5dvh;
}

.maintextjustified {
  font-size: 2dvh;
  text-align: justify;
  margin: 0;
  line-height: 2.5dvh;
}

.maintextjustifiedlast {
  font-size: 2dvh;
  text-align: justify;
  text-align-last: justify;
  margin: 0;
  line-height: 2.5dvh;
}

/* ---------------------- img boxes ---------------- */

.placeholderimgingrid {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgingrid {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.imgingrid2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------⮜-⮞---- next page buttons ---------------- */

a {color: #B8B4B4; text-decoration: none}

.pagebuttonleft {
  grid-column: 7 / span 3;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagebuttonmiddle {
  grid-column: 10 / span 2;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagebuttonright {
  grid-column: 12 / span 3;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagebuttonmiddlebig {
  grid-column: 9 / span 4;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons5 { /* ocs names */
  grid-column: span 4;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2dvh;
}

.chapteroverview { /*  */
  grid-column: 1 / span 4;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2dvh;
}

.nextpage {
  font-size: 1.5dvh;
}