@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Kode+Mono:wght@400..700&display=swap");body{width:100vw;height:100vh;overflow:hidden;background-color:#f2e4c0}body *{font-family:Kode Mono,monospace}.main,main.main{display:flex;flex-direction:column;margin:18px 36px;width:calc(100vw - 72px);height:calc(100vh - 36px);overflow:hidden}.filters{display:grid;grid-template-rows:36px 24px;grid-template-columns:repeat(3,1fr);grid-template-areas:"search search search clear-btn" "filtertags filtertags filtertags clear-btn";grid-gap:6px;gap:6px;align-items:center}input.search{height:36px;max-width:475px;min-width:306px;font-size:15px;border-radius:100px;border:1px solid #cdcdcd;padding:6px 18px;margin-bottom:9px;grid-area:search}.filter-tags{display:flex;flex-direction:row;gap:9px;margin-bottom:9px;grid-area:filtertags}.filter-tags>select{height:28px;padding:3px 21px}.clear-button,.filter-tags>select{border-radius:100px;cursor:pointer}.clear-button{height:45px;position:relative;width:-moz-fit-content;width:fit-content;padding:3px 18px;bottom:3px;border:2px solid #343434;box-shadow:0 2px #343434;background-color:#ffa3a3;grid-area:clear-btn}.clear-button:hover{bottom:5px;box-shadow:0 4px #343434}.clear-button:active{bottom:3px;box-shadow:0 2px #343434}.list-gt{display:flex;padding:6px 9px;margin-bottom:12px;flex-direction:column;gap:12px;width:calc(100vw - 72px);height:max-content;overflow-y:scroll;overflow-x:hidden;justify-self:center}.item-gt,.list-gt{align-items:center}.item-gt{display:grid;width:100%;border-radius:9px;padding:9px 18px;background-color:#f9f9f9;box-shadow:2px 2px 4px 1px #9f9f9f;grid-template-rows:auto 28px;grid-template-columns:repeat(6,1fr);grid-template-areas:"id title title title title title" "id gender gender gender subgenre subgenre";grid-gap:6px}.item-gt:hover{position:relative;cursor:pointer;box-shadow:2px 5px 4px 1px #9f9f9f;bottom:3px}.gt-id{grid-area:id;font-size:36px}.gt-title{grid-area:title;font-size:21px}.gt-gender{display:flex;grid-area:gender;font-size:12px;gap:9px;align-items:center}.gt-subgenre{grid-area:subgenre;font-size:12px;justify-self:end}.gt-subgenre,.tag-gender{padding:3px 12px;height:auto;border-radius:100px;background-color:#8ab3f2}.tag-gender{display:flex;text-align:center;justify-content:center;align-items:center}.tag-color-1{background-color:#f5e283}.tag-color-2{background-color:#f5c683}.tag-color-3{background-color:#f5ad83}.tag-color-4{background-color:#f5a583}.tag-color-5{background-color:#f59083}.tag-color-6{background-color:#f58383}.counter-pagination{gap:24px;height:32px;justify-content:space-between;margin:0 18px 12px}.counter-pagination,.pagination{display:flex;flex-direction:row;align-items:center}.pagination{justify-content:end;gap:12px}.next-button-pagination,.previous-button-pagination{position:relative;background-color:#cdcdcd;cursor:pointer;bottom:3px;border-radius:100px;border:2px solid #343434;box-shadow:0 2px #343434}.previous-button-pagination{rotate:180deg;box-shadow:0 -2px #343434}.next-button-pagination:hover,.previous-button-pagination:hover{bottom:5px;box-shadow:0 4px #343434}.previous-button-pagination:hover{bottom:5px;box-shadow:0 -4px #343434}.next-button-pagination:active,.previous-button-pagination:active{bottom:3px;box-shadow:0 2px #343434}.previous-button-pagination:active{box-shadow:0 -2px #343434}.open-gt{display:grid;grid-template-rows:auto 480px;grid-template-columns:repeat(8,1fr);grid-template-areas:"back-btn title title title title title title title" "iframe iframe iframe iframe iframe iframe iframe iframe";grid-gap:12px;gap:12px;align-items:center}.button-back{position:relative;cursor:pointer;bottom:3px;height:36px;padding:6px 18px;border-radius:100px;border:2px solid #343434;box-shadow:0 2px #343434;grid-area:back-btn}.button-back:after{content:"⮲ Voltar";font-size:28px;position:relative;bottom:10px;text-wrap:nowrap}.button-back:hover{bottom:5px;box-shadow:0 4px #343434}.button-back:active{bottom:3px;box-shadow:0 2px #343434}.title-gt{font-size:18px;grid-area:title}.page-gt{width:100%;height:100%;grid-area:iframe;border:none;border-radius:6px;z-index:100}.group-loader{display:flex;flex-direction:row;justify-content:center;align-items:center;grid-area:iframe}.loader{height:60px;aspect-ratio:2;border-bottom:3px solid #0000;background:linear-gradient(90deg,#524656 50%,#0000 0) -25% 100%/50% 3px repeat-x border-box;position:relative;animation:l3-0 .75s linear infinite}.loader:before{content:"";position:absolute;inset:auto 42.5% 0;aspect-ratio:1;border-radius:50%;background:#CF4647;animation:l3-1 .75s cubic-bezier(0,900,1,900) infinite}@keyframes l3-0{to{background-position:-125% 100%}}@keyframes l3-1{0%,2%{bottom:0}98%,to{bottom:.1%}}::-webkit-scrollbar{width:15px}::-webkit-scrollbar-track{background:#f9f9f9;border-radius:100px}::-webkit-scrollbar-thumb{background:#8b8b8b;border-radius:100px;border:4px solid #f9f9f9}::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width:1048px){body{overflow-y:visible}.main,main.main{margin:9px 12px;width:calc(100vw - 24px);height:max-content}.filters{grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"search" "filtertags" "clear-btn"}input.search{max-width:100%;min-width:100%;font-size:14px;margin:0}.filter-tags{flex-direction:column;gap:6px}.clear-button,.filter-tags>select{width:100%}.list-gt{margin:9px;gap:9px;width:calc(100vw - 36px);overflow:visible}.item-gt{grid-template-columns:repeat(3,1fr);grid-template-rows:auto repeat(2,1fr);grid-template-areas:"id title title" "gender gender subgenre" "gender gender subgenre";padding:6px 12px}.gt-id{font-size:24px}.gt-title{font-size:16px}.gt-gender{flex-wrap:wrap}.gt-gender,.gt-subgenre{text-align:center;font-size:10px}.counter-pagination{font-size:12px;gap:12px}.pagination{flex-wrap:nowrap;text-wrap:nowrap;font-size:10px}.next-button-pagination,.previous-button-pagination{height:25px;font-size:10px}.open-gt{grid-template-columns:1fr;grid-template-rows:auto 480px;grid-template-areas:"back-btn" "iframe"}.title-gt{display:none;font-size:16px;text-align:center}.page-gt{position:relative;transform:scale(.6);transform-origin:top left;width:166%;height:750px;top:140px}.button-back{width:100%;text-align:center}::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{border:2px solid #f9f9f9}}body,html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;font-size:18px}*{box-sizing:border-box}a{color:#0070f3;text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;display:block}