@font-face{font-family:Gotham;src:url(/assets/Gotham-Black-BxPkaytu.otf) format("opentype");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/Gotham-Bold-BlQ1c_KP.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/Gotham-BookItalic-DGfAY0LZ.otf) format("opentype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/Gotham-Light-DFDWWjwL.otf) format("opentype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/Gotham-Thin-BgYFtbyV.otf) format("opentype");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/Gotham-ThinItalic-D0_lndPo.otf) format("opentype");font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/Gotham-UltraItalic-CBOgbCHb.otf) format("opentype");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/Gotham-XLight-BJ0xd8nH.otf) format("opentype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/Gotham-XLightItalic-CsV2EVi_.otf) format("opentype");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/GothamBold-DQzSjYnA.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/GothamBoldItalic-VkhZTC_Z.ttf) format("truetype");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/GothamBook-COVcuzqe.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/GothamBookItalic-BMYragig.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/GothamLight-DEafr3VQ.ttf) format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/GothamLightItalic-DkGiD2f_.ttf) format("truetype");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/GothamMedium-tsv1zMv8.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/GothamMedium-tsv1zMv8.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Gotham;src:url(/assets/GothamMediumItalic-DFgBjJBM.ttf) format("truetype");font-weight:500;font-style:italic;font-display:swap}.light{--bg-color: #fdfffd;--text-color: #333;--border-color: #ccc;--primary-bg-color: #1a8a3d;--primary-hover-bg-color: #007521;--secondary-bg-color: transparent;--secondary-hover-color: #c0bfbf;--secondary-color: #137100;--danger-bg-color: #dc3545;--danger-hover-bg-color: #c82333;--danger-color: #e70918;--listened-color: #00981f;--progress-color: #ff8e48;--card-bg-color: #dfeedf;--green-color: #2a602d;--blue-color: #5b25cd;--blue-hover-color: #4a23a1}.dark{--bg-color: #202020;--text-color: #fff;--border-color: #ccc;--primary-bg-color: #00ba3b;--primary-hover-bg-color: #009c31;--secondary-bg-color: transparent;--secondary-hover-color: #666;--secondary-color: #fff;--danger-bg-color: #ff4c00;--danger-hover-bg-color: #c83123;--danger-color: #e70918;--listened-color: #20fa4c;--progress-color: #ffc62a;--card-bg-color: #3c433c;--green-color: #9bff9f;--blue-color: #5a6de3;--blue-hover-color: #4255cd}*{box-sizing:border-box;font-family:Gotham,sans-serif}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color)}.container{max-width:600px;margin:0 auto;padding:1rem;position:relative}.row{display:flex;align-items:center;gap:.5rem}.row__stretched{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.column{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:2rem;gap:.5rem}.column__no-padding{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:0;gap:.5rem}.column__small{width:7rem;min-width:7rem;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;gap:.5rem}.border{border:2px solid var(--border-color);border-radius:2rem}.border__small{border:1px solid var(--border-color);border-radius:2rem}.grid-container{display:grid;grid-template-columns:3fr 7fr;align-items:center;gap:1rem;margin-bottom:1rem}.input{outline:none;border:2px solid #ccc;border-radius:1rem;padding:.5rem;font-size:1rem;font-family:inherit}.input:focus{border-color:#333}.input_error input{border:2px solid red}.input_error:after{content:"Please enter a valid value";color:var(--danger-color);font-size:.8rem;position:absolute;top:100%;left:0;width:100%}.button{height:2.5rem;color:#fff!important;font-size:1rem;border-radius:2rem;border:none;cursor:pointer;padding:.25rem 1rem;transition:background-color .3s ease 0s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap}.button_primary{background-color:var(--primary-bg-color)}.button_primary:hover{background-color:var(--primary-hover-bg-color)}.button_blue{background-color:var(--blue-color)}.button_blue:hover{background-color:var(--blue-hover-color)}.button_danger{background-color:var(--danger-bg-color)}.button_danger:hover{background-color:var(--danger-hover-bg-color)}.button_secondary{background-color:var(--secondary-bg-color);border:2px solid var(--secondary-color);color:var(--secondary-color)!important;transition:ease-in-out .3s}.button_secondary:hover{box-shadow:1px 1px 6px 2px var(--secondary-hover-color)}.title{font-weight:300;text-transform:uppercase}.header__title,.container__title{font-weight:bolder;color:var(--green-color);font-size:3rem;margin:0}.title__main{align-self:center;font-size:5rem;margin-bottom:1rem}.container__title{margin-bottom:1rem}.header{display:flex;flex-direction:column;gap:1rem}.toolbar{display:flex;gap:.5rem}.toolbar__main{display:flex;justify-content:space-between}.toolbar__hide-button{width:100px}.dropdown{position:relative;display:inline-flex}.dropdown__content-wrapper{position:absolute;top:100%;left:0;z-index:1;overflow:hidden;--num-items: 4;--item-height: 2.5rem;--gap: .5rem;--border: 2px;--content-height: calc( var(--num-items) * var(--item-height) + 5 * var(--gap) + 2 * var(--border) )}.dropdown__content{background-color:var(--bg-color);border:var(--border) solid var(--border-color);border-radius:1.5rem;padding:var(--gap);display:flex;flex-direction:column;gap:var(--gap)}.dropdown__content .button{justify-content:flex-start}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:var(--card-bg-color);border-radius:8px;padding:2rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.form-actions{display:flex;gap:1rem;margin-top:1rem}.form-actions button{flex:1}.create-form{display:flex;flex-direction:column;gap:.5rem;margin:1.5rem 0;overflow:hidden;transition:height .3s ease 0s}.form-label{position:relative;display:flex;flex-direction:column;gap:.2rem}.create-form__form-label,.edit-form__form-label{margin-bottom:1rem}.create-form__add-button{flex-shrink:0}.playlist__title{font-size:2rem}.song-filter{display:flex;gap:.5rem;margin-bottom:1rem;justify-content:center}.song-filter__label{display:flex;align-items:center;gap:1rem;cursor:pointer}.list{display:flex;flex-direction:column;gap:1rem}.no-entries{text-align:center;font-size:1.1rem;font-weight:300}.card{display:flex;align-items:center;background-color:var(--card-bg-color);border-radius:2rem;padding:0 2rem;transition:box-shadow .3s ease 0s}.card:hover{box-shadow:3px 3px 2px 0 var(--secondary-hover-color)}.card__toolbar{flex-direction:column}.card__card-title{margin:0}.card__link{display:flex;flex-direction:column;gap:1rem;width:100%}.card-header{display:flex;flex-direction:column;gap:1rem;width:100%;cursor:pointer}.song-title_listened{text-decoration:line-through}.link{color:inherit;text-decoration:none}.song__status{margin:0;display:flex;align-items:center;gap:1rem}.status__text{font-weight:400;display:flex;align-items:center;gap:.5rem}.theme-toggle{position:absolute;top:1rem;right:1rem;display:flex;align-items:center;gap:.5rem}.theme-toggle__button{z-index:1000;width:2rem;height:2rem;background-color:transparent;border:none;color:var(--text-color);cursor:pointer;position:relative}.theme-toggle__button svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .3s ease 0s}.lucide{width:1rem;height:1rem;color:inherit}.lucide__big{width:3rem;height:3rem;color:inherit;margin:.25rem}.lucide_progress{color:var(--progress-color)}.lucide-listened{color:var(--listened-color)}.lucide-sun,.lucide-moon{opacity:1;transition:opacity .3s ease 0s;width:2rem;height:2rem}.light .lucide-sun,.dark .lucide-moon{opacity:0}.edit-form{background-color:var(--bg-color);transition:box-shadow .3s ease 0s;width:100%;max-width:600px}.edit-form__form-label{position:relative;display:flex;flex-direction:column;gap:.2rem;margin-bottom:1rem}.modal{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal_enter{animation:modal-open .3s ease 0s 1 normal forwards}.modal_close{animation:modal-close .3s ease .3s 1 normal forwards}.modal__content{background-color:var(--bg-color);border-radius:1.5rem;padding:1rem;width:100%;max-width:400px;opacity:0}.modal_enter .modal__content{animation:modal-content-open .3s ease .3s 1 normal forwards}.modal_close .modal__content{animation:modal-content-close .3s ease 0s 1 normal forwards}@keyframes modal-open{0%{opacity:0}to{opacity:1;transform:translateY(0)}}@keyframes modal-close{0%{opacity:1}to{opacity:0}}@keyframes modal-content-open{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes modal-content-close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}