* {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}

body {
  font-family: "Naruto";
  background-color: bisque;
}

main {
  background: linear-gradient(
    to right,
    rgb(223, 116, 169) 0%,
    rgb(109, 55, 147) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  height: 80vh;
  margin: 1rem;
}

main section {
  width: 100%;
  height: 90%;
  border: 10px solid pink;
  padding: 1rem;
  text-align: center;
  margin: 0 1rem;
}

.total {
  margin: 3rem 0;
  font-weight: bolder;
  background-color: pink;
  padding: 2rem;
}

.current-score {
  background-color: rgb(183, 147, 165);
  padding: 1rem 7rem;
  position: absolute;
  top: 70%;
}

.btn {
  display: block;
  cursor: pointer;
  width: 100%;
  padding: 0.4rem;
  border-radius: 20px;
  margin: 0.5rem 0;
  background-color: beige;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
  border: none;
}

/* .btn::click */

.instruction {
  text-align: center;
}

#roll,
#hold,
.dice-picture {
  position: absolute;
  top: 75%;
  right: 45%;
  width: 10%;
}

#roll {
  top: 65%;
}

.dice-picture {
  top: 45%;
}

#new-game {
  position: absolute;
  top: 13%;
  right: 43%;
  width: 13%;
}

/* ACTIVE STATE */
.active {
  background-color: rgb(206, 186, 161);
  transition: 0.8s all;
}

img {
  width: 60px;
  height: 50px;
}

.hidden {
  display: none;
}

/* MEDIA QUERY */

@media screen and (max-width: 440px) {
  main {
    margin: 0.7rem;
    padding: 1rem;
  }

  .current-score {
    padding: 1rem 2rem;
  }

  img {
    width: 50px;
    height: 40px;
  }

  #roll,
  #hold,
  .dice-picture {
    right: 40%;
    width: 20%;
  }

  #new-game {
    top: 2%;
    right: 35%;
    width: 30%;
  }
}

/* @media screen and (min-width: 500px) {
} */

@media screen and (min-width: 768px) {
  body {
    height: 100vh;
  }

  main {
    height: 100%;
  }

  .current-score {
    padding: 1rem 5rem;
    margin-left: 1rem;
  }

  .total {
    margin: 8rem 0;
  }

  #new-game {
    top: 5%;
    right: 35%;
    width: 25%;
  }
}

@media screen and (min-width: 1000px) {
  .current-score {
    margin-left: 3rem;
    padding: 3rem;
    width: 20%;
  }

  #new-game {
    top: 9%;
    right: 40%;
    width: 20%;
  }
}