.selecao-de-personagens{
    width: 90%;
    height: 96%;
    display: flex;
    align-items: center;
       /* gap: 30px;
min-height: calc(100vh - 152px);*/
    justify-content: center;
    flex-direction: row;
}
.personagens{
    height: 92%;
    width: 48%;
    background-color: #4444;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;

}
.personagem{
    border-radius: 10px;  
}
.personagem>img{
    border-radius: 10px;    
}
.personagem-selecionado{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;   
    text-align: center;
    height: 92%;
    width: 48%;
}
.personagem-grande{
    width: 60%;
    height:70%;
    box-shadow: 1px 2px 6px black;
    border-radius: 10px;  
}
.informacoes-personagem{
    width: 100%;
    height: 40%;
}
.personagem{
    width: 15%;
    height: 24%;
    background-color: aliceblue;
    margin: 2%;  
}
.lista-de-personagens{
    display: flex;
    justify-content: center;
    width: 90%;
    height: 90%;
    flex-wrap: wrap;    
    gap: 2px;
    scrollbar-width: none; /* Para Firefox */
    -ms-overflow-style: none; /* Para Internet Explorer e Edge */
    overflow: auto; /* Permite a rolagem */
    overflow: hidden;
    overflow-y: scroll;
    
}.informacoes-personagem{
    margin-top:1rem;
}
.nome-personagem{
    font-size: 0.6rem;
    font-weight: 700;
}
.descricao-personagem{
    font-size: 0.5rem;
}
.titulo{
    font-size: 1rem;
}/*
.selecao-de-personagens .lista-de-personagens{
    display: flex;
    
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}
.selecao-de-personagens .personagens{
    
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 585px;
    gap: 25px;
}
.selecao-de-personagens .personagens .titulo{
    font-size: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
    border-bottom: 2px solid #47f4ff;
    width: 100%;
    text-align: center;
}
.lista-de-personagens .personagem img{
    width: 100%;
    height: 100%;
}
.lista-de-personagens  .personagem.selecionado{
    box-shadow: 0px 0px 24px 5px #0271f7;
}*/

/*

.personagem-selecionado .nome-personagem{
    border-bottom: 2px solid #47f4ff;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.personagem-selecionado .descricao-persoagem{
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    margin-top: 20px;
    width: 420px;
}*/