/* Pre Style  */
* {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  box-sizing: border-box;
}

/* Colors */
:root {
  --ourBlack: #231f20;
  --ourBlue: #7ebdc2;
  --ourRed: #bb4430;
  --ourYellow: #f3dfa2;
  --hoveryellow: #ebd185;
  --ourWhite: #fbfaf5;
}

/* comman styel */

body,
.homePage,
.gamebox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* style for body */
body {
  background-color: var(--ourWhite);
  height: 100vh;
}

/* Style for home page */
.homePage h1 {
  font-size: 4rem;
  margin: 1rem 0;
}
.homePage span:nth-child(1) {
  color: var(--ourBlack);
}
.homePage span:nth-child(2) {
  color: var(--ourRed);
}
.homePage span:nth-child(3) {
  color: var(--ourBlue);
}
.homePage img {
  width: 80%;
}

.homePage button {
  padding: 0.5rem 2.5rem;
  margin: 1.5rem 0;
  border-radius: 0.3rem;
  background: var(--ourYellow);
  border: none;
  cursor: pointer;
}
.homePage button:hover {
  background: var(--hoveryellow);
}

.homePage a {
  text-decoration: none;
  color: var(--ourBlack);
  font-size: 1.5rem;
  font-weight: bolder;
}

/* style for Game page */

.board {
  width: 24rem;
  height: 24rem;
  border: none;
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 8rem;
  border: 5px solid var(--ourBlack);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 7rem;
  line-height: 0;
}

.x {
  color: var(--ourRed);
  pointer-events: none;
}

.o {
  color: var(--ourBlue);
  pointer-events: none;
}

.control {
  display: flex;
}

.control > div {
  margin: 2rem;
  border-radius: 10px;
  padding: 0.5em 1.5rem;
  font-size: 1rem;
  font-weight: bolder;
}

.xturn {
  border: 0.2rem solid var(--ourRed);
}

.xturn.on {
  background-color: var(--ourRed);
  color: var(--ourWhite);
}

.oturn.on {
  background-color: var(--ourBlue);
  color: var(--ourWhite);
}

.oturn {
  border: 0.2rem solid var(--ourBlue);
}

/* style for smaller screen */
@media screen and (max-width: 786px) {
  .board {
    width: 22rem;
    height: 22rem;
  }
  .box {
    width: 7.3rem;
  }
}