.dice{height:4rem;width:4rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#4ecca3;border-radius:7px;color:#fff;font-size:2.5rem;padding:16px 25px;text-decoration:none;text-align:center}.piano{height:40%;width:auto;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(2,1fr);grid-column-gap:0px;grid-row-gap:0px;justify-content:space-evenly;background:#f0f5f3;border:2px solid black;border-radius:3px;color:#f0f8ff;font-size:1rem}.piano button{height:100%;width:1.5rem;font-size:.5rem}.piano button:nth-child(odd){color:#fff;background-color:#000}.piano button:nth-child(2n){color:#000;background-color:#fff}.music-factory-button{background-color:#ea4c89;border-radius:8px;border-style:none;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-family:Haas Grot Text R Web,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:500;height:40px;line-height:20px;list-style:none;outline:none;padding:10px 16px;position:relative;text-align:center;text-decoration:none;transition:color .1s;vertical-align:baseline;user-select:none;-webkit-user-select:none;touch-action:manipulation;top:20%;margin:5px}.music-factory-button:hover,.music-factory-button:focus{background-color:#f082ac}.player{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}#canvas{height:40%;width:50%;position:absolute;top:75%;left:50%;transform:translate(-50%,-50%)}.bar-wrapper{height:300px;position:relative}.bar{position:relative;bottom:0;width:5px;display:inline-block;border:1px solid red;height:5px;border-bottom:3px solid #fff}