.box31a {
	display: flex;
}


.box1 { /* story header */
padding: 1.5dvh;
font-size: 2dvh;
margin: 0;
}

.box2 { /* story text under header */
padding: 1.5dvh 2dvh 1dvh 2dvh;
font-size: 2dvh;
margin: 0;
}

.box3 { /* story text */
padding: 2.5dvh 2dvh 1dvh 2dvh;
font-size: 2dvh;
margin: 0;
}

.box4 { /* story picture */
padding: 1dvh;
margin: 0;
}

.header1 {
  font-size: 3dvh;
  margin: 0;
}

.header2 {
  font-size: 2.5dvh;
  margin: 0;
}


.box22 {
  padding: 2dvh;
}

.years {
  line-height: 2dvh;
  margin: 0;
  padding-bottom: dvh;
  color: white;
  font-size: 2.5dvh;
}

.seasons {
  line-height: 2dvh;
  margin: 0;
  padding-bottom: 3.5dvh;
  color: #B8B4B4;
  font-size: 2dvh;
}

.description {
  font-size: 2dvh;
  line-height: 2dvh;
  color: white;
}

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

.box15 {
  padding: 2dvh;
  font-size: 2dvh;
}

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

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

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

.header {
  font-size: 2.5dvh;
  margin: 0;
}

.header2 {
  font-size: 2.5dvh;
  margin: 0 0 1dvh 0;
}

.text {
  font-size: 2dvh;
  margin: 0;
}




.box25a { /* art horizontal */
  grid-column: 2 / span 18;
  grid-row: 2 / 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;
}

.box27a { /* text horizontal */
  grid-column: 2 / span 18;
  grid-row: 15 / span 5;
  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: 3dvh;
}



.inhermind {
  margin-top: 1.5dvh;
  width: 90dvh;
  height: 53.5dvh;
}