#root{max-width:1280px;margin:0 auto;padding:0;text-align:center}.logInWith,.musiconn{font-weight:600;display:inline-block}.musiconn{position:absolute;top:5%;left:4%;font-size:36px;font-weight:bolder;color:var(--color-forestgreen);width:243px}.logInWith{position:relative}.logInWithSpotifyWrapper{position:absolute;top:5%;right:7%;border-radius:var(--br-31xl);background-color:var(--color-forestgreen);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px;color:var(--color-gray-100)}.logo{margin-top:12em;height:10em;padding:1.3em;will-change:filter;transition:filter .3s}.landing-logo{margin-top:7.4em}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.tagline{font-size:20px;font-weight:600}.hometitle{margin-top:0!important}.desc-container{font-size:16px;width:45vw;max-width:550px;min-width:280px;margin:0 auto}.desc{font-weight:500;font-size:18px}.aboutusButton{padding:0;position:absolute;left:50vw;transform:translate(-50%);top:88vh;font-size:20px}.aboutusButton button{padding:0}.aboutusButton button:hover{border:none;color:var(--color-forestgreen)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{margin-top:20px;padding:2em}.spotifyLogin:hover,.logInWithSpotifyWrapper:hover{background-color:var(--color-forestgreen);filter:drop-shadow(0 0 2em #646cffaa)}.read-the-docs{color:#888}@media screen and (max-width: 500px){.recommendSongsWrapper{font-size:14px}.musiconn{font-size:30px;left:-5%}.trackHeader{font-size:36px}.logo{margin-top:30%}.landing-logo{margin-top:15%}.logInWithSpotifyWrapper{display:none}}.navBar{margin-top:1%;display:flex;flex-direction:row;justify-content:space-between;color:#fff;z-index:999;position:relative;height:8vh}.navTitle{display:flex;align-items:center}.navTitle .link{font-size:36px;font-weight:bolder;color:var(--color-forestgreen)}.navButtons{width:50%;display:flex;justify-content:space-evenly}.pageLinksdiv{display:flex;align-items:center}.pageLinksdiv:hover{transform:scale(1.05);border-bottom:2.5px solid var(--color-forestgreen)}.pageLinks{font-size:18px;font-weight:700}.pageLinks:hover{color:#fff}.hambugger-icon,.navbar-dropdown{display:none}.navButtons.show{border:1px solid black;background-color:#404040;border-radius:10px;display:block;position:absolute;top:105%;right:0%}.navButtons.show .pageLinksdiv{display:block;border:1px solid black;padding:5px 0}@media (max-width: 767px){.navButtons{display:none}.navButtons.show{width:45%}.hambugger-icon{display:flex;align-items:center;padding:0 15px}.hambugger-icon:hover{border-radius:5%;background-color:var(--color-forestgreen)}}@media (max-width: 510px){.navButtons.show{width:55%}}@media (max-width: 424px){.navButtons.show{width:65%}}@media (max-width: 350px){.navButtons.show{width:70%}}.mainLogo{height:65%;width:65%;margin-top:5px}.recomTitle{margin-top:80px}.recomContainerUL{padding:0}.recomContainer{display:flex;flex-wrap:wrap;justify-content:space-evenly;margin-top:50px}.recomTile{width:260px;height:330px;margin:0 0 50px;border-radius:10px;background-color:#373a35;box-shadow:0 0 10px #0000004d;overflow:hidden}.recomTile:hover{color:#fff}.recomTile a{text-decoration:none;color:#fff;display:flex;flex-direction:column}.recomTile img{width:100%;height:60%}.recomTile div{margin-top:2px;display:flex;flex-direction:column}.recomTile p{color:#fff}.recomTile p:nth-child(1){font-size:16px;margin:5px;font-weight:700;flex:1}.recomTile p:nth-child(2){font-size:14px;margin:5px;font-weight:700;flex:1}@media screen and (max-width: 768px){.recomTile{width:250px;height:320px}.recomTile img{width:100%;height:70%;object-fit:cover}.recomTile p{font-size:15px;margin:5px;font-weight:700}}@media screen and (max-width: 768px){.recomTitle{margin-top:60px!important;font-size:40px}}.trackHeader{margin-top:80px}.currTrackImg{border-radius:10px;width:20%}.currTrackName{font-weight:bolder;font-size:26px;margin:15px 0 0}.currTrackDesc{font-weight:700;font-size:18px;margin-top:10px}.currTrackAlbum{margin:0}.currTrackArtists{margin:5px 0 15px}@media screen and (max-width: 550px){.currTrackImg{width:50%}.currTrackName{font-size:22px}.currTrackDesc{font-size:14px}}@media screen and (max-width: 410px){.currTrackImg{width:60%}.currTrackName{font-size:22px}.currTrackDesc{font-size:14px}}.title{margin:80px 0 0}.outer-container{width:60vw;margin:0 auto;padding:30px}.prompt{font-size:20px}.flex-container{display:flex;flex-wrap:wrap;justify-content:space-evenly;background-color:#404040;padding-top:25px;border-radius:20px}.profile-card{width:185px;height:270px;border-radius:5%;margin:0 0 25px;background-color:#303030}.profile-card:hover{background-color:#404040;filter:drop-shadow(0 0 .5em #777e80aa)}.img-container{height:185px;display:flex;justify-content:center;align-items:center}.profile-img{width:150px;height:150px;border-radius:100%}.text-container{height:85px;display:flex;flex-direction:column;justify-content:space-evenly}.profile-name{width:185px;margin:0}.profile-name a,.profile-name a:hover{color:#fff}.add-friend{text-align:center;margin:0;width:150px;background-color:#242424}.topContainer{display:grid;grid-template-columns:1fr 1fr;grid-gap:70px}.userContain{margin-top:120px}.profilePic{border-radius:50%;max-width:200px}.profilePic:hover{filter:drop-shadow(0 0 2em var(--color-forestgreen))}.userStats{display:flex;justify-content:center;align-items:center;margin-bottom:25px}.followingCount,.followersCount{margin:10px 10px 10px 20px;display:inline-block!important;text-align:center}.userStats .statCount{font-weight:700;font-size:20px;color:var(--color-forestgreen)}.userName:hover{color:var(--color-forestgreen)}.artist{display:flex;align-items:center;margin:10px 0;padding:0 30px}.artist img{border-radius:50%;width:50px;height:50px;object-fit:cover;margin-right:60px}.artist h4{margin:0}.artist p{font-size:16px;font-weight:700}.topArtistsContainer{margin-top:20px;background-color:#15141488;padding:20px;box-shadow:0 0 20px #0000004f}.track{display:flex;align-items:center;margin:20px 0;padding:0 30px}.track img{width:50px;height:50px;object-fit:cover;margin-right:60px}.track h4{margin:0}.track p{font-size:16px;font-weight:700;margin-bottom:0;margin-top:-1px;text-align:left}.artistNames p{font-size:12px;font-weight:400;display:inline-block;padding-top:-20px}.topTracksContainer{margin-top:20px;background-color:#15141488;padding:20px;box-shadow:0 0 20px #0000004f}.trackInfo{display:block}.artistNames{text-align:left}*{box-sizing:border-box}.chat-app-room{max-width:728px;margin:50px auto 0;overflow-y:scroll;height:calc(77vh - 5px)}.chat-app-room::-webkit-scrollbar{width:.25rem}.chat-app-room::-webkit-scrollbar-track{background:#1e1e24}.chat-app-room::-webkit-scrollbar-thumb{background:var(--color-forestgreen)}.header-room{background-color:var(--color-forestgreen);color:#fff;text-align:center;position:fixed;width:100%;max-width:728px;display:flex;align-items:center;justify-content:center;border-radius:5px;height:60px}.header-room h1{font-size:28px}.messages-room{display:flex;flex-direction:column;align-items:flex-start;padding:10px;margin-top:60px;margin-bottom:10px}.message-room{max-width:500px;margin-bottom:10px;padding:5px 20px 5px 10px;text-align:left;border-radius:7px;background-color:#373737}.user-room{font-size:12px;margin:0}.message-text-room{font-weight:700;font-size:16px;color:#fff;margin:0}.new-message-form-room{display:flex;width:100%;margin:0 auto;max-width:728px;padding:10px;position:fixed;bottom:0;height:60px}.new-message-input-room{flex:1;border:none;outline:none;background:transparent;font-size:16px;color:#fff;padding:10px;border-radius:5px 0 0 5px}.send-button-room{border:none;outline:none;background:#3b5998;color:#fff;font-size:16px;font-weight:700}.chat-container{display:flex;align-items:center;padding:12px;border-bottom:1px solid #e6e6e6;border:2px solid rgba(208,205,205,.608);border-radius:25px;margin-bottom:15px;margin-top:15px}.chat-container img{width:50px;height:50px;border-radius:50%;margin-right:12px}.chat-container h2{font-size:16px;font-weight:700;margin-bottom:4px;text-align:left}.chat-container p{font-size:14px;margin:0;text-align:left;color:#04f004}.chat-container p:last-child{color:#8c8c8c}.chat-container a{text-decoration:none;color:inherit}.chat-container a:hover{background-color:#fafafa}.chatlist{margin:80px 0 0}.messageBox{display:flex;flex-direction:column;height:calc(100vh - 200px);overflow-y:scroll}.message{padding:11px;border-radius:8px;margin:10px 10px 10px 60px;position:relative;max-width:70%;min-width:38%}.sent{align-self:flex-end;margin:10px 60px 10px 10px;background-color:#237f5a}.received{align-self:flex-start;margin:10px 60px 10px 10px;background-color:#237f5a}.user{font-size:16px;font-weight:700}.textBody{font-size:18px;font-weight:700}.message .user{font-weight:700}.message .textBody{margin-top:5px}.message .textTime{font-size:12px;color:#d2d2d2;margin-top:5px;position:absolute;bottom:-20px;right:5px}.send-button{margin-top:10px;margin-left:10px}input[type=text]{width:100%;box-sizing:border-box;padding:.5rem;font-size:1rem;border:1px solid #ddd;border-radius:.5rem;margin-top:1rem}form{display:flex;position:fixed;bottom:0;left:25%;width:45%;background-color:#242424}.chatHeader{width:100%;padding:0 190px;text-align:left}.connections-card-container{display:flex;flex-wrap:wrap;justify-content:center}.connections-card{width:250px;padding:20px;margin:20px}.profile-card{background-color:#242424;border-radius:10px;box-shadow:0 2px 4px #0d0c0c0a;padding:20px;display:flex;flex-direction:column;align-items:center}.profile-link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#04f004;transition:transform .3s ease-in-out}.profile-link:hover{transform:scale(1.05)}.profile-photo{margin-top:20px;width:120px;height:120px;border-radius:50%}.connections-button{margin-top:12px;padding:5px 15px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:700;text-decoration:none;transition:background-color .3s ease-in-out;cursor:pointer}.connections-button:hover{background-color:#45a049}.connection-heading{margin:80px 0 0}.about-us{text-align:center;margin-top:80px}.aboutusTitle{margin-bottom:2rem}.developers{display:flex;flex-wrap:wrap;justify-content:center}.developer{width:310px;margin:1.5rem;padding:1rem;border-radius:8px;transition:transform .3s ease;position:relative}.developer:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4.5px;background:linear-gradient(to right,var(--color-forestgreen),transparent);border-radius:0 0 5px 5px;opacity:0;transition:opacity .3s ease-in-out;transform:scale(.85)}.developer:hover:after{opacity:1}.devProfilePic{width:150px;height:150px;border-radius:50%;margin-bottom:.5rem}.devName{font-size:1.5rem;margin-bottom:.5rem;color:#fff}.social-links{display:flex;justify-content:center;margin-top:1rem}.social-links a{color:#333;font-size:1.5rem;margin:0 .5rem;transition:color .3s ease}.social-links a:hover{color:#4285f4}@media (max-width: 600px){.developer{width:90%;margin:1.5rem auto}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--font-size-lg: 18px;--font-size-27xl: 46px;--font-size-base: 16px;--font-size-7xl: 26px;--color-gray-100: #111;--color-forestgreen: #1db954;--color-whitesmoke: #eceded;--color-darkgray: #9ca9b3;--br-31xl: 50px}a{font-weight:500;color:#fff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;place-items:center}h1{font-size:3.2em;line-height:1.1}button{border-radius:var(--br-31xl);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}