/* Reset */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
}

/* Background */
.main {
  background-color: linen;
  margin: 0;
  height: 100vh;
  width: 100vw;
  border: 10px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2vh;
}

/* Game heading Tic-Tac-XO */
.heading-of-game {
  font-size: 10vh;
  font-family: cursive;
  text-align: center;
}
.blue-word {
  color: blue;
}
.red-word {
  color: red;
}

/* Game string screen */
.start-screen-heading {
  margin-top: 5vh;
  color: red;
  font-size: 4vh;
  font-family: "Courier New";
  text-align: center;
}

/* Cross & Circle container */
.cross-circle {
  margin: 5vh 0 2vh 0;
  font-family: cursive;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vh;
  flex-wrap: wrap; /* Wrap for mobile */
}

/* Cross & Circle styles */
.circle {
  font-size: 30vh;
  color: red;
}
.cross {
  font-size: 30vh;
  color: blue;
}

.cross-wrapper,
.circle-wrapper {
  height: 42vh;
  width: 45vh;
  border: 10px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover effect */
.cross-wrapper:hover,
.circle-wrapper:hover {
  border: 10px solid red;
  transition: 1.5s ease;
}

/* Start button */
.start-button {
  color: white;
  background: red;
  width: 40vh;
  font-family: cursive;
  font-size: 6vh;
  border-radius: 2vh;
  border: 5px solid black;
  cursor: pointer;
  align-self: center;
  margin: 3vh 0;
}

/* Footer */
.footer {
  position: relative;
  z-index: 2200000;
  display: flex;
  justify-content: end;
  margin: -95vh 7vh 1vh 1vh;
}

/* Responsive design */
@media (max-width: 480px) {
  .heading-of-game {
    font-size: 8vh;
  }
  .start-screen-heading {
    margin-top: -80vh;
    font-size: 2.5vh;
  }
  .cross-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    gap: 2vh;
  }
  .cross-wrapper,
  .circle-wrapper {
    height: 20vh;
    width: 20vh;
  }
  .circle,
  .cross {
    font-size: 15vh;
  }
  .start-button {
    width: 80%;
    font-size: 3.5vh;
    border-radius: 1vh;
  }
.footer {
  position: relative;
  z-index: 2200000;
  display: flex;
  justify-content: end;
  margin: -11vh 3vh 1vh 1vh;
}
}