body {
    background-color: crimson;
}
header {
    text-align: center;
}
section {
    margin: auto;
    border: 4px solid silver;
    width: 80%;
    height: 450px;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #eaa221;
    max-width: 1050px;
}
figure {
    position: relative;
    width:300px;
    height: 200px;
}
figcaption {
    width: 300px;
}
.first {
    position: relative;
    padding-top: 10px;
}
.second {
    position: relative;
    float: right;
    bottom: 230px;
}
article {
    position: relative;
    width: 300px;
    height: 300px;
    border: 4px solid black;
    left: 27%;
    bottom: 49%;
    background-color: rgb(189, 189, 116);
    padding: 8px;
}
.article2 {
    position: relative;
    width: 300px;
    height: 300px;
    border: 4px solid black;
    background-color: rgb(189, 189, 116);
    padding: 8px;
    top: 15%;
    left: 50%;
}
.article3 {
    position: relative;
    width: 300px;
    height: 300px;
    bottom: 60%;
    left: 10%;
}
.grid-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 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;
    padding: 20px;
    position: relative;
    bottom: 123%;
    left: 62%;
    border: 4px solid black;
    max-width: 320px;
    background-color: rgb(189, 189, 116);
}
.monstername {
    grid-column: 1 / span 30;
    grid-row: 1 / span 2;
    font-size: 18px;
    font-weight: bolder;
    float: top;
}
.monstertype {
    grid-column: 1 / span 30;
    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 10;
    grid-row: 5;
    font-size: 10px;
}
.hitpoints {
    grid-column: 1 / span 10;
    grid-row: 6;
    font-size: 10px;
}
.hitpointsnumber { 
    grid-column: 12 / span 10;
    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 18;
    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: 12 / span 2;
    grid-row: 10 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameINT {
    grid-column: 17 / span 2;
    grid-row: 10 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameWIS {
    grid-column: 22 / span 2;
    grid-row: 10 / span 2;
    font-size: 10px;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameCHA {
    grid-column: 27 / 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: 12 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberINT {
    grid-column: 17 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberWIS {
    grid-column: 22 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.stattypenumberCHA {
    grid-column: 27 / span 2;
    grid-row: 11 / span 1;
    font-size: 10px;
    text-align: justify;
}
.line {
    grid-column: 1 / span 30;
    grid-row: 12 / span 1;
    border-bottom: 3px solid brown;
}
.damageresistance {
    grid-column: 1 / span 14;
    grid-row: 13 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.damageresistancenumber {
    grid-column: 16 / span 2;
    grid-row: 13 / span 1;
    font-size: 10px;
}
.damageimunities {
    grid-column: 1 / span 14;
    grid-row: 14 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.damageimunitiesnumber {
    grid-column: 16 / span 8;
    grid-row: 14 / span 1;
    font-size: 10px;
}
.conditionedImmunities {
    grid-column: 1 / span 14;
    grid-row: 15 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.conditionedImmunitiesNumber {
    grid-column: 16 / span 14;
    grid-row: 15 / span 1;
    font-size: 10px;
}
.senses {
    grid-column: 1 / span 14;
    grid-row: 16 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.sensesnumber {
    grid-column: 16 / span 8;
    grid-row: 16 / span 1;
    font-size: 10px;
}
.languages {
    grid-column: 1 / span 14;
    grid-row: 17 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.languagesnumber {
    grid-column: 16 / span 8;
    grid-row: 17 / span 1;
    font-size: 10px;
}
.challenge {
    grid-column: 1 / span 14;
    grid-row: 18 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.challengenumber {
    grid-column: 16 / span 8;
    grid-row: 18 / span 1;
    font-size: 10px;
}
.line1 {
    grid-column: 1 / span 30;
    grid-row: 19 / span 1;
    border-top: 3px solid brown;
}
.actions {
    grid-column:1 / span 3;
    grid-row: 20 / span 1;
    font-size: 10px;
    font-weight: bold;
}
.multiattack {
    grid-column: 5 / span 8;
    grid-row: 20 / span 1;
    font-size: 8px;
    font-style: italic;
}
.explanation {
    grid-column: 15 / span 15;
    grid-row: 20 / span 1;
    font-size: 8px;
}
.bite {
    grid-column: 1 / span 2;
    grid-row: 23 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.meleeweaponattack {
    grid-column: 5 / span 8;
    grid-row: 23 / span 2;
    font-size: 8px;
    font-style: italic;
}
.explanation2 {
    grid-column: 15 / span 15;
    grid-row: 23 / span 2;
    font-size: 8px;
}
.claws {
    grid-column: 1 / span 2;
    grid-row: 25 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.meleeweaponattack2 {
    grid-column: 5 / span 8;
    grid-row: 25 / span 2;
    font-size: 8px;
    font-style: italic;
}
.last1 {
    grid-column: 15 / span 15;
    grid-row: 25 / span 2;
    font-size: 8px;
}
.rejuvenation {
    grid-column: 1 / span 2;
    grid-row: 28 / span 2;
    font-size: 10px;
    font-weight: bold;
}
.explanation3 {
    grid-column: 8 / span 22;
    grid-row: 27 / span 2;
    font-size: 7px;
}
.previous, .next {
    width: 6em;
    height: auto;
    margin: auto;
}
  footer {
    text-align: right;
    font-size: 8px; 
 }