@import"https://fonts.googleapis.com/css?family=Cabin";:root{--main-color: #d3c0f9}html{font-size:62.5%}body{color:#333;font-family:Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.6}h1,p{font-family:Lato}*,*:before,*:after{box-sizing:border-box}button{cursor:pointer}button:disabled{cursor:default}.is-active{font-weight:700}@media (min-width: 45rem){.show-for-mobile{display:none}}@media (max-width: 44.99rem){.show-for-desktop{display:none}}.box-layout{height:100vh;width:100vw;background:linear-gradient(#fa7979,#100527);display:flex;justify-content:center;align-items:center;flex-direction:column;transition-duration:1s}.box-layout__box{background:#ffffffd9;border-radius:20px;padding:1.2rem;text-align:center;width:auto;margin-bottom:2rem}.box_layout__title{margin:0 0 1.6rem;line-height:1}.box_layout__buttons{display:flex;justify-content:space-between;align-items:center}.button{border:none;outline:none;border-radius:5px;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px}.Rtable{display:flex;flex-wrap:wrap;margin:0;padding:0}.Rtable-cell{box-sizing:border-box;flex-grow:1;width:100%;padding:.8em 1.2em;overflow:hidden;list-style:none}.Rtable-cell>h1,.Rtable-cell>h2,.Rtable-cell>h3,.Rtable-cell>h4,.Rtable-cell>h5,.Rtable-cell>h6{margin:0}.Rtable--2cols>.Rtable-cell{width:50%}.Rtable--3cols>.Rtable-cell{width:33.33%}.Rtable--4cols>.Rtable-cell{width:25%}.Rtable--5cols>.Rtable-cell{width:20%}.Rtable--6cols>.Rtable-cell{width:16.6%}.drum-pad{margin:.5rem;padding:1rem;background-color:#888;-webkit-user-select:none;user-select:none;width:100px;height:100px;box-shadow:0 3px 2px #242121}.drum-machine{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;background-color:#3c3c3c}.drum-machine__keyboard{justify-content:center;margin:1.2rem;background-color:#a2a2a2}.drum-machine__settings{display:flex;flex-direction:column;justify-content:center;margin:1.2rem}label{display:flex;align-items:center;justify-content:flex-start;font-size:10px;color:#000;margin-bottom:16px}label span{margin-left:7px}.drum-keyboard{display:grid;grid-template-rows:repeat(3,auto);grid-template-columns:repeat(3,auto)}#display{background-color:#888;line-height:3.2rem;height:3.2rem;width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media only screen and (max-width: 45rem){.drum-pad{width:75px;height:75px}.drum-machine{flex-direction:column}}.box-style,.drum-pad,.drum-machine,.drum-machine__keyboard,#display{border-radius:.5rem;border:1px solid black}body{margin:0}