*{margin:0;padding:0;box-sizing:border-box}h1{text-align:center;font-size:1rem;padding:1.5rem 1rem;text-transform:uppercase;font-weight:700;background:#00334c;color:#00ced1;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}html,body{height:100vh}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.8rem}.wrapper{display:flex;flex-direction:column}h2{font-size:2rem;text-align:center;font-weight:400;padding:.5rem 0 0}.main-controls{padding:0rem 0;background:#fff;border:solid 6px #ffff00;position:absolute;top:6.625rem;left:0;right:0}input#file{margin-top:3rem;font-size:1rem;text-align:center;width:calc(90% - 8rem);opacity:0;display:none}canvas{display:block}#buttons{display:flex;flex-direction:row;z-index:2;position:relative;background:#fff;border-radius:.5rem;justify-content:space-between}#buttons button{font-weight:700;font-size:1rem;padding:.25rem .5rem;border-radius:.35rem;border:solid yellow;color:#00334c;background:#ff0;margin:1rem}button{font-size:1rem;background:#fff;text-align:center;color:silver;border:none;transition:all .2s;padding:.5rem;width:calc(50% - 3rem);border-radius:.35rem}button:hover,button:focus{box-shadow:inset 0 0 60px #fff;background:#e2ec81}button:active{box-shadow:inset 0 0 20px #00000080;transform:translateY(2px)}.end:disabled{opacity:.5}.sound-clips{flex:1;overflow:auto;height:calc(100% - 6.25rem);margin-top:-1rem;margin-bottom:-2rem;height:auto;border-bottom:solid .5em #a00000;margin:0 auto;border-radius:.5rem;position:absolute;background:#fff;z-index:7;left:2vw;right:2vw;min-height:33vh;max-height:42vh}section,article{display:block}.clip{padding-bottom:1rem;margin-left:1rem;margin-right:1rem;text-align:center}audio{display:block;margin:1.325rem;width:100%;margin:1rem auto}.clip p{display:inline-block;font-size:1.25rem;font-weight:700;background:#fff;padding:1rem;color:#353131;text-align:center;margin-top:4rem;border-bottom:solid 5px}.clip button.delete{font-size:1rem;float:right;width:35vw;background:red;padding:.5rem .75rem;font-size:.8rem;margin-right:1rem;margin-bottom:1.25rem}.clip a.save{font-size:1rem;float:left;color:#fff;width:35vw;background:#6c6b83;padding:.5rem .75rem;font-size:.8rem;border-radius:4px;margin-left:1rem;margin-bottom:1.25rem;margin-right:1rem}button.delete{background:red;padding:.5rem .75rem;font-size:.8rem}label{font-size:3rem;z-index:6;position:relative;cursor:pointer;background-color:#000;border-radius:10px}input[type=checkbox]{position:absolute;top:-100px}aside{position:fixed;top:0;left:0;width:100%;height:100%;transform:translate(100%);transition:.3s all ease-out;background-color:#efefef;padding:1rem}aside p{font-size:1.2rem;margin:.5rem 0}aside a{color:#666}input[type=checkbox]:checked~aside{transform:translate(0)}.clip p{cursor:pointer;text-align:center}.clip div p{font-size:2rem;margin-top:-1rem;background:#25aae1;width:100%;text-align:left;border-radius:.5rem;padding:.75rem .75rem 1rem 1.5rem}.clip div{text-align:left;margin:2rem 1rem 1rem}section#wrapper{text-align:center;z-index:7;display:grid;margin:auto;margin-top:1.325rem;width:calc(100vw - 2rem);position:relative;position:absolute;left:0;top:32vh;right:0;height:6.25vh}section#wrapper audio{position:absolute;top:7vh}#wrapper label{font-size:1rem;cursor:pointer;background-color:#bd32f7;border-radius:10px;padding:1rem;color:#fff;border:solid yellow;text-transform:uppercase;font-weight:700;position:relative;display:block;margin:0 auto;width:54vw;position:absolute;bottom:0;left:0;right:0;z-index:1}.visualizer{width:100vw;height:100vh;position:absolute;bottom:0;object-fit:cover;left:0;right:0;z-index:2;opacity:.3}#loading{display:none;position:absolute;inset:0;width:100%;text-align:center;height:100vh;margin:auto;background:#000c;color:#fff;line-height:100vh;text-transform:uppercase;z-index:1000}main{background:#00334c}.end{display:none}