@font-face {
  font-family: 'Dominica';
  src: url('dominica-subset.woff2');
}

* {
  box-sizing: border-box;
}

#content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 1vw;

  background-color: #9ea637;
  font-family: Dominica;
  text-align: center;
}
p.version{text-align:center;font-style:italic;}
.board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 2px;

  padding-left: 5vw;
  padding-right: 5vw;
}

.board div {
  aspect-ratio: 1;
  width: 17vw;
  height: 17vw;
  border: 3px solid #9ea637;
}

.selected img{
  width: 90%;
  height: 90%;
  box-shadow: 0 15px 24px 0 rgba(0,0,0,0.2),0 9px 30px 0 rgba(0,0,0,0.19);
  filter: sepia(5%) brightness(85%);
}

img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.nopointer img {
  cursor: auto;
}

.choice {
  border-color: crimson !important;
}

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2vw;
  padding-top: 2vh;
  padding-left: 5vw;
  padding-right: 5vw;
}

button {
  min-height: 5vh;
  font-size: large;
  cursor: pointer;
}

@media screen and (min-width: 600px) {
  .board, .buttons {
    padding-left: 25vw;
    padding-right: 25vw;
  }
  .board div {
    aspect-ratio: 1;
    width: 9vw;
    height: 9vw;
    border: 4px solid #9ea637;
  }
}

a.nostyle:link {
  text-decoration: inherit;
  color: inherit;
}

a.nostyle:visited {
  text-decoration: inherit;
  color: inherit;
}