body {
   background-color: #000;
   overflow: hidden;
}



main::after {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   min-height: 100vh;
   width: 80vw;
   background: linear-gradient(-233deg, #000 40%, rgba(0, 0, 0, 0) 65%) no-repeat;
   z-index: 0;
}


.personagem {
   display: none;
   height: 100vh;

}

.personagem.selecionado {
   display: block;
}

.personagem .imagem {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1);

}


.menu .botoes {
   /* background-color: aqua; */
   background-color: rgba(0, 0, 0, 0.3);
   position: fixed;
   top: 0;
   right: 0;
   min-height: 100vh;

   display: flex;
   flex-flow: column wrap;
   justify-content: center;
   align-items: center;

   width: 180px;

   gap: 10px;



}

.botoes .botao {
   border: none;
   background: none;

   cursor: pointer;

   width: 100px;
   height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.botoes .botao>img {
   /* border-radius: 50%; */
   max-width: 150px;
   max-height: 150px;

}

.botoes .botao.selecionado {
   transform: scale(1.2);
   filter: brightness(1.2) drop-shadow(5px 1px 10px rgba(0, 0, 0, 0.5));
   transition: 0.3s ease-in-out 0s;
}

.conteudo {
   position: absolute;
   top: 0;
   left: 120px;
   color: white;
   /* background-color: bisque; */

   max-width: 380px;

   min-height: 100vh;

   display: flex;
   flex-flow: column nowrap;
   justify-content: center;

   z-index: 1;
}

.nome-personagem {
   font-size: 3em;
   font-family: var(--fonte-padrao);
   font-weight: 400;
   font-style: normal;
   margin-bottom: 20px;

}

.descricao {
   font-family: var(--fonte-texto);
   font-weight: 400;
   font-style: normal;
   font-size: 1em;
   line-height: 1.5em;

}

.conteudo .logo {
   background-image: url("../img/Logo_Naruto_Shippūden.svg.png");
   background-repeat: no-repeat;
   background-size: cover;
   height: 200px;
   width: 400px;
   margin-bottom: 35px;
}