/*Fevereiro, 11, 2024*/
              /*Super FORMULARIO com HTML e CSS   Gustavo Neitzke : 17:40
A segunda página second.html é substituida por formulario.html (alterar o index.html)
O arquivo estilo2.css, relativo à second.html é substituído pelo arquivo style.css
Lembre-se que o arquivo estilo.css é relacionado ao index.html (página principal)
        <!--AQUI O JAVASCRIPT NÃO É INCLUÍDO: APARECERÁ NA VALIDAÇÃO!!!  */   
/*
*{
    background-color:red;
}*/

/* Não vejo necessidade de criar essas variáveis (membro esquerdo) para as cores! */
:root{
    --color-white: white;
    --color-blue: blue;
    --color-green: green;
    --color-yellow: yellow;
    --color-purple1: #9333FF;
    --color-purple2: indigo;
}

*{
    margin:0;
    padding:0;
}
                            /*ATENÇÃO: 1 rem corresponde à 16 pixels*/

                            /*Trabalhando com o nosso código formulário.html*/
/*Note que o body possui um único elemento ou div. Os outros divs estão dentro dele */                            
body{
    font-family: Arial, Helvetica,sans-serif;
    /* background-color: var(--color-purple2); */  /* sem necessidade*/
    /*background-color: indigo;*/ /*OK*/
    background-color: white; 
   /* background-color: var(--color-green); testado com sucesso */
   color:yellow;
   display:flex;
   justify-content: center;
   align-items: center; /*até aqui o body está ocupando um fração da página.*/
   height:100vh; /* para ocupar toda a página na altura: vh é a %    */ 
}

/*Tendo feito o estilo (styling) para o body, vamos trabalhar nos divs DENTRO do body
  Toda class vem acompanhada com um ponto, com excessão do body*/
  /*Veja no file formulario.html que o content é uma class ANTES do FORM */
  .content{
    background-color: red; /*Fantástico: este color afeta TODO O form com os seus 
                             respectivos divs. A class content pertence ao body. Por outro lado, o form 
                             pertence à class content. */
                             /*   body --> content --> form */
    padding: 2rem; /*esse valor do paddind faz com que apareçe uma faixa com a cor acima, 
                   circundando os divs dentro do div do form */
    border-radius: 10px;        
    min-width: 30%; 
    overflow: auto;      
  }
                                     /*Ainda dentro da div content*/
  h1{
    margin-bottom: 1rem;                           /*  1 rem <--> 16px   */
    text-align: center; /*  O título FORMULARIO foi centrado. Awesome!*/
                        /*  Repare que o título em h1 no file formulario.html pertence ainda à class content
                            e não no form */
  }

                        /* Não estranhe: OOP (Object Oriented Programming - Programação Orientada à Objetos) */    
  .content form{
    display:flex;   /* Por default ou padrão itens são distribuidos na direção horizontal: horrível!  */
    flex-direction: column;  /*   excelente   */
    
    gap: 5px; /* 1rem -->  espaçamento de 16px  */
  }   
  
                     /* Vamos esconder os span que não valem para nada aqui (ver no file formulario.html).
                        Somente serão considerados no próximo vídeo sobre a VALIDAÇÃO COM O JAVASCRIPT */
  .span-required{
    display:contents;
    font-size: 12px;
    margin: 3px 0 0 1px;
    color:red;
  }                  /* As observações desapareceram! Não gostei mas vou seguir!  */
                     /*Na aula sobre validação vamos retornar com o JAVASCRIPT*/

                     /*  Cada Input tem a sua class*/
                     /*No file formulario.html vamos inserir uma class para o textarea que está faltando*/
                     /* <textarea class="inputs" name="Descrição" id="DEscrição" cols="50" rows="15" 
                        placeholder="Fale um pouco sobre você..."></textarea> */

    .inputs{
        padding: 3px 2px; /* 3px para cima e 3px para baixo - 2px para a direita e 2px para a esquerda*/
        /*outline: none  retira as linhas em torno de cada box. Eu prefiro com as linhas!*/
        border-radius: 5px;
        background-color: white;
        border: 2px solid black; /* mesma color do background */
        color: white;
        width: 100%;
        box-sizing: border-box;
        transition: .3s;
    }
    .inputs:focus{
        border-color: purple;
    }

        /*  Vamos aos radios  e aos checkbox que pertencem à class div box-select */

    .box-select{
        display: flex;
        justify-content: space-evenly;
        font-weight: bold;
        gap: 1rem;
    }
                                /* O button NÃO É UMA CLASSE*/
    button[type="submit"]{
        padding: 1rem;
        font-size: 1rem;
        outline: none;
        border: none;
        border-radius: 5px;
        margin-top: 1 rem;
        background-color: purple;
        color: white;
        cursor: pointer;
        transition: .3s;
    }

    button[type="submit"]  hover{
        background-color: yellow; 
    }

    @media screen and (max-width: 576px){
        .box-select{
            flex-direction: column;
            gap: 5px;
        }
    }