Neste laboratório, você criará uma animação simples da órbita da Lua ao redor da Terra usando HTML e CSS. A Terra estará no centro do sistema, enquanto a Lua girará ao redor dela. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve alinhar todos os elementos ao centro da página definindo a altura como 100% da viewport e configurando um layout do flexbox no elemento body. 2. Você deve ter uma div com a classe space. 3. Dentro do elemento .space, devem haver mais dois elementos div com as classes earth e orbit, respectivamente, na ordem. 4. Dentro do elemento .orbit, deve haver outro div com a classe moon. 5. O elemento div com uma class de space deve ser centralizado na página e ter uma largura e altura de 200px. 6. O elemento div com uma class de space deve usar posicionamento relative. 7. O elemento .earth deve usar posicionamento absolute. Posicione o centro do elemento .earth no ponto médio de seu elemento pai tanto no eixo vertical (top) quanto no eixo horizontal (left). Após isso, desloque o elemento .earth para trás pela metade de sua própria largura e altura, para centralizá-lo dentro de seu elemento pai, o elemento .space. 8. O elemento .earth deve ter largura e altura de 100px. 9. O elemento .orbit deve ter uma largura e altura de 200px. 10. O elemento .orbit deve ser posicionado usando posicionamento absolute. Seu canto inferior direito deve estar no centro do elemento .space usando uma propriedade transform que o desloca em -50% tanto no eixo vertical quanto no horizontal. 11. O caminho da órbita para a lua ao redor da Terra deve ser um círculo. 12. O elemento .moon deve ser posicionado usando posicionamento absolute e ter largura e altura de 30px. O elemento .moon deve se posicionar no topo do elemento .orbit e estar centralizado horizontalmente. 13. Você deve ajustar ainda mais o posicionamento horizontal do elemento .moon movendo o elemento para a esquerda pela metade de sua largura. 14. O seletor .earth deve ter uma cor de fundo e um border-radius de 50%. 15. O seletor .moon deve ter uma cor de fundo e um border-radius de 50%. 16. Você deve definir uma animação @keyframes orbit que gira o elemento .orbit 360 graus ao redor de seu centro. Você deve aplicar essa animação ao elemento .orbit com duração de 5 segundos, uma função de tempo linear e iterações infinitas. Nota: Certifique-se de vincular sua folha de estilos no seu HTML e aplicar seu CSS.

Testes:

• O conteúdo do elemento `body` deve estar centralizado na página definindo a altura como `100%` da altura da viewport, `display` como `flex`, `justify-content` e `align-items` como `center`.
• Você deve ter uma `div` principal com a classe `space`.
• O elemento `.space` deve ter largura e altura de `200px`.
• O elemento `.space` deve ter uma propriedade `position` com valor `relative`.
• Você deve ter um `div` com uma classe `earth` dentro do `div` com uma `class` `space`.
• O elemento `.earth` deve ser o primeiro filho do elemento `.space`.
• O elemento `.earth` deve ter largura e altura de `100px`.
• O elemento `.earth` deve usar posicionamento `absolute`.
• O elemento `.earth` deve ter uma posição `top` e `left` de `50%`.
• O elemento `.earth` deve ser movido para trás e para cima em `50%` definindo a propriedade `transform` para `translate(-50%, -50%)`.
• Você deve ter um `div` com a classe `orbit` dentro do elemento `.space`.
• O elemento `.orbit` deve vir após o elemento `.earth`.
• O elemento `.orbit` deve ter uma largura e altura de `200px`.
• O elemento `.orbit` deve usar posicionamento `absolute`.
• O elemento `.orbit` deve ser posicionado no centro do elemento `.space` usando uma propriedade `transform` que o desloca em `-50%` tanto no eixo vertical quanto no horizontal.
• Você deve ter um `div` com a classe `moon` dentro do elemento `.orbit`.
• O elemento `.moon` deve ter largura e altura de `30px`.
• O elemento `.moon` deve ser posicionado usando posicionamento `absolute`.
• A borda superior do elemento `.moon` deve ser alinhada com a borda superior de seu bloco de contenção.
• Você deve mover a borda esquerda do elemento `.moon` para o centro do bloco de contenção (`50%` do lado esquerdo).
• O elemento `.moon` deve ser ajustado horizontalmente traduzindo-o para `-50%` ao longo do eixo x.
• O seletor `.earth` deve ter uma cor de fundo.
• O seletor `.earth` deve ter `border-radius` de `50%`.
• O seletor `.moon` deve ter uma cor de fundo.
• O seletor `.moon` deve ter `border-radius` de `50%`.
• Você deve criar uma tag `@keyframes`.
• A nova regra `@keyframes` deve ser nomeada `orbit`.
• A regra `@keyframes orbit` deve ter um seletor `0%`.
• A regra `@keyframes orbit` deve ter um seletor `100%`.
• O seletor `0%` deve ter uma propriedade `transform` definida como `rotate(0deg) translate(-50%, -50%)`.
• O elemento `100%` deve vir depois do elemento `0%`.
• O seletor `100%` deve ter uma propriedade `transform` definida como `rotate(360deg) translate(-50%, -50%)`.
• O seletor `.orbit` deve ter uma propriedade `animation` definida como `orbit 5s linear infinite`.