The website displays brief information about planets. Improve its appearance by applying the following styles:
- Select all elements with the **text** class name and set the text color to **brown**.
- Select all elements with the **sub-text** class name and set the text color to **gray**.
- Add a hover effect to all elements with the **heading** class name. Change the text color to **darkblue** when hovered.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxzZWN0aW9uPgogICAgICA8aDIgY2xhc3M9ImhlYWRpbmciPkp1cGl0ZXI8L2gyPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvY3NzLWZ1bmRhbWVudGFscy9pbnRyb2R1Y3Rpb24rdG8rY3NzL2p1cGl0ZXIrY2hhbGxlbmdlLnBuZyIKICAgICAgICBhbHQ9Ikp1cGl0ZXIiCiAgICAgICAgd2lkdGg9IjMycHgiCiAgICAgIC8+CiAgICAgIDxwIGNsYXNzPSJzdWItdGV4dCI+V2FzIGZvcm1lZCA0LjUgYmlsbGlvbiB5ZWFycyBhZ288L3A+CiAgICAgIDxwIGNsYXNzPSJ0ZXh0Ij4KICAgICAgICBKdXBpdGVyLCB0aGUgZmlmdGggcGxhbmV0IGZyb20gdGhlIFN1biwgaXMgdGhlIGxhcmdlc3QgcGxhbmV0IGluIG91cgogICAgICAgIHNvbGFyIHN5c3RlbS4gSXQgaGFzIGEgbWFzc2l2ZSByZWQgc3BvdCBhbmQgb3ZlciA3MCBrbm93biBtb29ucy4KICAgICAgPC9wPgogICAgPC9zZWN0aW9uPgogICAgPHNlY3Rpb24+CiAgICAgIDxoMiBjbGFzcz0iaGVhZGluZyI+U2F0dXJuPC9oMj4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2Nzcy1mdW5kYW1lbnRhbHMvaW50cm9kdWN0aW9uK3RvK2Nzcy9zYXR1cm4rY2hhbGxlbmdlLnBuZyIKICAgICAgICBhbHQ9IlNhdHVybiIKICAgICAgICB3aWR0aD0iMzJweCIKICAgICAgLz4KICAgICAgPHAgY2xhc3M9InN1Yi10ZXh0Ij5XYXMgZm9ybWVkIDQgYmlsbGlvbiB5ZWFycyBhZ288L3A+CiAgICAgIDxwIGNsYXNzPSJ0ZXh0Ij4KICAgICAgICBTYXR1cm4sIHRoZSBzaXh0aCBwbGFuZXQgZnJvbSB0aGUgU3VuLCBpcyBrbm93biBmb3IgaXRzIGljb25pYyByaW5ncwogICAgICAgIG1hZGUgb2YgaWNlIGFuZCByb2NrLiBJdCBoYXMgb3ZlciA4MCBtb29ucyBhbmQgYSB1bmlxdWUgaGV4YWdvbmFsIHN0b3JtLgogICAgICA8L3A+CiAgICA8L3NlY3Rpb24+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ2hhbmdlIHRoZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwouX19fIHsKICBfX186IF9fXzsKfQoKX19fIHsKICBfX18KfQoKLmhlYWRpbmdfX18gewogIF9fXwp9CgovKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCi5oZWFkaW5nIHsKICBjb2xvcjogZmlyZWJyaWNrOwp9

- Use `.` to select elements by class name.
- Use `:hover` to apply styles when hovering.

LyogQ2hhbmdlIHRoZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwoudGV4dCB7CiAgY29sb3I6IGJyb3duOwp9Cgouc3ViLXRleHQgewogIGNvbG9yOiBncmF5Owp9CgouaGVhZGluZzpob3ZlciB7CiAgY29sb3I6IGRhcmtibHVlOwp9CgovKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCi5oZWFkaW5nIHsKICBjb2xvcjogZmlyZWJyaWNrOwp9

Domine os fundamentos do CSS, a linguagem de estilização que transforma a aparência e a experiência visual das páginas web. Explore conceitos essenciais como estilos de texto, cores, espaçamento, modelo de caixa, Flexbox e efeitos decorativos. Desenvolva habilidades para criar páginas web visualmente atraentes e bem estruturadas.

Compreenda como o CSS se conecta ao HTML e como os estilos são aplicados por meio de seletores. Aplicação de cores, estilização de texto e efeitos de hover para controlar a apresentação visual.

Aprimoramento da tipografia utilizando altura de linha, espaçamento, propriedades de fonte e fontes personalizadas. Controle de famílias tipográficas, peso, estilo e tamanho da fonte para melhor legibilidade.

Controle da estrutura do layout utilizando propriedades de margem, preenchimento, bordas e largura. Compreensão do comportamento do dimensionamento da caixa e dos tipos de exibição de elementos, como block, inline e inline-block.

Controle layouts horizontais e verticais utilizando propriedades do Flexbox. Ajuste direção, alinhamento e espaçamento para estruturar componentes de interface de usuário.

Aprimoramento de layouts utilizando cores de fundo, imagens, pseudo-elementos e sombras. Estilização de componentes visuais para profundidade e contraste.

Challenge: Style Your First Web Page

Task