@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");@font-face{font-family:UrbanStarblues;src:url("/fonts/Urban Starblues Demo.otf") format("opentype");font-weight:400;font-style:normal}@font-face{font-family:Wildwick;src:url(/fonts/Wildwick\ Demo.ttf) format("truetype");font-weight:400;font-style:normal}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Helvetica Neue;background-color:#5b2493;color:#fff}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;position:relative;overflow:hidden}.title1{font-size:5rem}.title1,.title2{position:absolute;left:50%;transform:translateX(-50%);font-weight:700;color:#fff;font-family:UrbanStarblues;top:10vh}.title2,.title3{font-size:4rem}.title3{position:absolute;left:50%;transform:translateX(-50%);font-weight:700;color:#fff;font-family:UrbanStarblues;top:7.5vh}.moodmessage,.welcome{font-size:2rem;font-weight:700;text-align:center;font-family:Wildwick}.moodmessage{margin-bottom:2rem}.button,.generateButton,.moodButton{background-color:#24ec81;padding:1rem 2.5rem;border-radius:9999px;font-size:1.5rem;font-weight:600;cursor:pointer;transition:background-color .3s;font-family:Wildwick}.button:hover,.generateButton:hover,.moodButton:hover{background-color:#2f855a}.moodButton{margin-right:1rem}.moodButton.selected{background-color:#ffca3a}.generateButton{margin-top:3rem}.button{margin-top:1rem}.flex{display:flex;justify-content:center;align-items:center}.space-x-4>:not(:last-child){margin-right:1rem}.intro-text{font-family:Wildwick,sans-serif;margin:-2.5rem 10% 2.5rem}.description-text,.intro-text{font-size:2vw;font-weight:600;text-align:center;line-height:1.6;color:#fff;cursor:default}.description-text{font-family:Inter,sans-serif;margin:2.5rem 12%}.modal-container{position:fixed;inset:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.modal{background-color:#fff;color:#333;padding:2rem;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,.2);max-width:40rem;width:100%;max-height:80vh;overflow-y:auto;text-align:center;animation:slideIn .5s ease-out}.modal-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;font-family:Wildwick}.modal h2{font-size:2.25rem}.modal h2,.modal h3{font-family:Wildwick;margin-top:.75rem;margin-bottom:.5rem}.modal h3{font-size:1.5rem}.close-button{background-color:#639;color:#fff;padding:.75rem 1.5rem;border-radius:.25rem;margin-top:1.5rem;cursor:pointer;transition:background-color .3s;border:none;font-size:1rem;font-family:Wildwick}.close-button:hover{background-color:#532c82}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.absolute-bottom{position:absolute;bottom:1rem;font-weight:700;font-size:1rem;font-family:Wildwick}.absolute-top-right{position:absolute;top:1rem;right:1rem;font-size:1.25rem;cursor:pointer}.how-it-works{position:relative;text-decoration:none;font-family:Wildwick;padding-bottom:8px;color:#fff}.how-it-works:after,.how-it-works:before{content:"";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:#2f855a}.how-it-works:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.how-it-works:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.how-it-works:focus:after,.how-it-works:focus:before,.how-it-works:hover:after,.how-it-works:hover:before{opacity:1;transform:translateY(0)}.how-it-works:focus:before,.how-it-works:hover:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.how-it-works:focus:after,.how-it-works:hover:after{transition:transform 0s cubic-bezier(.175,.885,.32,1.275) .2s,opacity 0s .2s}.glowing-background{background:linear-gradient(135deg,rgba(127,64,190,.7) 25%,#fff349);background-size:400% 400%;animation:glowing 7.5s linear infinite}.glowing-background2{background:linear-gradient(135deg,rgba(127,64,190,.7) 25%,#2ffb20);background-size:400% 400%;animation:glowing 7.5s linear infinite}.loading{font-family:UrbanStarblues;animation:bounce 1s infinite;text-align:center;font-size:3.5rem;font-weight:700;margin-top:10rem}@keyframes glowing{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-25px)}}.syncMessageContainer{display:flex;justify-content:center;align-items:center;margin-top:20px}.syncMessage{top:535px}.syncMessage,.syncMessage2{font-family:Wildwick;font-size:2rem;font-weight:700;position:absolute}.syncMessage2{top:575px}.animate-title{opacity:0;animation:fadeIn 1s forwards;animation-delay:1s}.animate-message{opacity:0;animation:fadeIn 1s forwards;animation-delay:5s}.animate-message2{opacity:0;animation:fadeIn 2s forwards;animation-delay:4s}.artist-container{width:80%;max-width:1200px;display:flex;justify-content:center;gap:20px;margin-top:-125px}.card{flex:1 0 21%;min-width:50px;max-width:200px;height:300px;width:300px;border-radius:20px;overflow:hidden;display:flex;align-items:flex-end;position:relative;transition:flex-grow .5s cubic-bezier(.16,1,.3,1),transform .3s ease;opacity:0;font-family:Wildwick}.card-link{text-decoration:none;color:inherit;display:block}.card.animate-card{animation:fadeInCard 1s forwards;animation-delay:2s;animation-fill-mode:forwards}.card:nth-child(2){animation-delay:2.5s}.card:nth-child(3){animation-delay:3s}.card:nth-child(4){animation-delay:3.5s}.card:nth-child(5){animation-delay:4s}.card:hover{flex-grow:1;transform:translateY(-10px)}.card>.background{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;filter:brightness(.6);z-index:-1;transition:filter .35s ease}.card:hover>.background{filter:brightness(1)}.card>.card-content{display:flex;align-items:center;position:absolute;left:10px;right:10px;bottom:20px;overflow:hidden;transition:.35s;z-index:10}.card:hover>.card-content{inset:20px;top:auto}.card-content>*{transition:.35s}.profile-image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%}.card-content>.title{white-space:pre;margin-left:10px;transform:translateX(100%);opacity:0}.card:hover .title{opacity:1;transform:translateX(0)}.card>.backdrop{position:absolute;left:0;right:0;bottom:0;height:100px;z-index:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7))}.link-container{display:flex;justify-content:center;align-items:center;margin-top:20px}@keyframes fadeInCard{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.loading-container{display:flex;justify-content:center;align-items:center}.loading-text{font-family:Wildwick;font-size:2rem;font-weight:700;position:absolute;top:625px}.spinner{display:inline-block;margin-left:.5rem;animation:spin 1s linear infinite}.playlist-link{position:absolute;left:50%;transform:translateX(-50%);top:565px;background-color:#24ec81;padding:1rem 2.5rem;border-radius:9999px;font-size:2.5rem;font-weight:600;color:#282121;cursor:pointer;transition:background-color .3s;font-family:Wildwick,sans-serif;text-decoration:none;display:inline-block;text-align:center}.playlist-link:hover{background-color:#1cbf63}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fade-in{animation:fadeIn 1s forwards}.fade-out{animation:fadeOut 1s forwards}@media only screen and (max-width:500px){*,:after,:before{margin:0;padding:0;box-sizing:border-box}.container{width:100%;height:100vh;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.title1{font-size:4rem;margin-top:13rem;text-align:center}.button{width:70%;margin-top:20px;padding:10px;font-size:1.45rem;color:#000}.description-text,.intro-text{display:none}.absolute-top-right{font-size:.875rem;position:absolute;top:20px;right:20px}.modal-container{position:fixed;inset:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.modal{background-color:#fff;color:#333;padding:1rem;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,.2);max-width:20rem;width:90%;max-height:80vh;overflow-y:auto;text-align:center;animation:slideIn .5s ease-out}.modal-title{font-size:1.25rem;font-weight:700;margin-bottom:1rem;font-family:Wildwick}.modal h3,.modal p{font-size:.875rem;margin-bottom:.5rem}.modal h2{font-size:1.25rem;font-family:Wildwick}.close-button,.modal h3{font-size:1rem;font-family:Wildwick}.close-button{background-color:#639;color:#fff;padding:.5rem 1rem;border-radius:.25rem;margin-top:1rem;cursor:pointer;transition:background-color .3s;border:none}.close-button:hover{background-color:#532c82}.title2{font-size:3.5rem;margin-top:2rem}.title2,.welcome{text-align:center}.welcome{font-size:1.25rem}.moodmessage{font-size:1.5rem;text-align:center}.moodButton{width:80%;margin:2.5px 0;padding:9px;font-size:1rem;display:inline-block;color:#000}.generateButton{width:100%;padding:15px;font-size:1.5rem;margin-top:30px;color:#000}.playlist-link{width:60%;padding:15px;font-size:1.754rem;margin-top:110px;color:#000}.title3{font-size:3.5rem;margin-top:2rem;text-align:center}.syncMessage{font-size:1.25rem;margin-top:8.5px;text-align:center}.syncMessage2{font-size:1.35rem;margin-top:.5px;text-align:center}.loading-container{display:flex;justify-content:center;align-items:center}.loading-text{font-family:Wildwick;font-size:3rem;font-weight:700;text-align:center;margin-top:15px}.spinner{display:inline-block;margin-left:.5rem;animation:spin 1s linear infinite}.link-container{display:flex;justify-content:center;align-items:center}.card>.background{filter:brightness(.95)}.artist-container{display:flex;flex-wrap:wrap;justify-content:center;gap:12.5px;margin-top:-2rem}.artist-container :first-child,.artist-container :nth-child(2){flex:0 0 calc(50% - 10px)}.artist-container :nth-child(3),.artist-container :nth-child(4),.artist-container :nth-child(5){flex:0 0 calc(33.33% - 10px)}.card{max-width:140px;height:215px;width:auto;transition:flex-grow .5s ease,max-width .5s ease;overflow:hidden;display:flex;align-items:flex-end;flex-grow:1}.card-link{pointer-events:none;cursor:default}.card:hover{flex-grow:10}.card-content{transition:opacity .3s ease,transform .3s ease;transform:translateY(20px)}.card.expanded .card-content,.card:focus-within .card-content,.card:hover .card-content{opacity:1;transform:translateY(0)}@keyframes fadeInCard{0%{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.card{animation:fadeInCard .5s forwards}}@media (min-width:380px) and (max-width:430px){.title1{font-size:4.1rem;margin-top:11rem}.title1,.title2{text-align:center}.title2{font-size:4rem;margin-top:3rem}.title3{font-size:3rem;margin-top:.5rem;text-align:center}.playlist-link{width:60%;padding:15px;font-size:1.5rem;margin-top:75px;color:#000}.card{max-width:160px;height:200px;width:auto;transition:flex-grow .5s ease,max-width .5s ease;overflow:hidden;display:flex;align-items:flex-end;flex-grow:1}}@media (min-width:430px) and (max-width:500px){.title1{margin-top:12rem}.title1,.title2{font-size:4rem;text-align:center}.title2{margin-top:3rem}.title3{font-size:3rem;margin-top:1rem;text-align:center}.playlist-link{width:60%;padding:15px;font-size:2rem;margin-top:75px;color:#000}.card{max-width:160px;height:235px;width:auto;transition:flex-grow .5s ease,max-width .5s ease;overflow:hidden;display:flex;align-items:flex-end;flex-grow:1}}@media (min-width:325px) and (max-width:375px) and (min-height:600px) and (max-height:700px){.title1{font-size:3.5rem;margin-top:9rem}.title1,.title2{text-align:center}.title2{font-size:4rem;margin-top:3rem}.title3{font-size:3rem;margin-top:1rem;text-align:center}.playlist-link{width:60%;padding:15px;font-size:2rem;margin-top:-40px;color:#000}.card{max-width:160px;height:160px;width:auto;transition:flex-grow .5s ease,max-width .5s ease;overflow:hidden;display:flex;align-items:flex-end;flex-grow:1}}@font-face{font-family:__Inter_36bd41;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/55c55f0601d81cf3-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:__Inter_36bd41;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/26a46d62cd723877-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:__Inter_36bd41;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/97e0cb1ae144a2a9-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:__Inter_36bd41;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/581909926a08bbc8-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:__Inter_36bd41;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:__Inter_36bd41;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/6d93bde91c0c2823-s.woff2) format("woff2");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:__Inter_36bd41;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/a34f9d1faa5f3315-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:__Inter_Fallback_36bd41;src:local("Arial");ascent-override:90.49%;descent-override:22.56%;line-gap-override:0.00%;size-adjust:107.06%}.__className_36bd41{font-family:__Inter_36bd41,__Inter_Fallback_36bd41;font-style:normal}