:root{--dark:#252423;--light:#444342;--blue:#7efbec}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#252423;background-color:var(--dark);height:100vh;width:100vw}.wrapper,body{align-items:center;display:flex;flex-direction:column;justify-content:center}.wrapper{margin:0 auto;max-width:840px;width:95%}canvas{background-color:#252423;background-color:var(--dark);border:1px solid #444342;border:1px solid var(--light);border-radius:4px;height:200px;margin:1em 0;width:100%}.controls{grid-gap:1em;display:grid;grid-template-columns:repeat(8,1fr);width:100%}button{background-color:#252423;background-color:var(--dark);border:1px solid #444342;border:1px solid var(--light);border-radius:4px;color:#fff;font-size:17px;font-weight:400;height:36px;letter-spacing:-.022em;line-height:1.47059;outline:0 none;width:100%}button,i{cursor:pointer}i{color:#444342;color:var(--light);font-size:36px;left:0;position:absolute;top:0}input{margin:12px 0}input[type=range]{-webkit-appearance:none;background:#444342;background:var(--light);height:1px}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#252423;background:var(--dark);border:1px solid #7efbec;border:1px solid var(--blue);border-radius:50%;cursor:pointer;height:12px;width:12px}input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#252423;background:var(--dark);border:1px solid #7efbec;border:1px solid var(--blue);border-radius:50%;cursor:pointer;height:12px;width:12px}
/*# sourceMappingURL=main.2d5d7e55.css.map*/