body {
    background-color: crimson;
}
header {
    text-align: center;
    font-size: 40px;
    font-weight: bolder;
}
.monsterSection {
    position: relative;
    margin: auto;
    border: 4px solid silver;
    width: 80%;
    max-width: 1100px;
    height: 450px;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #eaa221;
}
.storyBox {
    position: absolute;
    height: 380px;
    width: 300px;
    border: 4px solid black;
    margin-top: 20px;
    padding: 10px;
}
.monsterpic1 {
    position: absolute;
    width: 300px;
    margin-top: 20px;
    left: 38%;
}
.monsterpic2 {
    position: absolute;
    width: 300px;
    margin-top: 10px;
    left: 38%;
}
.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;
    position: absolute;
    left: 70%;
    border: 4px solid black;
    max-width: 250px;
    background-color: rgb(189, 189, 116);
    margin-top: 10px;
}
.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: 10 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameDEX {
    grid-column: 7 / span 2;
    grid-row: 10 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameCON {
    grid-column: 11 / span 2;
    grid-row: 10 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameINT {
    grid-column: 15 / span 2;
    grid-row: 10 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameWIS {
    grid-column: 19 / span 2;
    grid-row: 10 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameCHA {
    grid-column: 21 / span 2;
    grid-row: 10 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenumberSTR {
    grid-column: 3 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberDEX {
    grid-column: 7 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberCON {
    grid-column: 11 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberINT {
    grid-column: 15 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberWIS {
    grid-column: 19 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberCHA {
    grid-column: 21 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.line {
    grid-column: 1 / span 25;
    grid-row: 12 / span 1;
    border-bottom: 3px solid brown;
}
.damageresistance {
    grid-column: 1 / span 14;
    grid-row: 14 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.damageresistancenumber {
    grid-column: 16 / span 2;
    grid-row: 14 / span 1;
    font-size: 10px;
}
.damageimunities {
    grid-column: 1 / span 14;
    grid-row: 15 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.damageimunitiesnumber {
    grid-column: 16 / span 8;
    grid-row: 15 / span 1;
    font-size: 10px;
}
.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: 10px;
}
.senses {
    grid-column: 1 / span 14;
    grid-row: 17 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.sensesnumber {
    grid-column: 16 / span 9;
    grid-row: 17 / span 1;
    font-size: 10px;
}
.languages {
    grid-column: 1 / span 14;
    grid-row: 20 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.languagesnumber {
    grid-column: 16 / span 8;
    grid-row: 20 / span 1;
    font-size: 10px;
}
.challenge {
    grid-column: 1 / span 14;
    grid-row: 21 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.challengenumber {
    grid-column: 16 / span 8;
    grid-row: 21 / span 1;
    font-size: 10px;
}
.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: 26 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.meleeweaponattack {
    grid-column: 5 / span 8;
    grid-row: 26 / span 2;
    font-size: 8px;
    font-style: italic;
}
.explanation2 {
    grid-column: 15 / span 10;
    grid-row: 26 / span 2;
    font-size: 8px;
}
.claws {
    grid-column: 1 / span 2;
    grid-row: 29 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.meleeweaponattack2 {
    grid-column: 5 / span 8;
    grid-row: 29 / span 2;
    font-size: 8px;
    font-style: italic;
}
.last1 {
    grid-column: 15 / span 10;
    grid-row: 29 / span 3;
    font-size: 8px;
}
.rejuvenation {
    grid-column: 1 / span 2;
    grid-row: 33 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.explanation3 {
    grid-column: 8 / span 17;
    grid-row: 32 / span 2;
    font-size: 7px;
}
.rejuvenation2 {
    grid-column: 1 / span 2;
    grid-row: 36 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.explanation4 {
    grid-column: 8 / span 17;
    grid-row: 36 / span 2;
    font-size: 7px;
}
.article2 {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 4px solid black;
    background-color: rgb(189, 189, 116);
    padding: 8px;
    left: 65%;
    bottom: 10%;
}
.article3 {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 10%;
    bottom: 5%;
}
.thirdBox {
    position: absolute;
    width: 300px;
    height: 380px;
    border: 4px solid black;
    right: 2%;
    margin-top: 20px;
}
.thirdBoxPic {
    position: absolute;
    width: 260px;
    height: 180px;
    float: top;
    margin: 15px;
}
.thirdBoxCaption {
    position: absolute;
    width: 240px;
    height: 130px;
    border: 2px solid black;
    bottom: 4%;
    margin-left: 15px;
    padding: 10px;
}
.previous, .next {
    width: 6em;
    height: auto;
    margin: auto;
}
  footer {
    text-align: right;
    font-size: 8px; 
 }