body {
  margin: 0;
  padding: 0;
  background-color: #80bfff;
}

.bingo-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 5px;
  padding: 10px;
  height: 97vh;
  width: 97vw;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bingo-card div {
  width: 100%;
  height: 100%;
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-align: center;

  background-color: #88b6e3;
  border-style: ridge;
  box-shadow: 3px 3px 15px #4f7091;
  
}

.item {
 
 box-shadow: 3px 3px 15px #4f7091  ;
 background-color: #ebf5ff  !important;
 border-style: ridge  ;
 font-family: Arial, Helvetica, sans-serif;
 cursor: pointer;
 
}


.highlight {
  background-color: #F9F59E;
}

 .selected {
 
  position: relative;

  
}

.headline{font-size:2.5em;font-family:Georgia;margin:10px 0}


.selected::before,
.selected::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 4px;
  background-color: red;
  box-shadow: 
    -1px -1px 0px red,
    -2px -2px 0px red,
    -3px -3px 0px red,
    -4px -4px 0px red,
    -5px -5px 0px red,
    -6px -6px 0px red,
    -7px -7px 0px red,
    -8px -8px 0px red,
    -9px -9px 0px red;
}


.selected::before {
  transform: rotate(45deg);
}

.selected::after {
  transform: rotate(-45deg);
}


#popup {
  /* Other styles... */
  z-index: 1000; /* Adjust as needed */
  position: fixed;
  width: 90%;
  height: 40%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  background-color: white;
  border-style: ridge;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#message {
  font-size: 1.4em;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
}