* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /*color:  #545454*/
  background-image: linear-gradient(
    to top,
    #bdc2e8 0%,
    #bdc2e8 1%,
    #e6dee9 100%
  );
  display: flex;
  font-family: sans-serif;
  justify-content: center;
}

.container {
  background: #14bdac;
  margin: 50px;
  padding: 50px;
  border-radius: 25px;
}

.title {
  text-align: center;
}

.title span {
  color: #f2ebd3;
}

.status-action {
  display: flex;
  margin-top: 25px;
  font-size: 25px;
  justify-content: space-around;
  height: 30px;
}

.status span {
  color: #f2ebd3;
}

.reset {
  cursor: pointer;
}

.reset:hover {
  color: #f2ebd3;
}

.game-grid {
  background: #0da192;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 15px;
  margin-top: 50px;
}

.game-cell {
  background: #14bdac;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 200px;
  width: 200px;
}

.x,
.o {
  cursor: default;
}

.x::after {
  content: "×";
  font-size: 200px;
}

.o::after {
  content: "○";
  color: #f2ebd3;
  font-size: 225px;
}

.won::after {
  color: #bd022f;
}

@media only screen and (max-width: 1024px) {
  .game-grid {
    margin-top: 25px;
    grid-gap: 10px;
  }

  .game-cell {
    height: 150px;
    width: 150px;
  }

  .x::after {
    font-size: 150px;
  }

  .o::after {
    font-size: 175px;
  }
}

@media only screen and (max-width: 540px) {
  .container {
    margin: 25px;
    padding: 25px;
  }

  .game-cell {
    height: 100px;
    width: 100px;
  }

  .x::after {
    font-size: 100px;
  }

  .o::after {
    font-size: 125px;
  }
}