Ana está estilizando o seu projeto e decidiu avançar um pouco mais na personalização do título da pagina , adicionando um efeito que faz a cor do título mudar para a cor armazenada na variável 'secondary -color', quando o mouse passa por cima dele. Pensando nisso ,ordene todos os blocos abaixo que adicionam um efeito de hover ao título da pagina , que está adicionado na tag header. Clique nos blocos para ordená-los h1:hover -secondary -color); header var( color:

Para adicionar um efeito de hover ao título da página, que está adicionado na tag header, e fazer a cor do título mudar para a cor armazenada na variável 'econdary-color', quando o mouse passar por cima dele, é necessário seguir a ordem correta dos blocos de código. A ordem correta é:<br /><br />1. header {<br />var(<br />color: secondary-color;<br />)<br />}<br />2. h1:hover {<br />color: var(--secondary-color);<br />}<br />3. h1 {<br />color: var(--color);<br />}<br /><br />Explicação:<br />1. No bloco de código 'header', é definida a variável 'color' com o valor 'econdary-color'. Isso armazena o valor da cor secundária na variável 'color'.<br />2. No bloco de código 'h1:hover', é definido o estilo para o elemento 'h1' quando o mouse passa por cima dele. Neste caso, a cor do título é definida como a cor armazenada na variável 'econdary-color', que foi definida anteriormente no bloco de código 'header'.<br />3. No bloco de código 'h1', é definido o estilo para o elemento 'h1' por padrão. Neste caso, a cor do título é definida como a variável 'color', que armazena o valor da cor secundária definida anteriormente no bloco de código 'header'.