*{box-sizing:border-box}body,html{width:100%;height:100%}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%;display:flex;flex-direction:column}.dropdown-toggle{width:200px}.instructions{margin-right:2rem;margin-left:2rem}.main-container{position:relative;flex-grow:1;background-color:#000;color:#fff}h3{margin-top:1rem;margin-bottom:.25rem}select{border:.05rem solid #777;padding:.25rem;background-color:#fff;border-radius:.25rem}.app{width:100%;height:100%}.about{margin-top:2%;margin-left:5%}.content-container{width:100%;height:100%;max-height:100%;padding-top:4rem}.content{position:absolute;width:100%;max-width:60rem;left:50%;max-height:100%;transform:translateX(-50%);padding-left:.5rem;padding-right:.5rem;overflow-y:scroll}.content::-webkit-scrollbar{display:none}.full{width:100%;height:100%}.floating-container{position:fixed;right:1rem;bottom:1rem}.floating-button{border:none;border-radius:50%;width:3rem;height:3rem;cursor:pointer;box-shadow:0 .25rem .5rem #777;font-size:1.5rem;padding:0;margin:0;z-index:5}.floating-container-center{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%)}.floating-button-large{border:none;border-radius:50%;width:4.5rem;height:4.5rem;cursor:pointer;box-shadow:0 .25rem .5rem #777;font-size:2rem;padding:0;margin:0}.freq-pointer{position:absolute;top:0;left:0;pointer-events:none}.freq-note-label{display:inline-block;position:absolute;left:0;top:0;font-size:20px}.freq-octave{font-size:.6em;vertical-align:sub}:root{--sidenav-closed-width:0;--sidenav-open-width:0}.sidenav{opacity:0}.sidenav,.sidenav.expanded{box-sizing:border-box;background-color:#000;color:var(--light);z-index:0;flex-direction:row;position:fixed;bottom:0;left:0;width:100%;display:flex;align-items:left;height:6rem;font-size:1.5rem;font-weight:700;padding-left:0;z-index:1}.sidenav.expanded{opacity:.4}.sidenav-nav{display:flex;flex-grow:1;width:0;width:var(--sidenav-open-width);align-content:stretch;align-items:center;justify-content:center;opacity:1}.sidenav-toggle{width:0;width:var(--sidenav-closed-width);margin-top:.5em;text-align:left}.sidenav-item{position:relative;margin:0;padding:.3em 0;display:flex;cursor:pointer;opacity:1;bottom:5vh}.sidenav-item.active,.sidenav-item:hover{background-color:#000}.sidenav-item.active{position:relative;margin:0;padding:.3em 0;display:flex;cursor:pointer;opacity:0;bottom:0}.sidenav-item.active:hover{background-color:#000}.sidenav-icon{width:0;width:var(--sidenav-closed-width);min-width:0;min-width:var(--sidenav-closed-width);text-align:center;border:none;background-color:unset;color:unset}.sidenav-text{opacity:0;transition:opacity 0s;width:0;width:calc(var(--sidenav-open-width) - var(--sidenav-closed-width));min-width:0;min-width:calc(var(--sidenav-open-width) - var(--sidenav-closed-width))}.expanded .sidenav-text{opacity:1}.expanded .sidenav-extra{display:unset;opacity:1}.sidenav-extra .list-group-item{background-color:#000;border-color:#000;padding:.4rem .7rem}.sidenav-extra h1{font-size:1.5em}.sidenav-extra h2{font-size:1em}.sidenav-extra h3{font-size:.7em;font-weight:700}.sidenav-extra .setting-desc{margin-right:25%}.main-container{padding-left:0;padding-left:var(--sidenav-closed-width);overflow:hidden}main{height:100%;overflow:auto}