/* Reset de margens e preenchimentos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-image: url("https://images.unsplash.com/photo-1457537227909-08f41319e53c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  pointer-events: auto;
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
}
.vetical-line {
  position: fixed;
  top: 0;
  width: 2px; /*largura do risco */
  height: 70vb; /*altura do risco vertical */
  background-color: #2f4f4f;
  right: 50%; /* alterado para posicionar no lado direito */
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra à direita da linha vertical */
}
.horizontal-line {
  position: fixed;
  top: 59%; /* Posiciona a linha horizontal exatamente no meio da tela */
  left: 45%; /* ajuste do risco a partir da metade da tela*/
  width: 100%; /*largura do risco horizontal */
  height: 2px; /*altura do risco*/
  background-color: #2f4f4f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra abaixo da linha horizontal */
}

/* Estilos para o contêiner principal */
.profile {
  padding: 10px; /* espaço ao redor do conteúdo*/
  text-shadow: 2px 1px #d8c1f1; /*sombra no texto*/
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

selection .messenger h2 {
  text-shadow: 3px 3px #9171ba;
  font-style: italic; /* Define o estilo da fonte como cursiva */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 20px; /* Recuo à direita para posicionar quase no centro */
  padding-left: 50%; /*adiciona espaçamento à direita p afastar da margem */
  font-weight: 800;
}
selection .messenger h3 {
  font-style: italic; /* Define o estilo da fonte como cursiva */
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 20px; /* Recuo à direita para posicionar quase no centro */
  padding-left: 50%; /*adiciona espaçamento à direita p afastar da margem */
  font-weight: 700;
}

/* Estilos para a barra lateral */

aside.sidebar img {
  display: block;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 100%; /* Transforma o contêiner em um círculo */
  position: fixed; /* Posiciona o elemento de forma absoluta em relação ao elemento pai */
  top: 60%;
  left: 10%; /* Define a distância da margem direita em relação ao elemento pai */
  transform: translateY(-50%);
}

/* Estilos para o conteúdo principal */

header {
  display: flexbox;
  background-color: rgb(138, 206, 221); /* Cor de fundo da faixa */
  border-bottom: 2px solid #d8c1f1; /* Borda inferior branca */
  color: #2f4f4f; /* Cor do texto dentro da faixa */
  width: 100%; /* Largura total */
}

.submit-button {
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 5px 40px;
}
.submit {
  width: 90px;
  height: 90px;
  border: none; /* Remove a borda do botão */
  border-radius: 30%; /* Adiciona bordas arredondadas ao botão */
  font-weight: 500;
  cursor: pointer; /* Muda o cursor para indicar que o botão é clicável */
  outline: none;
  font-size: 14px; /* Define o tamanho da fonte do botão */
  transition: background-color 0.3s; /* Adiciona uma transição suave à cor de fundo do botão */
  background-color: transparent; /* Remove a cor de fundo para tornar o link clicável */
}

.button-1 {
  background-color: #9171ba;
}

.button-2 {
  background-color: #71ba91;
}
.button-3 {
  background-color: #91ba71;
}
.button-4 {
  background-color: #ba9171;
}
.submit a {
  text-decoration: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Adicione espaço entre os botões */
.submit-button button + button {
  margin-top: 10px;
}
.submit:hover {
  background-color: #d8c1f1;
}
.footer {
  text-align: center;
  padding: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column; /* Altera o fluxo dos itens para uma coluna */
  align-items: center; /* Centraliza os itens na horizontal */
}

.footer .social-icons {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* Adiciona um espaço entre as imagens e o h5 */
}
.footer .social-icons a {
  margin-right: 60px;
}
.footer h5 {
  margin-top: 10px; /* Adiciona um espaço acima do h5 */
}
/* Adicionalmente, você pode definir estilos para tamanhos de tela diferentes usando media queries */
@media (max-width: 768px) {
  aside.sidebar img {
    width: 50%; /* Ajusta a largura para telas menores */
    
    left: 2px;
  }
}

@media (max-width: 480px) {
  aside.sidebar img {
    width: 50%; /* Ajusta a largura para telas muito pequenas */
  }
}