@import url(https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans&display=swap);:root{--background:#fff;--dark:#44546a;--light:#697688}body{background-color:#fff;background-color:var(--background);box-sizing:border-box;font-family:Noto Sans;margin:0}.home{height:100%;position:relative;width:100%}.clickable:hover,button:hover{cursor:pointer}.environment{background-color:darkred;color:#fff;font-size:24px;left:0;opacity:.5;padding:8px;position:fixed;text-emphasis:bold;top:50%}#scroll-to-top{background-color:#697688;background-color:var(--light);border:2px solid #44546a;border:2px solid var(--dark);border-radius:4px;bottom:36px;box-shadow:2px 2px 4px #000;color:#fff;cursor:pointer;font-size:18px;left:50%;padding:4px 8px;position:fixed;text-align:center;transform:translateX(-50%);z-index:20}header{background-color:#44546a;background-color:var(--dark);color:#fff;height:80px;position:-webkit-sticky;position:sticky;text-align:left;top:0;z-index:10}footer,header{display:flex;justify-content:space-between;padding:8px}footer a{color:#44546a;color:var(--dark);margin-left:8px}#title-div{align-items:center;display:inline-flex;font-size:32px;height:100%}#title{width:220px}.logout{align-items:center;flex-wrap:wrap;height:100%;justify-content:right}#user-name,.logout{display:inline-flex}#user-name{cursor:pointer;margin-right:8px;text-align:right;text-decoration:underline}@media screen and (max-width:560px){#user-name{display:none}}.profile-pic{border-radius:50%;cursor:pointer;height:60px;object-fit:cover;width:60px}#account-menu{background-color:#697688;background-color:var(--light);border-bottom-left-radius:8px;display:none;padding:20px 8px 8px;position:fixed;right:0;top:0}#account-menu-close{cursor:pointer;left:8px;position:absolute;top:8px}.account-menu-option{border:1px solid #44546a;border:1px solid var(--dark);border-radius:8px;cursor:pointer;margin-top:4px;padding:4px;text-align:center}.account-menu-option:hover{background-color:#44546a;background-color:var(--dark)}#user-welcome{align-items:center;display:flex;font-size:18px}#user-welcome img,.logout button{margin-left:8px}.logout button{background-color:#fff;border:none;border-radius:4px;color:#44546a;color:var(--dark);display:inline-flex;margin-bottom:8px;margin-top:8px;padding:4px;text-emphasis:bold}.privacy-policy{margin:10px auto;width:80%}.privacy-policy a,.privacy-policy h1,h2{color:#44546a;color:var(--dark)}.is-blurred{filter:blur(2px);-webkit-filter:blur(2px);pointer-events:none;-webkit-user-select:none;user-select:none}#login{background-color:#fff;border:2px solid #44546a;border:2px solid var(--dark);border-radius:8px;color:#44546a;color:var(--dark);filter:none!important;-webkit-filter:none!important;left:50%;min-width:300px;padding:16px;position:absolute;text-align:center;top:25%;transform:translateY(-50%);transform:translateX(-50%);width:60%;z-index:10}#login h1{margin:8px 0}.login-button{background-color:#1ed760;border:none;border-radius:4px;color:#fff;font-size:18px;margin:auto;padding:4px;position:relative;text-emphasis:bold;width:120px}.login-button img{left:4px;position:absolute;top:50%;transform:translateY(-50%)}.content-container{margin:10px auto;width:356px}@media screen and (min-width:430px){.content-container{min-width:356px;width:80%}}#click-stopper{display:none;height:100%;position:absolute;width:100%;z-index:8}.tabs{display:flex;justify-content:space-around}.tab{border-top-left-radius:8px;border-top-right-radius:8px;color:#44546a;color:var(--dark);display:inline-flex;font-size:20px;justify-content:center;padding:8px;width:50%}.content,.tab.selected{background-color:#44546a;background-color:var(--dark);color:#fff}.content{border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-top-right-radius:8px;margin:0;min-height:80vh;padding:8px;width:calc(100% - 16px)}.dropdowns{display:flex;justify-content:space-around;margin:10px 0}.dropdowns select{cursor:pointer;display:inline-flex;padding:6px;text-align:center;width:140px}#create-playlist-btn{background-color:#1ed760;border:none;border-radius:4px;color:#fff;font-size:18px;margin:auto;padding:4px;position:relative;text-align:center;text-emphasis:bold;width:200px}#create-playlist-btn img{left:4px;position:absolute;top:50%;transform:translateY(-50%)}#new-playlist{background-color:#697688;background-color:var(--light);border-radius:8px;margin:10px 0;padding:8px;position:relative}#new-playlist-close{cursor:pointer;font-size:18px;position:absolute;right:4px;top:2px}#new-playlist h3{margin:0 0 4px}#playlist-info{align-items:center;display:flex}#playlist-info img{display:inline;margin-right:4px}#playlist-info a{color:#fff;display:inline}.top-artists{display:none}.top-tracks{display:block}.tile{background-color:#697688;background-color:var(--light);border-radius:8px;margin-top:8px;padding:8px}.rank{float:left;font-size:80px}.pic{float:right;width:160px}.details{clear:both}.details-hidden{display:none}.name{font-size:36px}.artist-genres,.track-artists{font-size:18px}.bottom{display:flex;justify-content:space-around;margin-top:8px}.bottom-item{display:flex;flex-wrap:wrap;justify-content:center;width:86px}.labeled-item{text-align:center;width:100%}label{color:#44546a;color:var(--dark);font-size:14px;text-emphasis:bold}.top-track{border-radius:8px;width:100%}.icon{font-size:20px;height:20px!important;object-fit:contain!important;width:20px!important}.plug-in{background-color:#44546a!important;background-color:var(--dark)!important;margin:4px 0!important;min-height:80px!important;padding:8px!important;position:relative!important;width:calc(100% - 16px)!important;.pic{left:8px!important;width:80px!important};.details,.pic{position:absolute!important;top:8px!important};.details{clear:none!important;left:92px!important};.details,.details-hidden{width:calc(100% - 124px)!important};.details-hidden{display:block!important;visibility:hidden!important};.name{font-size:18px!important};.track-artists{font-size:14px!important};.bottom{justify-content:center!important;margin:0!important;position:absolute!important;right:8px!important;top:50%!important;transform:translateY(-50%)!important}.bottom,.bottom-item{display:block!important}.bottom-item{width:20px!important}}
/*# sourceMappingURL=main.4f7a0e44.css.map*/