* {
  margin: 0;
  padding: 0;
  background-color: #4F1EB0;
}
body {
  background-color: black;
  text-align: center;
  justify-content: center;
}
h1 {
  color: white;
  text-align: initial;
}
.container {
  margin-top: 5rem;
  text-align: center;
  height: 70vh;
  display: flex;
  text-align: center;
  justify-content: center;
}
.game {
  height: 70vmin;
  width: 70vmin;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  gap: 1.5vmin;
  border: 2px dotted white;
  border-radius: 0.6rem;
}
.row1{
  margin-top: 10px;
}
.box {
  /* border: 0.5vmin solid white; */
  border:none;
  height: 20vmin;
  width: 20vmin;
  border-radius: 0.7rem;
  font-size: 12vmin;
  color: white;
  font-weight: bold;
  background-color: #FFD652;
}
#reset {
  color: white;
  margin-top: 1rem;
  padding: 0.8rem;
  border: 0.2rem solid white;
  /* border:none; */
  font-size: 0.9rem;
  font-weight: bolder;
  border-radius: 2rem;
  background-color: black;
  word-spacing: 6px;
}
#reset:hover {
  /* background-color: rgb(40, 34, 34); */
  cursor: pointer;
  color: #FFD652;
  transform: scale(1.1);
}
#newgame {
  padding: 1.5rem;
  margin: 5rem;
  border: 0.3rem solid rgb(255, 255, 255);
  background-color: rgb(37, 127, 231);
  font-size: 2rem;
  font-weight: bolder;
  color: yellow;
  border-radius: 0.6rem;
}
#newgame:hover {
  background-color: rgb(4, 60, 245);
}
.win {
  color: rgb(218, 224, 30);
  font-weight: bolder;
  font-size: 5rem;
  margin-bottom: 4px;
}
.msgcontainer {
  height: 800vmin;
}
.hide {
  display: none;
}
.Ocolor {
  color: blue;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white, 0 0 25px white;
}
.Xcolor {
  color: white;
  text-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 15px blue, 0 0 20px blue, 0 0 25px blue;
}
.img {
  height: 6rem;
  width: 6rem;
  position: absolute; 
  top: 0; 
  left: 0;
  padding: 15px; 
}