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

.gameBoard {
  display: grid;
  grid-template-columns: repeat(9,1fr);
  gap:0;
  width: 45vw;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cell {
  display: flex;
  position: relative;
  width: 5vw;
  height: 5vw;
  border:none;
  font-weight: bold;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}
.cell:hover {
  background-color: rgb(187,185,188);
}
.light {
  background-color: rgb(170,215,81);
}
.dark {
  background-color: rgb(169,202,73);
}
.lightCleared {
  background-color: rgb(229,194,159);
}
.darkCleared {
  background-color: rgb(215,184,153);
}
.value1 {
  color: rgb(25,118,210);
}
.value2 {
  color: green;
}
.value3 {
  color: rgb(165,16,16);
}
.value4 {
  color: blueviolet;
}
.gameStatus {
  background-color: rgb(74,117,44);
  display: flex;
  width: 45vw;
  height: 6vw;
  font-size: 25px;
  justify-content: center;
  align-items: center;
  color: whitesmoke;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.flagContainer,.timerContainer {
  display: flex;
  margin: 15px;
}
#flag,#timer {
  margin-left: 5px;
  width: 4vw;
}

#alert {
  position: absolute;
  display: none;
  background-color: yellow;
  border-radius: 5px;
  color: black;
  width: 42vw;
  height: 12vh;
  justify-content: center;
  align-items: center;
  font-size: xx-large;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  z-index: 1000;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  margin: auto;
}

@media (max-width:650px) {
  .cell,.gameStatus,#alert{
    font-size:14px;
  }
}