.attribution {
  font-size: 0.6875rem;
  text-align: center;
  color: #fff;
}
.attribution a {
   color: hsl(228, 45%, 44%);
 }
body{
  background-color: hsl(218, 23%, 16%);
  justify-content: center;
  align-items: center;
  display: flex;
}
.Box{
  border-radius: 0.625rem;
  width: 20rem;
  background-color: hsl(217, 19%, 24%);
  margin-top: 9.375rem;
  margin-bottom: 9.375rem;
  position: relative;
}
img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
/* .Box>img{
  max-width: 100%;
  align-content: center;
} */

.Advice-Text{
  color: hsl(193, 38%, 86%);
  padding: 1.25rem;
  font-family: 'Manrope',sans-serif;
  font-weight: 800;
  text-align: center;
  font-size: 1.3rem;
}

.Box>.Advice-ID{
  text-align: center;
  color: hsl(150, 100%, 66%);
  padding-top: 1.5625rem;
  letter-spacing: 0.1875rem;
  font-family: 'Manrope',sans-serif;
  text-transform: uppercase;
  font-size: 0.825rem;
}
button{

  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  border-radius: 55%;
  margin:0.3125rem auto 0.625rem;
  background-color: hsl(150, 100%, 66%);
  border: none;
  cursor: pointer;
  position: relative;
  bottom: -1.875rem;

}
button:hover{
box-shadow: 0 0 40px hsl(150, 100%, 66%);
transition: 0.1s;
}
button>#Dice{
  max-width: 100%;
  padding: 0.625rem;
}
.Box>button{
  align-items: center;
  justify-content: center;
  display: flex;
}
@media (min-width:500px) {
  .Box{
    max-width: auto;
  }
}