#recorder{position:fixed;width:3rem;height:3rem;border-radius:3rem;background:#38383d;border:1px solid #f9f9fa33;cursor:pointer;box-shadow:0 1px 4px #0c0c0d33,0 0 0 1px #00000026;transition:.2s ease;bottom:20px;right:20px}#recorder #record{width:60%;height:60%;top:20%;left:20%;position:absolute;transition:inherit}#recorder #arrow{width:50%;height:50%;top:30%;left:25%;position:absolute;transition:inherit;opacity:0}#recorder:active{border-color:transparent}#recorder:active #record{width:55%;height:55%;top:23%;left:23%}#recorder.recording{box-shadow:0 0 0 1px #45a1ff,0 0 0 4px #45a1ff4d}#recorder.recording #record{animation:recording .7s ease infinite}#recorder.download #record{height:40%;width:40%;top:15%;left:30%;animation:none}#recorder.download #arrow{animation:download .5s ease infinite}#recorder.out #record{animation:out .8s ease,in .2s .8s ease}@keyframes in{0%{height:0%;top:60%}}@keyframes recording{0%,to{transform:rotate(10deg)}50%{transform:rotate(-10deg)}}@keyframes download{0%{top:30%;opacity:0}50%{opacity:1}to{top:55%;opacity:0}}@keyframes out{20%{top:8%}75%,to{top:100%;opacity:0;height:0px}}body{background-color:#2a2a2e;margin:0;min-height:100vh;display:grid;place-items:center}