@import "https://fonts.googleapis.com/css2?family=Roboto:wght@539&display=swap";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#root {
  background: linear-gradient(90deg, #020024 0%, #ee0038 0%, #00d4ff 100%);
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
}

#board {
  background: radial-gradient(circle, #aedeee95 0%, #d9e994 100%);
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  width: min(40vh, 90vw);
  height: min(40vh, 90vw);
  display: grid;
}

#board > div {
  border: 3px solid #000;
  justify-content: center;
  align-items: center;
  font-family: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif;
  font-size: 80%;
  font-weight: 500;
  display: flex;
}

.IamCross {
  width: 60%;
  height: 60%;
  font-weight: 500;
}

.IamCircle {
  width: 90%;
  height: 90%;
}

#interface {
  background: linear-gradient(90deg, #833ab4 0%, #006aa670 48%, #fc4554 100%);
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: min(50vh, 90vw);
  height: 80vh;
  display: flex;
  box-shadow: 0 54px 55px #00000040, 0 -12px 30px #0000001f, 0 4px 6px #0000001f, 0 12px 13px #0000002b, 0 -3px 5px #00000017;
}

#display {
  color: #eaff00;
  letter-spacing: .4rem;
  font-size: min(7.34vh, 54vw);
}

#reset {
  background-color: #ffe1a1;
  border-radius: 1.5rem;
  width: auto;
  height: auto;
  padding: .5rem 1rem;
  font-size: min(3.5vh, 10vw);
  font-weight: bold;
}

#reset:hover {
  cursor: pointer;
  background-color: #ffd16c;
}

#board > div:hover {
  cursor: pointer;
  background-color: #fdf08d;
}

.Blue {
  color: #00f;
}

.Red {
  color: red;
}
/*# sourceMappingURL=index.3a01df49.css.map */