  /*Fontes que estado sendo usado no site: */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Puppies+Play&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

html{
  font-size: 16px; /* Tamanho de fonte base */
  height: 100%;
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
body{
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
main{
  flex: 1 1 0; /*Ajustando flooter no fim da página.
  Seria bom organizar o conteudo da seguinte forma: 
  <html>
  <head></>
  <body>
   <header>
   <main>
   <footer>
  </> 
  
  
  */
}
/*MENU*/
    .menu--area{
        position: relative;
        width: 100%;
        padding: 6.25rem;
        background-color: rgb(255, 255, 255); 
      }
  .menu--ret{  /*Estilização do retângulo*/
        background-color: #ED6CA5;
        border-radius: 3.125rem; 
        box-shadow: 0px 0.375rem 0.75rem 0px rgba(0, 0, 0, 0.24); 
        width: 43.75rem; 

        /*Posicionando o retângulo do menu: */
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 0.9375rem; /* 15px / 16px = 0.9375rem */
        z-index: 10; /*Faz com que o retagunlo fique por cima do vídeo, por padrão as tags recebe um valor z-index, ao colocar um valor maior, você esta dando enfâse e garantido que a ordem que você deseja seja respeitado*/

        /*Centralizando o retangulo*/
        position: absolute; /*Ele não vai acompanhar o rolamento*/
        top: 50%; /* Posiciona o topo do elemento no centro vertical da tela */
        left: 50%; /* Posiciona a esquerda do elemento no centro horizontal da tela, idepedente o do tamanho */
        transform: translate(-50%, -50%); /* Centraliza o elemento subtraindo metade da sua largura e altura, técnica para centralizar, lembrando que ele trabalha com X e Y*/
      }
  .menu--ret-nav{
        display: flex;
        flex-direction: row;
        align-items: center;
      }
  .menu--ret-nav-ul{ /*Estilizando e posicionando o <NAV>*/
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5.625rem; 
        margin-left: 6.875rem; 
        list-style: none;
      }
  /*Estilizando o texto em si do <NAV>*/
  .nav-sobrenos{
        text-decoration: none;
        color: #FFF;
        font-family: Poppins, sans-serif;
        font-size: 1.25rem; 
        font-style: normal;
        font-weight: 275;
        line-height: normal;
        letter-spacing: 0.3125rem; 
      }
  .nav-voltar{
        text-decoration: none;
        color: #FFF;
        font-family: Poppins, sans-serif;
        font-size: 1.25rem; 
        font-style: normal;
        font-weight: 275;
        line-height: normal;
        letter-spacing: 0.3125rem;
        }
  /*Inciando estilização de Logomarca*/
    .menu--ret-logo-area{ /*Controlando a posição do texto e da logomarca em linha*/
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.3125rem; 
      }
    .menu--ret-logo-img{ /*Controlando tamanho da logomarca*/
            object-fit: contain;
            width: 3.125rem; 
            height: 3.125rem; 
      }
    .texto-logo-area{ /*Controlando texto em coluna*/
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0px;
      }
    .texto-logo{
            color: #FFF;
            text-shadow: 0px 0.375rem 0.75rem rgba(0, 0, 0, 0.24); /* 6px / 16px = 0.375rem, 12px / 16px = 0.75rem */
            font-family: "Puppies Play";
            font-size: 1.75rem; /* 28px / 16px = 1.75rem */
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin: 0px;
      }
    .texto2-logo{
            color: #FFF;
            text-shadow: 0px 0.375rem 0.75rem rgba(0, 0, 0, 0.24); /* 6px / 16px = 0.375rem, 12px / 16px = 0.75rem */
            font-family: Poppins;
            font-size: 0.625rem; /* 10px / 16px = 0.625rem */
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            margin: 0px; 
      }
/*FIM DE ESTILIZAÇÃO DO MENU  
  
/*Footer*/
  footer{
      width: 100%;
      padding: 0;
  }
  #footer--area-rosa{/*FOOTER AREA ROSA*/
        background-color:#FF7C90;
        box-shadow: 0px 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12);
        letter-spacing: 3px;
        text-transform: uppercase;
        font-family: Poppins, sans-serif;
        text-align: center;
        padding: 10px 0px;
      }
  #footer--texto3{
        color: black;
        font-weight: 350;
        padding: 10px;
      }
  #dev{
        font-style: italic;
      }

/*Conteúdo da pág*/
  .formulario--texto{
        font-family: Poppins, sans-serif;
      }
  .formulario--label{
        opacity: 0;
      }
  .formulario--input{ /*estilizando o o input*/
        font-family: Poppins, sans-serif;
        font-weight: 400;
        font-size:1.25rem;
        font-style: bold;
        border-radius: 10px;
        background-color: rgb(209, 208, 208);
        width: 35%;
        border-color: transparent;
        box-shadow: 0px 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12);
        letter-spacing: 1px;
        
      }
  #titulo{
        margin: 0;
        padding: 0; /*<H2> tem o um padrao de margem e padding*/
        font-weight: 450;
        text-align: center;
        gap: 0.7rem;
      }
  form{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 3.12rem;
      }
  #formulario--botao{
        margin-top: 3.12rem;
        height: 3.75rem;
        width: 20%;
        background-color:#0479cce3;
        border-radius: 2.19rem;
        border-color: transparent;
        font-family: Poppins, sans-serif;
        font-weight: 400;
        font-size:1rem;
        font-style: bold;
        box-shadow: 0px 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12);
        letter-spacing: 0.32rem;
        color: rgb(255, 255, 255);
  }


/*----------------RESPONSIVO 4K----------------------------------*/
  @media(min-width: 2159px) and (max-width:3840px){
    html{
      font-size: 32px; /* Ajustando "REM" */
    }     
  }
/*----------------Laptop virado-----------------------------------*/
    @media(min-width:614px) and (max-width:768px){
      .menu--ret{
        width: 610px;
      }
  }
