body {
    font-family: "Poppins", sans-serif;
    background: rgb(20, 23, 46);
    background: linear-gradient(0deg, rgba(20, 23, 46, 1) 0%, rgba(27, 30, 62, 1) 18%, rgba(32, 36, 76, 1) 49%, rgba(2, 0, 36, 1) 96%);
    margin: 0 auto;
}

.main{
    height: fit-content;
}
.titulo {
    color: rgb(212, 160, 81);
    display: flex;
    justify-content: center;
    -webkit-text-stroke: 1px #793702;
}

.carrossel {
    display: flex;
    flex-direction: row;
    margin-left: 10px;
}

.informacoes {
    margin-left: 5px;
    width: fit-content;
    justify-content: space-evenly;
    display: none;
}

.informacoes.ativa {
    display: block;
}

.conteudo {
    border-radius: 1%;
    display: flex;
    flex-direction: column;
}

.informacoes h1 {
    top: 0;
    background-color: rgba(214, 146, 57, 0.37);
    box-shadow: #793702;
    border-bottom: solid 1px #9b6336cc;
    border-radius: 1px;
    text-align: center;
    font-size: 35px;
    color: #ffffff;
    margin-bottom: 80px;
    font-family: "GOT";
}

.informacoes .descricao {
    color: rgb(212, 160, 81);
    margin-left: 1px;
    line-height: 30px;
    font-size: 18px;
    width: 98%;
    max-height: 590px ;
    line-height: 27px;
    overflow: auto;
    padding-right: 10px;
    justify-content: space-evenly;
}

@font-face {
    font-family: 'GOT';
    src: url(../fontes/GOT.ttf);
}


.botoes-carrossel {
    margin: 33px 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    /* max-width: 1000px; Ajuste a largura para controlar quando a próxima fileira começa */
}

.botoes-carrossel .botao {
    width: 150px;
    height: 90px;
    border: 2px solid #683c03;
    border-radius: 3px;
    cursor: pointer;
    overflow: auto;
    background-size: cover;
    filter: grayscale(100%);

}

.botoes-carrossel .botao:hover {
    width: 155px;
    height: 93px;
    filter: grayscale(0%);
}

.botoes-carrossel .base {
    background-image: url("../imagens/dragoes.png");
}
.botoes-carrossel .balerion {
    background-image: url("../imagens/balerion.png");
}

.botoes-carrossel .vhagar {
    background-image: url("../imagens/vhagar.png");
}

.botoes-carrossel .syrax {
    background-image: url("../imagens/syrax.png");
}

.botoes-carrossel .caraxes {
    background-image: url("../imagens/caraxes.png");
}
.botoes-carrossel .meleys {
    background-image: url("../imagens/meleys.png");
}

.botoes-carrossel .seasmoke {
    background-image: url("../imagens/seasmoke.png");
}

.botoes-carrossel .vermax {
    background-image: url("../imagens/vermax.png");
}

.botoes-carrossel .arrax {
    background-image: url("../imagens/arrax.png");
}
.botoes-carrossel .arrax {
    background-image: url("../imagens/arrax.png");
}
.botoes-carrossel .vermithor {
    background-image: url("../imagens/vermithor.png");
}
.botoes-carrossel .sunfyre {
    background-image: url("../imagens/sunfyre.png");
}
.botoes-carrossel .dreamfyre {
    background-image: url("../imagens/dreamfyre.png");
}
.botoes-carrossel .sheepstealer {
    background-image: url("../imagens/sheepstealer.png");
}
.botoes-carrossel .tessarion {
    background-image: url("../imagens/tessarion.png");
}
.botoes-carrossel .moondancer {
    background-image: url("../imagens/moondancer.png");
}
.botoes-carrossel .silverwing {
    background-image: url("../imagens/silverwing.png");
}
.botoes-carrossel .canibal {
    background-image: url("../imagens/canibal.png");
}

.botoes-carrossel .botao.selecionado {
    filter: grayscale(0%);
}

.imagem {
    border-radius: 8px;
    border: 1px solid #331d01;
     width: 70%; /* 80 */
    display: none;

}

.imagem.ativa {
    display: flex;
    animation: mudarImagem 0.7s;
}

@keyframes mudarImagem {
    from {
        opacity: 0.85;
    }

    to {
        opacity: 1;
    }
}