:root{--main-color: rgb(80, 53, 255)}*{box-sizing:border-box;font-family:Jua,sans-serif}body{margin:0;background-color:#e3a215;padding:0;font-family:sans-serif;-webkit-user-select:none;user-select:none}#spinning-rays{position:fixed;margin:0;width:100%;height:100vh;fill:var(--main-color);z-index:-1}a,a:visited{color:#000;text-decoration:none}main{margin:auto;background-color:#f5f5f5;max-width:800px;padding:20px 50px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:20px}.title{font-family:Alegreya Sans SC,sans-serif;font-weight:900;font-size:60px;margin:0 0 1rem;transform:rotate(-10deg)}.instructions{font-weight:500;margin-top:0;font-size:18px;text-align:center;max-width:25ch}.dice-container{display:grid;grid-template:auto auto / repeat(5,1fr);gap:20px;margin-bottom:40px}.roll-dice{height:50px;width:150px;border:none;border-radius:6px;background-color:var(--main-color);color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer}.roll-dice:focus{outline:none}.roll-dice:active{box-shadow:inset 5px 5px 10px -3px #000000b3}.stats{display:flex;gap:200px;margin:40px 0 20px;font-weight:700;font-size:22px;text-align:center}.die-face{border-radius:10px}.first-face{display:flex;justify-content:center;align-items:center}.dice{cursor:pointer;box-shadow:0 2px 2px #00000026;padding:12px;background-color:#fff;width:80px;height:80px;border-radius:10px;margin:4px}.dot{display:block;width:16px;height:16px;border-radius:50%;background-color:#000}.second-face{display:flex;justify-content:space-between}.second-face .dot:nth-of-type(2){align-self:flex-end}.third-face{display:flex;justify-content:space-between}.third-face .dot:nth-of-type(1){align-self:flex-end}.third-face .dot:nth-of-type(2){align-self:center}.fourth-face,.fifth-face,.sixth-face{display:flex;justify-content:space-between}.fourth-face .column,.fifth-face .column,.sixth-face .column{display:flex;flex-direction:column;justify-content:space-between}.fifth-face .column:nth-of-type(2){justify-content:center}footer{position:absolute;bottom:0;display:flex;justify-self:left}footer p{margin-left:.5rem;font-weight:700;color:#fff;text-shadow:2px 1px 0px #000}footer a,footer a:visited{color:#fff}footer #name{font-size:1.2rem}
