/**********************
832px (Tablet Portray)
***********************/
@media (max-width: 52em) {
  html {
    font-size: 56%;
  }

  body {
    overflow: scroll;
  }
  main {
    flex-direction: column;
    height: min-content;
  }

  .dice {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .current {
    width: max-content;
    position: absolute;
  }

  .current--0 {
    bottom: 0;
    left: 0;
    transform: translate(10%, 50%);
  }

  .current--1 {
    top: 0;
    right: 0;
    transform: translate(-10%, -50%);
  }

  #name--0,
  #score--0 {
    position: relative;
    top: 2rem;
  }
  #name--1,
  #score--1 {
    position: relative;
    top: -2rem;
  }

  .btn {
    height: fit-content;
  }

  .btn--roll {
    top: auto;
    bottom: 10%;
    /* transform: translateY(0); */
  }
  .btn--hold {
    top: auto;
    bottom: 0.5rem;
    /* display: none; */
  }

  .instruction {
    font-size: 1.8rem;
    line-height: 1.4;
    gap: 2rem;
  }
}

/**********************
400px (Mobile Phone)
***********************/
@media (max-width: 25rem) {
  html {
    font-size: 35%;
  }
}