Quando ela altera toda a font-size do body para 16px, todos os textos ficam do mesmo tamanho, menos o h1, ele fica visivelmente maior. Quando fui inspecionar a página, estava mostrando que o h1 estava com 24px, e clicando em cima dele com a ferramenta, mostrou que o h1 estava com o comportamento de font-size: 1.5em;
:-webkit-any(article, aside, nav, section) h1 { font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em;
Sabem me dizer por que ocorreu isso? Pois eu não coloquei essa propriedade no meu css, então por que no navegador está ficando assim?
Eu estou utilizando o reset.css, mas mesmo apagando ele, o título continua com 24px (com o font-size: 1.5em;)
:root {
--branco-principal: #FFFFFF;
--cinza-secundario: #C0C0C0;
--detalhes-vermelho: #EC2F46;
--botao-azul: #167BF7;
--cor-de-fundo: #00030C;
--fonte-principal: 'Inter';
}
body {
background: linear-gradient(45deg, #000000, #00030C);
color: var(--branco-principal);
font-family: var(--fonte-principal);
font-size: 16px;
font-weight: 400;
}
.principal {
background-image: url(img/Design\ sem\ nome\ \(2\).png);
background-repeat: no-repeat;
background-size: contain;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: 50% 50%;
}
.container__botao {
background: linear-gradient(45deg, #EC2F46 35%, #167BF7);
color: var(--branco-principal);
border-radius: 8px;
display: block;
width: 512px;
height: 56px;
text-align: center;
text-decoration: none;
}
.botao-secundario {
background: transparent;
border: 2px solid var(--detalhes-vermelho)
}
.container__aviso {
color: var(--cinza-secundario);
font-size: 12px;
}Depois ela altera nomeia a classe do título principal e coloca um font-size de 24px, e a força de 700. Mas o título já está com 24px, o navegador já estava carregando ele dessa forma, eu só não sei o por que.
