@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap'); 
 
/*criando variáveis*/
:root { 
    --cor-de-fundo: #00065c; 
    --lilas: #2e61ce0a; 
    --branco: #FFFFFF; 
    --botao-ativo: #9fff04e7; 
    --botao-inativo: rgba(238, 133, 12, 0.966); 
    --texto-fundo: rgba(24, 25, 26, 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; 
    } 
}