:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;background-color:#283040;color:#d9be6c;margin:0;padding:0}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:50.5em;line-height:1.1}@media(prefers-color-scheme:light){:root{color-scheme:dark}}#root{max-width:1280px;margin:0 auto;padding:2em;text-align:center}p{margin:1ch;padding:auto}.personagem{border:.5px solid #D9BE6C;border-radius:.5em;box-shadow:.1em .1em .5em;display:grid;grid-template-areas:"nome nome" "subnome subnome" "imagem imagem" "idade data-nascimento" "nivel-perigo status" "stars recompensa"}.personagem .nome{grid-area:nome;color:#fff;text-align:center;font-size:1.3em;margin-bottom:0}.personagem .subnome{grid-area:subnome;color:#fff;text-align:center;font-size:1.1em;font-style:italic;margin-top:0}.personagem .imagem{grid-area:imagem;display:flex;justify-content:center;align-items:center;margin:.5em 0}.personagem .imagem img{max-width:100%;max-height:100%;object-fit:contain;aspect-ratio:3 / 4}.personagem .nivel-perigo{color:#fff;grid-area:nivel-perigo}.personagem .status{color:#fff;grid-area:status}.personagem .idade{color:#fff;grid-area:idade}.personagem .data-nascimento{color:#fff;grid-area:data-nascimento}.personagem .stars{grid-area:stars;color:#fff}.personagem .recompensa{color:gold;grid-area:recompensa;text-align:uppercase}.foragido{color:#ffc32b;font-weight:700}.morto{color:red;font-weight:700}.capturado{color:#06cf06;font-weight:700}.desconhecido,.desconhecida{color:gray;font-weight:700}.exibicao{border:.5px solid #D9BE6C;border-radius:.5em;box-shadow:.1em .1em .5em;display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:1em;padding:1.5em;justify-items:center}.card{width:480px;height:auto;display:flex;flex-direction:column}.card img{width:100%;height:180px;object-fit:cover}.cabecalho-departamento{width:100%;color:#fff;padding:20px 2px;border-bottom:4px solid #D9BE6C;display:flex;align-items:center;justify-content:flex-start;box-shadow:0 4px 10px #d9be6c}.logo-departamento{width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 0 5px #D9BE6C);margin-right:50px;margin-left:50px}.nome-departamento{font-size:2rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 6px #D9BE6C;margin:0 50px 0 0}.titulo-principal{text-align:center;color:#fff;margin-top:55px;font-size:2.5rem;font-weight:800;text-shadow:0 0 6px #D9BE6C}