#bingo-caller {
  -webkit-filter: blur(50px);
  filter: blur(50px);
  -webkit-transition: 1.75s 0.75s ease-in-out;
  transition: all 1.75s 0.75s ease-in-out;
}

.clear {
  -webkit-filter: blur(0px) !important;
  filter: blur(0px) !important;    
}

#bingo-caller-call-button {
  color: #FFF;
  background-color: hsl(204, 100%, 23%);
  padding-inline: var(--spacing-small);
  padding-block: var(--spacing-xs);
  border-radius: var(--spacing-xs);
  border: none;
  box-shadow: var(--box-shadow-medium);
  margin-block: var(--spacing-small);
  text-align: center;
  margin-top: var(--spacing-xl);
  font-size: var(--text-large);
  width: 100%;
  margin-block: var(--spacing-small);
  text-align: center;
}

#bingo-caller-call-button:disabled {
  background-color: #AAA;
}

#call-history {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  position: relative;
  margin-inline: auto;
}

#call-history > div {
  display: grid;
  place-content: center;
  text-align: center;
  border: solid 2px #DDD;
  font-size: var(--_card-font-size);
  font-weight: bold;
}

#call-history > div {
  padding: var(--spacing-xs);
}

#call-history > div.called {
  color: var(--clr-white);
  background-color: var(--clr-nearly-black);
}

#bingo-caller > div {
  display: grid;
  grid-template-columns: 8fr 2fr;
  min-height: 100vh;
}

#bingo-caller-board {
  color: #FFF;
  background-color: #000;
  display: grid;
  align-content: center;
  text-align: center;

  font-size: var(--text-xxxl);

  @media (min-width: 810px) {
    font-size: 164pt;
  } 
}

#picture-bingo-caller-board {
  color: #FFF;
  background-color: #000;
  display: grid;
  align-content: center;
  text-align: center;

  font-size: var(--text-xxxl);

  @media (min-width: 810px) {
    font-size: 164pt;
  } 
}

#picture-bingo-caller-board > p {

  font-size: var(--text-xxxl);

  @media (min-width: 810px) {
    font-size: 85pt;
  } 
}

#bingo-caller > div > div:last-of-type {
  padding: var(--spacing-medium);
  background-color: #FFF;
}