@charset "UTF-8";

/*.poppins-thin {
  font-family: "Poppins", sans-serif;*/

@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&display=swap');

/*.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/*Reset para toda tela*/

 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 /*Configuração para fundo da tela - Background*/
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-image: url('./images/bg-desktop.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: hsl(257, 40%, 49%);

    font-family: "Open Sans", sans-serif;

}


 /*Configuração de Main*/

 main {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
 }

 /*Logotipo Huggle*/

 .logo-huddle {
    width: 60%;
    height: auto;
    display: flex;
    margin: 40px 150px;

 }

 img.imagem-huddle{
    align-items: flex-start;
 }

 /*Container imagem e  texto lado a lado */
 div.container {
    height: 90vh;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

 /*Imagem da tela do Huddle a esquerda*/

.imagem-principal {
    height: auto;
    display: flex;
    margin: 40px 10px 0 60px;
 }

 .imagem-principal-1 {
    height: 670px;
    margin-left: 90px;
 }
  /*texto  da tela do Huddle a esquerda*/
   .texto-direito {
    width: 90%;
    height: 600px;
    margin: 60px 60px;
}

    h1 {
        width: 600px;
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 45px;
        color: white;
        margin: 40px 60px 30px 0px;
    }

    p {
        width: 670px;
        color: white;
        font-family: "Open Sans", sans-serif;
        font-size: 23px;
        margin: 40px 30px 30px 0px;
        padding-right: 10px;
    }

/*Botão Registrar-se*/

input {
    width: 250px;
    height: 60px;
    display: flex;
    text-align: center;
    border-radius: 60%;
  }

.botao-registrar {
    font-family: "Poppins", sans-serif;
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    background-color: white;
    color: hsl(257, 40%, 49%);
    border: none;
    border-radius: 25px;
  
    transition: background-color 0.3s; }
  
  input.botao-registrar:hover {
    background-color: hsl(300, 69%, 71%);;
    color: white;
    transition: 0.5s;
    cursor: pointer;
  }
  
  /*Configuração para as redes sociais*/
.Logo-redes-sociais {
    display: flex;
    margin-bottom: 40px;
    margin-left: 65%;
    left: 90%;
    gap: 10px; 

  }

  .Logo-redes-sociais ion-icon {
    font-size: 30px;
    color: white; 
    cursor: pointer;
    transition: transform 0.2s;
    padding: 10px; 
    border-radius: 50%; 
    border: 2px solid white; 
  }

 .Logo-redes-sociais ion-icon:hover {
    transform: scale(1.2);
    color: hsl(300, 69%, 71%);
    border: 2px solid hsl(300, 69%, 71%);
}