.is-visible {
  display: flex; /* Establishes a flex context */
}

.is-hidden {
  display: none; /* Completely hides the item and removes its space */
}

.is-invisible {
  visibility: hidden; /* Hides the item but keeps its space */
}

body {
    background-color: cornsilk;
}

h3 {
    text-align: left;
    padding-left: 20%;
    margin-block-start: .5em;
    margin-block-end: .5em;
}

output {
    font-weight: bold;
    margin-left: 0.25em;
    margin-right: 1em;
}

.gameboard {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    width: 100%;
    height:100%;
    min-height: 100%;
    padding: 0%;
    
}

.gameImage {
    width: 30%;
    height: 30%;
    margin-left: 1%;
    max-width: 400px;
}   

table {
  width: 65%;
  max-width: 650px;
  min-width: 350px;
  margin-left: 1%;
  margin-right: 0;
}

tr {
   border: black;
}

th, td {
   border: black;
}

.gameCell {
    border: black;
    width:30%;
    height:auto;    
}
    
.gameResults {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}    

button.instrButton {
    margin: 0.2em;
    padding: auto;
    font-size: 1.25em;
}

#instructions p {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
    font-size: 1.10em;
}

label {
    padding-left: 10px;
    padding-bottom:5px;
    text-transform: none;
    display: inline-block
}

#exitGameBtn {
    text-align: center;
    align-content: top;
    margin: 0%; 
    padding: .2em 0%;
    width: 32px;
    height: 32px;
    border: none;
}

img.exit-left{
     width:30px;
     height:30px;
}

input[type="number"] {
    width: 3em;
}