* {
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "Arial, sans-serif, Courier New", Courier, monospace;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  color: #fff;
  justify-content: center;
  background: radial-gradient(circle, #0f0c29, #302b63, #24243e);
}

.heading {
  text-align: center;
  font-size: 3rem;
}

.heading #rock {
  background: linear-gradient(to right, #01bdff, #ff00fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading #paper {
  background: linear-gradient(to right, #ff3bb4, #ff630d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading #scissors {
  background: linear-gradient(to right, #ffaf00, #ff931e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.score-boardContainer {
  border: 4px solid #1900f6a9;
  box-shadow: 0 0 20px #1900f6a9;
  border-radius: 0.5rem;
  /* width: 100%; */
  text-align: center;
  margin: 1rem 0 2rem 0;
}

.score-board {
  padding: 0.5rem 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  text-transform: uppercase;
}

.round {
  text-align: center;
  padding: 0.5rem 0;
  font: 1.5em bolder;
  color: #01bdff;
  text-shadow: 0 0 5px #00e1ff;
}

.score-boardContainer #score {
  padding-top: 0.5rem;
  font: 3rem bolder;
}

#score-title {
  color: #ff931e;
  text-shadow: 0 0 5px #eda01b;
}

.game-iconsContainer {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  font-size: 4rem;
  margin-bottom: 1.5rem;
}

.icon-item {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#rock-icon {
  box-shadow: 0 0 20px rgba(1, 189, 255, 0.5);
  color: #00e1ff;
  border: 4px solid #00e1ff;
  text-shadow: 0 0 5px #01bdff;
  grid-row-start: 2;
}

#paper-icon {
  color: #ff3bb4;
  border: 4px solid #ff3bb4;
  text-shadow: 0 0 5px #ff3bb4;
  box-shadow: 0 0 20px rgba(1, 189, 255, 0.5);
  grid-column-start: 2;
}

#scissors-icon {
  color: #eda01b;
  border: 4px solid #eda01b;
  text-shadow: 0 0 5px #eda01b;
  box-shadow: 0 0 20px #01bdff80;
  grid-column-start: 3;
  grid-row-start: 2;
}

.game-icons {
  text-align: center;
}

button { 
  cursor: not-allowed;
  text-transform: uppercase;
  background-color: rgba(1, 189, 255, 0.050);
  color: #00e1ff;
  padding: 0.6rem 2.6rem;
  font-size: 2rem;
  font-weight: bolder;
  border-radius: 0.5rem;
}

button#start {
  cursor: pointer;
  border: 4px solid #00e1ff;
  text-shadow: 0 0 5px #eda01b;
  color: #eda01b;
}

button#start:hover {
  border: 4px solid transparent;
  background-color: transparent;
  color: #ff3bb4;
  box-shadow: 0 0 20px #01bdff80;
}

button#start:active {
  box-shadow: 0 0 10px #eda01b;
  transform: scale(0.95);
}

#game-iconsContainerAfterStart {
  display: flex;
  gap: 2rem;
  font-size: 4rem;
  margin: 3.5rem 0;
}

button#shoot {
  cursor: pointer;
  border: 4px solid #ff3bb4;
  box-shadow: 0 0 10px #ff3bb4;
  text-shadow: 0 0 5px #00e1ff;
  color: #00e1ff;
}

button#shoot:hover {
  border: 4px solid transparent;
  background-color: transparent;
  color: #eda01b;
  box-shadow: 0 0 20px #ff3bb480;
}

button#shoot:active {
  box-shadow: 0 0 10px #00e1ff;
  transform: scale(0.95);
}