*{box-sizing:border-box}body{margin:0;background-color:#0b2434;padding:20px;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}div#root{height:100%;width:100%;max-height:400px;max-width:400px}main{background-color:#f5f5f5;height:100%;width:100%;border-radius:5px;padding:20px;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.title{font-size:40px;margin:0}.instructions{font-family:Inter,sans-serif;font-size:1.1em;font-weight:400;margin-top:0;text-align:center}.dice-container{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,auto);gap:18px}.die{height:50px;width:50px;background:#fff;border:none;box-shadow:0 2px 2px #00000026;border-radius:5px;cursor:pointer;display:flex;justify-content:center;align-items:center;position:relative;font-size:0;padding:0}.pip-wrapper{position:relative;width:100%;height:100%}.pip{width:10px;height:10px;background:#000;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}button{font-family:Karla,sans-serif;cursor:pointer}.die:hover{background-color:#59e391}.rollBtn{width:92.16px;height:35.84px;background-color:#5035ff;color:#fff;font-weight:700;border-radius:5px}.rolling{animation:roll .3s ease-in-out}@keyframes roll{0%{transform:rotate(0) scale(1)}25%{transform:rotate(20deg) scale(.9)}50%{transform:rotate(-20deg) scale(1.1)}75%{transform:rotate(10deg) scale(.95)}to{transform:rotate(0) scale(1)}}.rolling{animation:roll3d .6s cubic-bezier(.55,.15,.45,1);transform-style:preserve-3d}@keyframes roll3d{0%{transform:rotateX(0) rotateY(0) scale(1)}25%{transform:rotateX(180deg) rotateY(90deg) scale(1.15)}50%{transform:rotateX(270deg) rotateY(180deg) scale(.9)}75%{transform:rotateX(360deg) rotateY(270deg) scale(1.1)}to{transform:rotateX(360deg) rotateY(360deg) scale(1)}}