html,
body {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  background: var(--light-colour); /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #cfdef3,
    #e0eafc
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #cfdef3,
    #e0eafc
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------- */
/*                                    SETUP                                   */
/* -------------------------------------------------------------------------- */

.bingoSetupHolder {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 85% 15%;
  position: absolute;
  background-color: transparent;
}

.cardItems {
  width: 98%;
  height: 96%;
  padding: 2px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2px;
  background-color: var(--black-colour);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2.75vmin 0 -2vmin;
  user-select: none;
}

.item {
  background-color: var(--white-colour);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vmin;
}

.item p {
  font-size: 3vmin;
  font-weight: 300;
  text-align: center;
}

.instructionsAndOptions {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
}

.instructionText {
  display: flex;
  flex-direction: column;
  width: fit-content !important;
  height: 90% !important;
  padding: 0 3vmin !important;
  font-size: 3vmin;
  font-weight: 500;
  color: var(--light-colour);
  text-align: center;
  text-wrap: balance;
  background-color: var(--dark-colour);
  border-radius: 1vmin;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.3) 0 0.35vmin 0.2vmin -0.15vmin,
    rgba(255, 255, 255, 0.2) 0 0.3vmin 0 inset,
    rgba(0, 0, 0, 0.2) 0 -0.3vmin 0 inset;
  user-select: none;
}

/* -------------------------------------------------------------------------- */
/*                                    GAME                                    */
/* -------------------------------------------------------------------------- */

.bingoGameUI {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 55% 30% 15%;
}

.cardHolder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.card {
  /* Card will fit within viewport, maintaining 3:2 ratio */
  height: 90%;
  aspect-ratio: 3/2;
  background-color: var(--dark-colour);
  border-radius: 2vmin;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2.75vmin 0 -2vmin;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center center;
  user-select: none;
}

.card-back,
.card-front {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2vmin;
  padding: 2vmin;
  border: 0.5vmin solid var(--white-colour);
}

.card-front {
  border: 0.5vmin solid var(--dark-colour);
}

.card .card-back p {
  font-size: 30vmin;
  font-weight: 900;
  color: var(--white-colour);
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.card .card-front p {
  font-size: 6vmin;
  font-weight: 300;
  color: var(--dark-colour);
  background-color: color-mix(in srgb, var(--white-colour) 95%, transparent);
  padding: 0.5vmin 1vmin;
  border-radius: 0.5vmin;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}

.bingoNumberButtons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  width: 90%;
  height: 100%;
  gap: 1vmin;
  background-color: var(--grey-colour);
  padding: 1vmin;
  border-radius: 2vmin;
  border-top: 2px solid black;
  border-bottom: 1px solid white;
}

.bingoNumberBtn {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dark-colour);
  border-radius: 1vmin;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.3) 0 0.35vmin 0.2vmin -0.15vmin,
    rgba(255, 255, 255, 0.2) 0 0.3vmin 0 inset,
    rgba(0, 0, 0, 0.2) 0 -0.3vmin 0 inset;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.5s ease;
}

.bingoNumberBtn.pressed {
  background-color: rgba(255, 255, 255, 0.05);
}

.bingoNumberBtn.pressed p {
  color: var(--light-colour);
  opacity: 0.8;
  text-shadow: none;
}

.bingoNumberBtn.pressed:hover p {
  color: var(--white-colour);
  opacity: 1;
}

.bingoNumberBtn:not(.bingoNumberBtn.pressed):hover p {
  color: var(--yellow-colour);
}

.bingoNumberBtn:active {
  box-shadow: rgba(0, 0, 0, 0.4) 0 0.3vmin 0 inset;
  filter: brightness(0.9);
}

.bingoNumberBtn:active p {
  transform: translateY(3px);
}

.bingoNumberBtn p {
  font-size: 7.5vmin;
  font-weight: 900;
  color: var(--white-colour);
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
}

#shout-bingo-button {
  padding: 1vmin 4.25vmin;
  border-radius: 1vmin;
  border: 0;
  background-color: var(--white-colour);
  font-size: 7.5vmin;
  font-weight: 900;
  transition: all 0.1s ease;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.3) 0 0.35vmin 0.2vmin -0.15vmin,
    rgba(255, 255, 255, 0.2) 0 0.3vmin 0 inset,
    rgba(0, 0, 0, 0.2) 0 -0.3vmin 0 inset;
  color: var(--dark-colour);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2.5vmin;
}

#shout-bingo-button svg {
  width: 7.5vmin;
  height: 7.5vmin;
  fill: var(--dark-colour);
}

#shout-bingo-button:hover {
  transform: scale(1.05);
}

#shout-bingo-button:active {
  transform: scale(0.95);
}

.instructionsAndOptions > div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5vmin;
}

.instructionsAndOptions .simpleButton {
  width: 100%;
  height: 90%;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.3) 0 0.35vmin 0.2vmin -0.15vmin,
    rgba(255, 255, 255, 0.2) 0 0.3vmin 0 inset,
    rgba(0, 0, 0, 0.2) 0 -0.3vmin 0 inset;
}

.instructionsAndOptions .simpleButton p {
  font-size: 2.5vmin;
  text-align: center;
}

.veryBigFont {
  font-size: 8vmin !important;
}