@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Karla:wght@400;500;600;700;800&display=swap";body{margin:0;background-color:#56cbf9;height:100vh}.container,body{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{width:750px;height:750px;border-radius:10px;background-color:#fff;border:4px solid #f02eaa;box-shadow:5px 5px rgba(240,46,170,.4),10px 10px rgba(240,46,170,.3),15px 15px rgba(240,46,170,.2),20px 20px rgba(240,46,170,.1),25px 25px rgba(240,46,170,.05)}.title-wrapper{font-family:Inter,sans-serif;text-align:center}.title-wrapper .title{font-size:60px;margin:0}.title-wrapper .instructions{font-size:18px;margin:10px 0 0}.dies{margin:70px 0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;grid-gap:30px 30px;gap:30px 30px;grid-auto-flow:row;grid-template-areas:". . . . ." ". . . . ."}.dies--die{cursor:pointer;background-color:#13b6f6;font-family:Karla,sans-serif;font-size:30px;font-weight:700;display:flex;justify-content:center;align-items:center;height:90px;width:90px;box-shadow:0 4px 4px rgba(0,0,0,.25);border-radius:3px}.held,.roll-dice-btn{background-color:#f02eaa}.roll-dice-btn{cursor:pointer;border:none;padding:20px 50px;border-radius:7px;font-family:Karla,sans-serif;font-size:30px;font-weight:700;color:#fff;box-shadow:0 4px 4px rgba(0,0,0,.25)}.roll-dice-btn:hover{background-color:#f353b8}.roll-dice-btn:active{transform:scale(1.05)}.blue{background-color:#13b6f6}.rotate-scale-up{animation:rotate-scale-up .4s linear}@keyframes rotate-scale-up{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.3) rotate(180deg)}to{transform:scale(1) rotate(1turn)}}@media screen and (max-width:750px){.container{width:320px;height:320px}.title-wrapper .title{font-size:25px;margin:0}.title-wrapper .instructions{font-size:10px;margin:10px 0 0}.dies{margin:30px 0;gap:18px 18px}.dies--die{height:36px;width:36px;font-size:20px}.roll-dice-btn{padding:10px 20px;font-size:16px}}