:root {
  --color-black: #000000;
  --color-white: #FFFFFF;

  --font-size: 1.6rem;
}

html {
  box-sizing: border-box;
  /* 10/16 * 100: converting default font size to 10px */
  font-size: 62.5%;
  height: 100%;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  color: white;
  font-size: var(--font-size);
  overflow-x: hidden;
  height: 100%;
  background-color: var(--color-black);
  font-family: 'Open Sans', sans-serif;
}


/* Header Design  */
header {
  padding: 1.6rem;
}

header nav {
  display: flex;
  justify-content: space-between;
}

.logo,
.sound {
  width: 4.4rem;
  height: 4.4rem;
}

.logo img,
.sound svg {
  width: 4.4rem;
  height: 100%;
}

/* Main Design  */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 3.2rem;
  margin-top: 3.2rem;
  max-height: 100vh;
}

.board {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background-color: var(--color-white);
}

.board>div {
  height: 20rem;
  width: 20rem;
  background-color: var(--color-black);
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13rem;
}

.box:hover {
  cursor: pointer;
}

.box:focus-visible {
  outline: 0;
  background-color: #333333;
}

.scores {
  display: flex;
  column-gap: 6.4rem;
  align-items: center;
  text-transform: uppercase;
}

.p1,
.p2,
.tie-text {
  font-size: 2.4rem;
}

.scores>p {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.score {
  font-size: 4.8rem;
  font-weight: 800;
}

.swap>svg {
  height: 3.6rem;
  width: 3.6rem;
}

.multi-player {
  margin-top: 0;
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: 4px;
}

.multi-player span {
  font-size: 1.6rem;
}


/* Responsive Design  */
@media screen and (max-width: 620px) {
  .board>div {
    width: 12rem;
    height: 12rem;
  }

  .box {
    font-size: 8rem;
  }

  .scores {
    column-gap: 2.4rem;
  }

  .p1,
  .p2,
  .tie-text {
    font-size: 1.8rem;
  }
}


@media screen and (max-height: 900px) {
  .board>div{
    width: 15rem;
    height: 15rem;
  }
}