* {
  font-family: "Press Start 2P", cursive;
  margin: 0%;
  box-sizing: border-box;
  /* add a good font */
  /* add a good color */
}

body {
  background-image: url(images/background-3048876.jpg);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: #5da28e;
  height: 640px;
  width: 480px;
  padding: 24px;
  border-bottom: 16px solid #417163;
  border-right: 16px solid #417163;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.display {
  padding: 8px;
  background-color: #5e56a9;
  box-shadow: inset 10px 10px #3f3a71;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.player,
.computer {
  padding: 16px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.playerScore,
.computerScore {
  font-size: 32px;
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player .image,
.computer .image {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.display div img {
  height: 56px;
  width: auto;
}

.controls {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.buttons {
  display: flex;
  justify-content: space-around;
}

.buttons div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: space-around;
}

.buttons,
.reset {
  width: 100%;
  height: 100%;
}

.button {
  height: 104px;
  width: 104px;
  border-radius: 50%;
}

.reset {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reset button {
  border-right: 8px solid #854548;
  border-bottom: 8px solid #854548;
  background-color: #a8575b;
  height: 96px;
  width: 160px;
  border-radius: 24px;
}

.rock {
  background-color: #1f98e0;
  border-right: 8px solid #186490;
}

.paper {
  background-color: #4ebc43;
  border-right: 8px solid #35802e;
}

.scissors {
  background-color: #cfc330;
  border-right: 8px solid #756f1b;
}

.scissors img,
.paper img,
.rock img {
  height: 48px;
  width: auto;
}