#root,html,body,.container{font-family:sans-serif;color-scheme:light dark;color:#ffffffde;width:100%;height:100%;margin:0;background-color:#e9e9e9;overflow:hidden}.container{display:grid;grid-template-rows:5.5rem calc(100% - 5.5rem)}.container.dark{background:#1b1b1b}.theme-button{position:fixed;top:1.5rem;right:1.25rem;width:2.5rem;z-index:2;cursor:pointer}@media (max-width: 748px){.theme-button{right:6rem}}.nav-container,.hidden-nav,.nav{height:100%;width:100%}.nav-container{display:flex;flex-direction:column;background:#e6e6e6}.nav-container.dark{background:#151515}.nav-hidden{margin-top:1rem;width:50%;margin-inline:25%;background-color:#fff;box-sizing:border-box;border:2px solid #3a3a3a;border-radius:10px;display:grid;transform:translateY(-100%);transition:.5s;opacity:0;z-index:1}.nav-hidden.dark{background-color:#444;border:none}.nav-hidden.show{transform:translateY(0);opacity:1}.nav-hidden-div:first-child{margin-top:1rem}.nav-hidden-search{height:0;width:100%}.nav{box-sizing:border-box;border-bottom:3px solid #20b1d5;display:flex;gap:5%;z-index:2}.nav.dark{border-bottom:1px solid white}.search-link{text-decoration:none}.search-link.dark{color:#fff}.search-list{box-sizing:border-box}.search-list-item{display:flex;place-items:center;gap:1rem;padding:.5rem;transition:.3s}.centered{display:flex;justify-content:center}.search-list-item:hover{background:#15151541}.search-list-item>img{height:4rem}.search-list-item-title{color:#3a3a3a;font-size:1.3rem;margin:0}.search-list-item-title.dark{color:#fff}.nav-logo{display:flex;flex-direction:row;height:5rem;margin-block:.25rem;gap:.5rem}.nav-logo-link,.nav-hidden-div{text-decoration:none;color:#fff}.nav-logo>img{height:5rem}.nav-logo-title{margin:0;transition:.3s;place-self:center;color:#3a3a3a}.nav-logo-title.dark{color:#fff}.search-div{width:30%;display:flex;align-items:center;gap:.5rem;transition:.4s}.search{background:transparent;border:3px solid #3a3a3a;color:#000;height:2.2rem;width:100%;border-radius:1.3rem;padding-inline:1rem;font-size:1.2rem;transition:.3s;box-sizing:border-box}.search.dark{border:1px solid white;color:#fff}.search:focus{outline:none;box-shadow:0 0 5px #fff}.search-icon{height:2.2rem;width:2.2rem;cursor:pointer;transition:.4s;box-sizing:border-box;background:#3a3a3a;border-radius:50%;padding:.3rem}.search-icon.dark{background:transparent}.search-icon:hover{transform:scale(1.2)}.burger-menu{width:4rem;height:3.5rem;top:1rem;position:absolute;background:transparent;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:.4rem .2rem;box-sizing:border-box;border-radius:8px;cursor:pointer;transition:border-color .3s ease;right:1rem;visibility:hidden}.stick{width:90%;height:.5rem;background:#20b1d5;border-radius:5px;transition:transform .3s ease-in-out,opacity .3s ease-in-out}.burger-menu.active-menu .stick:nth-child(1){transform:translateY(1.05rem) rotate(45deg)}.burger-menu.active-menu .stick:nth-child(2){opacity:0}.burger-menu.active-menu .stick:nth-child(3){transform:translateY(-1.05rem) rotate(-45deg)}@media (max-width: 1088px){.search-div,.search-hidden{width:50%}}@media (max-width:860px){.nav-hidden{width:70%;margin-inline:15%}}@media (max-width: 768px){.search-hidden{width:80%}.nav-hidden-div:first-child{place-content:center}.nav-hidden{width:90%;margin-inline:5%}}@media (max-width: 748px){.nav-hidden-text{font-size:1.3rem}.nav-logo>h1{font-size:1.8rem}.search-div{opacity:0;visibility:hidden;justify-self:center;position:absolute;width:85%;margin-inline:7.5%;transform:translateY(1rem)}.burger-menu{visibility:visible}.stick{height:.4rem}.burger-menu.active-menu .stick:nth-child(1){transform:translateY(.9rem) rotate(45deg)}.burger-menu.active-menu .stick:nth-child(3){transform:translateY(-.9rem) rotate(-45deg)}}@media (max-width: 655px){.nav-hidden{gap:1rem}.nav-hidden-search{height:3rem;width:100%}.translate-search{transform:translateY(7.35rem);opacity:1;visibility:visible}}@media (max-width: 590px){.nav-logo>h1{visibility:visible;display:inline-block;opacity:1;font-size:1.5rem}}@media (max-width: 500px){.nav-logo>h1{display:none}}.interprets{overflow-y:scroll;display:flex;flex-direction:column}.content{padding:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:2rem 4%}.card{width:15rem;height:20rem;background:transparent;box-sizing:border-box;border:2px solid #3a3a3a;display:grid;grid-template-rows:80% 20%;place-items:center;cursor:pointer;border-radius:10px;transition:.4s ease;text-decoration:none}.card.dark{background:#ffffff0c}.card-image{width:90%;height:88%;border-radius:10px;box-sizing:border-box}.favorite-div{border-radius:10px;background:linear-gradient(-45deg,#fff,40%,#1313e3);width:90%;height:88%;display:grid;place-items:center}.favorite{width:50%;height:50%}.card-title{margin-top:0rem;place-self:center;color:#3a3a3a}.card-title.dark{color:#fff}.card-button{position:relative;bottom:8rem;right:-4.5rem;width:3rem;height:3rem;border-radius:50%;background:#20b1d5;display:grid;place-items:center;opacity:0;transition:.4s ease}.card.dark:hover{background:#505050a1}.card:hover .card-button{bottom:9rem;opacity:1}.card-button-img{width:40%}.load-button{border:3px solid #3a3a3a;box-sizing:border-box;color:#3a3a3a;font-size:1.3rem;font-weight:700;place-self:center;width:auto;padding:1rem;border-radius:2rem;cursor:pointer;transition:.4s;margin-bottom:3rem}.load-button.dark{border:3px solid #ffffff;color:#fff}.load-button:hover{border:3px solid #20b1d5;color:#20b1d5}@media (max-width:862px){.card{width:12rem;height:15rem}.card-button{right:-3.3rem;bottom:5rem}.card-title{font-size:1.2rem}.card:hover .card-button{bottom:7.2rem;opacity:1}.content{gap:1rem 4%}}@media (max-width:465px){.content{padding:2rem .5rem}.card{width:10rem;height:13rem}.card-button{right:-2.5rem;bottom:4rem}.card:hover .card-button{bottom:6.8rem;opacity:1}}.interpret{display:grid;grid-template-rows:10rem calc(100% - 10rem)}::-webkit-scrollbar{display:none}.interpret-detail{margin:.5rem;display:flex;box-sizing:border-box;border:3px solid #3a3a3a;background:transparent;gap:5%;box-shadow:0 0 7px #adadad;border-radius:1.5rem;place-items:center}.interpret-detail.dark{background:#ffffff0c;border-color:transparent}.interpret-detail-favorite{font-size:2.5rem;cursor:pointer}.interpret-detail-photo{padding:.5rem;box-sizing:border-box;height:100%;border-radius:50%}.interpret-detail>h1{color:#3a3a3a;place-self:center;font-size:3rem;transition:.3s}.interpret-detail.dark>h1{color:#fff}.favorite-icon{width:3rem;cursor:pointer}.playlist{display:flex;flex-direction:column;overflow-y:scroll;overflow-x:hidden}.playlist-item{display:grid;grid-template-columns:2rem 3.5rem calc(100% - 5.5rem);box-sizing:border-box;padding:.5rem .5rem .5rem 1.5rem;align-items:center;gap:1rem;cursor:pointer;transition:.3s;color:#3a3a3a}.playlist-item.dark{color:#fff}.playlist-item:hover{background:#3a3a3a2b}.playlist-item.dark:hover{background:#ffffff0c}.playlist-item-order-number{font-size:1.2rem;text-align:center}.playlist-item-title{padding-left:.4rem;font-size:1.4rem}.playlist-item-title,.playlist-item-order-number{margin:0}.playlist-item-img{width:3.5rem}.control-panel{position:absolute;width:100%;height:7rem;display:grid;grid-template-columns:7rem 10rem calc(100% - 17rem);align-items:center}.control-panel-img{width:4.5rem;height:4.5rem;padding:1rem}.control-panel.show{bottom:0;background-color:#3a3a3a}.control-panel-description>p{margin-block:.5rem}.control-panel-description>p:nth-child(1){font-size:1.2rem}.control-panel-description>p:nth-child(2){font-size:.9rem}.control-icons-div{width:10rem;margin-left:calc(50% - 17rem);display:flex;gap:1rem;box-sizing:border-box}.control-icons-div>div{width:4rem;aspect-ratio:1/1;background:#fff;border-radius:50%;display:grid;place-items:center;cursor:pointer}.control-icon{width:1.5rem;height:1.5rem}@media (max-width:748px){.interpret{grid-template-rows:7rem calc(100% - 7rem)}.favorite-icon{width:2rem}.interpret-detail-photo{height:90%;border-radius:50%;margin:.5rem 1rem}.interpret-detail-favorite{font-size:1.8rem}.interpret-detail>h1{font-size:2rem}}@media (max-width: 500px){.interpret-detail{gap:0}.interpret-detail-favorite{margin-inline:1rem}.interpret-detail>h1{font-size:1.5rem}.playlist-item-title{font-size:1.1rem}}.favorite-content{padding:2rem;display:flex;flex-wrap:wrap;gap:2rem 4%}