h1 {
    font-family: 'Courier New', Courier, monospace;
    color: beige;
    display: block;
    text-align: left;
}

p {
    font-family: 'Courier New', Courier, monospace;
}

div {
    font-family: 'Courier New', Courier, monospace;
}

body {
    background-color: rgb(66, 55, 50);
}

img.tyrunt {
    border: 1px solid black;
    display: block;
    margin: auto;
    float: right;
    transform: scaleX(-1);
    width: 50px;
    height: auto;
}

ul {
    list-style-type: none;
    border: 1px solid black;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: auto;
    display: flex;
}

ul a {
    display: block;
    color: white;
    background-color: rgb(144, 123, 97);
    text-align: center;
    border-right: 1px solid black;
    padding: 8px 16px;
    text-decoration: none;
}

ul a:hover {
    background-color: rgb(173, 118, 118);
    color: white;
}

.active {
    background-color: rgb(172, 100, 50);
    color: white;
}

h2.rules {
    background-color: rgb(172, 100, 50);
    border:  2px solid black;
    font-family: 'Courier New', Courier, monospace;
    text-align:center;
}

h3.rules {
    background-color: rgb(184, 144, 90);
    border:  2px solid black;
    text-align:left;
    text-indent: 5px;
    color: black;
    font-family: 'Courier New', Courier, monospace;
}

h2.weapon {
    background-color: rgb(184, 144, 90);
    border:  2px solid black;
    font-family: 'Courier New', Courier, monospace;
    text-align:center;
}

h3.weapon {
    background-color: rgb(184, 144, 90);
    border:  2px solid black;
    text-align: center;
    color: black;
    font-family: 'Courier New', Courier, monospace;
}

p.rules {
    background-color: rgb(255, 246, 196);
    border:  2px solid black;
    text-align: left;
    color: black;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    margin-top: -20px;
}

b.rules {
    color: black;
}

em.rules {
    color: darkgreen;
}

div.rules {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

table.rules, th.rules, td.rules {
    font-family: 'Courier New', Courier, monospace;
    border: 2px solid;
    border-style: solid;
    background-color: rgb(255, 246, 196);
    margin-top: -20px;
    padding: 10px;
}

.tooltip {
  position: relative;
  cursor:help;
  display: inline-block;
  border-bottom: 1px solid black;
}

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  transform: translateX(-100%);
  width: 300px;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  display: inline-block;
  z-index: 1;
  font-size: 12px;
  pointer-events: none;
  font-family: 'Courier New', Courier, monospace;
}

.divTxt {
    width: auto;
    height: 275px;
    border: 2px solid black;
    margin-top: -20px;
    background-color: rgb(255, 246, 196);
}

select.weaponbox {
    display: block;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    background-color: #333;
    color: #fff;
}


.parent2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 0px;
}
    
.div2_1 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 1;
}

.div2_2 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 1;
}

.div2_3 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-row-start: 3;
}

.div2_4 {
      grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 3;
}

.divAlt {
    width: auto;
    height: 100%;
    text-align: center;
    border: 2px solid black;
    margin-top: -20px;
    background-color: rgb(255, 246, 196);
}

.divBreak {
    width: auto;
    height: 100%;
    text-align: center;
    border: 2px solid black;
    margin-top: -20px;
    background-color: rgb(255, 246, 196);
}
        
.hidden-text {
    display: none;
}

.thresholdTxt {
    display: inline-block;
    border-bottom: 1px solid black;
}

div.tier {
    width: auto;
    height: 100%;
    background-color: rgb(255, 246, 196);
    border: 2px solid black;
    margin-top: -20px;
    text-align: center;
}


.tableFixHead          { overflow: auto; height: 275px; width: auto;}
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }

table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

p.campaign {
    background-color: rgb(255, 246, 196);
    padding: 5px;
    border:  2px solid black;
    text-align: left;
    color: black;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    margin-top: -20px;
}



img.mapPreview {
  border: 1px solid black;
  border-radius: 2px;
  padding: 5px;
  width: 98%;
  margin-top: -18px;
  background-color: rgb(255, 246, 196);
}

p.mapPreview {
    border: 1px solid black;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    border-radius: 2px;
    padding: 5px;
    background-color: rgb(184, 144, 90);
    width: 98%;
}

.mapParent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
    margin-top: -23px;
}

.divTearPol {     
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2; 
}
.divTearGeo {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
}

.landingParent {
    display: grid;
    background-color: lightgray;
    border: 2px solid black;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
}

.landing1 {     
    grid-column: span 3 / span 3;
    grid-row: span 4 / span 4;
}

.landing3 {
    grid-column: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 5;
}

.landing2 {
    grid-column: span 2 / span 2;
    grid-row: span 5 / span 5;
    grid-column-start: 4;
    grid-row-start: 1;
}

.landing {
    border: 1px solid black;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    align-content: center;
    width: 100%;
    height: auto;
    background-color: rgb(255, 246, 196);
}

.citation {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    text-align: center;
    align-content: center;
    border: 1px solid black;
    background-color: rgb(184, 144, 90);
}
img.mapLanding {
    border: 1px solid black;
    width: 100%;
    height: auto;
    background-color: rgb(255, 246, 196);
}

.parentPantheon {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
    
.divPantheon1 {
    grid-column: span 2 / span 2;
}

.divPantheon2 {
    grid-column: span 2 / span 2;
    grid-row: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 2;
}

.divPantheon3 {
    grid-column: span 3 / span 3;
    grid-row: span 5 / span 5;
    grid-column-start: 3;
    grid-row-start: 1;
}

select.pantheonbox {
    display: block;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    background-color: #333;
    color: #fff;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  background-color: #333;
  border: 2px solid black;
}
.footer-container {
  height: 100px;
  width: 100vw;
}