body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#faf9f6;overflow-x:none}body h1,body p{margin:0;padding:0}body::-webkit-scrollbar{display:none}@font-face{font-family:PrimaryFont;src:url(/vibeifyV1/Inconsolata.otf) format("opentype")}@font-face{font-family:SecondaryFont;src:url(/vibeifyV1/SpaceMono-Regular.ttf) format("truetype")}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{flex-direction:column}.App,.App .header{width:100%;display:flex;align-items:center}.App .header{height:10vh;border-bottom:2px solid rgb(129,124,124);justify-content:center;font-family:PrimaryFont;position:relative}.App .header .home-link{position:absolute;left:20px;font-size:14px;color:inherit;text-decoration:none}.App .footer{height:5vh;width:100%;border-top:2px solid rgb(129,124,124);display:flex;justify-content:center;align-items:center;font-family:PrimaryFont}.App .footer p{cursor:pointer}.App .footer p span{color:#3a94b5}.App .footer #igIcon{left:2%}.App .footer #igIcon,.App .footer #privacyPolicy{position:absolute;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.App .footer #privacyPolicy{right:2%;border-radius:4px;background-color:rgba(58,148,181,.568627451)}.LandingPage{height:calc(85vh - 4px);overflow-x:hidden}.LandingPage,.LandingPage .description{width:100%;display:flex;flex-direction:column}.LandingPage .description{height:80%;justify-content:space-evenly;align-items:center;text-align:center;font-family:SecondaryFont}@media only screen and (min-width:360px){.LandingPage .description{height:50%}}@media only screen and (min-width:1024px){.LandingPage .description{height:30%}}.LandingPage .description h2{max-width:90%}.LandingPage .description p{font-size:15px;max-width:80%}@media only screen and (min-width:1024px){.LandingPage .description p{font-size:18px}}.LandingPage .albumCoverRows{height:35%;width:100%;display:flex;justify-content:space-evenly;align-items:center}@media only screen and (min-width:400px){.LandingPage .albumCoverRows{height:30%}}@media only screen and (min-width:1024px){.LandingPage .albumCoverRows{height:50%}}.LandingPage .albumCoverRows .album{height:160px;width:160px;flex-direction:row;display:flex;flex-wrap:wrap;position:relative;box-shadow:-10px 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}@media only screen and (min-width:400px){.LandingPage .albumCoverRows .album{height:180px;width:180px}}@media only screen and (min-width:1024px){.LandingPage .albumCoverRows .album{height:210px;width:210px}}.LandingPage .albumCoverRows .album img{object-fit:fill;width:100%;height:100%}.LandingPage .albumCoverRows .album .record{position:relative;height:150px;width:150px;top:-97%;bottom:3%;border-radius:50%;background-color:#181818;display:flex;box-shadow:0 12px 28px rgba(0,0,0,.25),0 12px 10px rgba(0,0,0,.22);z-index:-1;justify-content:center;align-items:center;left:55%;animation:spin 25s linear infinite;transform-origin:center center}@media only screen and (min-width:400px){.LandingPage .albumCoverRows .album .record{height:170px;width:170px;left:52%}}@media only screen and (min-width:1024px){.LandingPage .albumCoverRows .album .record{left:55%;height:195px;width:195px}}.LandingPage .signIn{width:100%;display:flex;align-items:center;justify-content:center;color:white;height:20%}@media only screen and (min-width:400px){.LandingPage .signIn{height:15%;height:20%}}.LandingPage .signIn .button{cursor:pointer;padding:15px 20px;background-color:#1db954;width:fit-content;border-radius:3px}.LandingPage .signIn .button:hover{opacity:.6}.PlaylistsPage{min-height:85vh;width:80%;margin-bottom:30px;margin-top:50px;display:grid;grid-template-columns:repeat(1,80%);row-gap:90px}@media only screen and (min-width:1024px){.PlaylistsPage{align-items:start;display:grid;justify-content:space-between;grid-template-columns:repeat(2,320px);grid-template-rows:auto}}@media only screen and (min-width:1800px){.PlaylistsPage{grid-template-columns:repeat(4,320px)}}.logout{height:15vh;width:80%;display:flex;align-items:center;justify-content:flex-start;color:white}@media only screen and (min-width:1024px){.logout{justify-content:center}}.logout .button{font-family:SecondaryFont;cursor:pointer;padding:5px 10px;background-color:#f05023;width:fit-content;border-radius:3px}.logout .button:hover{opacity:.6}.playlistHolder .albumCover{height:195px;width:195px;background-color:orange;flex-direction:row;display:flex;flex-wrap:wrap;position:relative;box-shadow:-10px 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}@media only screen and (min-width:1024px){.playlistHolder .albumCover{height:210px;width:210px}}.playlistHolder .albumCover .imageBlock{width:50%;height:50%;background-color:black;z-index:1;cursor:pointer}@keyframes spin{to{transform:rotate(1turn)}}.playlistHolder .albumCover .record{position:relative;height:185px;width:185px;top:-97%;bottom:3%;border-radius:50%;background-color:#181818;display:flex;box-shadow:0 12px 28px rgba(0,0,0,.25),0 12px 10px rgba(0,0,0,.22);justify-content:center;align-items:center;left:55%;animation:spin 25s linear infinite;transform-origin:center center}@media only screen and (min-width:1024px){.playlistHolder .albumCover .record{height:195px;width:195px}}.playlistHolder .albumDescription #spotify-logo{width:70px;margin-top:15px}.playlistHolder .albumDescription h2{font-family:PrimaryFont}.playlistHolder .albumDescription p{font-family:SecondaryFont}.playlistHolder .albumDescription .createButton{margin-top:20px;padding:5px 10px;width:fit-content;border-radius:3px;background-color:#1db954;cursor:pointer}.playlistHolder .albumDescription .createButton:hover{opacity:.7}.playlistHolder .albumDescription .createButton p{font-size:13px}@keyframes frame-animation{to{transform:translateX(-100%)}}.Animation{max-width:100px;overflow:hidden;font-size:50px;text-align:center;margin:0 auto 20px}.Animation-frames{animation:frame-animation .5s infinite;animation-timing-function:steps(4);display:flex;width:400%}.Animation-frame{display:block;width:25%;max-width:25%;flex-basis:25%}a{font-size:14px;color:#999;text-decoration:none;border-bottom:1px solid #ccc;transition:all .25s}a:hover{color:#777;border-bottom:1px solid #555}.modal_holder{z-index:999;height:100vh;width:100%;position:fixed;top:0;display:flex;justify-content:center;align-items:center;color:white;backdrop-filter:blur(3px) brightness(.3)}.modal_holder .modal{padding:10px 20px 20px;max-width:80%;background-color:#1db954;border-radius:5px;text-align:center}@media only screen and (min-width:1024px){.modal_holder .modal{max-width:50%}}.modal_holder .modal h1{font-family:PrimaryFont}.modal_holder .modal p{margin-top:15px;font-family:SecondaryFont;font-size:15px}.modal_holder .modal a{color:white}.LandingPage .albumCoverRows .album:nth-child(n+2){display:none}@media only screen and (min-width:1024px){.LandingPage .albumCoverRows .album:nth-child(-n+3){display:flex}}@media only screen and (min-width:1800px){.LandingPage .albumCoverRows .album:nth-child(4){display:flex}}@media only screen and (max-height:567px){.LandingPage .albumCoverRows{display:none}}button{font:inherit;color:inherit;border:0}button:disabled{opacity:.6;cursor:default}.footer a{color:inherit;font-size:inherit;text-decoration:none;border:0}.playlistHolder .albumCover a.imageBlock{display:block;border:0;line-height:0}.playlistHolder .albumCover a.imageBlock img{width:100%;height:100%;display:block}.playlistHolder .albumDescription .count{font-size:13px;opacity:.6;margin-top:6px}.PlaylistsPage .empty,.toast{font-family:SecondaryFont}.toast{position:fixed;top:20px;right:20px;z-index:1000;max-width:340px;padding:12px 16px;border-radius:3px;color:white;cursor:pointer;font-size:14px;box-shadow:0 6px 16px rgba(0,0,0,.25)}.toast.success{background-color:#28a745}.toast.error{background-color:#dc3545}.toast .detail{margin-top:8px;font-size:12px;opacity:.9}.PlaylistsPage.loading{justify-content:center}.PlaylistsPage.loading,.loadingStatus{display:flex;flex-direction:column;align-items:center}.loadingStatus{gap:12px;font-family:SecondaryFont;font-size:14px;text-align:center}.loadingStatus progress{width:240px;height:6px;appearance:none;border:0;border-radius:3px;overflow:hidden;background:rgba(0,0,0,.1)}.loadingStatus progress::-webkit-progress-bar{background:rgba(0,0,0,.1)}.loadingStatus progress::-webkit-progress-value{background:#1db954;transition:width .2s}.loadingStatus progress::-moz-progress-bar{background:#1db954}.loadingStatus .hint{opacity:.5;font-size:12px}