:root {
    --gameScreenWidth: 360px;
    --gameScreenHeight: 360px;
    --genPaddingMarginRadius: 6px;
    --genBorder: 3px solid black;
}
body {
    background-color: grey;
}
#bodyContainer {
    display: flex;
    justify-content: center;
}
#gameContainer {
    display: grid;
    grid-template: 
        "a b"
        "c d";
    justify-content: space-evenly;
    width: 760px;
    height: 760px;
    border-radius: var(--genPaddingMarginRadius);
    border: 3px solid lightslategray;
    background-color: slategrey;
    padding: 12px;
}
#gameScreenContainer {
    position: relative;
    width: var(--gameScreenWidth);
    height: var(--gameScreenHeight);

}
#gameCanvas {
    position: absolute;
    background-color: black;
    image-rendering: pixelated;
    width: var(--gameScreenWidth);
    height: var(--gameScreenHeight);
    border-radius: var(--genPaddingMarginRadius);
    border: var(--genBorder);
}
#gameOverlay {
    position: absolute;
    display: flex;
    width: var(--gameScreenWidth);
    height: var(--gameScreenHeight);
    justify-content: center;
    align-items: center;
    text-align: center;
}
#mapCanvas {
    background-color: black;
    image-rendering: pixelated;
    width: var(--gameScreenWidth);
    height: var(--gameScreenHeight);
}
.uiBox {
    width: var(--gameScreenWidth);
    height: var(--gameScreenHeight);
    border: var(--genBorder);
    border-radius: var(--genPaddingMarginRadius);
}

.uiHeader {
    background-color: black;
    min-height: 16px;
}
.uiSubHeaderContainer {
    display: flex;
    justify-content: space-between;
    border-radius: var(--genPaddingMarginRadius);
    min-height: 16px;
}
.uiSubHeader {
    background-color: slategray;
}
#uiSelectedStat {
    background-color: black;
}
#uiSelectedInfo {
    background-color: black;
}
.uiContent {
    background-color: black;
    min-height: 90%;
}
.gameTextBox {
    background-color: slategrey;
    border: 1px solid white;
    border-radius: 12px;
    padding: var(--genPaddingMarginRadius);
}



.gameWord {
    display: flex;
    align-items: center;
    justify-content: center;
}
.gameWordLine {
display: flex;
flex-wrap: wrap;
padding: 3px;
}

.page-footer {
  position: fixed;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 14px;
  margin-top: 2rem;
}

.button-div {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 14px;
  margin-top: 2rem;
}