* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color: #00695c;
  height: 100vh;
  font-family: "Shantell Sans", cursive;
}
.container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 50px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-content {
  margin-top: 100px;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (min-width: 472px) {
  .main-content {
    gap: 0px;
  }
}

#header {
  width: 100%;
  word-spacing: 3px;
  letter-spacing: 11px;
  border-radius: 20px;
  padding: 14px 10px;
  font-size: 14px;
  text-transform: capitalize;
  text-align: center;
  background-image: linear-gradient(#009688, #fefefe8c),
    linear-gradient(to top left, #9c27b0, #673ab7),
    linear-gradient(to top right, #9c27b0, #fff6f6);
  color: #282425;
  border: 4px solid #009688;
  box-shadow: 0px 0px 7px 1px #9e9e9e;
}

#container-box {
  display: grid;
  background: #282425;
  width: 100%;
  aspect-ratio: 1;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  margin: 40px;
  border-radius: 20px;
  border: 8px solid #009688;
  padding: 30px;
  box-shadow: 0px 0px 7px 1px #9e9e9e;
}

#container-box div {
  position: relative;
  display: flex;
  justify-content: CENTER;
  align-items: center;
  border: 2px solid white;
  cursor: pointer;
  color: #da00ff;
  font-size: 38px;
  transition: all 0.3s;
  font-family: cursive;
}

#container-box div:hover {
  background-color: #322d2f;
}

#container-box div.clicked {
  background-color: #322d2f;
  pointer-events: none;
}
#container-box div.clicked::before {
  opacity: 1;
}
#container-box div.finsh {
  pointer-events: none;
}

#container-box div:nth-child(3n + 1) {
  border-left: none;
}
#container-box div:nth-child(-n + 3) {
  border-top: none;
}
#container-box div:nth-last-child(-n + 3) {
  border-bottom: none;
}

#container-box div:nth-child(3n + 3) {
  border-right: none;
}

/* Start Popup  */

.poupResult {
  background-image: linear-gradient(#009688, #fefefe8c),
    linear-gradient(to top left, #9c27b04f, #673ab7),
    linear-gradient(to top right, #9c27b0, #9e9e9e00);
  width: 95%;
  height: 500px;
  border-radius: 24px;
  position: absolute;
  left: 50%;
  top: 200px;
  transform: translate(-50%, -14%);
  transition: 0.3s;
  animation: fadeIn 0.5s ease-out forwards;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 26px;
  z-index: 2;
}
s .poupResult.rest-finsh {
  display: none;
}

@media (min-width: 472px) {
  .poupResult {
    width: 437px;
  }
}

@media (min-width: 992px) {
  .poupResult {
    width: 600px;
  }
}
/* End Popup  */

/* Start Svg  */
.mysvg {
  height: 250px;
  width: 250px;
}
.mysvg.my-svg-no-own {
  width: 230px;
}
/* End Svg  */

/* Start Xwin SVG  */
.x-svg {
  width: 100%;
  height: fit-content;
}
.edit-x-svg {
  transform: scale(1.3) translate(16%, -31%);
  fill: black;
  stroke: black;
  animation: colors 2s linear infinite forwards;
}
/* End Xwin SVG  */

/* Start O win SVG  */
.o-svg {
  width: 100%;
  height: fit-content;
}
.edit-o-svg {
  transform: scale(1.3) translate(16%, 11%);
  fill: black;
  stroke: black;
  animation: colors 2s linear infinite forwards;
}

@keyframes colors {
  0%,
  100% {
    fill: black;
    stroke: black;
  }
  25% {
    fill: #3f51b5;
    stroke: #009688;
  }
  50% {
    fill: #009688;
    stroke: #3f51b5;
  }
  80% {
    fill: black;
    stroke: #3f51b5;
  }
}

/* End O win SVG  */

/* Start No Own Svg  */
.noOneSvg {
  width: fit-content;
  height: 230px;
}
.edit-NoOne-svg {
  fill: #000000;
  animation: colors 2s linear infinite forwards;
}

/* End No Own Svg  */

/* Start Message */
.message {
  font-size: 24px;
  word-spacing: 10px;
  letter-spacing: 17px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e0f2f1;
}

.message.noOwn {
  word-spacing: 5px;
  letter-spacing: 1px;
  width: 300px;
}

@media (min-width: 472px) {
  .message {
    font-size: 30px;
  }
}
@media (min-width: 472px) {
  .message.noOwn {
    word-spacing: 10px;
    letter-spacing: 6px;
    width: 400px;
  }
}
@media (min-width: 998px) {
  .message.noOwn {
    word-spacing: 10px;
    letter-spacing: 17px;
    width: 500px;
  }
}
.x-letter {
  font-size: 50px;
  margin-right: 25px;
  font-family: sans-serif;
  color: #a6fff7;
  animation: letter 2s linear infinite forwards;
}
@keyframes letter {
  0%,
  90%,
  100% {
    text-shadow: 10px 0px transparent, 20px 0px transparent;
  }
  25% {
    text-shadow: 10px 0px #3f51b57a, 20px 0px transparent;
  }
  50% {
    text-shadow: 10px 0px #3f51b57a, 20px 0px #3f51b53b;
  }
  75% {
    text-shadow: 10px 0px #3f51b57a, 20px 0px transparent;
  }
}

.noOwn-letter {
  font-size: 40px;
  letter-spacing: 2px;

  margin-right: 22px;
  font-family: sans-serif;
  color: #a6fff7;
  animation: letter 2s linear infinite forwards;
}

@media (min-width: 472px) {
  .noOwn-letter {
    margin-right: 30px;
  }
}

/* End Message  */

/* Start restSvg */

.rest {
  background: #00ffbf;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: 20px;
  cursor: pointer;
}
.restSvg {
  animation: rotate 1s linear infinite;
  animation-play-state: running;
}

.arrow {
  fill: #e0f2f1;
  animation: color-arrow 1s linear infinite;
  animation-play-state: running;
}

@keyframes color-arrow {
  0% {
    fill: #e0f2f1;
  }

  50% {
    fill: rgb(158 190 187);
  }

  100% {
    fill: #e0f2f1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.restSvg:hover {
  animation-play-state: paused;
}
.restSvg:hover .arrow {
  animation-play-state: paused;
}

/* End restSvg */