.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}.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}