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

html, body {
  background-color: #fbfffc;
  font-family: monospace;
}

h1 {
  text-align: center;
  font-size: 8vw;
  color: rgba(138, 179, 33, 0.929);
  background-color: #ffffff;
  margin: 1rem 0;
}

.message {
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 3rem 0;
  gap: 2rem;
}

#X, #O {
  color: rgba(138, 179, 33, 0.929);
  font-size: 8vmin;
}

#grid {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-template-rows: repeat(3, 120px);
  gap:5px;
  width: 260px;
  height: 260px;
  margin: 20rem auto;
  position: relative;
  z-index: 1;
  background: none;
}

#grid::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75rem;   /* Larger than #grid */
  height: 75rem;  /* Larger than #grid */
  transform: translate(-33%, -54%);
  background-image: url('data:image/svg+xml;utf8,<svg width="1787" height="1730" viewBox="0 0 1787 1730" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1388.76 615.788C1228.15 750.948 1188.99 900.338 1223.13 983.234L930.161 566.099C1095.26 657.339 1135.25 622.685 1312.89 497.179C1456.24 395.898 1610.5 277.898 1664.71 236.117C1677.54 226.228 1694.2 222.48 1709.8 226.867C1762.75 241.764 1771.31 255.868 1764.36 300.809C1762.43 313.344 1755.43 324.514 1745.5 332.403L1388.76 615.788Z" fill="%23353"/><circle cx="695.019" cy="1034.18" r="532.459" transform="rotate(-67.6332 695.019 1034.18)" fill="%23353"/><circle cx="695.019" cy="1034.18" r="502.205" transform="rotate(-67.6332 695.019 1034.18)" fill="%233F3F3F"/></svg>');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: .2px solid rgba(95, 95, 95, 0.929);
  cursor: pointer;
}

.box svg {
  width: 90%;
  height: 90%;
  transition: transform 0.2s;
}

.box:hover svg {
  transform: scale(1.1);
}

footer {
  text-align: center;
  margin-bottom: 2rem;
}

#menu {
  display: grid;
  width: 40vmin;
  margin: 2rem auto;
}

.reset {
  font-size: 5vmin;
  color: rgba(138, 179, 33, 0.929);
  border-radius: 0;
  cursor: pointer;
}

.reset:hover {
  background-color: rgba(138, 179, 33, 0.929);
}

.hide {
  display: none;
}

.figma-btn {
  font-size: 5vmin;
  color: rgba(138, 179, 33, 0.929);
  border-radius: 0;
  cursor: pointer;
}