.container{height:100vh;background-color:#d4e2d4;flex-direction:row-reverse;overflow:hidden}.container,.visualizeContainer{width:100%;display:flex;align-items:flex-end}.visualizeContainer{height:100%!important;flex-direction:row;justify-content:space-evenly}.arrayBar{width:80px;margin:0 1px 2px;transition:height .2s;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;border-top-left-radius:4px;border-top-right-radius:4px}.arrayBar>span{background-color:inherit;margin-bottom:5px;color:#fff;font-weight:400}.button{width:12rem;height:3rem;padding:.3rem 0;border:none;border-radius:.317rem;background-color:#008891;color:#fff;font-weight:700;font-size:1rem;cursor:pointer}.button:hover{opacity:.85}.sidebar{width:25vw;min-width:200px;height:100%;min-height:500px;padding:0 1.5vw;background-color:#00303f;justify-content:space-evenly}.sidebar,.slider-container{display:flex;flex-direction:column;align-items:center}.slider-container{height:3rem;width:12rem;justify-content:space-between;background-color:inherit}.slider-container>input{width:100%}label{color:#fff;font-size:1.1rem}.select-box,label{background-color:inherit}.select-box{display:flex;flex-direction:column;align-items:center;width:200px;font-size:16px}header{background-color:inherit;color:#e7d9ea;font-size:larger;text-align:center;line-height:2rem}#select{height:35px;padding:5px 7px;line-height:20px;font-size:18px;width:100%;border:2px solid green;border-radius:6px;margin-top:10px}.select-box select:focus{border:2px solid green}.rotate{transition:all .2s linear}.rotate.down{transform:rotate(90deg)}body,html{width:100%;margin:0;display:table;text-align:center}.music-note{font-size:20px;color:#e51616;width:1px;opacity:0}.music-note.one{animation:note-anim 2s linear 2s infinite;animation-fill-mode:forwards;-webkit-animation:note-anim 2s linear 2s infinite;-webkit-animation-fill-mode:forwards}.music-note.two{-webkit-animation:note-anim 2s linear 4.3s infinite;animation:note-anim 2s linear 4.3s infinite;animation-fill-mode:forwards;-webkit-animation:note-anim 2s linear 2s infinite;-webkit-animation-fill-mode:forwards}@keyframes music-move{0%{transform:rotate(0deg)}33%{transform:rotate(-5deg)}66%{transform:rotate(5deg)}to{transform:rotate(0deg)}}@-webkit-keyframes music-move{0%{transform:rotate(0deg)}33%{transform:rotate(-5deg)}66%{transform:rotate(5deg)}to{transform:rotate(0deg)}}@keyframes note-anim{0%{opacity:0;transform:translateY(50px)}30%{transform:rotate(12deg) translate(-30px)}45%{opacity:1}60%{transform:rotate(-12deg) translate(30px,-100px)}to{opacity:0;transform:rotate(0deg) translateY(-200px)}}@-webkit-keyframes note-anim{0%{opacity:0;transform:translateY(50px)}30%{transform:rotate(12deg) translate(-30px)}45%{opacity:1}60%{transform:rotate(-12deg) translate(30px,-100px)}to{opacity:0;transform:rotate(0deg) translateY(-200px)}}body,html{height:100%}.myContainer{margin:20px;border-radius:10px}
/*# sourceMappingURL=main.5606dcfa.chunk.css.map */