.face{display:grid;grid-template-areas:"a . c" "e g f" "d . b";flex:0 0 auto;margin:1vw;padding:1vw;width:10vw;height:10vw;max-width:104px;max-height:104px;min-width:50px;min-height:50px;box-shadow:0 2px 2px #00000026;border-radius:10%;border:none}@media screen and (min-width: 1200px){.face{margin:16px;padding:10px;width:104px;height:104px}}.pip{display:block;align-self:center;justify-self:center;width:2vw;height:2vw;max-width:24px;max-height:24px;min-width:12px;min-height:12px;border-radius:50%;background-color:#333;box-shadow:inset 0 3px #111,inset 0 -3px #555}.pip:nth-child(2){grid-area:b}.pip:nth-child(3){grid-area:c}.pip:nth-child(4){grid-area:d}.pip:nth-child(5){grid-area:e}.pip:nth-child(6){grid-area:f}.pip:nth-child(odd):last-child{grid-area:g}*{box-sizing:border-box}body{margin:0;background-color:#0b2434;padding:20px;font-family:Karla,sans-serif}main{position:relative;background-color:#f5f5f5;max-width:800px;border-radius:5px;padding:20px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;margin:auto}.title{font-size:40px;margin:5rem 0 2rem}.instructions{font-family:Inter,sans-serif;font-weight:400;margin-top:0;text-align:center}.dice-container{display:grid;grid-template:auto auto / repeat(5,1fr)}.roll-dice{margin-top:1rem;height:50px;width:250px;border:none;border-radius:6px;background-color:#5035ff;color:#fff;font-size:1.2rem;font-family:Karla,sans-serif;cursor:pointer}.roll-dice:focus{outline:none}.roll-dice:active{box-shadow:inset 5px 5px 10px -3px #000000b3}.stats{display:flex;justify-content:space-between;width:100%}.stats{position:absolute;top:1rem;left:1rem;width:8.5rem;background-color:#0b2434;color:#fff;display:flex;flex-direction:column;padding:.2rem 1rem;border-radius:.5rem}.stats p{margin:.2rem 0}.best-time{position:absolute;top:1rem;right:1rem;width:8.5rem;height:3.5rem;background-color:#0b2434;color:#fff;flex-direction:column;padding:.2rem 1.5rem;border-radius:.5rem;display:flex;justify-content:center;align-items:center}.best-time p{margin-left:.4rem}