body {
    margin: 0; /* Remover margens padrão */
    padding: 0; /* Remover preenchimentos padrão */
    height: 100vh; /* Definir altura da tela inteira */
    background: linear-gradient(to bottom, #FFF, #999);
    background-attachment: fixed;
}
        
.circle {
width: 250px;
height: 250px;
border-radius: 50%; /* Tornando o elemento um círculo */
overflow: hidden; /* Escondendo qualquer conteúdo que ultrapasse os limites do círculo */
border: 1px solid #555; /* Adicionando uma borda ao círculo */
}
        
  /* Estilo para a imagem dentro do círculo */
  .circle img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Redimensionando a imagem para preencher o círculo */
  }

          /* Importar a fonte personalizada */
  @font-face {
    font-family: 'MinhaFontePersonalizada';
    src: url('caminho/para/sua/fonte.woff2') format('woff2'),
         url('caminho/para/sua/fonte.woff') format('woff');
    /* Adicione mais formatos de fonte se necessário (eot, ttf, etc.) */
    font-weight: normal;
    font-style: normal;
  }

  /* Aplicar a fonte personalizada ao texto */
  .custom-font {
    font-family: 'MinhaFontePersonalizada', sans-serif;
    font-size: 50px;
    color: #333; /* Cor do texto */
    line-height: 0.1;
  }
  
  .custom-font2 {
    font-family: 'MinhaFontePersonalizada', sans-serif;
    font-size: 30px;
    color: #555; /* Cor do texto */
    line-height: 0.1;
  }
   .custom-font4 {
    font-family: 'MinhaFontePersonalizada', sans-serif;
    font-size: 20px;
    color: #555; /* Cor do texto */
    line-height: 0.1;
  }

.social-button {
    background-color: transparent;
    color: #333; /* cor do texto */
    border: 2px solid #333; /* cor da borda */
    padding: 20px 200px;
    border-radius: 5px;
    font-size: 30px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s ease; /* Transição suave para mudança de cor de fundo */
    width: 100%; /* Largura inicial */
    max-width: 500px; /* Largura máxima */
    text-align: center; /* Centralizar o texto */
  }

  /* Efeito de escurecimento ao passar o mouse */
  .social-button:hover {
    background-color: rgba(51, 51, 51, 0.1); /* Cor de fundo escurecida */
  }

  /* Media query para dispositivos menores */
  @media screen and (max-width: 768px) {
    .social-button {
      width: 50%; /* Largura para telas menores */
    }
  }
  
.open-button {
        background-color: #333;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
}
  
  /* Estilo para a janela */
#minhaJanela {
display: none; /* Inicialmente escondido */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 680px;
max-width: 800px; /* Largura máxima */
height: 770px;
background-color: rgba(51, 51, 51, 0.9); /* Cor de fundo escurecida */
border: 2px solid #333;
padding: 20px;
overflow-y: auto;
z-index: 9999; /* Para garantir que a janela apareça acima de outros elementos */
}
  
/* Estilo para o botão de fechar */
.close-button {
background-color: #DDD;
color: #444;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}