* {
    box-sizing: border-box;
  }

  

body {
    margin: 2vh 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Press Start 2P', sans-serif;
    background-color:#545454;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#game-info {
    width: 57.6vmin;
    text-align: center;
}

#gameheading {
    height: auto;
    width: 100%;
    border-top: 0.2vmin solid #FF827A;
    border-right: 0.2vmin solid #9F0F05;
    border-left: 0.2vmin solid #FF827A;
}

#hud {
    padding: 20px 20px; 
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: lightgray;
    border-right: 0.2vmin solid #1E1E1E;
    border-bottom: 0.2vmin solid black;
    border-left: 0.2vmin solid white;
}

#hud > div {
    padding: 10px 1.1vmin;
    font-size: 2vmin;
    border-top: 0.2vmin solid white;
    border-right: 0.2vmin solid black;
    border-bottom: 0.2vmin solid black;
    border-left: 0.2vmin solid white;
}

button {
    padding: 10px 1.5vmin;
    font-family: 'Press Start 2P', sans-serif;
    font-size: 2vmin;
    color: white;
    background-color: #E4170A;
    border-top: 0.2vmin solid #FF827A;
    border-right: 0.2vmin solid #9F0F05;
    border-bottom: 0.2vmin solid #9F0F05;
    border-left: 0.2vmin solid #FF827A;
    transition: 180ms;
    cursor: pointer; 
}

button:hover {
    transform: translate(0, -2px);
    box-shadow: 3px 5px 4px 0px rgba(0, 0, 0, 0.5);
}

button:active {
    transform: translate(0, 0px);
    box-shadow: 2px 3px 2px 0px rgba(0, 0, 0, 0.7);
}

#board {
    margin-top: 15px;
    height: auto;
    width: auto;
    display: grid;
    grid-template-columns: 
        1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 
        1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#board > div {
    padding: .8vmin;
    height: 3.6vmin;
    width: 3.6vmin;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 2vmin;
    background-color: none;
    background-size: contain;
    border: .2vmin solid black;
    cursor: pointer;
}