@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap);*{box-sizing:border-box;font-family:Plus Jakarta Sans,Helvetica,Arial,sans-serif;margin:0;padding:0}:root{--white:#fafafa;--dark-white:#f6f6f4;--light-grey:#edede9;--grey:#e3e3de;--dark-grey:#d9d9d3;--darker-grey:#8e8e89;--black:#393d3f;--matcha:#859685;--matcha-2:#b8c2b8;--matcha-light:#cad3ca}body{background:#fafafa;background:var(--white)}input{background:none;border:none;outline:none;padding:5px}#home-page{padding:40px 30px}#home-page .header{display:flex;font-size:1.2em;justify-content:space-between}#home-page .ranklist-card-div{grid-gap:50px;display:grid;gap:50px;grid-template-columns:repeat(auto-fit,200px);grid-template-rows:repeat(auto-fit,275px);overflow:hidden;padding-top:30px}#home-page .ranklist-card-div h4{overflow:hidden;text-overflow:ellipsis;white-space:pre-wrap}@media screen and (max-width:768px){#home-page .ranklist-card-div{justify-content:center}}.ranklist-card{border-radius:8px;color:#000;cursor:pointer;display:flex;flex-direction:column;padding:15px;text-decoration:none}.ranklist-card:hover{background:var(--light-grey)}.ranklist-card h4{padding-top:10px}.ranklist-card .empty-img,.ranklist-card .img-grid{height:170px;width:100%}.ranklist-card .img-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.ranklist-card .img-grid img{height:85px}img{height:100%;object-fit:cover;width:100%}.empty-img{background-color:var(--grey);border-radius:8px}.img-div img{border-radius:4px}.img-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100px 100px}.img-grid img:first-of-type{align-self:flex-end;border-radius:4px 0 0 0}.img-grid img:nth-of-type(2){align-self:flex-end;border-radius:0 4px 0 0}.img-grid img:nth-of-type(3){border-radius:0 0 0 4px}.img-grid img:nth-of-type(4){border-radius:0 0 4px 0}.dropdown-div{background:var(--matcha-light);border-radius:4px;padding:3px;position:absolute;right:0;top:30px}.dropdown-item{border-radius:2px;cursor:pointer;font-size:.9rem;padding:10px 50px 10px 10px;white-space:nowrap}.dropdown-item:hover{background:var(--matcha-2)}.dropdown-item.red{color:red}.btn{background:none;border:2px solid var(--matcha);border-radius:5px;color:#000;cursor:pointer;font-size:.8rem;margin-top:10px;padding:15px 30px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.edit-dialog-form .btn{align-self:flex-end;padding:10px;width:100px}.btn:hover{background:var(--matcha)}.add-btn-div{align-items:flex-end;display:flex;flex-direction:column;position:relative}.add-btn{cursor:pointer}.add-btn:hover{color:var(--dark-grey)}.back-btn,.more-btn{cursor:pointer;font-variation-settings:"FILL" 0,"wght" 700,"GRAD" 0,"opsz" 48}.active,.back-btn:hover,.more-btn:hover{color:var(--dark-grey)}.active:hover{color:var(--black)}.login{align-items:center;display:flex;justify-content:center;padding-top:300px}.login a{background:var(--matcha);border:none;border-radius:30px;color:var(--font);font-weight:700;padding:20px 30px;text-align:center;text-decoration:none}.login a:hover{background-color:var(--matcha-2)}.ranklist-page{grid-gap:20px;display:grid;gap:20px;grid-template-columns:200px auto 200px;grid-template-rows:auto 1fr auto;padding:40px 80px}.ranklist-page .ranklist-name{display:flex}.ranklist-page .ranklist-name h1{align-self:flex-end;cursor:pointer;font-size:4em;font-weight:800}.ranklist-page .back-btn-div{grid-column:1/4;grid-row:1/2;margin-bottom:30px}.ranklist-page .more-btn-div{justify-self:end;position:relative}.ranklist-page .ranklist{grid-column:1/4;margin-top:15px}.ranklist-page .img-grid{height:200px;width:200px}.list-item{cursor:pointer}.list-item :hover{background-color:var(--light-grey)}.list-item .list-info{align-items:center;border-radius:3px;display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:20px 20px;padding:10px 15px 10px 0}@media screen and (max-width:768px){.list-item .list-info{grid-template-columns:auto 2fr 1fr}}.list-item .list-info .img-div{align-items:center;display:grid;grid-row:1/3;margin-right:5px}.list-item .list-info .img-div img{border-radius:3px;height:35px;margin-left:12px;object-fit:cover;width:35px}.list-item .list-info.removable .img-div,.ranklist .list-item .list-info .img-div{grid-template-columns:.5fr 1fr}.list-item .list-info.removable .img-div p,.ranklist .list-item .list-info .img-div p{justify-self:end}.list-item .list-info .title{align-self:flex-end;font-size:.9rem}.list-item .list-info .title.type-artist{align-self:center;grid-row:1/3}.list-item .list-info .album,.list-item .list-info .artist,.list-item .list-info .index{color:var(--black);font-size:.7rem}.list-item .list-info .album,.list-item .list-info .artist,.list-item .list-info .title{overflow:hidden;padding:0 5px;text-overflow:ellipsis;white-space:nowrap}.list-item .list-info .album{align-self:center;grid-column:3/4;grid-row:1/3;padding-left:7px}.list-item .list-info .material-symbols-outlined{color:var(--darker-grey);grid-column:4/5;grid-row:1/3}.list-item .list-info .material-symbols-outlined:hover{color:var(--dark-grey)}.edit-dialog-div{align-items:center;background-color:rgba(0,0,0,.508);display:flex;height:100vh;justify-content:center;position:absolute;right:0;top:0;width:100vw}.edit-dialog-div .edit-dialog-form{background-color:var(--white);border-radius:6px;display:flex;flex-direction:column;padding:20px;width:300px}.edit-dialog-div .edit-dialog-form .close-btn{align-self:flex-end;color:var(--black);cursor:pointer;font-size:1.2em}.edit-dialog-div .edit-dialog-form .close-btn:hover{color:var(--darker-grey)}.edit-dialog-div .edit-dialog-form label{font-size:.9em;margin-bottom:5px}.edit-dialog-div .edit-dialog-form .input{background:var(--grey);border-radius:4px;padding:10px}.edit-dialog-div .edit-dialog-form .input.input-error{border:1px solid red}.error{align-items:center;display:flex;font-size:.8em;margin-top:7px}.error .error-icon{color:red;font-size:1.2em;margin-right:3px}.buttons{display:flex;justify-content:space-between;padding:30px 30px 0}.buttons .more-btn-div{display:flex;justify-content:flex-end;position:relative}.ranklist-form-div{display:flex;flex-direction:column;padding:30px 80px}.ranklist-form-div .ranklist-header{display:flex;flex-wrap:wrap;gap:20px}.ranklist-form-div .ranklist-header .ranklist-image{height:200px;width:200px}.ranklist-form-div .ranklist-header .input{align-self:flex-end;flex:1 1}.ranklist-form-div .ranklist-header .input .name{width:100%}.ranklist-form-div .ranklist-header .input .name:not(.edit){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranklist-form-div .ranklist-div{padding:30px 0}.ranklist-form-div .ranklist-div.uneditable .list-item{pointer-events:none}.ranklist-form-div .ranklist-div.uneditable .list-item .img-div{display:flex}.ranklist-form-div .back-btn{color:var(--darker-grey);cursor:pointer;padding-bottom:20px}.ranklist-form-div .back-btn:hover{color:var(--black)}.ranklist-form-div .name{font-size:4em;font-weight:800}.ranklist-form-div .name.edit{border-bottom:2px solid var(--dark-grey)}.ranklist-form-div .name.name-error{border-bottom:2px solid red}.ranklist-form-div .btn{margin-bottom:40px}@media screen and (max-width:768px){.ranklist-form-div{align-items:center;padding:30px}.ranklist-form-div .ranklist-header{align-items:center;flex-direction:column;justify-items:center}.ranklist-form-div .ranklist-header .input{font-size:.7em}.ranklist-form-div .search-div{align-self:normal}.ranklist-form-div .search-div .search-bar-div{flex-direction:column;gap:20px}.ranklist-form-div .ranklist-div{align-self:normal}}.form{align-items:center;justify-content:center;padding-top:100px}.form,.form div{display:flex;flex-direction:column}.form p{font-size:.7rem;margin-top:15px}.form p span{cursor:pointer;text-decoration:underline}.form p span:hover{color:var(--darker-grey)}.search-bar{position:relative;width:100%}.search-bar input{background-color:var(--light-grey);border:none;border-radius:2px;outline:none;padding:10px;width:100%}.search-bar .close-icon{color:var(--darker-grey);cursor:pointer;position:absolute;right:5px;top:5px}@media screen and (max-width:768px){.search-bar .close-icon{top:7px}}.search-bar .close-icon:hover{color:var(--black)}.search-result h3{padding:20px 0 8px}.search-bar-div{align-items:center;display:flex}.search-bar-div .hide{color:var(--darker-grey);cursor:pointer;padding:0 15px}.search-bar-div .hide:hover{color:var(--black)}.search-icon{color:var(--darker-grey);cursor:pointer}.search-icon:hover{color:var(--black)}#navbar{background:var(--matcha);display:flex;font-weight:800;justify-content:space-between;padding:20px 100px;width:100%}#navbar a,#navbar span{cursor:pointer}#navbar a{color:#000;text-decoration:none}#navbar a:hover{color:var(--matcha-light)}@media screen and (max-width:768px){#navbar{padding:20px 50px}}
/*# sourceMappingURL=main.5d0ca391.css.map*/