@import url('https://fonts.googleapis.com/css2?family=Anta&display=swap');

:root{
    --background-topicos: #5e0707;
    --barra-interativa: #ecd5d5;
    --branco: #fff;
    --btn-ativo: #523333;
    --borda: #b48f8f;
    --black: #0a0a0a;
    --fonte: "Anta", sans-serif;
    --cor-txt: #e41d1d;
    --bg-abas: #100b57;
}

body{
    background-color: var(--black);
    color: var(--branco);
    font-family: var(--fonte);
    transition: all 5s ease-in-out;
}

.container-principal{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.titulo{
    text-align: left;
    width: 100%;
    font-size: 32px;
    margin-left: 50px;
}

.titulo span{
    color: var(--cor-txt);
}

.btn{
    display: flex;
    font-family: var(--fonte);
    background-color: var(--background-topicos);
    color: var(--branco);
    justify-content: center;
    padding: 1em;
    font-size: 18px;
    align-items: center;
    width: 100%;
    border-bottom: 4px solid var(--borda);
    border-left: 2px solid var(--borda);
    border-right: 2px solid var(--borda);
    border-top: none;
    cursor: pointer;
    transition: background-color 0.3s ease;

}

.btn:first-child{
    border-radius: 35px 35px 0 0;
}

.botoes{
    display: block;
}

.btn.active{
    background-color: var(--btn-ativo);
    border-bottom: 4px solid var(--barra-interativa);
}

.abas{
    background-color: var(--bg-abas);
    padding: 40px;
    border-radius: 0 0 40px 40px;
}

.conteudo.active{
    display: block;
}

.conteudo{
    display: none;
}

.titulo-conteudo{
    font-size: 28px;
    text-align: center;
    font-weight: 400; 
}

.subtitulo-conteudo{
    text-align: center;
    color: var(--cor-txt);
    text-transform: uppercase;
    font-weight: 400;
}




@media screen and (min-width: 768px) {
    
    .botoes{
        display: flex;
    }

    .btn:first-child{
        border-radius: 35px 0 0 0;
    }

    .btn:last-child{
        border-radius: 0 35px 0 0;
    }
}}}