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.3dvh;
}

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

.bottombarbox {/* bottom bar overlay */
  width: 100%;
  height: 5.6dvh;
  margin-top: 2.7dvh;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 1dvh;
  padding: 1dvh;
  color: white;
}

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

.box1 { /* falschfahrer text left */
  grid-column: 2 / span 14;
  grid-row: 2 / span 18;
  background-color: darkred;
  padding: 5dvh;
}

.box3 { /* falschfahrer text right */
  grid-column: 6 / span 14;
  grid-row: 2 / span 18;
  background-color: darkred;
  padding: 5dvh;
}

.box5 { /* home - about */
  grid-column: 2 / span 10;
  grid-row: 5 / span 12;
  background-color: darkred;
  padding: 5dvh;
}

.box6 { /* home - status - news */
  grid-column: 5 / span 12;
  grid-row: 3 / span 16;
  background-color: darkred;
  padding: 5dvh;
}

.box7 { /* ocs - overview - top bar */
  grid-column: 2 / span 18;
  grid-row: 2 / span 3;
  background-color: darkred;
  padding: 5dvh;
}

.box10 { /* ocs - heathens - the band - lower half text box */
  grid-column: 4 / span 14;
  grid-row: 12 / span 7;
  background-color: darkred;
  padding: 5dvh;
}

.box11  { /* ocs - heathens - the band - text 2 */
  grid-column: 4 / span 14;
  grid-row: 4 / span 14;
  background-color: darkred;
  padding: 5dvh;
}

.box12  { /* no im not a human game */
  grid-column: 2 / span 18;
  grid-row: 6 / span 13;
  background-color: darkred;
  padding: 5dvh;
}

.box13 { /* text box above no im not a human game */
  grid-column: 4 / span 14;
  grid-row: 2 / span 3;
  background-color: darkred;
  padding: 5dvh;
}

.box14 { /* art frame */
  grid-column: span 4;
  grid-row: span 4;
  background-color: darkred;
  padding: 5dvh;
}

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

.box2 { /* falschfahrer img right */
  grid-column: 16 / span 4;
  grid-row: 2 / span 18;
  background-color: darkred;
  padding: 5dvh;
}

.box4 { /* falschfahrer img left */
  grid-column: 2 / span 4;
  grid-row: 2 / span 18;
  background-color: darkred;
  padding: 5dvh;
}

.box9 { /* ocs - heathens - the band - upper box */
  grid-column: 2 / span 18;
  grid-row: 2 / span 9;
  background-color: darkred;
  padding: 5dvh;
}

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

a {color: inherit}

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


.nextpagebutton1 {
  box-sizing: border-box;
  margin: auto;
  display: inline-block;
  height: 3.2dvh;
  width: 15dvh;
  margin: 0.2dvh 2dvh 0.2dvh 2dvh;
  vertical-align: top;

  background-color: #464143;
  border-top: 0.2dvh solid #655E5E;
  border-left: 0.2dvh solid #655E5E;
  border-right: 0.2dvh solid #191819;
  border-bottom: 0.2dvh solid #191819;
}

.nextpagebutton2 {
  box-sizing: border-box;
  margin: auto;
  display: inline-block;
  height: 3.2dvh;
  width: 10dvh;
  margin: 0.2dvh;
  vertical-align: top;

  background-color: #464143;
  border-top: 0.2dvh solid #655E5E;
  border-left: 0.2dvh solid #655E5E;
  border-right: 0.2dvh solid #191819;
  border-bottom: 0.2dvh solid #191819;
}

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

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

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

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

.nextpage {
  color: white;
  text-decoration: none;
  font-size: 1.5dvh;
}