*{margin:0;padding:0}:root{--input-color:#fff;--primary-color:#9c4949;--secondary-color:#bf7950;--details-color:#974413;--button-color:#6a3559;--trackCard-color:#bf7950;--logo-font:"Monofett",sans-serif;--primary-font:"Nunito",sans-serif;--secondary-font:"Ubuntu",sans-serif;--comic-contour:1px 3px 3px 1px;--input-width:500px}body{background-color:#9c4949;background-color:var(--primary-color);color:#fff;font-family:Nunito,sans-serif;font-family:var(--primary-font)}nav{background-color:#bf7950;background-color:var(--secondary-color);border-bottom:4px solid #000;display:flex;flex-direction:column;font-size:14px;padding:7px 0}.nav-titleBar{display:inline-flex}.toggle{align-self:center;display:flex;font-size:20px;margin-right:15px;order:1}.nav-logo-link{align-items:center;color:inherit;display:flex;margin-right:auto;text-decoration:none}.nav-logo-img{margin:0 .6rem}.nav-logo-text{display:inline-flex;font-family:Monofett,sans-serif;font-family:var(--logo-font);font-size:25px;font-style:normal;font-weight:400;line-height:29px}a{color:#fff;text-decoration:none}.menu,.submenu{list-style-type:none}.nav-item{padding:5px 10px}.nav-item.button{padding:9px 5px}.menu{align-items:center;display:flex;flex-wrap:wrap;font-weight:800;justify-content:space-between;max-height:40vh;overflow-y:scroll}.menu:hover{overflow-x:hidden}.menu::-webkit-scrollbar{background-color:initial;height:8px;width:5px}.menu::-webkit-scrollbar-thumb{background:#383838;border-radius:8px}.menu.active{margin-top:10px}.menu.active .nav-item{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-name:slidein;animation-name:slidein}.menu .nav-item:hover{-webkit-transform:scale(1.1) translateX(-10px);transform:scale(1.1) translateX(-10px);transition:.3s}.menu.active .nav-item:hover{-webkit-transform:scale(1.1);transform:scale(1.1);transition:.3s}.menu li #btn-spotify{padding:10px 20px}@-webkit-keyframes slidein{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slidein{0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideout{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideout{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.menu li a{display:block;padding:15px 5px}.nav-item{display:none;order:3;text-align:center;width:100%}.active .nav-item{display:block}.toggle img{cursor:pointer;height:20px}main{margin:2rem 0 auto}.use-description{box-sizing:border-box;margin:25px 10vw;text-align:center}form.border-comic{display:flex;flex-direction:column;margin:0 auto;max-width:min(80vw,500px);max-width:min(80vw,var(--input-width));min-width:245px}form p{text-align:center}.border-comic input,.border-comic select,.border-comic textarea{background:#fff;background:var(--input-color);border-color:#000;border-radius:5px;border-style:solid;border-width:1px 3px 3px 1px;border-width:var(--comic-contour);font-family:Ubuntu,sans-serif;font-family:var(--secondary-font);height:1.5rem;margin:0 auto;transition:.5s;width:100%}.border-comic select{height:38px}.row-container{display:flex;margin-bottom:.75rem}.row-container span{align-self:center;flex:0.2 1;font-weight:700;text-align:center}.border-comic input[type=date]{flex:1 1}.border-comic>input:focus{border:solid #868686}.border-comic>p{font-size:16px;font-weight:bolder;margin-bottom:.3rem}.border-comic>label{font-size:12px}input{font-family:Nunito,sans-serif;font-family:var(--primary-font),sans-serif;margin-left:5px;padding:5px}#page-num{width:calc(input)}.search-results{margin:0 auto;width:min(80vw,500px);width:min(80vw,var(--input-width))}.buttonsContainer{display:flex;font-size:14px;gap:.5rem;min-width:245px}button{background:#6a3559;background:var(--button-color);flex-direction:row;font-size:16px;font:Nunito,sans-serif;font:var(--primary-font);height:1.5rem;margin-bottom:1rem;padding:1rem 0}button,button#search,button#submit-playlist{align-items:center;border-color:#000;border-radius:5px;border-style:solid;border-width:1px 3px 3px 1px;border-width:var(--comic-contour);color:#fff;cursor:pointer;display:flex;justify-content:center;width:100%}button#search,button#submit-playlist{font-size:16px;font-weight:bolder;margin:25px 0 1rem;min-height:1.5rem;padding:1rem 5rem}.spotify-login{align-items:flex-end;display:flex;flex:1 1;float:right;justify-content:flex-end}@media screen and (max-width:490px){button{height:3rem}}.nav-btn-spotify{height:40px;margin:5px}.nav-btn-spotify img{height:24px;position:relative;translate:-25% 25%}.btn-spotify{background:#1db954;border-color:#000;border-radius:27px;border-style:solid;border-width:1px 3px 3px 1px;border-width:var(--comic-contour);color:#fff;font-size:15px;font-weight:bolder;height:50px;margin:15px auto 1rem;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;width:170px}.btn-spotify img{height:20px;position:relative;translate:-25% 0}.search-results{margin-bottom:2rem;max-width:min(80vw,500px);max-width:min(80vw,var(--input-width))}#playlist-submit-form{background-color:rgba(0,0,0,.3);border:solid #000;border-radius:15px;border-width:1px 3px 3px 1px;border-width:var(--comic-contour);box-sizing:border-box;padding:.75rem}.buttonsScroll-container{display:block;opacity:.4;position:fixed;right:0;top:45vh}.buttonsScroll-container:hover{display:block;opacity:1;position:fixed;right:0;top:45vh;-webkit-transition:.4s}.buttonsScroll-container>*{background-color:#6a3559;background-color:var(--button-color);opacity:.5}.buttonsScroll-container>*,.buttonsScroll-container>:hover{height:60px;padding:5px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.buttonsScroll-container>:hover{opacity:1;-webkit-transition:.2s}.buttonsScroll-container img{height:15px}.Track-Container{background-color:#bf7950!important;background-color:var(--trackCard-color)!important}.Track-Checkbox:checked+label:before,.highlighted{background-color:#974413!important;background-color:var(--details-color)!important}.Track-Checkbox:checked+label:before{border-color:#974413!important;border-color:var(--details-color)!important}.loader{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:5px solid #f3f3f300;border-radius:50%;border-top-color:#6a3559;border-top:5px solid var(--button-color);height:50px;margin:3rem auto;width:50px}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.TrackCard{display:flex;flex-direction:column}.searchQuery{background-color:#bf7950;background-color:var(--secondary-color);border:1px solid #000;border-radius:15px;color:#fff;display:block;font-size:12px;height:30px;left:10%;padding:5px;position:relative;top:25px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:-1}.form-container{margin-bottom:2rem}@media screen and (min-width:768px){#root{display:flex;flex-direction:row}li.toggle{display:none}nav{border-radius:0 15px 15px 0;border-right:4px solid #000;box-sizing:border-box;height:100vh;left:0;margin:0;max-width:240px;overflow:hidden;padding-bottom:0;position:fixed;right:0;top:0;width:250px}.menu{margin-bottom:0;margin-top:10rem;max-height:700px;padding:0}.toggle{display:none}.menu .nav-item{display:block;text-align:right}main{display:flex;flex-flow:column nowrap;justify-content:center;margin-left:240px;max-width:min(80vw,500px);max-width:min(80vw,var(--input-width));min-width:calc(100% - 240px)}form.border-comic{width:min(80vw,500px);width:min(80vw,var(--input-width))}.use-description{box-sizing:border-box;margin:25px auto;text-align:center}}.welcome-hero{display:flex;flex-direction:column;height:80vh;justify-content:center}@media screen and (max-width:480px){.welcome-hero{height:60vh}}.welcome-title{margin:2rem 0;text-align:center}.welcome-desc>h3{font-weight:400;margin-bottom:.75rem;margin-left:1rem;margin-right:1rem}.welcome-desc>h3,.welcome-user{font-family:Ubuntu,sans-serif;font-family:var(--secondary-font);text-align:center}.fwidth{width:100%}.Track-Container{background-color:#c6c6c6;border:solid #000;border-radius:8px;border-width:1px 3px 3px 1px;display:flex;flex-direction:row;flex-wrap:nowrap;float:none;height:70px;margin:.25em auto;min-width:245px;width:100%}.Track-AlbumCover{height:50px;margin:auto 15px}.Track-Name{display:block;font-size:.75rem;font-weight:700;margin-bottom:5px;text-align:left}.Track-AlbumName{font-size:.65rem;text-align:left}.Track-Info{align-items:flex-start;display:flex;flex-direction:column;justify-content:center}.highlighted{background-color:#434242;border-radius:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#f5f5ff;padding:3px 7px}.responsive-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:0){.responsive-text{max-width:110px}}@media screen and (min-width:420px){.responsive-text{max-width:180px}}@media screen and (min-width:540px){.responsive-text{max-width:280px}}@media screen and (min-width:768px){.responsive-text{max-width:350px}}.Track-Choice{align-self:center;display:flex;flex:1 1;justify-content:flex-end;margin-right:1rem}.Track-Checkbox{opacity:0;position:absolute;z-index:-1}.Track-Checkbox+label{align-items:center;display:inline-flex;-webkit-user-select:none;user-select:none}.Track-Checkbox+label:before{background-position:50%;background-repeat:no-repeat;background-size:50% 50%;border:1px solid #adb5bd;border-radius:.25em;content:"";display:inline-block;flex-grow:0;flex-shrink:0;height:1.5em;margin-right:.5em;width:1.5em}.Track-Checkbox:checked+label:before{background-color:#434242;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='m6.564.75-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E");border-color:#434242}.Track-Checkbox:not(:disabled):not(:checked)+label:hover:before{border-color:#c4c3c3}.Track-Checkbox:not(:disabled):active+label:before{background-color:#c4c3c3;border-color:#c4c3c3}.Track-Checkbox:focus+label:before{box-shadow:0 0 0 .2rem grey}.Track-Checkbox:focus:not(:checked)+label:before{border-color:#8f8e8e}.Track-Checkbox:disabled+label:before{background-color:#c4c3c3}
/*# sourceMappingURL=main.9469673c.css.map*/