body {
    background-color:  rgb(189,189,119);
}
h1, h3 {
    text-align: center;
}
table {
    width: 80%;
    margin: auto;
}
table, th, td {
    border: .2em solid black;
    border-collapse: collapse;
}
.box {
    position: relative;
    overflow: hidden;
    font-size: 70%;
  }
.wrapper {
    background-image: url("kahar/Kahar2A.jpg");
    background-origin: content-box;
    background-size: 100% 100%;
    width: 50%;
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    border: .12em solid black;
    margin: auto;
}
.titleWords {
    position: absolute;
}
.spaceMaker {
    height: 12em;
}
.firstCol {
    width: 20%;
}
.secondCol {
    width: 80%;
}
.opening {
    position: relative;
    padding: 2em;
    width: 92%;
    border: .2em solid black;
    margin: auto;
}
.mapCenter {
    position: relative;
    width: 45em;
    height: 20em;
    margin-left: 17%;
}
.secondMap1 {
    position: relative;
    width: 22.5em;
    height: 14em;
    margin-left: 17%;
}
.secondMap2 {
    position: relative;
    width: 22.5em;
    height: 14em;
}
.secondMapMiddle {
    position: relative;
    width: 45em;
    height: 20em;
    margin-left: 17%;
}
.grow {
    transition: transform 0.25s ease;
}

.grow:hover {
    -webkit-transform: scale(1.6); /* or some other value */
    transform: scale(1.6);
}
#frontGate, #tower2, #tower3, #tower4, #rearGate, #tower6, #tower7, #tower8 {
    visibility: hidden;
}
#fgWords {
    top: 60%;
    left: 50%;
}
#t2Words {
    top: 50%;
    left: 16%;
}
#t3Words {
    top: 40%;
    left: 12%;   
}
#t4Words {
    top: 18%;
    left: 38%;
}
#rgWords {
    top: 20%;
    left: 30%;
}
#t6Words {
    top: 22%;
    left: 45%;
}
#t7Words {
    top: 45%;
    left: 60%;
}
#t8Words {
    top: 50%;
    left: 55%;
}
#apArchWords {
    top: 50%;
    left: 30%;
}