body {
  background-image: linear-gradient(to right, #cccccccc 1px, transparent 1px),
                    linear-gradient(to bottom, #cccccccc 1px, transparent 1px);
  background-size: 200px 200px;
}

h1 {
    margin: 2%;
    color: white;
    animation: none;
    font-size: 2rem;
    text-align: center;
}

canvas {
    max-width: 800px;
    max-height: 800px;
    width: 70vmin;
    height: 70vmin;
    border: 10px solid white;
    border-radius: 0.2em;
    box-sizing: border-box;
    /* margin-top: 4em; */
}

.centered-container {
    display: flex;
    justify-content: center;
}

button {
    background-color: rgb(255, 255, 255);
    margin: 2vmin;
    padding: 2vmin 4vmin;
    text-align: center;
    cursor: pointer;
    font-size: calc(max(1.5em,2vmin));
    text-decoration: none;
    border-radius: 0.2em;
}

.destructive {
    background-color: rgb(255, 128, 128);
}

.selected {
    background-color: rgb(128, 255, 172);
}

button span {
    vertical-align: bottom;
    padding-right: 0.2em;
    font-size: 2em;
    /* line-height: calc(max(5em,3vmin)); */
}

button img {
    width: calc(max(70%,2em));
    height: auto;
}

button svg {
    width: calc(max(50%,2em));
    height: auto;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}

.newGameMenuHeader {
    display: flex;
    justify-content: space-between;
}

.playerSelector {
    display: flex;
    justify-content: left;
}

#newGameMenu {
    z-index: 5;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    padding: 15px;
    background: linear-gradient(#4b4b4bee 0%, #090a0fee 100%);
    border-radius: 0.2em;
    max-height: 90%;
    overflow: scroll;
}

#aiDifficulty {
    display: none;
}