body {
    background-color: crimson;
}
header {
    text-align: center;
    font-size: 40px;
    font-weight: bolder;
}
h2, h4 {
    text-align: center;
}
.firstSection {
    position: relative;
    width: 95%;
    max-width: 1500px;
    margin: 0 auto;
    height: 4600px;
    border: 5px solid silver;
}
.secondSection {
    position: relative;
    width: 95%;
    height: 650px;
    margin: 20px;
    border: 5px solid silver;
    background-color: #eaa221;
}
.thirdSection {
    position: relative;
    width: 95%;
    height: 620px;
    margin: 20px;
    border: 5px solid silver;
    background-color: #eaa221;
}
.fourthSection {
    position: relative;
    width: 95%;
    height: 1000px;
    margin:20px;
    border: 5px solid silver;
    background-color: #eaa221; 
}
.fifthSection {
    position: relative;
    width: 95%;
    height: 1500px;
    margin:20px;
    border: 5px solid silver;
    background-color: #eaa221; 
}
.storyBox {
    position: absolute;
    height: 470px;
    width: 300px;
    border: 4px solid black;
    margin: 20px;
    padding:  10px 10px;
}
.storyBox1 {
    position: absolute;
    height: 470px;
    width: 300px;
    border: 4px solid black;
    left: 33%;
    margin: 20px;
    padding: 10px 10px;
}
.storyBox2 {
    position: absolute;
    height: 460px;
    width: 300px;
    border: 4px solid black;
    left: 66%;
    margin: 20px;
    padding: 10px 10px;
}
.storyBox3 {
    position: absolute;
    height: 522px;
    width: 300px;
    border: 4px solid black;
    left: 66%;
    margin: 20px;
    padding: 10px 10px;
}
.picBox {
    position: absolute;
    height: 490px;
    width: 300px;
    border: 3px solid fuchsia;
    left: 2%;
    margin: 20px;
    text-align: center;
}
.picBox1 {
    position: absolute;
    height: 490px;
    width: 300px;
    border: 3px solid fuchsia;
    left: 33%;
    margin: 20px;
}
.picBox2 {
    position: absolute;
    height: 490px;
    width: 300px;
    border: 3px solid fuchsia;
    left: 66.6%;
    margin: 20px;
}
.picBoxa {
    position: absolute;
    height: 219px;
    width: 300px;
    border: 3px solid fuchsia;
    left: .3%;
    margin: 20px;
    text-align: center;
}
.picBox1a {
    position: absolute;
    height: 250px;
    width: 300px;
    border: 3px solid fuchsia;
    left: 31.5%;
    margin: 20px;
}
.picBox2a {
    position: absolute;
    height: 246px;
    width: 300px;
    border: 3px solid fuchsia;
    left: 64.7%;
    margin: 20px;
}
.picBox3a {
    position: absolute;
    height: 329px;
    width: 400px;
    border: 3px solid fuchsia;
    left: 20%;
    top: 990px;
}
.alpha {
    position: absolute;
    height: 20px;
    width: 300px;
    text-align: center;
    left: 2%;
    top: 290px;
}
.beta {
    position: absolute;
    height: 20px;
    width: 300px;
    text-align: center;
    left: 33.3%;
    top: 320px;
}
.gamma {
    position: absolute;
    height: 20px;
    width: 300px;
    text-align: center;
    left: 66.6%;
    top: 315px;
}
.delta {
    position: absolute;
    height: 20px;
    width: 400px;
    text-align: center;
    left: 20%;
    top: 1050px;
}
.dungeonBoxOuter {
    position: relative;
    transform: scale(.25);
    bottom: 500px;
    left: 120px;
}
.dungeon {
    position: relative;
    transform: scale(.25);
    top: -2600px;
    left: 400px;
    z-index: 1;
}
.treasure {
    position: absolute;
    width: 300px;
    height: 470px;
    border: 4px solid silver;
    left: 3%;
    top:15%;
}
.treasure1 {
    position: absolute;
    width: 300px;
    height: 470px;
    border: 4px solid silver;
    left: calc(3% + 304px);
    top:15%;
}
.treasure2 {
    position: absolute;
    width: 300px;
    height: 470px;
    border: 4px solid silver;
    left: 75%;
    top:15%;
}
.treasure3 {
    position: absolute;
    width: 300px;
    height: 470px;
    border: 4px solid silver;
    left: calc(75% - 304px);
    top: 15%;
}
.room3Title {
    position: absolute;
    width: 600px;
    height: 12px;
    left: calc(75% - 304px);
}
.room5Title {
    position: absolute;
    width: 600px;
    height: 8px;
    left: 3%;
}
.little {
    font-size: 8px;
}
.previous, .next {
    width: 6em;
    height: auto;
    margin: auto;
}
  footer {
    text-align: right;
    font-size: 8px; 
 }
 .statBox-container {
    display: grid;
    grid-template-columns: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px
                           10px 10px 10px 10px 10px 10px 10px 10px 10px 10px
                           10px 10px 10px 10px 10px;
                           
    grid-template-rows: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px
                        10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 
                        10px 10px 10px 10px 10px 10px 10px 10px 10px 10px
                        10px 10px 10px 10px 10px 10px 10px 10px;
    padding: 20px;
    border: 4px solid black;
    max-width: 250px;
    background-color: rgb(189, 189, 116);
    margin-top: 10px;
}
.one {
    position: absolute;
    left:2%;
    top: 380px;
}
.two {
    position: absolute;
    left:33.3%;
    top: 380px;
}
.three {
    position: absolute;
    left:66.6%;
    top: 380px;
}
.four {
    position: absolute;
    left:60%;
    top: 980px;
}
.monstername {
    grid-column: 1 / span 25;
    grid-row: 1 / span 2;
    font-size: 18px;
    font-weight: bolder;
    float: top;
}
.monstertype {
    grid-column: 1 / span 25;
    grid-row: 3 / span 2;
    font-size: 9px;
    font-style: italic;
    border-bottom: 3px solid brown;
}
.armorclass {
    grid-column: 1 / span 10;
    grid-row: 5;
    font-size: 10px;
}
.armorclassnumber {
    grid-column: 12 / span 13;
    grid-row: 5;
    font-size: 10px;
}
.hitpoints {
    grid-column: 1 / span 10;
    grid-row: 6;
    font-size: 10px;
}
.hitpointsnumber { 
    grid-column: 12 / span 13;
    grid-row: 6;
    font-size: 10px;
}
.speed {
    grid-column: 1 / span 12;
    grid-row: 7 / span 2;
    font-size: 10px;
    border-bottom: 3px solid brown;
}
.speednumber {
    grid-column: 12 / span 13;
    grid-row: 7 / span 2;
    font-size: 10px;
    border-bottom: 3px solid brown;
}
.stattypenameSTR {
    grid-column: 3 / span 2;
    grid-row: 9 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameDEX {
    grid-column: 7 / span 2;
    grid-row: 9 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameCON {
    grid-column: 11 / span 2;
    grid-row: 9 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameINT {
    grid-column: 15 / span 2;
    grid-row: 9 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameWIS {
    grid-column: 18 / span 2;
    grid-row: 9 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameCHA {
    grid-column: 21 / span 2;
    grid-row: 9 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenumberSTR {
    grid-column: 3 / span 2;
    grid-row: 10 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberDEX {
    grid-column: 7 / span 2;
    grid-row: 10 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberCON {
    grid-column: 11 / span 2;
    grid-row: 10 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberINT {
    grid-column: 15 / span 2;
    grid-row: 10 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberWIS {
    grid-column: 18 / span 2;
    grid-row: 10 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberCHA {
    grid-column: 21 / span 2;
    grid-row: 10 / span 1;
    font-size: 10px;
    text-align: justify;
}
.line {
    grid-column: 1 / span 25;
    grid-row: 11 / span 1;
    border-bottom: 3px solid brown;
}
.damageresistance {
    grid-column: 1 / span 14;
    grid-row: 12 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.damageresistancenumber {
    grid-column: 16 / span 8;
    grid-row: 12 / span 1;
    font-size: 8px;
}
.damageimunities {
    grid-column: 1 / span 14;
    grid-row: 13 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.damageimunitiesnumber {
    grid-column: 16 / span 8;
    grid-row: 13 / span 1;
    font-size: 7px;
}
.conditionedImmunities {
    grid-column: 1 / span 14;
    grid-row: 16 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.conditionedImmunitiesNumber {
    grid-column: 16 / span 9;
    grid-row: 16 / span 1;
    font-size: 8px;
}
.senses {
    grid-column: 1 / span 14;
    grid-row: 19 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.sensesnumber {
    grid-column: 16 / span 9;
    grid-row: 19 / span 1;
    font-size: 8px;
}
.languages {
    grid-column: 1 / span 14;
    grid-row:20 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.languagesnumber {
    grid-column: 16 / span 9;
    grid-row: 20 / span 1;
    font-size: 8px;
}
.challenge {
    grid-column: 1 / span 14;
    grid-row: 22 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.challengenumber {
    grid-column: 16 / span 8;
    grid-row: 22 / span 1;
    font-size: 8px;
}
.line1 {
    grid-column: 1 / span 25;
    grid-row: 23 / span 1;
    border-top: 3px solid brown;

}
.actions {
    grid-column:1 / span 3;
    grid-row: 24 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.multiattack {
    grid-column: 5 / span 8;
    grid-row: 24 / span 1;
    font-size: 8px;
    font-style: italic;
}
.explanation {
    grid-column: 15 / span 10;
    grid-row: 24 / span 1;
    font-size: 8px;
}
.bite {
    grid-column: 1 / span 2;
    grid-row: 27 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.meleeweaponattack {
    grid-column: 5 / span 8;
    grid-row: 27 / span 2;
    font-size: 8px;
    font-style: italic;
}
.explanation2 {
    grid-column: 15 / span 10;
    grid-row: 27 / span 2;
    font-size: 8px;
}
.claws {
    grid-column: 1 / span 4;
    grid-row: 30 / span 2;
    font-size: 8px;
    font-weight: bold;
    border-top: 3px solid brown;
}
.meleeweaponattack2 {
    grid-column: 5 / span 10;
    grid-row: 30 / span 2;
    font-size: 8px;
    font-style: italic;
    border-top: 3px solid brown;
}
.last1 {
    grid-column: 15 / span 12;
    grid-row: 30 / span 3;
    font-size: 8px;
    border-top: 3px solid brown;
}
.rejuvenation {
    grid-column: 1 / span 2;
    grid-row: 31 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.explanation3 {
    grid-column: 8 / span 17;
    grid-row: 31 / span 2;
    font-size: 7px;
}
.rejuvenation2 {
    grid-column: 1 / span 2;
    grid-row: 34 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.explanation4 {
    grid-column: 8 / span 17;
    grid-row: 34 / span 2;
    font-size: 7px;
}
.rejuvenation3 {
    grid-column: 1 / span 2;
    grid-row: 37 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.explanation5 {
    grid-column: 8 / span 17;
    grid-row: 37 / span 2;
    font-size: 7px;
}