* {
  box-sizing: border-box;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  color: white;
  background: rgb(76, 73, 0);
  background: radial-gradient(
    circle,
    rgba(76, 73, 0, 1) 0%,
    rgba(8, 0, 81, 1) 100%
  );
}

.container {
  color: white;
  text-shadow: -2px 5px 20px yellow;
  box-shadow: -5px 4px 30px darkorange;
  border: 5px solid black;
  width: 500px;
  margin: 100px auto;
  padding: 20px;
  font-size: 20px;
  border-radius: 30px;
  background: rgb(0, 105, 48);
  background: linear-gradient(
    94deg,
    rgba(0, 105, 48, 1) 0%,
    rgba(85, 30, 0, 1) 100%
  );
}

.target-container,
.score-container {
  width: 300px;
  margin: auto;
  text-align: center;
}

.score-container {
  justify-content: space-between;
  padding: 20px;
  display: none;
  font-size: 20px;
}

#p1Score,
#p2Score {
  color: black;
  background-color: white;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 10px;
  border-radius: 30px;
}

button {
  color: white;
  text-shadow: -2px 5px 20px yellow;
  background: rgb(0, 105, 48);
  background: linear-gradient(
    94deg,
    rgba(0, 105, 48, 1) 0%,
    rgba(85, 30, 0, 1) 100%
  );
  box-shadow: -2px 2px 30px black;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  outline: none;
  border-radius: 20px;
  font-weight: 600;
  width: 100px;
  height: 50px;
}

input {
  border-radius: 30px;
  font-size: 30px;
  width: 180px;
  height: 50px;
}

.win-container {
  text-align: center;
}