@import
url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap");

:root { 
--cor-de-fundo: #d18dec; 
--lilas: #870aa0c9; 
--branco: #590ad8; 
--botao-ativo: #d8a1f8e7; 
--botao-inativo: rgba(179, 22, 241, 0.5); 
--texto-fundo: rgba(140, 51, 243, 0.853);
}

body { 
background-color: var(--cor-de-fundo); 
color: var(--branco); 
font-family:'Chakra Petch', sans-serif;  
}

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

.titulo-principal { 
text-align: left; 
width: 100%; 
font-size: 32px; 
padding: 1em;
}
 
.titulo-principal span { 
    color: var(--lilas);
}

.botao { 
font-family: «Crakra Petch», sans-serif; 
background-color: var(--botao-inativo); 
color: var(--branco); 
display: flex; 
justify-content: center; 
padding: 1em; 
font-size: 18px; 
align-items: center; 
width: 100%;
border-bottom: 4px solid var(--botao-ativo); 
border-left: 2px solid var(--botao-ativo);  
border-right: 2px solid var(--botao-ativo);  
border-top: none;
}

.botoes {
display: block;
} 

.botao:first-child {
border-radius: 40px 40px 0 0;
}

.ativo{
background-color: var(--botao-ativo);
border-bottom: 4px solid var(--lilas);
}

.abas-textos{
background-color: var(--texto-fundo);
padding: 40px;
border-radius: 0 0 40px 40px;
}
.aba-conteudo.ativo{
display:block;
}

.aba-conteudo{
display: none;
}
.aba-conteudo-titulo-principal{
font-size: 28px;
text-align: center;
}
.aba-conteudo-titulo-secundario{
text-align: center;
color: var(--lilas);
font-weight: bold;
text-transform: uppercase;
}

.contador{
display:flex;
justify-content: center;
flex-wrap: wrap;
}
.contador-digito{ /*aula 8*/
padding: 0 16px;
text-align: center;
min-width: 100px;
}

.contador-digito-numero{ /*aula 8*/
font-size: 80px;
margin: 0;

}

.contador-digito-texto{ /*aula 8*/
color: var(--verde);
font-size: 20px;
 margin: 0;

}
/*responsividade*/

@media screen and (min-width: 768px) { 
.botoes { 
display: flex;
} 
.botao:first-child { 
border-radius: 40px 0 0 0; 
}
.botao:last-child { 
border-radius: 0 40px 0 0; 
} 
}