*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f5e0dc;padding:20px;font-family:Karla,sans-serif;height:100vh;display:flex;justify-content:center;align-items:center}main{background-color:#f5f5f5;min-height:450px;max-width:500px;border-radius:10px;padding:50px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-around;align-items:center}.title{font-size:40px;margin-bottom:5px}.instructions{font-family:Inter,sans-serif;font-weight:400;margin:17px 0;text-align:center;color:#787878}.dice-container{display:grid;grid-template:auto auto / repeat(5,1fr);gap:20px;margin-bottom:15px;transition:all .5s}@media only screen and (max-width: 768px){.dice-container{gap:10px}}@media only screen and (max-width: 480px){.dice-container{gap:5px}}.die-face{height:70px;width:calc(55px + 1vw);box-shadow:0 2px 2px #00000026;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer}.die-num{font-size:2rem}.roll-dice-btn{padding:.5em 3em;margin:10px;border:none;border-radius:6px;background-color:#f09c8b;color:#fff;font-size:1.5rem;font-family:Karla,sans-serif;cursor:pointer}.roll-dice-btn:hover{background-color:#c1796b}.roll-dice:focus{outline:none}.roll-dice:active{box-shadow:inset 5px 5px 10px -3px #000000b3}.pink-bold{color:#f09c8b;font-weight:700}
