*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;display:grid;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;place-content:center}h1{font-weight:700}h2{letter-spacing:1px}h2,h3{font-weight:400}h3{letter-spacing:2px}h4{font-size:.7rem}p{font-size:.75rem;text-transform:none}button:hover{cursor:pointer}a{color:#1fe4c7;text-decoration:none}.footer a{align-items:center;color:#fff;display:flex;flex-direction:column;justify-content:center}.footer a:hover{scale:1.1;transition:.25s}.app{background-color:#3a1247;border-radius:48px;color:#fff;flex-direction:row;height:600px;margin-bottom:50px;margin-top:50px;text-align:center;text-transform:uppercase;width:450px}.app,.main{display:flex;position:relative}.main{align-items:center;flex-direction:column}.header{margin-bottom:10px;margin-top:38px;width:360px;z-index:10}.levels{position:relative;width:105px;z-index:2}.triangle{border-left:50px solid transparent;border-right:50px solid transparent;border-top:none;height:0;text-align:center;transition:all .25s ease-out;width:0}.triangle-left h1{color:#3a1247;-webkit-transform:rotate(-90deg) translate(-45px);transform:rotate(-90deg) translate(-45px)}.triangle-left{position:absolute;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.triangle-left:hover{cursor:pointer;scale:110%}.triangle-right{position:absolute;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.triangle-right:hover{cursor:pointer;scale:110%}.triangle-right h1{color:#3a1247;-webkit-transform:rotate(90deg) translate(30px);transform:rotate(90deg) translate(30px)}.octaveToggle{display:flex;justify-content:center;padding-top:1rem}.treble{height:50px;margin-right:1rem}.bass{height:40px;margin-left:1rem;margin-top:4px}.switch{display:inline-block;height:34px;position:relative;width:60px}.switch input{height:0;opacity:0;width:0}.slider{background-image:linear-gradient(270deg,#deb1ff 0,#c7b8f8 50%,#1fe4c7);border:none;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{background-color:#fff;bottom:4px;content:"";height:26px;left:4px;width:26px}input:checked+.slider{background-image:linear-gradient(270deg,#deb1ff 0,#1fe4c7)}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.exercises{flex-direction:row}.exercise,.exercises{display:flex;justify-content:center}.exercise{align-items:center;background-color:#deb1ff;border-radius:100%;box-shadow:0 5px 5px rgba(0,0,0,.6);color:#3a1247;height:60px;margin:6px;transition:all .2s ease-out;width:60px}.exercise-active{background-color:#f7cb4d;scale:110%}.empty{display:flex;height:60px;margin:6px;visibility:hidden;width:60px}.exercise:hover{cursor:pointer;scale:110%}.play-button-container{display:flex;justify-content:center;padding:0;z-index:100}.play-button{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:ripple;animation-name:ripple;background-color:#faf1ef;border:2px solid #3a1247;border-radius:50%;box-shadow:0 5px 5px rgba(0,0,0,.6);cursor:pointer;display:block;display:grid;font-size:18px;height:100px;outline:none;place-items:center;position:relative;transition:all .25s ease-out;width:100px}.play-button:hover{cursor:pointer;scale:105%}.play-button-img{height:60%;position:absolute;width:60%}.footer{bottom:0;display:flex;flex-direction:column;justify-content:center;padding:1rem;position:absolute}.logo{height:40px;margin-bottom:4px}.modal{background-color:#fff;border:2px solid #000;border-radius:24px;color:#000;height:50%;left:50%;padding:12px 8px;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:all .5s;width:90%;z-index:200}.modal-closed{scale:0}.modal-body{align-items:start;display:flex;flex-direction:column;height:80%;justify-content:space-between;margin-top:12px;text-align:left}.modal-close-btn{background-color:initial;border:none;font-size:1rem;position:absolute;right:12px;top:12px;transition:all .25s}.modal-close-btn:hover{scale:1.25}.modal-close-btn:before{content:"\2715"}.overlay-closed{display:none}.overlay-opened{background-color:rgba(0,0,0,.6);border-radius:inherit;display:block;height:100%;position:absolute;width:100%;z-index:150}.app:after,.app:before{content:"";inset:0}.app:after,.app:before,.background{background:#deb1ff;border-radius:inherit;position:absolute;z-index:-1}.background{display:block;height:100%;width:100%}.app:after,.background{-webkit-filter:blur(2rem);filter:blur(2rem)}@media (max-width:500px){.app{width:426px}}
/*# sourceMappingURL=main.ea381012.css.map*/