@import"https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;1,500&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Kanit,sans-serif}:root{scrollbar-width:thin;-webkit-scrollbar-with:thin;font-size:10px;--main-bg-gradient: linear-gradient(40deg, rgba(168, 164, 195, 1) 0%, rgba(246, 240, 226, 1) 100%);--second-bg-gradient: linear-gradient(50deg, rgb(110, 105, 145, 1) 0%, rgba(168, 164, 195, 1) 100%);--button-default:rgba(168, 164, 195, 1);--button-hover:rgb(110, 105, 145, 1);--navbar-bg:rgb(255, 255, 255, .9);--navbar-bg-solid:rgb(255, 255, 255, 1);--navbar-bg-dark:rgba(230, 230, 230, .9);--font-dark: rgb(42, 42, 42)}html{overscroll-behavior:none}body{overscroll-behavior:none;position:relative;height:100%;width:100%;background:var(--main-bg-gradient)}h2,h3{font-weight:400}main{height:100vh;scroll-behavior:smooth;overflow-y:scroll;scrollbar-width:thin;-webkit-scrollbar-with:thin;position:relative;padding:2vh 4vw;padding-bottom:calc(4vw + 100vh - 100svh)}input{font-weight:200;border-style:solid;color:#5b5b5b;border:1px solid var(--button-default);padding:0px .5rem}input:hover{border-color:var(--button-hover)}input:focus{color:#2a2a2a;border-color:var(--button-hover);outline:none}input::placeholder{color:#2a2a2a;font-weight:300}::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#9b9b9b80;border:transparent}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}@media screen and (-webkit-device-pixel-ratio: 2){:root{font-size:8px}}@media screen and (-webkit-device-pixel-ratio: 1.5){:root{font-size:9px}}@media screen and (-webkit-device-pixel-ratio: 1.25){:root{font-size:9px}}#album-cont{display:grid;width:100%;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-auto-rows:auto;margin:auto;row-gap:5px;column-gap:5px}.album-display{-webkit-tap-highlight-color:transparent;cursor:pointer;width:100%;flex-shrink:1;aspect-ratio:1/1;background-color:gray;position:relative;z-index:1;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.album-display img{height:100%;margin:auto;position:absolute}.album-display figcaption,.album-display span{z-index:100;display:block;width:100%;background-color:#000c;padding:0;color:#f8f8ff;text-align:center}.album-display figcaption{height:22%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1rem}.album-display span{transform:translateY(-100%);min-height:10%;height:fit-content;padding:1vh}.album-display:hover span{transform:translateY(0);display:flex;align-items:center;justify-content:center;font-size:.8vw;font-size:clamp(1.3rem,.8vw,1.6rem)}.album-display h2,.album-display h3{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.album-display h2{font-size:1.1vw;font-size:clamp(1.7rem,1.1vw,2.2rem)}.album-display h3{font-size:.8vw;font-size:clamp(1.3rem,.8vw,1.6rem)}@media screen and (max-width: 1350px){#album-cont{grid-template-columns:repeat(4,1fr)}}@media screen and (max-width: 1120px){#album-cont{grid-template-columns:repeat(3,1fr)}}@media screen and (max-width: 900px){#album-cont{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 550px){.album-display figcaption{height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1rem}}#highlight-cont{width:100svw;height:100vh;position:fixed;top:0;left:0;background-color:#000c;justify-content:center;align-items:center;z-index:2000}#highlight-cont.hidden{display:none}#highlight-cont.visible{display:flex}#highlight-modal{display:flex;justify-content:space-between;height:62%;width:fit-content}#highlight-modal figure{height:100%;width:auto}#highlight-modal figure img{height:100%;width:auto;max-width:100%}#highlight-modal .hl-text-section{max-width:30vw;flex-grow:1;height:100%;display:flex;flex-direction:column;padding:1vw 2vw;background-color:#000c;color:#f5f5f5}.hl-album{display:flex;justify-content:space-between;align-items:flex-start;column-gap:1rem}.hl-album h2{word-break:break-word;max-width:calc(100% - 5rem);font-size:clamp(3.2rem,2vw,4rem);line-height:clamp(3.5rem,2.3vw,4.5rem)}.hl-album span{word-break:keep-all;font-weight:200}.hl-btn{content:"";cursor:pointer;display:block;margin-top:2px;width:clamp(3.2rem,2vw,4rem);aspect-ratio:1/1;background-color:plum}.hl-btn:hover{background-color:#7b68ee}.hl-liked{-webkit-mask:url(/assets/heart-fill.svg) no-repeat center / contain;mask:url(/assets/heart-fill.svg) no-repeat center / contain}.hl-like-default{-webkit-mask:url(/assets/heart.svg) no-repeat center / contain;mask:url(/assets/heart.svg) no-repeat center / contain}.hl-artist{font-size:clamp(2.3rem,1.6vw,3rem);line-height:clamp(4rem,2.5vw,5rem);font-weight:200;margin:.5rem 0px}.hl-link-cont{display:flex;justify-content:flex-start;align-items:center}.hl-link{color:plum;font-size:clamp(1.7rem,1.2vw,2.2rem);text-decoration:none}.hl-link:after{content:"";position:relative;display:inline-block;height:clamp(2rem,1.3vw,2.5rem);margin-left:.8rem;top:.4rem;width:auto;aspect-ratio:1/1;background-color:plum}.hl-link:hover{color:#7b68ee}.hl-link:hover:after{background-color:#7b68ee}.hl-download:after{-webkit-mask:url(/assets/download.svg) no-repeat center / contain;mask:url(/assets/download.svg) no-repeat center / contain}.hl-download.disabled{cursor:pointer;text-decoration-style:solid;text-decoration-thickness:2px;text-decoration-line:line-through}.hl-download.disabled{filter:grayscale(100%)}.hl-download.disabled:hover{color:plum}.hl-download.disabled:hover:after{background-color:plum}.hl-youtube:after{-webkit-mask:url(/assets/youtube.svg) no-repeat center / contain;mask:url(/assets/youtube.svg) no-repeat center / contain}.hl-separator{display:inline-block;width:.3rem;height:75%;background-color:plum;margin:0px 1.7rem}.hl-tracklist-title{font-size:clamp(1.6rem,1.2vw,2.1rem);margin:1rem 0px}.hl-tracklist-title span,.hl-tracklist-title a{font-weight:300;font-size:1.5rem;font-size:clamp(1.2rem,.8vw,1.5rem);text-decoration:none}.hl-tracklist-title a{margin:0px .2rem;color:plum}.hl-tracklist-title a:hover{color:#7b68ee}.hl-discogs-info{display:block;width:100%;height:100%;overflow:auto}.hl-discogs-info ol{list-style:decimal;list-style-position:inside;display:flex;flex-direction:column;flex-wrap:nowrap;height:100%;min-height:95%;width:auto;max-width:100%;scrollbar-width:thin;-webkit-scrollbar-width:thin;overflow-y:auto;overflow-x:auto}.hl-discogs-info ol li{list-style-position:inside;break-inside:avoid}.hl-discogs-info li,.hl-discogs-info a,.hl-discogs-info p{font-size:1.8rem;font-size:clamp(1.4rem,.95vw,1.8rem);font-weight:200}.hl-discogs-info li span{display:inline-block;width:fit-content}.hl-tags{height:fit-content;font-size:clamp(1.2rem,.8vw,1.5rem)}@media screen and (max-width: 1150px){#highlight-modal{position:relative;min-width:61.5svh;max-width:96vw;overflow:hidden}#highlight-modal .hl-image{filter:blur(1px);display:flex;justify-content:center;background-color:#0006;width:100%}#highlight-modal .hl-text-section{position:absolute;top:0;left:0;width:100%;max-width:100%;height:100%}.hl-album{font-size:3.4rem;line-height:3.6rem}.hl-btn:hover{background-color:plum}.hl-btn:active{background-color:#7b68ee}.hl-artist{font-size:2.4rem;line-height:4rem}.hl-link{font-size:1.8rem}.hl-link:after{height:2rem}.hl-discogs-info ol{max-height:100%}.hl-discogs-info ol li{width:fit-content;max-width:100%;list-style-position:inside;break-inside:avoid}.hl-discogs-info li,.hl-discogs-info a,.hl-discogs-info p{font-size:1.6rem;font-weight:200}}@media screen and (max-width: 620px){#highlight-modal{position:relative;min-width:90vw;height:95vw;max-width:96vw;overflow:hidden}#highlight-modal .hl-text-section{padding:1rem 1.5rem}.hl-discogs-info ol{flex-wrap:wrap;column-gap:1rem;max-height:95%;min-height:95%;overflow:auto}.hl-discogs-info ol li{list-style-position:inside;width:fit-content;max-width:100%;break-inside:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}#navbar{position:sticky;top:calc(-2vh - 1px);z-index:100;width:100%;height:6vh;display:grid;grid-template-columns:1fr 1fr 2fr 1fr;column-gap:5px;overflow:hidden;background-color:var(--navbar-bg);border:1px solid grey;padding:1rem;margin-bottom:10px;box-shadow:0 2px 4px #00000080;color:#2a2a2a}#navbar section{height:100%;display:flex;justify-content:flex-start;align-items:center}section#nav-input-section{width:100%}section#nav-sort-section{width:100%;justify-content:flex-end;padding-right:1rem}#nav-sort-section select{padding:1px .5rem}#navbar input::placeholder{font-family:Kanit,sans-serif;color:#5b5b5b;font-weight:200;font-size:1.8rem}.nav-textInput{width:100%;margin-right:1rem}input.nav-textInput[type=text],input.nav-numInput[type=number]{font-weight:200;font-size:1.8rem}.sort-button,.nav-button{content:"";height:100%;aspect-ratio:1 / 1;cursor:pointer;display:block;background-color:var(--button-default);border:1px solid grey;margin:0px 1rem}.sort-button:hover,.nav-button:hover{background-color:var(--button-hover)}.nav-header{width:fit-content;white-space:nowrap;text-align:left;margin:0px 1rem;font-weight:200;font-size:2rem}#nav-pagenum{position:relative}#nav-pagenum input{display:inline-block;width:8rem;margin-left:.5rem}#nav-pagenum label{height:100%;width:fit-content;opacity:.5;position:absolute;right:7px}.nav-filter{margin:0}.nav-filter .current-filter{display:inline-block;line-height:none;padding:0px .5rem;font-weight:300;color:var(--button-hover)}#navbar section#nav-mobile-toggle{display:none}.nav-next{-webkit-mask:url(/assets/arrow-right.svg) no-repeat center / cover;mask:url(/assets/arrow-right.svg) no-repeat center / cover}.nav-prev{-webkit-mask:url(/assets/arrow-left.svg) no-repeat center / cover;mask:url(/assets/arrow-left.svg) no-repeat center / cover}.nav-search{height:80%;-webkit-mask:url(/assets/filter.svg) no-repeat center / cover;mask:url(/assets/filter.svg) no-repeat center / cover}.nav-reset{height:80%;-webkit-mask:url(/assets/x-octagon.svg) no-repeat center / cover;mask:url(/assets/x-octagon.svg) no-repeat center / cover}.nav-sort-cat{text-transform:capitalize;text-decoration:underline}.sort-button{cursor:pointer;margin:0}.sort-button.selected:hover,.sort-button.selected{background-color:var(--button-hover)}#nav-sort-order{display:flex;align-items:center;height:100%;margin:0px 1rem}.nav-sort-group{height:100%;display:flex;align-items:center}.nav-sort-group select{height:fit-content;margin-right:1rem}.nav-mobile-like-toggle{height:100%;display:none}.nav-mobile-like-toggle .nav-button{cursor:pointer;height:80%;-webkit-mask:url(/assets/heart.svg) no-repeat center / cover;mask:url(/assets/heart.svg) no-repeat center / cover}.nav-mobile-like-toggle.active{-webkit-mask:url(/assets/heart-fill.svg) no-repeat center / cover;mask:url(/assets/heart-fill.svg) no-repeat center / cover}@media screen and (max-width: 900px){#navbar{grid-template-columns:3fr 2fr 1fr;grid-template-rows:1fr 1fr 1fr;height:5rem;box-shadow:none;border:none;row-gap:0vw;column-gap:0vw;padding:0;color:#2a2a2a}#navbar section{overflow:hidden;border:1px solid grey;padding:1rem;height:5rem}section#nav-input-section{width:100%}#navbar.mobile-open{border-bottom:none;height:fit-content}#navbar section#nav-page-section{grid-column-start:1;grid-column-end:3;display:flex;font-size:1.5rem}#navbar section#nav-filter-section,#navbar section#nav-mobile-toggle{border-left:none;display:flex;align-items:center}#navbar section#nav-filter-section{display:none;padding:1rem 0rem 1rem .5rem}.nav-filter{display:flex;flex-direction:row;width:100%;align-items:center}.nav-filter .current-filter{display:inline-block;max-width:100%;flex:1 1 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#nav-pagenum input{display:inline-block}#nav-pagenum label{bottom:-1px;font-size:18px}.nav-header{font-size:1.7rem}#nav-pagenum{justify-content:center;margin:0px .2rem}.nav-button.nav-next{margin-right:0}.nav-button.nav-prev{margin-left:0}.nav-button{margin:0px .5rem}.nav-filter{font-size:1.5rem}#navbar section#nav-input-section,#navbar section#nav-sort-section{display:none;grid-column:1 / 4;border:1px solid grey;padding:1rem}#navbar section#nav-input-section{grid-row:2;border-top:none;border-bottom:none}#navbar section#nav-sort-section{grid-row:3;justify-content:center;border-top:none}.mobile-open section#nav-input-section,.mobile-open section#nav-sort-section{display:flex!important}#nav-input-section input{margin-left:1rem}#navbar section#nav-mobile-toggle{display:flex;justify-content:center}#navbar.mobile-open #nav-mobile-toggle{border-bottom:none}.nav-button:hover{background-color:var(--button-default)}.nav-button:active{background-color:var(--button-hover)}.menu-open{-webkit-mask:url(/assets/menu.svg) no-repeat center / cover;mask:url(/assets/menu.svg) no-repeat center / cover}.menu-close{-webkit-mask:url(/assets/x.svg) no-repeat center / cover;mask:url(/assets/x.svg) no-repeat center / cover}.nav-mobile-like-toggle{display:flex}}#login-outer-cont{width:100%;height:100%;display:flex;justify-content:center;align-items:center}#login-cont{display:flex;flex-direction:column;align-items:center;width:fit-content;height:fit-content;background-color:var(--navbar-bg);border:1px solid grey;padding:1rem 2rem;margin-bottom:10px;box-shadow:0 2px 4px #00000080;color:var(--font-dark)}#login-form{display:flex;flex-direction:column;align-items:center;row-gap:2rem}#login-cont h2{background-image:var(--second-bg-gradient);color:transparent;background-clip:text;-webkit-background-clip:text;font-size:3rem;font-weight:300;margin:1rem 3rem}#login-form section{width:100%;display:flex;flex-direction:column;align-items:center}#login-form label{font-size:1.8rem;font-weight:200;margin-bottom:.5rem}#login-form input{font-size:1.8rem;padding:0px .5rem}#login-form .input-error,#login-form .input-error:hover,#login-form .input-error:focus{border-color:#ad1628}#login-form .input-error::placeholder{color:#ad1628;font-weight:300;opacity:.6}#login-form .login-btns{flex-direction:row;justify-content:space-between}#login-form .login-btns button{margin-left:0;margin-right:0}#login-form button{font-size:1.8rem;background-color:#0000;padding:.5rem 1rem;cursor:pointer;color:var(--button-default);border:1px solid grey;margin:1rem}#login-form button:hover{color:var(--button-hover);background-color:var(--navbar-bg-dark)}#user-section{width:100%;display:flex;justify-content:space-between;font-size:1.5rem;color:var(--font-dark);padding:0 4px 4px}#newsletter-select{margin-left:3rem}.user-section-tab{border-radius:1px;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--navbar-bg);filter:brightness(90%);opacity:.8;border:1px solid grey;border-bottom:none;padding:.5rem 1rem 1rem;margin-top:-.5rem;margin-bottom:-5px;margin-left:3rem;margin-right:-4px}.user-section-tab:hover:not(.active){filter:brightness(98%)}.user-section-tab:hover:not(.active) span{filter:grayscale(50%)}.user-section-tab.active:hover span{filter:grayscale(50%)}.user-section-tab.active:hover{filter:brightness(98%)}.user-section-tab.active{box-shadow:4px -1px 4px -4px #00000080;opacity:1;background-color:#fff;filter:brightness(100%);z-index:1000}.user-section-tab span{filter:grayscale(100%)}.user-section-tab.active span{filter:grayscale(0%)}.user-section-group{display:flex;align-items:center}#user-section h3{font-weight:300}.user-opt-select{cursor:pointer}.user-opt-selected{text-decoration:underline;font-weight:400}.user-name-button{content:"";cursor:pointer;margin-left:.5rem;height:1.7rem;aspect-ratio:1/1;background-color:var(--font-dark)}.user-name-button:hover{background-color:var(--button-hover)}.user-name-edit{-webkit-mask:url(/assets/edit.svg) no-repeat center / contain;mask:url(/assets/edit.svg) no-repeat center / contain}.user-name-ok{-webkit-mask:url(/assets/check.svg) no-repeat center / contain;mask:url(/assets/check.svg) no-repeat center / contain}.user-name-cancel{-webkit-mask:url(/assets/x.svg) no-repeat center / contain;mask:url(/assets/x.svg) no-repeat center / contain}.mobile-displayed{display:none}.user-like-toggle.mobile-hidden{display:flex;width:fit-content;align-items:center;height:100%}.heart-icon{content:"";height:2rem;aspect-ratio:1 / 1;display:block;background-color:#a8a4c3;margin:1px 0rem 0px 1rem;-webkit-mask:url(/assets/heart-fill.svg) no-repeat center / cover;mask:url(/assets/heart-fill.svg) no-repeat center / cover}@media screen and (max-width: 900px){#user-section{padding:0 4px 8px}#newsletter-select{margin-left:1.5rem}#newsletter-select h3{width:fit-content}#newsletter-select h3:first-letter{text-transform:uppercase}.mobile-hidden,#user-section .mobile-hidden{display:none}#user-section .mobile-displayed,.mobile-displayed{display:block}#newsletter-select{text-transform:capitalize}.user-name-ok{display:none;-webkit-mask:url(/assets/check.svg) no-repeat center / contain;mask:url(/assets/check.svg) no-repeat center / contain}#display-name-input{width:100%}.user-section-tab{border:1px solid grey;border-bottom:none;padding:.5rem 1rem 1rem;margin-top:-.5rem;margin-bottom:-9px;margin-left:-4px}#user-section .user-like-toggle.mobile-displayed{display:flex;width:fit-content;align-items:center;height:100%}}#login-form.account-form{flex-direction:row;align-items:stretch;column-gap:2rem;row-gap:0rem;height:fit-content;margin:0px 2rem}#login-form.account-form div{display:flex;flex-direction:column;row-gap:1rem}#login-cont.account-form button{font-size:1.8rem;background-color:#0000;padding:.5rem 1rem;cursor:pointer;color:var(--button-hover);border:1px solid grey;margin:3rem 1rem 1rem}.form-separator{display:block;width:.3rem;background-image:var(--second-bg-gradient);background-size:contain;margin:2rem 1.7rem 0px}#login-cont.account-form button:hover{background-color:var(--navbar-bg-dark)}
