.stories_box1 /* chapter overview header */ {
  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;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box2 /* chapter 1 in overview */ {
  grid-column: 2 / span 6;
  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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box3 /* chapter 2 in overview */ {
  grid-column: 8 / span 6;
  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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box4 /* chapter 3 in overview */ {
  grid-column: 14 / span 6;
  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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box5 /* chapter 4 in overview */ {
  grid-column: 2 / span 6;
  grid-row: 8 / 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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box6 /* chapter 5 in overview */ {
  grid-column: 8 / span 6;
  grid-row: 8 / 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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box7 /* chapter 6 in overview */ {
  grid-column: 14 / span 6;
  grid-row: 8 / 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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box8 /* chapter 7 in overview */ {
  grid-column: 2 / span 6;
  grid-row: 11 / 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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box9 /* chapter 8 in overview */ {
  grid-column: 8 / span 6;
  grid-row: 11 / 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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box10 /* chapter 9 in overview */ {
  grid-column: 14 / span 6;
  grid-row: 11 / 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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box11 /* chapter 10 in overview */ {
  grid-column: 2 / span 6;
  grid-row: 14 / 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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box12 /* chapter 11 in overview */ {
  grid-column: 8 / span 6;
  grid-row: 14 / 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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box13 /* chapter 12 in overview */ {
  grid-column: 14 / span 6;
  grid-row: 14 / 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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box14 /* chapter 13 in overview */ {
  grid-column: 2 / span 6;
  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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box15 /* chapter 14 in overview */ {
  grid-column: 8 / span 6;
  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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box16 /* chapter 15 in overview */ {
  grid-column: 14 / span 6;
  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;
  padding: 1dvh;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stories_box17 /* chapter header in chapter */ {
  grid-column: 3 / span 16;
  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;
  padding: 1dvh;
  font-size: 2dvh;
}

.header {
  margin: 1dvh;
  font-size: 3dvh;
}


.stories_box18 /* chapter text under header in chapter */ {
  grid-column: 3 / span 16;
  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;
  padding: 3.5dvh 2.5dvh 2.5dvh 2.5dvh;
  font-size: 2dvh;
}

.stories_box19 /* chapter text big in chapter */ {
  grid-column: 3 / span 16;
  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 2.5dvh 2.5dvh 2.5dvh;
  font-size: 2dvh;
}

.back_overview {
  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;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pageback {
  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;
}

.pagenumber {
  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;
}

.pagenext {
  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;
}

.stories_box20 {
  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;
  font-size: 2dvh;
  padding: 2dvh;
}

.stories_box21 {
  grid-column: 3 / span 7;
  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;
  font-size: 2dvh;
  padding: 2dvh;
}

.stories_box22 {
  grid-column: 10 / span 2;
  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;
  font-size: 2dvh;
  padding: 2dvh;
}

.stories_box23 {
  grid-column: 12 / span 7;
  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;
  font-size: 2dvh;
  padding: 2dvh;
}
/* ------------------------------------------ */



.box21 {
  padding: 1dvh 0.5dvh 3.5dvh 0.5dvh;
}

.box21a { /* timeline */
  grid-column: 12 /span 8;
  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;
  padding: 1dvh;
  text-align: left;
}
.box21b { /* timeline */
  grid-column: 12 /span 8;
  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;
  padding: 1dvh;
  text-align: left;
}
.box21c { /* timeline */
  grid-column: 12 /span 8;
  grid-row: 8 /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;
  padding: 1dvh;
  text-align: left;
}
.box21d { /* timeline */
  grid-column: 12 /span 8;
  grid-row: 11 /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;
  padding: 1dvh;
  text-align: left;
}
.box21e { /* timeline */
  grid-column: 12 /span 8;
  grid-row: 14 /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;
  padding: 1dvh;
  text-align: left;
}
.box21f { /* timeline */
  grid-column: 12 /span 8;
  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;
  padding: 1dvh;
  text-align: right;
}

.box21g { /* timeline */
  grid-column: 2 /span 8;
  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;
  padding: 1dvh;
  text-align: right;
}

.box21h { /* timeline */
  grid-column: 2 /span 8;
  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;
  padding: 1dvh;
  text-align: right;
}

.box21i { /* timeline */
  grid-column: 2 /span 8;
  grid-row: 8 /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;
  padding: 1dvh;
  text-align: right;
}

.box21j { /* timeline */
  grid-column: 2 /span 8;
  grid-row: 11 /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;
  padding: 1dvh;
  text-align: right;
}

.box21k { /* timeline */
  grid-column: 2 /span 8;
  grid-row: 14 /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;
  padding: 1dvh;
  text-align: right;
}

.box21l { /* timeline */
  grid-column: 2 /span 8;
  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;
  padding: 1dvh;
  text-align: right;
}