@import"https://fonts.googleapis.com/css2?family=DM+Serif+Text&family=Gothic+A1&display=swap";.buttons{position:relative;display:flex;max-width:80vw;flex-direction:column;align-items:flex-start;justify-content:space-around;padding:10px 0;margin:4rem auto}.buttons input{color:#000;padding:10px}.buttons button{cursor:pointer}.buttons button:hover{background-color:#dec1fa}.buttons button.dragged{position:relative}.buttons button.dragged:before{content:"";position:absolute;top:-5px;left:-5px;width:100%;height:100%;border-radius:5px;border:5px solid #c776fa}.buttons h2{display:inline-block;margin:10px}.buttons .chord-pad-add{background-color:#8bc1a0}.buttons .chord-pad-add:hover{background-color:#acd2bb}.buttons .chord-pad-remove{background-color:#cda7ac}.buttons .chord-pad-remove:hover{background-color:#bb868d}@media screen and (max-width: 1440px){.buttons{margin-top:1rem}}input[type=range]{-moz-appearance:"none";appearance:"none";-webkit-appearance:none;height:0px;background:#000;outline:none;border:4px solid rgb(169,163,163);border-radius:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:0px;background:#000;cursor:pointer;border:4px solid rgb(255,244,244);border-radius:4px}input[type=range]::-webkit-slider-runnable-track{background:#c776fa;height:5px}input[type=range]::-moz-range-thumb{width:15px;height:30px;background:#000;cursor:pointer;border:4px solid rgb(245,203,203);border-radius:4px}.chord-pads-section{padding-bottom:.5rem;width:100%}.chord-pads{display:grid;width:100%;grid-template-columns:repeat(6,minmax(100px,1fr));gap:10px;margin-bottom:10px;padding-top:10px}@media (max-width: 1440px){.chord-pads{display:flex;flex-wrap:wrap}}.chord-pads-heading{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;align-items:center}.chord-pad{display:flex;flex-direction:column;gap:5px}.chord-pad-options{display:grid;grid-template-columns:1fr 1fr}.chord-pad-options button{display:flex;flex-direction:row;justify-content:center;align-items:center}.chords-section{width:100%;max-width:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-bottom:.5rem}.chords-section-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}.scales-section{width:100%;max-width:100%;margin-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-bottom:.5rem}.scales-section-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:10px}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{letter-spacing:.16rem}p{letter-spacing:.08rem}html{margin:0;min-height:100vh;font-family:"DM Serif Text",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{min-height:100vh;background-color:#202020;color:#f0f8ff;margin:auto}main{display:flex;flex-direction:column;margin:auto}button,select,input{background-color:#f2f2f2;font-family:Gothic A1,sans-serif;letter-spacing:.08rem;font-weight:600;border-radius:5px;padding:10px 30px;margin:0 5px;box-shadow:#000000f1 0 8px 4px,#000000f4 0 7px 13px -3px,#0003 0 -3px inset}button{cursor:pointer}select{outline:none}select option{font-weight:700}select:focus{outline:#c776fa 2px solid}@media (max-width: 767px){.midi-settings{display:none}}.navbar{z-index:100;width:100%;font-weight:600;letter-spacing:2px;background-color:#f2f2f2;color:#212121;height:40px;border-bottom:2px solid hsl(0,78%,55%);top:0;position:fixed}@media screen and (max-width: 768px){.navbar{position:relative;height:fit-content;padding:.5rem 0 0;margin-bottom:0}}@media screen and (max-width: 1440px){.navbar{top:0;position:relative;display:block}}.navbar img{border:2px solid #212121}.navbar .navbar-content{margin:auto;height:100%;width:80%;display:flex;align-items:center;justify-content:space-between;gap:0px}@media screen and (max-width: 768px){.navbar .navbar-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}}.navbar .navbar-icons{display:flex;align-items:center;gap:.5rem}.navbar .navbar-middle{display:flex;align-items:center}.navbar .navbar-middle p{min-width:25ch;margin-left:1rem}.navbar .navbar-middle input{margin:0}.navbar .navbar-right{display:flex;align-items:center;gap:.8rem}.modal-overlay{opacity:0;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);z-index:200;transition:opacity .2s ease-in-out;display:flex;align-items:center;justify-content:center}.modal-overlay.faded-in{opacity:1}.modal-content{opacity:0;position:fixed;width:50vw;max-height:70vh;overflow-y:auto;width:30vw;background:#fff;border-radius:5px;padding:20px;z-index:20;transition:opacity .3s ease-in-out;border:4px solid hsl(0,78%,55%)}.modal-content.faded-in{color:#f2f2f2;background-color:#212121;opacity:1}@media (max-width: 1440px){.modal-content{width:75vw;padding:15px}}@media (max-width: 768px){.modal-content{width:95vw}}.modal-content h2{margin-top:0}.settings-icon:hover{color:gray}.chord-pad-shortcut-options{width:80%;display:grid;grid-template-columns:1fr 5fr;grid-gap:.5rem;align-items:center}.chord-pad-shortcut-options kbd{font-size:1rem}.key{float:left;display:flex;align-items:flex-end;justify-content:center;position:relative;cursor:pointer;border-bottom-left-radius:.528vw;border-bottom-right-radius:.528vw;transition:cubic-bezier(.175,.285,.22,1.275) .05s;padding-bottom:.528vw;text-transform:uppercase;font-weight:600;font-size:1.5rem;color:#212121;transition:cubic-bezier(.42,0,.58,1) .05s}@media (max-width: 767px){.key{font-size:0}}.key.selected{transition:cubic-bezier(.58,0,.42,1) .09s}.white{height:15.84vw;width:4.1904761905vw;z-index:1;border-top:.132vw solid #bfbfbf;border-bottom:.132vw solid #bfbfbf;border-left:.132vw solid #bfbfbf;background-color:#f2f2f2;box-shadow:inset 22px 0 26px #0000001f,#000000e6 0 .472vw 1px,inset 0 0 1px #000}.white:hover{height:15.9984vw;padding-bottom:.3696vw;box-shadow:inset 66px 2px 37px #00000026,#000000e6 0 .72vw}.white:before{content:"";position:absolute;top:0;height:100%;width:100%;border-left:2px solid rgba(0,0,0,.686);border-right:2px solid rgba(0,0,0,.886)}.white:before:hover{border-left:6px solid rgba(0,0,0,.686);border-right:6px solid rgba(0,0,0,.886)}.key.selected:before{content:"";background:linear-gradient(90deg,rgb(222,193,250),rgb(225,159,255),rgb(203,72,255));position:absolute;top:10px;height:98%;width:90%;z-index:-1;filter:blur(10px);transition:background-color .5s;box-shadow:inset 10px 5px 5px 9px #832cf5}@media (max-width: 767px){.key.selected:before{top:0;width:100%;height:100%;filter:blur(0px);box-shadow:none;background-color:#832cf5}}.black{height:9.504vw;width:2.3047619048vw;color:#f0f8ff;z-index:2;box-shadow:#000000f1 0 2px 3px,#000000f4 0 7px 13px -9px,14px 19px 25px 1px #552e2e inset;border:.132vw solid #000000;background-color:#212121;border-top:none}.black:hover{height:9.69408vw;box-shadow:#000000f1 0 2px 3px,#000000f4 0 7px 13px -9px,14px 19px 25px 1px #552e2e inset}.a,.b,.d,.e,.g,.black{margin:0 0 0 -1.2843809524vw}#keyboard>.note:last-child{border-right:.132vw solid #bfbfbf}#keyboardCanvasContainer{display:flex;justify-content:center;width:100%;margin:0 auto;overflow-x:auto}#ukeleleCanvas{margin:2rem}#keyboard{border-top:5px solid hsl(0,78%,55%);box-shadow:#00000012 0 1px 2px,#00000012 0 2px 4px,#00000012 0 4px 8px,#00000012 0 8px 16px,#00000012 0 16px 32px,#00000012 0 32px 64px;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;box-sizing:content-box;margin:0 auto;width:80vw;min-height:15.9984vw}.selected-chord{-webkit-user-select:none;user-select:none;width:100%;background-color:#f2f2f2;color:#212121;font-size:2rem;text-transform:capitalize;border:4px solid #767546;border-radius:.528vw;text-align:center;margin:10px auto}@media (max-width: 767px){.selected-chord{font-size:1rem}}.bottom-panel{position:sticky;bottom:0;background-color:#121212;box-shadow:#3c40434d 0 1px 2px,#868b8f26 0 1px 3px 1px;padding:.5rem 0 2rem}@media screen and (max-width: 1440px){.bottom-panel{position:relative}}.view-select{grid-column-start:3;display:inherit;justify-self:flex-end;width:70%}.bottom-panel-info{margin:0 auto;display:grid;width:80%;grid-template-columns:5fr 2fr 5fr;align-items:center;justify-content:space-between}.slider{width:100%;height:5px;border-radius:5px;background:#ffffff;box-shadow:none;outline:none;opacity:.7;-webkit-transition:.2s;transition:opacity .2s;max-width:200px}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#3e04aa;cursor:pointer}.slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#04AA6D;cursor:pointer}