@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); /* Regra @import: Importa a fonte Quicksand do Google Fonts para ser usada na página. */ * { /* Seletor universal: Aplica os estilos a todos os elementos da página. */ box-sizing: border-box; /* Propriedade box-sizing: Garante que padding e border não aumentem o tamanho total do elemento. */ } :root { /* Pseudo-classe :root: Define variáveis CSS (custom properties) no elemento raiz do documento (). */ --primary-color: #b48af8; /* Variável CSS: Define a cor primária (azul claro). */ --secondary-color: #e8eaed; /* Variável CSS: Define a cor secundária (cinza claro). */ --tertiary-color: #9aa0a6; /* Variável CSS: Define a cor terciária (cinza médio). */ --bg-color: #2a0243; /* Variável CSS: Define a cor de fundo (cinza escuro). */ } body { /* Seletor de tipo: Aplica estilos ao elemento . */ margin: 0; /* Propriedade margin: Remove a margem padrão do body. */ background: var(--bg-color); /* Propriedade background: Define a cor de fundo usando uma variável. */ color: var(--secondary-color); /* Propriedade color: Define a cor do texto padrão usando uma variável. */ font-family: "Quicksand", sans-serif; /* Propriedade font-family: Define a família da fonte para Quicksand, com sans-serif como alternativa. */ } header { /* Seletor de tipo: Aplica estilos ao elemento
. */ padding: 2rem 1rem; /* Propriedade padding: Define o espaçamento interno (2rem em cima/baixo, 1rem nos lados). */ display: flex; /* Propriedade display: Habilita o layout flexbox para organizar os itens filhos. */ align-items: center; /* Propriedade align-items: Alinha os itens flex verticalmente ao centro. */ justify-content: space-around; /* Propriedade justify-content: Distribui os itens flex com espaço igual ao redor deles. */ position: sticky; /* Propriedade position: Mantém o cabeçalho fixo no topo da viewport ao rolar a página. */ top: 0; /* Propriedade top: Define a posição do topo para o elemento sticky. */ background: var(--bg-color); /* Propriedade background: Define a cor de fundo do cabeçalho. */ z-index: 10; /* Propriedade z-index: Define a ordem de empilhamento para que o header fique sobre outros elementos. */ border-bottom: 1px solid var(--bg-color); /* Propriedade border-bottom: Adiciona uma borda inferior sólida. */ gap: 1rem; /* Propriedade gap: Define o espaçamento entre os elementos flex. */ } header h1 { /* Seletor de descendente: Aplica estilos aos elementos

dentro de
. */ font-size: 1.5rem; /* Propriedade font-size: Define o tamanho da fonte. */ margin: 0; /* Propriedade margin: Remove a margem padrão. */ font-weight: 500; /* Propriedade font-weight: Define o peso da fonte (médio). */ white-space: nowrap; /* Propriedade white-space: Impede a quebra de linha do texto. */ } div input { /* Seletor de descendente: Aplica estilos aos elementos dentro de
. */ padding: 0.375rem 0.75rem; /* Propriedade padding: Define o espaçamento interno. */ border-radius: 1rem; /* Propriedade border-radius: Arredonda as bordas. */ border: 1px solid var(--tertiary-color); /* Propriedade border: Define uma borda sólida de 1px. */ background: var(--bg-color); /* Propriedade background: Define a cor de fundo. */ font-family: inherit; /* Propriedade font-family: Herda a família da fonte do elemento pai. */ font-size: 1.5rem; /* Propriedade font-size: Define o tamanho da fonte. */ transition: all 0.2s ease; /* Propriedade transition: Adiciona uma transição suave para todas as propriedades animáveis. */ width: 30rem; /* Propriedade width: Define a largura do input. */ color: var(--secondary-color); /* Propriedade color: Define a cor do texto digitado. */ margin-right: .5rem; /* Propriedade margin-right: Adiciona uma margem à direita. */ } div input::placeholder { /* Pseudo-elemento ::placeholder: Estiliza o texto de placeholder dentro do . */ font-size: 1.2rem; /* Propriedade font-size: Define o tamanho da fonte do placeholder. */ font-weight: 300; /* Propriedade font-weight: Define o peso da fonte do placeholder. */ color: var(--tertiary-color); /* Propriedade color: Define a cor do texto do placeholder. */ } div input:focus { /* Pseudo-classe :focus: Aplica estilos quando o está em foco. */ outline: none; /* Propriedade outline: Remove a borda de foco padrão do navegador. */ border-color: var(--bg-color); /* Propriedade border-color: Muda a cor da borda ao focar. */ box-shadow: 0 0 0 0.1rem var(--tertiary-color); /* Propriedade box-shadow: Adiciona uma sombra de caixa para indicar foco visualmente. */ } #botao-busca { /* Seletor de ID: Aplica estilos ao elemento com o id="botao-busca". */ padding: 1rem 2rem; /* Propriedade padding: Define o espaçamento interno. */ border-radius: 1rem; /* Propriedade border-radius: Arredonda as bordas. */ border: none; /* Propriedade border: Remove a borda padrão. */ cursor: pointer; /* Propriedade cursor: Muda o cursor para uma mão (indicando clicabilidade) ao passar por cima. */ font-family: inherit; /* Propriedade font-family: Herda a família da fonte do elemento pai. */ font-weight: 500; /* Propriedade font-weight: Define o peso da fonte. */ font-size: 1rem; /* Propriedade font-size: Define o tamanho da fonte. */ white-space: nowrap; /* Propriedade white-space: Impede a quebra de linha do texto. */ transition: background-color 0.2s ease, color 0.2s ease; /* Propriedade transition: Adiciona uma transição suave para cor de fundo e cor do texto. */ background-color: var(--bg-color); /* Propriedade background-color: Define a cor de fundo. */ color: var(--secondary-color); /* Propriedade color: Define a cor do texto. */ border: 1px solid var(--bg-color); /* Propriedade border: Adiciona uma borda sólida de 1px. */ } #botao-busca:hover { /* Pseudo-classe :hover: Aplica estilos quando o mouse está sobre o botão. */ background-color: var(--primary-color); /* Propriedade background-color: Muda a cor de fundo ao passar o mouse. */ color: var(--bg-color); /* Propriedade color: Muda a cor do texto ao passar o mouse. */ box-shadow: 0 0 0 0.1rem var(--primary-color); /* Propriedade box-shadow: Adiciona uma sombra de caixa para destaque. */ } #botao-busca:active { /* Pseudo-classe :active: Aplica estilos quando o botão está sendo clicado. */ transform: scale(0.98); /* Propriedade transform: Cria um efeito de clique diminuindo ligeiramente o tamanho do botão. */ } main { /* Seletor de tipo: Aplica estilos ao elemento
. */ overflow-y: scroll; /* Propriedade overflow-y: Adiciona uma barra de rolagem vertical se o conteúdo exceder a altura. */ max-width: 80rem; /* Propriedade max-width: Define a largura máxima do conteúdo principal. */ margin: 0 auto; /* Propriedade margin: Centraliza o conteúdo principal horizontalmente. */ margin-top: 2rem; /* Propriedade margin-top: Adiciona uma margem no topo. */ height: calc(100vh - 10rem - 4rem); /* Propriedade height: Calcula a altura para preencher o espaço restante da tela (altura da viewport - altura do header - altura do footer). */ } article { /* Seletor de tipo: Aplica estilos aos elementos
. */ background: none; /* Propriedade background: Define que não há cor de fundo. */ border-radius: 0; /* Propriedade border-radius: Remove o arredondamento das bordas. */ padding: 0; /* Propriedade padding: Remove todo o espaçamento interno (sobrescrito pela próxima regra). */ padding: 0 1rem; /* Propriedade padding: Define o espaçamento interno nos lados. */ margin-bottom: 1.25rem; /* Propriedade margin-bottom: Adiciona uma margem inferior. */ box-shadow: none; /* Propriedade box-shadow: Remove qualquer sombra de caixa. */ transition: background-color 0.3s ease, border-bottom-color 0.3s ease; /* Propriedade transition: Adiciona uma transição suave para a cor de fundo e cor da borda inferior. */ border-bottom: 1px solid var(--bg-color); /* Propriedade border-bottom: Adiciona uma borda inferior sólida. */ padding-bottom: 1.5rem; /* Propriedade padding-bottom: Adiciona um espaçamento interno inferior. */ } article:hover { /* Pseudo-classe :hover: Aplica estilos quando o mouse está sobre o
. */ transform: scale(1.01); /* Propriedade transform: Aumenta ligeiramente o tamanho do artigo para dar feedback visual. */ cursor: pointer; /* Propriedade cursor: Muda o cursor para uma mão, indicando que é um elemento interativo. */ } article h2 { /* Seletor de descendente: Aplica estilos aos elementos

dentro de
. */ margin-top: 0; /* Propriedade margin-top: Remove a margem superior. */ font-weight: 600; /* Propriedade font-weight: Define o peso da fonte. */ font-size: 1.6rem; /* Propriedade font-size: Define o tamanho da fonte. */ border-bottom: none; /* Propriedade border-bottom: Remove a borda inferior. */ padding-bottom: 0; /* Propriedade padding-bottom: Remove o espaçamento interno inferior. */ margin-bottom: 0.25rem; /* Propriedade margin-bottom: Adiciona uma margem inferior. */ color: var(--primary-color); /* Propriedade color: Define a cor do texto. */ } article p { /* Seletor de descendente: Aplica estilos aos elementos

dentro de

. */ margin: 0.5rem 0; /* Propriedade margin: Define a margem superior e inferior. */ line-height: 1.6; /* Propriedade line-height: Define a altura da linha para melhor legibilidade. */ font-size: 1rem; /* Propriedade font-size: Define o tamanho da fonte. */ margin-bottom: 0.5rem; /* Propriedade margin-bottom: Adiciona uma margem inferior (sobrescreve a margem de cima). */ color: var(--secondary-color); /* Propriedade color: Define a cor do texto. */ } article p strong { /* Seletor de descendente: Aplica estilos aos elementos dentro de

que estão em

. */ color: var(--tertiary-color); /* Propriedade color: Define a cor do texto em negrito. */ font-weight: 400; /* Propriedade font-weight: Define o peso da fonte. */ } article a { /* Seletor de descendente: Aplica estilos aos links dentro de
. */ color: #ffffff; /* Propriedade color: Define a cor do link. */ text-decoration: none; /* Propriedade text-decoration: Remove o sublinhado padrão dos links. */ font-weight: 200; /* Propriedade font-weight: Define o peso da fonte. */ } article a:hover { /* Pseudo-classe :hover: Aplica estilos quando o mouse está sobre um link dentro de
. */ text-decoration: underline; /* Propriedade text-decoration: Adiciona um sublinhado ao passar o mouse para indicar interatividade. */ } .footer { /* Seletor de classe: Aplica estilos a elementos com a classe "footer". */ position: absolute; /* Propriedade position: Define o posicionamento absoluto em relação ao ancestral posicionado mais próximo. */ bottom: 0; /* Propriedade bottom: Alinha o elemento na parte inferior de seu container. */ left: 0; /* Propriedade left: Alinha o elemento à esquerda de seu container. */ width: 100%; /* Propriedade width: Define a largura para ocupar 100% do container. */ color: var(--tertiary-color); /* Propriedade color: Define a cor do texto. */ background-color: var(--bg-color); /* Propriedade background-color: Define a cor de fundo. */ padding: 15px 20px; /* Propriedade padding: Define o espaçamento interno. */ border-top: 1px solid #3c4043; /* Propriedade border-top: Adiciona uma borda superior sólida. */ font-size: 0.8rem; /* Propriedade font-size: Define o tamanho da fonte. */ } .footer-location { /* Seletor de classe: Aplica estilos a elementos com a classe "footer-location". */ color: #9aa0a6; /* Propriedade color: Define a cor do texto. */ margin-bottom: 10px; /* Propriedade margin-bottom: Adiciona uma margem inferior. */ } .footer-links { /* Seletor de classe: Aplica estilos a elementos com a classe "footer-links". */ list-style: none; /* Propriedade list-style: Remove os marcadores (bolinhas) da lista. */ display: flex; /* Propriedade display: Habilita o layout flexbox. */ flex-wrap: wrap; /* Propriedade flex-wrap: Permite que os itens quebrem para a próxima linha se não houver espaço. */ justify-content: center; /* Propriedade justify-content: Centraliza os itens flex horizontalmente. */ gap: 15px; /* Propriedade gap: Define o espaçamento entre os links. */ } .footer-links a { /* Seletor de descendente: Aplica estilos aos links dentro de elementos com a classe "footer-links". */ color: var(--secondary-color); /* Propriedade color: Define a cor do link. */ text-decoration: none; /* Propriedade text-decoration: Remove o sublinhado padrão. */ transition: color 0.2s; /* Propriedade transition: Adiciona uma transição suave para a mudança de cor. */ } .footer-links a:hover { /* Pseudo-classe :hover: Aplica estilos quando o mouse está sobre um link no rodapé. */ color: var(--primary-color); /* Propriedade color: Muda a cor do link ao passar o mouse. */ } @media (max-width: 768px) { /* Regra @media: Aplica os estilos aninhados em telas com largura máxima de 768px (tablets e celulares maiores). */ header { /* Seletor de tipo: Estilos para o
em telas menores. */ flex-direction: column; /* Propriedade flex-direction: Organiza os itens do cabeçalho em coluna. */ padding: 1rem; /* Propriedade padding: Reduz o espaçamento interno. */ } header h1 { /* Seletor de descendente: Estilos para o

no cabeçalho em telas menores. */ text-align: center; /* Propriedade text-align: Centraliza o texto. */ margin-bottom: 1rem; /* Propriedade margin-bottom: Adiciona margem inferior. */ } div input { /* Seletor de descendente: Estilos para o em telas menores. */ width: 90vw; /* Propriedade width: Define a largura baseada na largura da viewport (90% da largura da tela). */ font-size: 1.2rem; /* Propriedade font-size: Reduz o tamanho da fonte. */ } main { /* Seletor de tipo: Estilos para o
em telas menores. */ padding: 0 1rem; /* Propriedade padding: Adiciona espaçamento lateral. */ } article:hover { /* Pseudo-classe :hover: Estilos para o
em telas menores. */ transform: none; /* Propriedade transform: Remove o efeito de escala ao passar o mouse para evitar problemas de layout em dispositivos móveis. */ } } @media (max-width: 480px) { /* Regra @media: Aplica os estilos aninhados em telas com largura máxima de 480px (celulares). */ header h1 { /* Seletor de descendente: Estilos para o

em telas muito pequenas. */ font-size: 1rem; /* Propriedade font-size: Reduz ainda mais o tamanho da fonte. */ max-width: 70%; /* Propriedade max-width: Define uma largura máxima para evitar que o texto ocupe toda a largura. */ word-wrap: break-word; /* Propriedade word-wrap: Permite a quebra de palavras longas que não caberiam na linha. */ } div input, /* Seletor de grupo: Aplica os mesmos estilos para o input e seu placeholder. */ div input::placeholder { font-size: 1rem; /* Propriedade font-size: Reduz o tamanho da fonte. */ } article h2 { /* Seletor de descendente: Estilos para o

do article em telas muito pequenas. */ font-size: 1.3rem; /* Propriedade font-size: Reduz o tamanho da fonte. */ } div { /* Seletor de tipo: Estilos para a
do cabeçalho em telas muito pequenas. */ display: flex; /* Propriedade display: Habilita flexbox. */ align-items: center; /* Propriedade align-items: Alinha itens ao centro verticalmente. */ justify-content: center; /* Propriedade justify-content: Centraliza itens horizontalmente. */ flex-direction: column; /* Propriedade flex-direction: Organiza os itens em coluna. */ gap: 0.5rem; /* Propriedade gap: Define o espaçamento entre os itens. */ } .footer { /* Seletor de classe: Estilos para o rodapé em telas muito pequenas. */ display: none; /* Propriedade display: Oculta o rodapé para economizar espaço. */ } button { /* Seletor de tipo: Estilos para o