@import url('font.css');
/* importa o arquivo css de fontes */
@import url('rodape.css');
/*importa o arquivo css do rodapé*/
@import url('menu.css');
@import url('selecaodecadastro.css');

* {
  margin: 0;
  /*tira a margem de todos elementos da pagina, inclusive da propria pagina */
  padding: 0;
  /*tira o espaçamento interno de todos os elementos da pagina e da propria pagina*/
}

/* Fonte base */
body {
  background-color: #F5F5CC;
  /* define a cor de fundo da pagina */
  background-image: url(../imagens/fundoshare.jpeg);
  /*Coloca a imagem de fundo no começo da pagina*/
  background-repeat: no-repeat;
  /* define que a imagem de fundo não se repita */
  background-size: 100%;
  /* define que a imagem de fundo ocupe 100% da largura da pagina */

}

#bodylogin {
  background-image: url(../imagens/loginbackshare.jpeg);
  /*Coloca a imagem de fundo no começo da pagina*/
}

/* Cabeçalho com imagem de fundo */
header {
  position: relative;
  /* define a posição relativa para o cabeçalho */
  width: auto;
  /* define a largura do cabeçalho para 100% */
}

/* Barra superior */
.cabecalho {
  background-color: #ACEB64;
  /*define a cor de fundo do cabecalho*/
  border-radius: 0 0 40px 40px;
  /*arredonda somente as bordas inferiores do cabecalo*/
  display: flex;
  /*Permirte que os elementos dentro dele podem ser organizados e alinhados de forma flexivel*/
  justify-content: space-between;
  /* define um espaçamento igual entre os elementos */
  align-items: center;
  /*alinha os elementos do cabeçalho de forma que eles fiquem centralizados*/
  padding: 10px 20px;
  /*define o espaçamento interno entre a borda do cabeçalho e os elementos dentro dele*/
  position: relative;
  /* define a posição relativa para o cabeçalho */
  height: 76px;
  /*define a altura do cabeçalho*/
}

.cabecalho .logo {
  /*estiliza a logo do link que esta dentro do cabecalho*/
  /*configura a logo presente no cabeçalho*/
  width: 90px;
  /*define a largura da logo do link em 90 pixels*/
  height: 90px;
  /*define a altura da logo do link em 90 pixels*/
  filter: grayscale(100%) brightness(200%) contrast(200%);
  /*define um filtro para deixar a logo do link com a cor branca*/
}

#quebramobilelogin {
  display: none;
}

/* Logo central */
.center-logo {
  position: absolute;
  /* define a posição absoluta para a logo central do cabeçalho */
  top: 50%;
  /* define a posição vertical da logo central para 50% */
  left: 50%;
  /* define a posição horizontal esquerda da logo central para 50% */
  transform: translate(-50%, -50%);
  /* define a transformação da logo central para que ela fique centralizada */
  max-width: 300px;
  /* define a largura maxima da logo central para 300 pixels */
  height: auto;
  /* define a altura da logo central para ser automatica */
}

/* Conteúdo principal */
.conteudo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* estiliza o Lado esquerdo do conteudo que é a parte do formulario */
.lado {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 50px;
  margin-right: 150px;
}

/* estiliza o texto que esta no lado esquerdo do conteudo */
.lado .texto {
  color: white;
  text-align: center;
  text-shadow: 0 4px 0 #000;
  -webkit-text-stroke-width: 1px;
  /*largura do contorno no texto */
  -webkit-text-stroke-color: black;
  /*cor do contorno no texto */
  font-family: poppinsBold;
  /*muda a fonte da letra*/
  font-size: 70px;
  /*muda o tamanho da letra */
  margin-top: 60px;
  /*coloca uma margem sobre o topo de 60 pixels*/
}

/*elimina todos os brs que foram colocados pra aparecer somente no mobile*/
.quebramobile {
  display: none;
}

/* estiliza o formulario de cadastro */
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 504px;
  height: 609px;
  border-radius: 40px;
  border: 1px solid #000;
  background: #FFF;
  margin-top: 30px;
  margin-bottom: 50px;
  padding: 10px;
  margin-left: 100px;
  font-size: 16px;
  font-family: poppinsExtraBold;
  gap: 2px;


  h1 {
    /* essa parte estiliza os títulos h1 */
    font-size: 25px;
    font-family: poppinsExtraBold;
  }

  hr {
    /* essa parte estiliza as linhas  */
    width: 169px;
    height: 5px;
    border-radius: 10px;
    background-color: black;
  }

  img {
    /* essa parte estiliza as imagens */
    max-width: 100px;
    max-height: 100px;
    min-height: 85px;
    min-width: 85px;
    outline: 1px solid black;
    border-radius: 50%;
  }

  input {
    /* essa parte estiliza os campos de input */
    font-size: 17px;
    font-family: poppinsExtraBold;
    border-radius: 30px;
    border: 1px solid #000;
    background: #F4F4F4;
    padding: 5px;
    width: 403px;
    height: 20px;
  }

  p {
    /* essa parte estiliza os parágrafos */
    font-size: 17px;
    color: #348145;
  }

  a {
    /* essa parte estiliza os links */
    display: flex;
    justify-content: center;
    width: 87px;
    height: 30px;
    border-radius: 80px;
    border: 1px solid #000;
    color: black;
    letter-spacing: 1.19px;
  }

  a:hover {
    /* essa parte estiliza o efeito hover nos links */
    background-color: #348145;
    color: white;
  }

  strong {
    /* essa parte estiliza o elemento strong */
    width: 403px;
  }

}

