body {
  margin: 0;
  padding: 0;
  text-align: center;
  background: linear-gradient(90deg, hsl(58, 77%, 81%), hsl(26, 84%, 58%));

}

.gameContainer {
  background-color:transparent;
  
  display: flex;
  justify-content: center;
  margin-top: 7px;
}

h1 {
  text-align: center;
  font-family:fantasy;
  color: rgb(161, 161, 238);
}

#title {
    font-size: 5vw;
    font-family: fantasy;
    color:rgb(178, 118, 234);
}

.container {
  display: grid;
  grid-template-rows: repeat(3, 10vw);
  grid-template-columns: repeat(3, 10vw);
  font-family: fantasy;
  font-weight: 500;
  color: rgb(239, 48, 63);
  size: 1vw;
}

.cell{
    border: 1px solid black;
    font-size: 5vw;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cell:hover {
background-color: rgb(235, 215, 171);
}


#reset {
  margin: 20px 20px;
  padding: 5px px;
  border-radius: 8px;
  cursor: pointer;
  background-color: transparent;
  font-family: fantasy;
}


#reset:hover {
background-color: rgb(120, 120, 240);
color: white;
}

.info{
  padding: 0 1vw;
  margin: 1vw;
  font-size: 3vw;
  font-family: fantasy ;
  color: blueviolet;
}

.cell:first-child,
.cell:nth-child(2),
.cell:nth-child(3) {
  border-top: none;
}

.cell:nth-child(3n + 1){
  border-left: none;
}

.cell:nth-child(3n + 3){
  border-right: none;
}

.cell:last-child,
.cell:nth-child(8),
.cell:nth-child(7) {
  border-bottom: none;
}

.winning-message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .9);
}


.imgbox img{
  width: 2px;
  transition: width 1s ease-in-out;
}