@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");

body {
  font-family: "Nunito", sans-serif;
  background: #da4453; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #89216b,
    #da4453
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #89216b,
    #da4453
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.player-label {
  z-index: 5;
  font-weight: 400;
  font-size: 42px;
  display: flex;
  justify-content: center;
  color: #2f2f2f;
  position: relative;
  top: 66px;
}

.player1 {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -50%);
  width: 32.5%;
  height: 85%;
  background-color: rgba(255, 255, 255, 0.65);
  transition: 0.15s;
  /* box-shadow: ; */
}

.player2 {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0%, -50%);
  width: 32.5%;
  height: 85%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: 0.5s;
}

.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  border: none;
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 18px;
  font-family: "Nunito", sans-serif;
  background-color: #c7365f;
  /* background-color: rgba(255, 255, 255, 0.6); */
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 10;
  transition: 0.2s;
}

.new-game {
  top: 17.5%;
}

.roll-dice {
  top: 66%;
}

.hold {
  top: 76%;
}

.total-score {
  display: flex;
  justify-content: center;
  font-size: 84px;
  color: rgb(188, 30, 30);
  margin-top: 64px;
  transition: 0.5s;
}

.current-score-box {
  background-color: #c7365f;
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 20%;
  border-radius: 7.5px;
}

.label-current,
.current-score {
  display: flex;
  justify-content: center;
  color: white;
  font-family: "Nunito", sans-serif;
  transition: 0.5s;
}

.current-score {
  font-size: 36px;
  margin-top: -10px;
}

.dice {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6%;
  z-index: 10;
}

.dice1 {
  display: none;
  transition: 0.5s;
}

.dice2 {
  display: none;
  transition: 0.5s;
}

.dice3 {
  display: none;
  transition: 0.5s;
}

.dice4 {
  display: none;
  transition: 0.5s;
}

.dice5 {
  display: none;
  transition: 0.5s;
}

.dice6 {
  display: none;
  transition: 0.5s;
}

.btn:active {
  transform: translate(-50%, -45%);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}

.btn:focus {
  outline: none;
}

@media (max-width: 590px) {
  .player1,
  .player2 {
    width: 45%;
  }
  .player-label {
    font-size: 30px;
    top: 84px;
    margin-bottom: 120px;
  }
  .current-score-box {
    width: 60%;
  }
  .dice {
    width: 15%;
  }
  .hold {
    top: 86%;
  }
  .roll-dice {
    top: 56%;
  }
}

@media (max-height: 500px) {
  .dice {
    width: 8%;
  }

  .player-label {
    font-size: 24px;
    top: 44px;
    margin-bottom: 120px;
  }
  .total-score {
    margin-top: -72px;
    font-size: 48px;
  }
  .hold {
    top: 80%;
  }
  .roll-dice {
    top: 56%;
  }
  .current-score-box {
    height: 30%;
  }
  .current-right {
    margin-left: 12px;
  }
  .current-left {
    margin-left: -12px;
  }
}