@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500&display=swap');
/*? GLOBAL */
:root {
  --mainBgColor: #f3f3f3;
  --secondaryBgColor: #fff;
  --hoverColor: #f5465d;
  --mainTextColor: #444;
}
* {
  font-family: 'Licorice', cursive;
  font-weight: 200;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--mainTextColor);
}
body {
  background-color: var(--mainBgColor);
  height: 100vh;
  display: grid;
  place-items: center;
}
h1 {
  text-align: center;
  margin-bottom: 1rem;
}
/*? CONTAINER */
.wrapper {
  background-color: var(--secondaryBgColor);
  border-radius: 25px;
  padding: 2rem;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
/*? PLAYER */
.player {
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.player button {
  margin: 1rem;
  border: none;
}
.player-option {
  padding: 1.5rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  /* transform: rotate(90deg); */
}
.option-rock {
  background: linear-gradient(to top left, #a044ff, #6a3093);
  grid-column: span 2;
  justify-self: center;
}
.option-rock:hover {
  background: linear-gradient(to bottom right, #a044ff, #6a3093);
}
.option-paper {
  background: linear-gradient(to top left, #2980b9, #2c3e50);
}
.option-paper:hover {
  background: linear-gradient(to bottom right, #2980b9, #2c3e50);
}
.option-scissor {
  background: linear-gradient(to top left, #fd746c, #ff9068);
  transform: rotate(180deg);
  transform: scale(-1, 1);
}
.option-scissor:hover {
  background: linear-gradient(to bottom right, #fd746c, #ff9068);
}
/*? COMPUTER */
.computer {
  display: grid;
  place-content: center;
  border-left: 1px solid var(--mainTextColor);
}
.computer-option {
  padding: 1.5rem 1.5rem;
  border-radius: 25px;
  background: linear-gradient(to top left, #c8c8c8, #a8a7a7);
  height: 10rem;
  width: 10rem;
}
/*? NEXT GAME */
#next-round {
  margin-left: 40%;
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--mainTextColor);
  outline: none;
  cursor: pointer;
  font-size: 1rem;
  background: linear-gradient(to top left, #e2ece9, #bee1e6);
}
#next-round:hover {
  background: linear-gradient(to bottom right, #dfe7fd, #cddafd);
}

.message {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--secondaryBgColor);
  border-radius: 25px;
  font-size: 2rem;
  padding: 1rem;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.66);
  opacity: 0;
  transition: opacity 0.3s;
}