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

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

main .personagem{
  display:none;
  height: 100vh;
}
main .personagem.selecionado{
  display:block;
}
main .personagem .imagem{
  width:100%;
  height:100%;
  object-fit:cover;
}
.conteudo{
  position:absolute;
  top:0;
  left:120px;

  display:flex;
  flex-direction:column;
  justify-content: center;
  min-height: 100vh;
  max-width: 380px;
  z-index:1;
}
.conteudo .nome-personagem{
  color:#ffff;
  font-size: 48px;
  font-family: "Secular one";
  font-weight: 400;
  margin-bottom: 20px;
} 

.conteudo .descricao{
  color:#ffff;
  font-family: "Rubik";
  line-height:24px;
}

.conteudo .logo{
  background-image: url(../img/one-piece-logo.png);
  width: 230px;
  height: 100px;
  background-size: cover;
  margin-bottom: 25px;
}
.botoes{
  position: fixed;
  top:0;
  right:0;

  background-color: rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 185px;
  justify-content: center;
  align-items: center;
  gap:10px;
}
.botoes .botao{
  border: none;
  background: #000000;
  cursor: pointer;
  border-radius: 50%;
}
.botoes .botao img{
  border-radius: 50%;
}
.botoes .botao.selecionado{
  transform:scale(1.4);
  box-shadow: 0 0 10px #D9D9D9;
  margin: 10px;
}