/*estiliza o botão de cadastrar*/
#cadastrar {
  display: flex;
  width: 168px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0 80px;
  background-color: white;
  border: 1px solid #000;
  cursor: pointer;
  letter-spacing: 1.19px;
}

#cadastrar:hover {
  /* essa parte estiliza o efeito hover no botão cadastrar */
  background-color: #348145;
  color: white;
}

/*estiliza o botão de logar*/
#logar {
  display: flex;
  width: 168px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0 80px;
  background-color: white;
  border: 1px solid #000;
  cursor: pointer;
  letter-spacing: 1.19px;
}

#logar:hover {
  /* essa parte estiliza o efeito hover no botão logar */
  background-color: #348145;
  color: white;
}

/*estiliza o botão de enviar foto*/
#botaoFake {
  border-radius: 30px;
  border: 1px solid #000;
  background: #FFF;
  padding: 5px;
  font-size: 17px;
  font-family: poppinsExtraBold;
  cursor: pointer;
}

/*estiliza a mensagem que aparece quando o cadastro é bem sucedido*/
.mensagem {
  display: none;
  position: fixed;
  /* fixa no viewport */
  margin: auto;
  /* joga pro meio na vertical */
  left: 50%;
  /* joga pro meio na horizontal */
  background-color: white;
  /* deixa o fundo branco */
  padding: 20px;
  /* espaçamento interno de 20 pixels */
  border-radius: 10px;
  /* arrendona em 10 pixels as bordas da mensagem */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
  /* adiciona um sombreamento para fazer com que a mensagem pareça que esta elevada*/
}

.aindacadastro {
  /* essa parte estiliza o container da área de cadastro */
  display: flex;
  font-size: 20px;
  width: 218px;
  height: 70px;
  padding: 12px 24px 10px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.login {
  /* essa parte estiliza o campo de login */
  width: 403px;
  height: 36.191px;
  font-size: 14px;
}

#loginnn {
  /* essa parte estiliza o elemento com id loginnn */
  font-size: 25px;
}

@media (max-width: 600px) {
  /*estiliza tudo que ja foi estilizado anteriormente mas agora para telas menores de 600pixels*/

  body {
    /*remove a imagem de fundo*/
    background-image: none;
  }

  #bodylogin {
    /*remove a imagem de fundo*/
    background-image: none;
  }

  .lado {
    /*remove a div lado*/
    display: none;
  }

  .conteudo {
    /*coloca os itens da div conteudo no centro da pagina*/
    justify-content: center;
    align-items: center;
  }

  form { 
    /*configura a posição do formulario a altura e largura */
    margin-top: 30px;
    margin-bottom: 50px;
    margin-left: 0px;
    width: 400px;
    height: auto;
  }

  .quebramobile {
    /* Faz o elemento ocupar toda a largura disponível e começar em uma nova linha */
    display: block;
  } 
  #foto {
      max-width: 150px;  /* Limita a largura máxima da imagem a 150px */
      max-height: 150px; /* Limita a altura máxima da imagem a 150px */
      min-height: 150px; /* Garante que a altura mínima da imagem seja 150px */
      min-width: 150px;  /* Garante que a largura mínima da imagem seja 150px */
      outline: 1px solid black; /* Adiciona uma borda externa de 1px de cor preta ao redor da imagem */
      border-radius: 50%; /* Torna a imagem redonda, aplicando bordas arredondadas */
  }
  .aindacadastro {
    width: 100px;  /* Define a largura do elemento com a classe .aindacadastro para 100px */
    height: 40px;  /* Define a altura do elemento com a classe .aindacadastro para 40px */
  }

  #logar {
    width: 200px;  /* Define a largura do elemento com o id #logar para 200px */
    height: 60px;  /* Define a altura do elemento com o id #logar para 60px */
    font-size: 25px; /* Define o tamanho da fonte dentro do elemento #logar para 25px */
  }

  .espacologarpc {
    display: none;  /* Esconde o elemento com a classe .espacologarpc, tornando-o invisível na página */
  }

}