@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap);@import url(https://fonts.googleapis.com/css2?family=Moderustic:wght@300..800&display=swap);*{box-sizing:border-box;margin:0;padding:0}.logo-img{height:50px;width:50px}.header-box{background:#ebebcf;border-bottom:1px solid #e3e3c1;box-shadow:0 0 5px #0003;display:flex;justify-content:space-between;margin-bottom:25px;padding:15px 25px;width:100%}.header-box .navbar{border-radius:1rem;box-shadow:0 2px 10px #0003;color:#40408c;padding:10px}.header-box .navbar .link-container{display:flex;font-weight:bolder;gap:2rem}.header-box .navbar .link-container .nav-link{line-height:28.5px;margin-left:5px;margin-right:5px;padding:5px}.header-box .navbar .link-container .nav-link a{color:inherit;text-decoration:none}.header-box .navbar .link-container .nav-link .nav-item-label{align-items:center;display:flex}.header-box .drop-down li,.header-box .nav-link{cursor:pointer;font-size:14px;font-weight:300;height:100%;list-style:none}.header-box .drop-down{background:#40408c;border-radius:.5rem;box-shadow:0 4px 12px #0000001a;color:#e3e3c1;display:none;justify-content:space-between;margin-top:.2rem;padding:.4rem;position:absolute;z-index:1}.header-box .nav-link:hover{background-color:#40408c;border-radius:.5rem;color:#e3e3c1;transition:background .5s;transition:color .1s}.header-box .explore .dropdown-icon{font-size:20px;position:relative;right:-5px;transform:rotate(0deg);transition:.4s ease}.header-box .explore:hover .dropdown-icon{transform:rotate(180deg)}.header-box .explore:hover .drop-down{display:block}.header-box .drop-down li:hover{background:#40408c;border-radius:.5rem;color:#fff}.header-box .important-group{align-items:center;display:flex;gap:25px}.header-box .important-group .sign-in{background:#ebebcf;border:none;border-radius:1rem;color:#40408c;cursor:pointer;font-family:Roboto Mono,monospace;font-weight:700;padding:10px;text-underline-offset:.2rem;transition:.2s ease}.header-box .important-group .sign-in:hover{background:#40408c;color:#ebebcf}@media(max-width:650px){.header-box{padding:15px}.header-box .navbar .link-container{gap:.5rem}.header-box .important-group{gap:2px}}.login-page{align-items:center;display:flex;height:80vh;justify-content:center}.login-card{background-color:#fff;border:1px solid #e5e7eb;border-radius:1rem;box-shadow:0 10px 15px #0000001a;color:#352210;display:flex;flex-direction:column;gap:1.25rem;padding:1rem;text-align:center;width:24rem}.login-header h3{color:#352210;font-size:1.25rem;font-weight:600;margin-top:.5rem}.login-form{display:flex;flex-direction:column;gap:1.25rem}.login-form .form-group{display:flex;flex-direction:column;text-align:left}.login-form .form-group label{color:#352210;font-size:.875rem;font-weight:700;margin-bottom:.25rem}.login-form .form-group input{background:#0000;border:1px solid #d1d5db;border-radius:.5rem;color:#352210;font-family:Arial,Helvetica,sans-serif;font-size:1rem;outline:none;padding:.5rem .75rem;transition:border-color .3s}.login-form .form-group input:focus{border-color:#4f46e5;box-shadow:0 0 0 1px #4f46e5}.register-text{font-size:.875rem}.register-text a{font-weight:700;text-decoration:underline}.divider{align-items:center;display:flex;gap:.5rem;margin:.625rem 0;width:100%}.divider span{font-size:.875rem;font-weight:700}.divider:after,.divider:before{background-color:#d1d5db;content:"";flex:1 1;height:2px}.auth-container{display:flex;flex-direction:column;gap:10px}.auth-container .sign-btn{align-items:center;background:#f3f3f3;border:1px solid #d1d5db;border-radius:.5rem;display:flex;font-size:.875rem;font-weight:500;gap:.75rem;justify-content:center;padding:.625rem;transition:all .3s;width:100%}.auth-container .sign-btn:hover{background:#e1e1e1}.auth-container .sign-btn.disabled{cursor:not-allowed}.auth-container .sign-btn .icon{height:1.5rem;width:1.5rem}.register-page{align-items:center;display:flex;height:80vh;justify-content:center}.register-card{background-color:#fff;border:1px solid #e5e7eb;border-radius:1rem;box-shadow:0 10px 15px #0000001a;color:#4b5563;display:flex;flex-direction:column;gap:1.25rem;padding:1rem;width:24rem}.register-header{margin-bottom:1.5rem;text-align:center}.register-header h3{color:#1f2937;font-size:1.25rem;font-weight:600}.register-form{display:flex;flex-direction:column;gap:1rem}.register-form .form-group{display:flex;flex-direction:column;text-align:left}.register-form .form-group label{color:#4b5563;font-size:.875rem;font-weight:700;margin-bottom:.25rem}.register-form .form-group input{background:#0000;border:1px solid #d1d5db;border-radius:.5rem;color:#6b7280;font-size:1rem;outline:none;padding:.5rem .75rem;transition:border-color .3s}.register-form .form-group input:focus{border-color:#4f46e5;box-shadow:0 0 0 1px #4f46e5}.register-form .form-group input:disabled{background-color:#f3f4f6;cursor:not-allowed}.error{color:#dc2626;font-weight:700}.btn-primary{background-color:#4f46e5;border:none;border-radius:.5rem;color:#fff;font-weight:500;padding:.5rem 1rem;transition:all .3s;width:100%}.btn-primary:hover{background-color:#4338ca;box-shadow:0 4px 6px #0000001a}.btn-primary.disabled{background-color:#d1d5db;box-shadow:none;cursor:not-allowed}.login-link{font-size:.875rem;text-align:center}.login-link a{font-weight:700;text-decoration:underline}.container{align-items:center;background:#ebebcf;border-radius:3rem;box-shadow:0 0 5px #0003;color:#583d29;display:flex;flex-direction:column;font-family:Poppins,sans-serif;justify-content:center;margin:50px 80px;padding:2rem 4rem;text-align:center;-webkit-user-select:none;user-select:none}.container .title{font-size:3rem;margin-bottom:.5rem}.container .subtitle{color:#583d29a6;font-size:1.2rem}.feature-group{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;margin:3rem 0}.feature-group .feature-container{align-items:center;animation:floatUp 1s ease-out forwards;background:#ebebcf;border-radius:2rem;box-shadow:0 0 10px #00000026;display:flex;flex-direction:column;justify-content:flex-start;padding:2rem;text-align:center;width:400px}.feature-group .feature-container img{border-radius:1.5rem;cursor:pointer;height:auto;margin-bottom:1rem;width:100%}.feature-group .feature-container .tools-img{height:200px;width:200px}.feature-group .feature-container .feature-title{color:#40408c;cursor:pointer;font-size:1.2rem;font-weight:700;margin-bottom:.5rem;padding:.3rem .5rem;transition:.3s;width:100%}.feature-group .feature-container .feature-title:hover{background:#40408c;border-radius:1rem;color:#ebebcf}.feature-group .feature-container .description{color:#583d29a6;font-size:.8rem;line-height:1.4}.contact{align-items:center;animation:floatDown 1s ease-out forwards;color:#583d29;display:flex;flex-direction:column;font-family:Poppins,sans-serif;justify-content:center;margin-top:10vh}.contact .title{font-size:3rem;text-align:center}.contact .subtitle{color:#583d29a6;text-align:center}.contact .container-outside{border-radius:3rem;box-shadow:0 0 5px #0003;display:flex;flex-wrap:wrap;justify-content:center;margin:2rem auto;padding:20px}.contact .container-outside .contact-container{align-items:center;display:flex;flex:1 1 auto;gap:10px;justify-content:center;margin:1rem;min-width:0;text-align:center}.contact .container-outside .contact-container .link:hover{color:#523523;font-weight:700;text-decoration:underline;-webkit-text-decoration-color:#523523;text-decoration-color:#523523;text-underline-offset:.5rem}.contact .container-outside .contact-container .link{color:inherit;text-decoration:none;transition:.2s ease-in-out}.profile-img{animation:floatDown 1s ease-out forwards;border-radius:50%;box-shadow:0 10px 20px #0003;cursor:default;display:block;height:250px;margin-left:auto;margin-right:auto;margin-top:10px;width:250px}@media(max-width:800px){.contact{margin-top:6vh}.title{font-size:2.2rem}.subtitle{font-size:1rem}.container-outside{border-radius:2rem;flex-direction:column;width:80%}.contact-container{gap:.5rem}.icon{font-size:2.2rem}}.learn{align-items:center;display:flex;font-family:Roboto Mono,monospace;justify-content:center;min-height:80vh}.learn-card{animation:floatIn .6s ease-out forwards;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fff9;border-radius:1.5rem;box-shadow:0 20px 40px #00000014;padding:3rem 4rem;text-align:center}.learn-card h1{font-size:2rem;margin-bottom:.75rem}.learn-card p{font-size:1rem;line-height:1.6;opacity:.75}.learn-card .emoji{display:block;font-size:2.5rem;margin-bottom:1rem}@keyframes floatIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.settings-container{align-items:center;display:flex;justify-content:center;margin:20px 100px}.settings-container .settings{align-items:center;background:#ebebcf;border:3px solid #332213bf;border-radius:3rem;display:flex;justify-content:space-between;padding:25px;width:100%}.settings-container .settings .setting-group{align-items:center;animation:floatDown 1s ease-out forwards;display:flex;flex-direction:column;gap:5px}.settings-container .settings .setting-group .setting-title{font-size:15px;font-weight:500;text-align:center}.settings-container .settings .setting-group .accidental-selector{border-radius:12px;box-shadow:0 0 5px #0000001a;display:flex;overflow:hidden}.settings-container .settings .setting-group .accidental-selector .radio_label{background:#ebebcf;border:none;cursor:pointer;font-size:18px;height:50px;width:60px}.settings-container .settings .setting-group .accidental-selector .radio_label.active{background:#e3e3c1}.settings-container .settings .setting-group .fret-container{border-radius:45px;box-shadow:0 0 5px #0000001a;display:flex;overflow:hidden}.settings-container .settings .setting-group .fret-container button{background:#ebebcf;border:none;color:#5f4a36;cursor:pointer;font-size:30px;font-weight:500;padding:8px 14px}.settings-container .settings .setting-group .fret-container input{background:#ebebcf;border:none;color:#47321f;font-size:20px;font-weight:700;text-align:center;width:60px}.settings-container .settings .setting-group .btn-group{display:flex;gap:20px}.settings-container .settings .setting-group .btn-group .play-button,.settings-container .settings .setting-group .btn-group .reset-button{border:none;border-radius:1rem;cursor:pointer;font-size:15px;font-weight:700;padding:15px 25px}.settings-container .settings .setting-group .btn-group .reset-button{background:#ebebcf;box-shadow:0 0 5px #00000026;color:#53301c}.settings-container .settings .setting-group .btn-group .reset-button:hover{background:#4f2d1a;color:#ebebcf;transition:background .3s ease}.settings-container .settings .setting-group .btn-group .play-button{background:#40408c;color:#ebebcf}.settings-container .settings .setting-group .btn-group .play-button:hover{background:#2b2b60;transition:background .3s ease}.settings-container .settings .setting-group .tuning-row{display:flex;gap:10px}.settings-container .settings .setting-group .tuning-row .tuning-btn{align-items:center;background:#ebebcf;border:none;border-radius:20%;box-shadow:0 0 5px #0000001a;color:#6c4c2e;cursor:pointer;font-size:20px;font-weight:bolder;height:50px;justify-content:center;transition:background .3s ease;width:50px}.settings-container .settings .setting-group .tuning-row .tuning-btn:hover{background:#6c4c2e;color:#ebebcf;transition:background .3s ease}.settings-container .settings .line{border-bottom:85px solid #ebebcf;box-shadow:0 0 5px #00000040;height:100%;margin:0 15px;width:1px}:root{--fretboard-height:350;--number-of-strings:6;--string-height:9;--half-string-height:calc(var(--string-height)/2);--string-top-position:calc(var(--fretboard-height)/var(--number-of-strings)/2 - var(--half-string-height));--double-fretmark-pos1:calc(var(--fretboard-height)*0.25);--double-fretmark-pos2:calc(var(--fretboard-height)*0.75);--noteOpacity:0}.fretboard{animation:floatDown 1s ease-out forwards;background:#53301c;flex-direction:column;height:350px;height:calc(var(--fretboard-height)*1px);min-width:1200px;width:100%}.fretboard,.fretboard .string{display:flex;position:relative}.fretboard .string{height:100%}.fretboard .string:before{background:linear-gradient(#fffefe,#acaaaa);box-shadow:76px 4px 10px #28170d;content:"";height:9px;height:calc(var(--string-height)*1px);position:absolute;top:24.66667px;top:calc(var(--string-top-position)*1px);width:100%;z-index:1}.fretboard .note-fret{align-items:center;border-image:linear-gradient(270deg,#6c6c6c,#bbbaba,#6c6c6c) 1 100%;border-right:10px solid;display:flex;flex:1 1;justify-content:center;position:relative}.fretboard .note-fret:first-child{background:#332213;border-image:linear-gradient(270deg,#bbbaba,#fff,#bbbaba) 1 100%;border-right:15px solid;flex:0 0 76px;min-width:76px}.fretboard .note-fret:before{background:#dbdbc4;border:2px solid #bd8f68;border-radius:50%;color:#352210;content:attr(data-note);font-size:20px;height:43px;line-height:43px;opacity:0;opacity:var(--noteOpacity);text-align:center;width:43px;z-index:2}.fretboard .note-fret .double-fretmark:after,.fretboard .note-fret .double-fretmark:before{background:#f8f6f0;border-radius:50%;content:"";height:20px;left:50%;pointer-events:none;position:absolute;transform:translateX(-50%);width:20px}.fretboard .note-fret .double-fretmark:before{top:87.5px;top:calc(var(--double-fretmark-pos1)*1px);transform:translate(-50%,-50%)}.fretboard .note-fret .double-fretmark:after{top:262.5px;top:calc(var(--double-fretmark-pos2)*1px);transform:translate(-50%,-50%)}.note-fret.single-fretmark:after{background:#f8f6f0;border-radius:50%;content:"";height:20px;left:50%;pointer-events:none;position:absolute;top:175px;top:calc(var(--fretboard-height)/2*1px);transform:translate(-50%,-50%);width:20px}.numbers{display:flex;flex-direction:row;height:30px;margin-top:5px;min-width:1500px;width:100%}.numbers .fret-number{align-items:center;display:flex;flex:1 1;font-size:16px;justify-content:center}.numbers .fret-number:first-child{flex:0 0 76px;min-width:76px}.numbers .fret-number:not(:first-child){margin-right:10px}body{background:#ebebcf;font-family:Roboto Mono,monospace;-webkit-user-select:none;user-select:none}.help-text{display:flex;justify-content:center;margin-top:35px}.table-heading{background:#40408c;box-shadow:0 0 1rem #40408cb8;color:#ebebcf;padding:1rem;text-align:center;-webkit-user-select:none;user-select:none;width:100%}.table-heading .heading-group{align-items:center;display:flex;justify-content:space-between}.table-heading .input-group{align-items:center;background:#2f2f6c;border-radius:2rem;display:flex;height:100%;justify-content:center;margin-right:2rem;padding:0 .5rem;text-align:center;transition:.2s ease;width:40%}.table-heading .input-group:hover{background:#333376;box-shadow:0 0 9px #0003;width:45%}.table-heading .input-group .search{background:#0000;border:none;color:#ebebcf;outline:none;padding:.5rem;width:100%}.favorite{color:#00000073;cursor:pointer;transition:.1s ease}.favorite:hover{color:gold}.status{border:none;border-radius:1rem;color:#ebebcf;cursor:pointer;font-size:12x;padding:.6rem;text-align:center;transition:.3s ease;width:100px}.status#not-learned{background:#b82222}.status#not-learned:hover{background:#ce4040}.status#in-progress{background:#40408c}.status#in-progress:hover{background:#5050ab}.status#learned{background:#1f8b1f}.status#learned:hover{background:#29a729}.favorite,.status,.td-icon{align-items:center;display:flex;justify-content:center}.artist,.song,.tuning{background:#462f1b;border:none;border-radius:.2rem;color:#ebebcf;display:inline-block;font-size:15px;outline:none;padding:.6rem .5rem;-webkit-user-select:text;user-select:text;white-space:nowrap;width:auto}.artist::placeholder,.song::placeholder,.tuning::placeholder{color:#ebebcf;opacity:.4}.td-icon{color:#ebebcf33;cursor:pointer}.td-icon:hover{color:#ebebcfcc;transition:.3s ease}.material-symbols-outlined.del,.material-symbols-outlined.play{cursor:pointer}.material-symbols-outlined.del:hover{color:#b82222}.table-body{background:#563c23;border-radius:2rem;margin-top:2rem;max-height:98%;overflow:auto;scrollbar-color:#ebebcf66 #0000;scrollbar-width:thin;width:92%}.table-body::-webkit-scrollbar{width:6px}.table-body::-webkit-scrollbar-track{background:#0000}.table-body::-webkit-scrollbar-thumb{background:#ebebcf66;border-radius:6px}.table-body::-webkit-scrollbar-thumb:hover{background:#ebebcf99}.table-body table{border-collapse:collapse;margin:15px;width:96%}.table-body table thead th{background:#342314;border-radius:1rem;color:#ebebcf;cursor:pointer;padding:.6rem;position:-webkit-sticky;position:sticky;text-align:center;transition:.2s ease-in-out;-webkit-user-select:none;user-select:none}.table-body table thead th.active{background:#ebebcf;color:#644529}.table-body table thead th:not(.active):hover{background:#462f1b}.table-body table thead th .th-icon{margin-top:5px;vertical-align:middle}.table-body table tbody tr{transition:.5s ease}.table-body table tbody tr:hover{background:#644529;border-radius:1rem}.table-body table td{color:#ebebcf;padding:.6rem .5rem;text-align:center;-webkit-user-select:none;user-select:none}.table-body table td input{max-width:100%;text-align:center;width:100%}.table-body table td .td-icon{align-items:center;display:flex;justify-content:center}.library-container{align-items:center;border-radius:1rem 1rem 0 0;box-shadow:0 0 9px #0003;display:flex;flex-direction:column;font-family:Poppins,sans-serif;height:calc(100vh - 115px);justify-content:flex-start;margin:0 auto;min-height:10vh;overflow:hidden;width:70vw}.add-btn{background:#563c23;border:none;border-radius:2rem;color:#ebebcf;cursor:pointer;margin:1rem 0;padding:.5rem 0;transition:.2s ease-in-out;width:80%}.add-btn:hover{background:#462f1b}.tools-container{display:flex;gap:10vw;justify-content:center;padding:15vh 30px}@media screen and (max-width:1000px){.tools-container{align-items:center;flex-direction:column;gap:90px}}.metronome{animation:floatDown 2s ease-out forwards;border:2px;border-radius:5rem;box-shadow:0 0 5px #0003;color:#73533a;display:flex;flex-direction:column;font-family:Raleway,sans-serif;gap:5px;height:400px;justify-content:space-between;padding:60px;-webkit-user-select:none;user-select:none;width:400px}.metronome .bpm-display{color:#73533a;font-weight:700;text-align:center}.metronome .bpm-display .tempo{font-size:6em;margin-right:10px}.metronome .tempo-speed-text{font-size:1rem;text-align:center;text-transform:uppercase}.metronome .tempo-settings{display:flex;justify-content:space-between}.metronome .tempo-settings .tempo-adjust{border:1px solid #73533a;border-radius:50%;cursor:pointer;font-size:20px;height:30px;text-align:center;width:30px}.metronome .tempo-settings .decrease{line-height:28px}.metronome .tempo-settings .increase{line-height:25px}.metronome .measures .measure-adjust:hover,.metronome .tempo-settings .tempo-adjust:hover{background:#73533a;color:#ebebcf}.metronome .start-stop-btn{background:#856246;border:none;border-radius:10px;color:#ebebcf;cursor:pointer;margin-top:20px;padding:.6rem 1.8rem;text-align:center;transition:background .2s,transform .1s}.metronome .start-stop-btn:hover{background:#543c31;transform:scale(1.05)}.metronome .measures{display:flex;gap:5px;justify-content:center}.metronome .measures .measure-adjust{border:1px;border-radius:50%;box-shadow:0 0 5px #0003;cursor:pointer;height:20px;margin:0 5px;text-align:center;width:20px}.metronome .measures .increase{line-height:17px}.metronome .bpm-text{font-size:.7em;margin-top:10px;text-align:center;text-transform:uppercase}input[type=range]{-webkit-appearance:none;appearance:none;background-color:#0000;width:70%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:#73533a;border-radius:50%;cursor:pointer;height:16px;margin-top:-8px;width:16px}input[type=range]::-moz-range-thumb{-webkit-appearance:none;appearance:none;background:#73533a;border:none;border-radius:50%;cursor:pointer;height:16px;width:16px}input[type=range]::-webkit-slider-runnable-track{background:rgba(115,83,58,.232);height:1px;width:100%}input[type=range]::-moz-range-track{background:rgba(115,83,58,.232);height:1px;width:100%}@keyframes floatDown{0%{transform:translateY(-3%)}to{transform:translateY(0)}}.tuner{align-items:center;animation:floatDown 2s ease-out forwards;border-radius:5rem;box-shadow:0 0 5px #0003;color:#73533a;display:flex;flex-direction:column;font-family:Raleway,sans-serif;height:400px;justify-content:center;padding:60px;-webkit-user-select:none;user-select:none;width:400px}.tuner .tuner-display{text-align:center}.tuner .tuner-display .note{font-size:4.5rem;font-weight:700;line-height:1}.tuner .tuner-display .freq{font-size:1.1rem;margin-top:.25rem;opacity:.7}.tuner .tuner-gauge{align-items:flex-end;display:flex;height:120px;justify-content:center;margin:1rem 0 .5rem;position:relative;width:240px}.tuner .tuner-gauge .gauge-img{width:100%}.tuner .tuner-gauge .needle{background:#73533a;border-radius:2px;bottom:0;height:95px;left:50%;position:absolute;transform:translateX(-50%) rotate(0deg);transform-origin:bottom center;transition:transform .1s ease-out;width:4px}.tuner .start-stop-btn{background:#856246;border:none;border-radius:10px;color:#ebebcf;cursor:pointer;font-size:16px;margin-top:20px;padding:.6rem 1.8rem;text-align:center;transition:background .2s,transform .1s;width:100%}.tuner .start-stop-btn:hover{background:#543c31;transform:scale(1.05)}
/*# sourceMappingURL=main.2ac228ba.css.map*/