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 ter um elemento div com a classe container. 1. Dentro do elemento div, você deve ter um elemento form. 1. O formulário deve conter um elemento input com o tipo text e o id name para inserir o nome completo do usuário. 1. Você deve ter outro elemento input com o tipo email e o id email para inserir o endereço de e-mail do usuário. 1. O formulário deve incluir um elemento select com o id position que permita aos usuários selecionar uma posição de trabalho. 1. Você deve ter um elemento fieldset com a classe radio-group. 1. Dentro de .radio-group você deve ter um conjunto de elementos input com o tipo radio e rótulos relevantes para selecionar opções de disponibilidade (por exemplo, Tempo Integral, Meio Período). O name do grupo deve ser availability. 1. Você deve ter um elemento textarea com o id message para inserir uma mensagem. 1. Você deve associar cada elemento input, select e textarea a um elemento label. 1. Você deve ter um elemento button com o tipo submit para enviar o formulário. 1. Adicione uma pseudo-classe :focus aos elementos input e textarea para alterar a cor da borda e remover o contorno padrão quando estiverem focados. 1. Os elementos input, select e textarea devem ter uma pseudo-classe :invalid que altera a cor da borda para vermelho quando uma entrada inválida é detectada. 1. Os elementos input, select e textarea devem ter uma pseudo-classe :valid que altera a cor da borda para verde quando uma entrada válida é inserida. 1. O elemento button deve ter uma pseudo-classe :hover que altera a cor de fundo quando o cursor está sobre ele. 1. Use a pseudo-classe :checked em .radio-group input[type="radio"] para adicionar uma cor de borda, cor de fundo e uma sombra de caixa quando o botão de rádio estiver selecionado. 1. Use a pseudo-classe :checked em botões de rádio para alterar a cor do texto do label associado quando a opção estiver selecionada. 1. Adicione uma pseudo-classe :first-of-type ao elemento input para estilizar o primeiro campo de entrada de forma diferente. (por exemplo, cantos arredondados). Nota: Certifique-se de vincular sua folha de estilos no seu HTML e aplicar seu CSS.

Testes:

• Você deve ter um elemento `div` com a classe `container`.
• Dentro do elemento `div`, você deve ter um elemento `form`.
• O formulário deve conter um elemento `input` com o tipo `text` e o id `name` para inserir o nome completo do usuário.
• Você deve ter outro elemento `input` com o tipo `email` e o id `email` para inserir o endereço de e-mail do usuário.
• O formulário deve incluir um elemento `select` com o id `position` contendo alguns elementos `option`.
• Você deve ter um elemento `fieldset` ou `section` com a classe `.radio-group`.
• Dentro de `.radio-group` você deve ter um grupo de elementos `input` com o tipo `radio` para selecionar opções de disponibilidade. O grupo `name` deve ser `availability`.
• Você deve ter um elemento `textarea` com o id `message` para inserir uma mensagem.
• Você deve associar cada elemento `input`, `select` e `textarea` a um elemento `label`.
• Você deve ter um elemento `button` com o tipo `submit` para enviar o formulário.
• Você deve adicionar uma pseudo-classe `:focus` aos elementos `input` e `textarea` para alterar a cor da borda quando estiverem focados. Use um seletor de lista na ordem dada.
• Você deve usar o seletor para a pseudo-classe `:focus` em `input` e `textarea` para também remover o contorno padrão quando estiverem focados.
• Os elementos `input`, `select` e `textarea` devem ter uma pseudo-classe `:invalid` que altera a cor da borda para vermelho quando uma entrada inválida é detectada. Use um seletor de lista na ordem dada.
• Os elementos `input`, `select` e `textarea` devem ter uma pseudo-classe `:valid` que altera a cor da borda para verde quando uma entrada válida é inserida. Use um seletor de lista na ordem dada.
• O elemento `button` deve ter uma pseudo-classe `:hover` que altera a cor de fundo quando o cursor está sobre ele.
• Você deve usar a pseudo-classe `:checked` em `.radio-group input[type="radio"]` para adicionar uma cor de borda quando o botão de rádio estiver selecionado.
• Você deve usar a pseudo-classe `:checked` em `.radio-group input[type="radio"]` para adicionar uma cor de fundo quando o botão de rádio estiver selecionado.
• Você deve usar a pseudo-classe `:checked` em `.radio-group input[type="radio"]` para adicionar uma sombra na caixa quando o botão de rádio estiver selecionado.
• Você deve usar a pseudo-classe `:checked` em botões de rádio para alterar a cor do texto do `label` associado quando a opção estiver selecionada.
• Adicione uma pseudo-classe `:first-of-type` aos elementos `input` para estilizar o primeiro campo de entrada de forma diferente.