@import"https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900;9..40,1000&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";html,body,#root,.wrapper{width:100%;height:100%}body{margin:0;padding:0}:root{font-family:DM Sans,sans-serif}button,a{font-family:DM Sans,sans-serif;font-weight:600}.header-container{background-color:transparent;display:flex;align-items:center;justify-content:flex-end;padding:12px;width:calc(100% - 24px)}.header-logo{height:40px;font-family:Inter;font-weight:600}.logo{font-family:Inter;font-size:2.5rem;font-weight:700;color:#fff}.sub{position:absolute;transform:translate(-8px,-65px);opacity:30%}.login-btn{font-size:1rem;background:transparent;border:none!important;text-decoration:none;color:#fff;margin-right:20%}.login-btn:hover{color:#a5a5a5}.homepage-container{margin-top:-44.8px;height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;background-image:url(/assets/homepage-anBVPaTN.jpg);background-size:cover}.left-container,.right-container{display:flex;justify-content:center;align-items:center;flex-direction:column;width:50%;height:100%}.large-logo{width:60%}.description{font-size:1rem;color:#fff;font-weight:500;text-align:left}.large-btn{background:none;padding:0;font:inherit;color:#000;cursor:pointer;width:150px;height:50px;border-radius:300px;border:0px;background-color:#f5d1d1;text-decoration:none;margin:32px;font-size:1.5rem;font-weight:600;font-family:Inter}.large-btn:hover{scale:1.1;color:#fff}.mbti-container{margin-top:-46.8px;padding-top:46.8px;display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center;height:calc(100% - 47px);background-image:url(/assets/homepage-anBVPaTN.jpg);background-size:cover}.header{font-size:2rem;text-align:center;font-weight:700}.bar{width:45%;height:5%;border-radius:50px;background-color:#fff;padding:3px}.bar-inner{height:100%;border-radius:50px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600}.sub-text{text-align:center;color:#000;font-size:1.25rem;font-weight:500;width:70%;font-size:Inter}.top-items{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:16px;background-color:#000;padding:16px;border-radius:16px;flex-wrap:wrap;max-width:932px}.song-container,.genre-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:#000;height:80px;width:300px}.song-img{height:100%}.song-name{color:#fff;text-align:center;width:100%;font-weight:600;padding:0 0 0 16px}.info-container{display:flex;flex-direction:row;justify-content:center;align-items:center;width:70%;flex-wrap:wrap;gap:16px}.sub-header{font-size:1.5rem;font-weight:600;text-align:center}.top-songs-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.results-container{align-content:space-between}#results-top-items{flex-direction:column}.credits-container{display:flex;justify-self:center;align-items:center;flex-direction:row;gap:16px;padding:16px}.credit-logo{width:50px;height:50px}@media only screen and (max-device-width: 700px){.header{font-size:2rem}.sub-text{font-size:1rem;font-weight:600}.top-items{max-width:466px;padding:8px;gap:8px;flex-direction:column;border-radius:8px}.sub-header{font-size:.8rem}.info-container{flex-direction:row;width:90%;gap:0px}.song-container,.genre-container{height:40px;width:200px}.song-name{padding:0 0 0 8px;text-wrap:wrap}#results-top-items{flex-direction:row}#results-item{width:100px}#results-name{font-size:.5rem}}.loading-screen-container{margin-top:-46.8px;height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:32px;background-image:url(/assets/loadingpage-BxoqRLcx.jpg);background-size:cover}.loading-gif{width:700px;border-radius:32px}.loading-sub-text{font-size:1.5rem;font-weight:700;text-align:center;font-family:Inter}.cloud{height:100px;position:absolute}#cloud1{transform:translate(-350px,-200px)}#cloud2{transform:translate(350px,150px)}@media only screen and (max-device-width: 700px){.loading-sub-text{font-size:1rem;font-weight:600;text-align:center}.loading-gif{width:80%}}