/* Reset de estilo básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Arial", sans-serif;
}

/* Corpo do documento */
body {
  background-color: #f4f7fc;
  color: #333;
  line-height: 1.6;
  font-size: 16px;
  display: flex;
}
.btn-custom {
  background-color: #4e73df;
  color: white;
  font-weight: bold;
  border-radius: 20px;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
  width: -webkit-fill-available;
  border: none;
  cursor: pointer;
}

/* Remover o contorno (outline) de botões */
.btn-custom:focus,
.btn-custom:active {
  outline: none !important; /* Garante que o outline não seja aplicado */
  box-shadow: none !important; /* Remove qualquer sombra que possa aparecer no foco */
}

.header-content .btn-custom:hover {
  background-color: #2e59d9; /* Cor de fundo ao passar o mouse */
  color: #fff;
}

/* Cabeçalho */
header {
  background: #4e73df;
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  width: 400px; /* Largura fixa para a parte azul */
  height: fit-content; /* Para ocupar toda a altura da tela */
  margin: 5px;
  position: fixed;
}

header .header-content {
  text-align: center;
}

header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  font-size: x-large;
}

header p {
  font-size: 14px;
  margin-bottom: 1rem;
}

header a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

header a:hover {
  text-decoration: underline;
  color: #f4f7fc;
}

#qrcode {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-bottom: 1rem;
}
#qrcode-wrapper {
  display: flex;
  justify-content: center;
}

#foto {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Corpo do conteúdo (à direita da parte azul) */
.main-content {
  flex: 1;
  padding: 2rem;
  margin-left: 400px; /* Para que o conteúdo comece após a parte azul */
  height: 100vh;
}

.educacao-item h3 {
  font-size: 16px;
}

/* Seções do currículo */
section {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #333;
  border-bottom: 2px solid #4e73df;
  padding-bottom: 0.5rem;
}

/* Sobre mim */
#sobre p {
  background-color: #f9f9f9;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#sobre p:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Lista de experiências e habilidades */
ul {
  list-style: none;
  padding: 0;
}

ul li {
  margin-bottom: 0.8rem;
  font-size: 16px;
  color: #666;
}

/* Itens de experiência */
.experiencia-item,
.projeto-item {
  background-color: #f9f9f9;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.experiencia-item h3,
.projeto-item h3 {
  font-size: x-large;
  color: #333;
  margin-bottom: 0.5rem;
}

.experiencia-item p,
.projeto-item p {
  font-size: 14px;
  color: #777;
}

.experiencia-item ul,
.projeto-item ul {
  margin-top: 1rem;
}

.experiencia-item:hover,
.projeto-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Habilidades */
#habilidades li {
  background: #ecf0f1;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  display: inline-block;
  margin: 0.5rem;
  font-size: 1.2rem;
  color: #555;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

#habilidades li:hover {
  background-color: #4e73df;
  color: #fff;
  transform: scale(1.1);
}

/* Certificados */
#certificados ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#certificados li {
  background-color: #f0f0f5;
  padding: 1rem;
  border-radius: 8px;
  flex: 1 1 30%;
  text-align: center;
  font-size: 12px;
}

#certificados li:hover {
  background-color: #4e73df;
  color: #fff;
}

/* Rodapé */
footer {
  background: #4e73df;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

/* Responsividade */
@media (max-width: 768px) {
  body {
    flex-direction: column;
  }

  header {
    width: 100%;
    height: auto;
    padding: 1rem;
    text-align: center;
  }

  .main-content {
    margin-left: 0;
    padding: 1rem;
    margin-top: 150px;
    margin-top: 120px;
  }

  /* Ajuste de font-size para telas menores que 768px */
  header h1 {
    font-size: xx-large; /* Reduzido para dispositivos menores */
  }

  header p {
    font-size: 14px; /* Ajuste para tornar o texto mais legível em telas pequenas */
  }

  section h2 {
    font-size: 20px; /* Reduzido para maior legibilidade */
  }

  ul li {
    font-size: 14px; /* Ajuste para listas */
  }

  .experiencia-item h3,
  .projeto-item h3 {
    font-size: 18px; /* Reduzido para melhor adaptação */
  }

  .experiencia-item p,
  .projeto-item p {
    font-size: 12px; /* Ajuste de tamanho de texto */
  }

  #habilidades li {
    font-size: 1rem; /* Ajuste de tamanho de fonte */
  }

  #certificados li {
    font-size: 12px; /* Ajuste no tamanho das fontes nos itens de certificados */
  }

  footer {
    font-size: 14px; /* Ajuste do tamanho da fonte no rodapé */
  }
}

/* Para telas de celular, com largura até 480px */
@media (max-width: 480px) {
  header h1 {
    font-size: 1.25rem; /* Ajusta mais para celulares pequenos */
  }

  header p {
    font-size: 13px; /* Reduz mais a fonte para telas pequenas */
  }

  section h2 {
    font-size: 1.2rem; /* Ajusta o tamanho para maior clareza */
  }

  ul li {
    font-size: 14px; /* Ajuste de tamanho das listas */
  }

  .experiencia-item h3,
  .projeto-item h3 {
    font-size: 1rem; /* Mais ajuste para telas menores */
  }

  .experiencia-item p,
  .projeto-item p {
    font-size: 0.85rem; /* Ajuste para não sobrecarregar */
  }

  #habilidades li {
    font-size: 12px; /* Ajuste nos itens */
  }

  #certificados li {
    font-size: 14px; /* Ajuste no tamanho para telas pequenas */
  }

  footer {
    font-size: 14px; /* Ajuste final no rodapé */
  }
}