body {
  height: 100vh;
  height: 100%;
  width: 100vw;
  width: 100%;
  background-color: #afa;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.bi {
  height: 2ex;
  width: 2ex;
}

.logo-icon {
  width: 6.0ex;
  height: 1.5ex;
}

.zem {
  width: 9ex;
}

.container {
  width: 90vw;
  margin-top: 1vh;
  margin-bottom: 1vh;
  margin-left: auto;
  margin-right: auto;
  background-color: #efe;
  padding: 1vw;
  border-radius: 3vw;
  border: 0.5vw solid #6a6;
  font-size: 1.3vw;
}

header {
  padding: 0;
  margin: 0;
  font-size: 200%;
  text-align: center;
}

header h1 {
  padding: 0;
  margin: 0;
  margin-bottom: 2vh;
}

header h1 a {
  text-decoration: none;
  color: black;
}

main {
  max-width: 100%;
}

.bingo-board {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border: 0.5vw solid black;
  font-size: 200%;
}

.bingo-board tr, .bingo-board tr td, .bingo-board tr th {
  max-width: 100%;
  border: 1px solid black;
  padding: 0;
}

.bingo-board tr td {
  text-align: center;
  vertical-align: middle;
  height: 10ex;
}


.bingo-board thead th {
  font-family: "Comic Sans MS", sans-serif;
  font-weight: bolder;
}

.bingo-board tbody tr td input[type="checkbox"] {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.bingo-board tbody tr td input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.bingo-board tbody tr td input[type="checkbox"]:checked + label {
  background-color: #8ce196;
}

.bingo-board tbody tr td input[type="checkbox"] + label > div {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0.5ex;
}

.back {
  position: relative;
}

.back input[type="checkbox"] {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.back .flip {
  position: absolute;
  height: 5ex;
  top: 1ex;
  right: 2ex;
  display: block;
}

.back input[type="checkbox"] + label > div {
  position: fixed;
  background-color: rgba(255,255,255,0.8);
  display: none;
  text-align: center;
  width: 90vw;
  height: 65vw;
  padding: 1vw;
  padding-top: 10vw;
  border: 0.5vw solid black;
  font-size: 10vw;
}

.back input[type="checkbox"]:checked + label > div {
  display: block;
  z-index: 2;
}


footer {
  padding-top: 2ex;
  font-size: 150%;
  text-align: center;
}

.header {
  font-weight: bolder;
}

.countdown {
  font-size: smaller;
}

@media screen and (orientation: landscape) {
.container {
  width: 95vh;
  padding: 1vh;
  border-radius: 3vh;
  border: 0.5vh solid #6a6;
  font-size: 1.3vh;
}
.bingo-board {
  border: 0.5vh solid black;
}
.back input[type="checkbox"] + label > div {
  width: 95vh;
  height: 65vh;
  padding: 1vh;
  padding-top: 10vh;
  border: 0.5vh solid black;
  font-size: 10vh;
}
}