html{height:240px}body{margin:0;padding:0;font-family:"Open Sans"}.container{width:150px;margin:10px auto}.dice{height:150px;width:150px;border-radius:40px;background-color:#fff;border:7px solid #5d9cec;transform:rotate(5deg);padding:11px 18px}.dot{display:inline-block;height:30px;width:30px;border-radius:50%;border:3px solid #5d9cec;background-color:#5d9cec;box-sizing:border-box}.dot-container{text-align:center;vertical-align:middle;margin:0;padding:0}.btn-roll{display:block;height:30px;margin:15px auto;border:5px solid #5d9cec;border-radius:10px;background-color:#5d9cec;color:#fff;text-transform:capitalize;line-height:30px;text-decoration:none;text-align:center;font-size:17pt;letter-spacing:1px;font-weight:600;cursor:pointer}.btn-roll:active{transform:translate(0,2px)}.btn-roll-active{color:#676767;background-color:#fff}.dot-active{background-color:#fff}