@font-face {
  font-family: mavenPro;
  src: url(./MavenPro-VariableFont_wght.ttf);
  font-display: swap;
}

body {
  font-family: mavenPro, sans-serif;
  overscroll-behavior-x: none;
}

body::-webkit-scrollbar {
  display: none;
}

h1 {
  margin: 1vw;
  font-size: 5.5vw;
  font-weight: 900;
  text-align: center;
}

h2 {
  margin: 2vw;
  font-size: 4vw;
  font-weight: 900;
}

button {
  font-size: 4vw;
  background: lightgray;
  border-width: 0;
  border-radius: 0;
  padding: 2vw;
  margin: 1.5vw;
  height: 11vw;
  touch-action: manipulation;
}

footer {
  text-align: center;
  font-size: 3vw;
  margin-top: 1.5vw;
  font-weight: 600;
}

.call-summary {
  display: grid;
  grid-template-columns: auto auto auto;
  font-size: 6vw;
  margin: 0 2vw 1vw 2vw;
  justify-items: flex-start;
}
.call-summary span {
  font-weight: 900;
}
.call-summary .header {
  font-size: 2vw;
}
@media (orientation: portrait) {
  main .board {
    grid-auto-flow: column;
    grid-template-rows: repeat(16, auto);
    grid-template-columns: repeat(5, auto);
    font-size: 3vh;
  }
}

.board {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(16, auto);
  font-size: 3.3vw;
  text-align: center;
  margin-bottom: 3vw;
}

.board div {
  margin: 0.5vw;
  padding: 0.5vw;
}
.board .number.selected {
  border-radius: 50%;
  background-color: darkgray;
}
.board .header {
  font-weight: 900;
}

.call-selection {
  display: grid;
  grid-template-columns: 25% 74%;
  gap: 1%;
}
.call-selection button {
  font-size: 9vw;
  padding: 0;
  margin: 0;
}
.call-selection button.selected {
  background: red !important;
}
.call-selection > button:last-child {
  grid-column: 1 / 3;
}
.call-letter-selection {
  display: grid;
  grid-template-rows: repeat(5, auto);
  gap: 1vw;
  font-weight: 900;
}
.call-letter-selection button {
  font-weight: 900;
}
.call-number-selection {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1vw;
}
.game-btns {
  display: inline-block;
}
.select-game-btn {
  margin-right: 0;
}
.delete-game-btn {
  margin-left: 0;
}