body {
background-color: #79B4A9;
text-align: center;
}

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

.game {
    height: 70vmin;
    width: 70vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2vmin;
}


.box {
    height: 20vmin;
    width: 20vmin;
    border-radius: 1rem;
    border: none;
    font-size: 10vmin;
    color: #98473e;
 
}



.box {
  background-color: #fff;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}


.box:hover {
  transform: scale(1.08);
  background-color: #f1f1f1;
}


.box:active {
  transform: scale(0.95);
}


.box:contains("X") {
  color: #ff4c4c;
}


.box:contains("O") {
  color: #1e90ff;
}


h1 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 3rem;
  color: #ffffff;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}


#res {
  margin-top: 20px;
  padding: 12px 30px;
  font-size: 1.2rem;
  border-radius: 30px;
  border: none;
  background: linear-gradient(135deg, #ff512f, #dd2476);
  color: white;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}


#res:hover {
  transform: scale(1.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

#new {
  margin-top: 20px;
  padding: 12px 30px;
  font-size: 1.2rem;
  border-radius: 30px;
  border: none;
  background: linear-gradient(135deg, #ff512f, #dd2476);
  color: white;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;

}

#msg {
font-size: 3rem;
  border-radius: 30px;
  border: none;
color: black;
}

.hide{
  display: none;
}