body {
    background-color: rgb(189,189,114);
}
h1 {
    text-align: center;
    font-family: cursive;
    font-size: 3.5em;
}
h5 {
    text-align: center;
    font-family: cursive;
}
a {
    text-decoration: none;
    color: black;
}
.forest {
    position: relative;
    left: 30%;
}
.forestTitle {
    position: relative;
    width: 36em;
    height: 11em;
    padding: .5em .8em;
    border: .2em solid red;
}
.forestTitle1 {
    position: relative;
    width: 35.5em;
    height: 13.7em;
    padding: .5em .8em;
    border: .2em solid red;
}
.forestTitle2 {
    position: relative;
    width: 35.5em;
    height: 20em;
    padding: .5em .8em;
    border: .2em solid red;
}
.forestTitle3 {
    position: relative;
    width: 35.5em;
    height: 40em;
    padding: .5em .8em;
    border: .2em solid red;
}
.small {
    display: inline;
    font-size: .6em;
}
.center {
    position: relative;
    left: 14.5%;
}
.center1 {
    position: relative;
    left: 11%;
}
.center2 {
    position: relative;
    left: 8%;
}
.map {
    position: relative;
    background-image: url('Yellow Meadow Village.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    max-width: 36em;
    height: 48em;
    border: .3em solid black;
    left: 30%;
    display: grid;
    grid-template-columns: 1em 1em 1em 1em 1em 1em
                           1em 1em 1em 1em 1em 1em
                           1em 1em 1em 1em 1em 1em
                           1em 1em 1em 1em 1em 1em
                           1em 1em 1em 1em 1em 1em
                           1em 1em 1em 1em 1em 1em;
    grid-template-rows: 1em 1em 1em 1em 1em 1em
                        1em 1em 1em 1em 1em 1em
                        1em 1em 1em 1em 1em 1em
                        1em 1em 1em 1em 1em 1em
                        1em 1em 1em 1em 1em 1em
                        1em 1em 1em 1em 1em 1em
                        1em 1em 1em 1em 1em 1em
                        1em 1em 1em 1em 1em 1em;
}
.brickHouse {
    cursor: pointer;
}
.brickHouse:hover .appear1 {
    display: block;
}
.brickHouse2 {
    cursor: pointer;
}
.brickHouse2:hover .appear2 {
    display: block;
}
.brickHouse3 {
    cursor: pointer;
}
.brickHouse3:hover .appear3 {
    display: block;
}
.longHouse:hover .appear {
    display: block;
}
.longHouse {
    cursor: pointer;
}
.well {
    cursor: pointer;
}
.well:hover .appear4 {
    display: block;
}
.barn {
    cursor: pointer;
}
.barn:hover .appear5 {
    display: block;
}
.smallHouse {
    cursor: pointer;
}
.smallHouse:hover .appear6 {
    display: block;
}
.halflingHole {
    cursor: pointer;
}
.halflingHole:hover .appear7 {
    display: block;
}
.gundaher {
    cursor: pointer;
}
.gundaher:hover .appear8 {
    display: block;
}
.watchTower {
    cursor: pointer;
}
.watchTower:hover .appear9 {
    display: block;
}
.peasantHouse {
    cursor: pointer;
}
.peasantHouse:hover .appear10 {
    display: block;
}
.blackSmith {
    cursor: pointer;
}
.blackSmith:hover .appear11 {
    display: block;
}
.temple {
    cursor: pointer;
}
.temple:hover .appear12 {
    display: block;
}
.appear {
    display: none;
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('villageHouse.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: rgb(0, 225, 255);
}
.appear2 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('brickhouse2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: rgb(0, 225, 255);
}
.appear3 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('brickhouse3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: rgb(0, 225, 255);
}
.appear4 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('well.jpeg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: rgb(0, 225, 255);
}
.appear5 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('Barn.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.appear6 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('smallHouse.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: rgb(0, 225, 255);
}
.appear7 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('halflingHole.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: rgb(0, 225, 255);
}
.appear8 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('farmHouseBrick.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: black;
}
.appear9 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('watchTower.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.appear10 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('Peasant_house.png');
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}
.appear11 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('blackSmith.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.appear12 {
    display: none;  
    position: absolute;
    width: 16em;
    height: 8em;
    background-image: url('moradinTemple.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.previous, .next {
    width: 6em;
    height: auto;
    margin: auto;
}
footer {
    text-align: right;
    font-size: .5em; 
 }
#one {
    grid-column: 9 / span 1;
    grid-row: 16 / span 1;
}
#two {
    grid-column: 10 / span 1;
    grid-row: 14 / span 1;
}
#three {
    grid-column: 11 / span 1;
    grid-row: 14 / span 1;
}
#four {
    grid-column: 12 / span 1;
    grid-row: 13 / span 1;
}
#five {
    grid-column: 13 / span 1;
    grid-row: 12 / span 1;
}
#six {
    grid-column: 14 / span 1;
    grid-row: 12 / span 1;
}
#seven {
    grid-column: 15 / span 1;
    grid-row: 11 / span 1;
}
#eight {
    grid-column: 16 / span 1;
    grid-row: 11 / span 1;
}
#nine {
    grid-column: 17 / span 1;
    grid-row: 11 / span 1;
}
#ten {
    grid-column: 19 / span 1;
    grid-row: 11 / span 1;
}
#eleven {
    grid-column: 20 / span 1;
    grid-row: 11 / span 1;
}
#twelve {
    grid-column: 19 / span 1;
    grid-row: 10 / span 1;
}
#thirteen {
    grid-column: 19 / span 1;
    grid-row: 9 / span 1;
}
#fifteen {
    grid-column: 19 / span 1;
    grid-row: 8 / span 1;
}
#sixteen {
    grid-column: 20 / span 1;
    grid-row: 8 / span 1;
}
#seventeen {
    grid-column: 21 / span 1;
    grid-row: 9 / span 1;
}
#eighteen {
    grid-column: 21 / span 1;
    grid-row: 10 / span 1;
}
#nineteen {
    grid-column: 22 / span 1;
    grid-row: 11 / span 1;
}
#twenty {
    grid-column: 23 / span 1;
    grid-row: 12 / span 1;
}
#twentyTwo {
    grid-column: 24 / span 1;
    grid-row: 12 / span 1;
}
#twentyThree {
    grid-column: 25 / span 1;
    grid-row: 13 / span 1;
}
#twentyFour {
    grid-column: 26 / span 1;
    grid-row: 14 / span 1;
}
#twentySix {
    grid-column: 27 / span 1;
    grid-row: 15 / span 1;
}
#twentySeven {
    grid-column: 29 / span 1;
    grid-row: 17 / span 1;
}
#twentyEight {
    grid-column: 8 / span 1;
    grid-row: 21 / span 1;
}
#twentyNine {
    grid-column: 30 / span 1;
    grid-row: 19 / span 1;
}
#thirty {
    grid-column: 31 / span 1;
    grid-row: 21 / span 1;
}
#thirtyOne {
    grid-column: 8 / span 1;
    grid-row: 26 / span 1;
}
#thirtyTwo {
    grid-column: 31 / span 1;
    grid-row: 23 / span 1;
}
#thirtyThree {
    grid-column: 31 / span 1;
    grid-row: 25 / span 1;
}
#thirtyFour {
    grid-column: 13 / span 1;
    grid-row: 32 / span 1;
}
#thirtyFive {
    grid-column: 31 / span 1;
    grid-row: 27 / span 1;
}
#thirtySix {
    grid-column: 30 / span 1;
    grid-row: 28 / span 1;
}
#thirtySeven {
    grid-column: 27 / span 1;
    grid-row: 29 / span 1;
}
#thirtyEight {
    grid-column: 29 / span 1;
    grid-row: 30 / span 1;
}
#thirtyNine {
    grid-column: 27 / span 1;
    grid-row: 32 / span 1;
}
#forty {
    grid-column: 25 / span 1;
    grid-row: 31 / span 1;
}
#fortyOne {
    grid-column: 26 / span 1;
    grid-row: 34 / span 1;
}
#fortyTwo {
    grid-column: 24 / span 1;
    grid-row: 35 / span 1;
}
#fortyThree {
    grid-column: 22 / span 1;
    grid-row: 33 / span 1;
}
#fortyFour {
    grid-column: 21 / span 1;
    grid-row: 36 / span 1;
}
#fortyFive {
    grid-column: 16 / span 1;
    grid-row: 36 / span 1;
}
#fortySix {
    grid-column: 12 / span 1;
    grid-row: 34 / span 1;
}
#fortySeven {
    grid-column: 8 / span 1;
    grid-row: 33 / span 1;
}
#fortyEight {
    grid-column: 9 / span 1;
    grid-row: 31 / span 1;
}
#fortyNine {
    grid-column: 8 / span 1;
    grid-row: 30 / span 1;
}
#fifty {
    grid-column: 7 / span 1;
    grid-row: 29 / span 1;
}
#fiftyOne {
    grid-column: 6 / span 1;
    grid-row: 27 / span 1;
}
#fiftyTwo {
    grid-column: 6 / span 1;
    grid-row: 24 / span 1;
}
#fiftyThree {
    grid-column: 6 / span 1;
    grid-row: 20 / span 1;
}
#fiftyFour {
    grid-column: 5 / span 1;
    grid-row: 26 / span 1;
}
#fiftyFive {
    grid-column: 1 / span 1;
    grid-row: 8 / span 1;
}
#fiftySix {
    grid-column: 35 / span 1;
    grid-row: 9 / span 1;
}
#fiftySeven {
    grid-column: 2 / span 1;
    grid-row: 40 / span 1;
}
#fiftyEight {
    grid-column: 17 / span 1;
    grid-row: 45 / span 1;
}
#fiftyNine {
    grid-column: 18 / span 1;
    grid-row: 22 / span 1;
}
.statBox-container {
    display: grid;
    grid-template-columns: .625em .625em .625em .625em .625em .625em .625em .625em .625em .625em
                           .625em .625em .625em .625em .625em .625em .625em .625em .625em .625em;
                           
    grid-template-rows: .625em .625em .625em .625em .625em .625em .625em .625em .625em .625em
                        .625em .625em .625em .625em .625em .625em .625em .625em .625em .625em 
                        .625em .625em .625em .625em .625em .625em .625em .625em .625em .625em
                        .625em .625em .625em .625em .625em .625em .625em .625em;
    padding: 1.25em;
    border: .25em solid black;
    max-width: 15.625em;
    background-color: rgb(189, 189, 116);
    margin-top: .625em;
}
.one {
    position: absolute;
    left:2%;
}
.two {
    position: absolute;
    left: 52%;
}
.monstername {
    grid-column: 1 / span 20;
    grid-row: 1 / span 2;
    font-size: 1.125em;
    font-weight: bolder;
    float: top;
}
.monstertype {
    grid-column: 1 / span 20;
    grid-row: 3 / span 2;
    font-size: .5625em;
    font-style: italic;
    border-bottom: .1875em solid brown;
}
.armorclass {
    grid-column: 1 / span 10;
    grid-row: 5;
    font-size: .625em;
}
.armorclassnumber {
    grid-column: 12 / span 13;
    grid-row: 5;
    font-size: .625em;
}
.hitpoints {
    grid-column: 1 / span 10;
    grid-row: 6;
    font-size: .625em;
}
.hitpointsnumber { 
    grid-column: 12 / span 13;
    grid-row: 6;
    font-size: .625em;
}
.speed {
    grid-column: 1 / span 12;
    grid-row: 7 / span 2;
    font-size: .625em;
    border-bottom: .1875em solid brown;
}
.speednumber {
    grid-column: 12 / span 13;
    grid-row: 7 / span 2;
    font-size: .625em;
    border-bottom: .1875em solid brown;
}
.stattypenameSTR {
    grid-column: 2 / span 2;
    grid-row: 9 / span 2;
    font-size: .625em;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameDEX {
    grid-column: 5 / span 2;
    grid-row: 9 / span 2;
    font-size: .625em;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameCON {
    grid-column: 8 / span 2;
    grid-row: 9 / span 2;
    font-size: .625em;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameINT {
    grid-column: 11 / span 2;
    grid-row: 9 / span 2;
    font-size: .625em;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameWIS {
    grid-column: 14 / span 2;
    grid-row: 9 / span 2;
    font-size: .625em;
    font-weight: bolder;
    text-align: justify;
}
.stattypenameCHA {
    grid-column: 17 / span 2;
    grid-row: 9 / span 2;
    font-size: .625em;
    font-weight: bolder;
    text-align: justify;
}
.stattypenumberSTR {
    grid-column: 2 / span 2;
    grid-row: 10 / span 1;
    font-size: .625em;
    text-align: justify;
}
.stattypenumberDEX {
    grid-column: 5 / span 2;
    grid-row: 10 / span 1;
    font-size: .625em;
    text-align: justify;
}
.stattypenumberCON {
    grid-column: 8 / span 2;
    grid-row: 10 / span 1;
    font-size: .625em;
    text-align: justify;
}
.stattypenumberINT {
    grid-column: 11 / span 2;
    grid-row: 10 / span 1;
    font-size: .625em;
    text-align: justify;
}
.stattypenumberWIS {
    grid-column: 14 / span 2;
    grid-row: 10 / span 1;
    font-size: .625em;
    text-align: justify;
}
.stattypenumberCHA {
    grid-column: 17 / span 2;
    grid-row: 10 / span 1;
    font-size: .625em;
    text-align: justify;
}
.line {
    grid-column: 1 / span 20;
    grid-row: 11 / span 1;
    border-bottom: .1875em solid brown;
}
.skills {
    grid-column: 1 / span 6;
    grid-row: 12 / span 1;
    font-size: .625em;
    font-weight: bold;
}
.skillsExplanation {
    grid-column: 14 / span 6;
    grid-row: 12 / span 1;
    font-size: .53em;
}
.damageresistance {
    grid-column: 1 / span 12;
    grid-row: 14 / span 1;
    font-size: .625em;
    font-weight: bold;
}
.damageresistancenumber {
    grid-column: 14 / span 6;
    grid-row: 14 / span 1;
    font-size: .5em;
}
.damageimunities {
    grid-column: 1 / span 12;
    grid-row: 15 / span 1;
    font-size: .625em;
    font-weight: bold;
}
.damageimunitiesnumber {
    grid-column: 14 / span 6;
    grid-row: 15 / span 1;
    font-size: .4375em;
}
.conditionedImmunities {
    grid-column: 1 / span 12;
    grid-row: 16 / span 1;
    font-size: .625em;
    font-weight: bold;
}
.conditionedImmunitiesNumber {
    grid-column: 14 / span 6;
    grid-row: 16 / span 1;
    font-size: .5em;
}
.senses {
    grid-column: 1 / span 12;
    grid-row: 18 / span 1;
    font-size: .625em;
    font-weight: bold;
}
.sensesnumber {
    grid-column: 14 / span 6;
    grid-row: 18 / span 1;
    font-size: .5em;
}
.languages {
    grid-column: 1 / span 12;
    grid-row: 20 / span 1;
    font-size: .625em;
    font-weight: bold;
}
.languagesnumber {
    grid-column: 14 / span 6;
    grid-row: 20 / span 1;
    font-size: .5em;
}
.challenge {
    grid-column: 1 / span 12;
    grid-row: 22 / span 1;
    font-size: .625em;
    font-weight: bold;
}
.challengenumber {
    grid-column: 14 / span 6;
    grid-row: 22 / span 1;
    font-size: .5em;
}
.line1 {
    grid-column: 1 / span 20;
    grid-row: 23 / span 1;
    border-top: .1875em solid brown;

}
.actions {
    grid-column:1 / span 3;
    grid-row: 24 / span 1;
    font-size: .625em;
    font-weight: bold;
}
.multiattack {
    grid-column: 5 / span 6;
    grid-row: 24 / span 1;
    font-size: .5em;
    font-style: italic;
}
.explanation {
    grid-column: 12 / span 8;
    grid-row: 24 / span 1;
    font-size: .45em;
}
.bite {
    grid-column: 1 / span 4;
    grid-row: 26 / span 2;
    font-size: .625em;
    font-weight: bold;
}
.meleeweaponattack {
    grid-column: 5 / span 4;
    grid-row: 26 / span 2;
    font-size: .5em;
    font-style: italic;
}
.explanation2 {
    grid-column: 9 / span 11;
    grid-row: 26 / span 2;
    font-size: .5em;
}
.claws {
    grid-column: 1 / span 4;
    grid-row: 29 / span 2;
    font-size: .5em;
    font-weight: bold;
    border-top: .1875em solid brown;
}
.meleeweaponattack2 {
    grid-column: 5 / span 8;
    grid-row: 29 / span 2;
    font-size: .5em;
    font-style: italic;
    border-top: .1875em solid brown;
}
.last1 {
    grid-column: 9 / span 11;
    grid-row: 29 / span 3;
    font-size: .5em;
    border-top: .1875em solid brown;
}
.rejuvenation {
    grid-column: 1 / span 20;
    grid-row: 33 / span 2;
    font-size: .5em;
    font-weight: bold;
}
.explanation3 {
    grid-column: 1 / span 20;
    grid-row: 35 / span 2;
    font-size: .4375em;
}
.banditArticle {
    position: absolute;
    bottom: 2%;
}