:root {
  --font-family: 'Montserrat', sans-serif; /* Define a fonte padrão */
  --background-color: #FFF;
  --link-color: #007bff;
  --text-color: #474747;
  --button-color: #007bff;
  --title-link-color: #007bff;
}

body {
  font-family: var(--font-family); /* Aplica a fonte ao corpo */
  background-color: var(--background-color); /* Define a cor de fundo */
  color: var(--text-color); /* Define a cor do texto */
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow-x: hidden; /* Evita rolagem horizontal */
}

body.dark-theme {
  --background-color: #1e1e1e; /* Definindo a cor de fundo do tema escuro */
  --text-color: #c7c7c7; /* Definindo a cor do texto do tema escuro */
  --link-color: #4a90e2; /* Definindo a cor do link do tema escuro */
  --button-color: #4a90e2; /* Definindo a cor do botão do tema escuro */
  --title-link-color: #4a90e2; /* Definindo a cor do título do link do tema escuro */
}

body.dark-theme {
  background-color: var(--background-color); /* Aplicando a cor de fundo do tema escuro */
  color: var(--text-color); /* Aplicando a cor do texto do tema escuro */
}

.container {
  padding: 20px;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box; /* Inclui padding e bordas no cálculo do width */
}

header {
  margin-bottom: 50px;
}

header h1 {
  font-size: 2.5rem;
  margin: 0;
}

header p {
  margin: 10px 0 20px;
  font-size: 16px; /* Descrição subtítulo */
}

.title {
  font-weight: 700;
  color: var(--title-link-color); /* Cor do título do link */
  text-decoration: none;
}

#site-link {
  text-decoration: none;
  color: var(--title-link-color); /* Cor do link exclua-me */
}

#site-link:hover {
  text-decoration: none;
}

.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  width: 100%; /* Garante que o container ocupe toda a largura disponível */
  padding: 0 20px; /* Padding para dar espaço nas bordas */
  box-sizing: border-box; /* Inclui padding no cálculo do width */
}

#search-input {
  padding: 10px;
  font-size: 16px;
  width: 80%;
  max-width: 400px;
  border: 2px solid var(--button-color); /* Borda do input de pesquisa */
  border-right: none;
  border-radius: 5px 0 0 5px;
  outline: none;
  box-sizing: border-box; /* Inclui padding e borda no cálculo do width */
}

input[type="text"] {
  font-family: var(--font-family); /* Aplica a fonte ao input */
  font-size: 16px; /* Ajuste o tamanho da fonte conforme necessário */
}

#search-button {
  background-color: var(--button-color);
  padding: 10px;
  font-size: 16px;
  border: 2px solid var(--button-color);
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  max-width: 50px;
  box-sizing: border-box; /* Inclui padding e borda no cálculo do width */
}

#search-button i {
  color: var(--background-color); /* Cor do ícone no botão de pesquisa */
}

#results {
  margin-top: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinha os itens à esquerda */
  width: 100%; /* Garante que o container ocupe toda a largura disponível */
  padding: 0 20px; /* Padding para dar espaço nas bordas */
  box-sizing: border-box; /* Inclui padding no cálculo do width */
}

.site {
  border-radius: 5px;
  margin-bottom: 20px; /* Espaçamento entre blocos de resultados */
  padding: 15px;
  border: 1px solid var(--button-color); /* Bordas do resultado */
  width: 100%;
  box-sizing: border-box; /* Inclui padding no cálculo do width */
}

.site h2 {
  margin: 0 0 10px; /* Margem abaixo do título */
  font-size: 1.5rem;
}

.site p {
  margin: 10px 0; /* Margem abaixo dos parágrafos, ajustado para maior espaçamento */
}

.site a {
  display: inline-block; /* Permite adicionar margem ao link */
  margin-top: 10px; /* Espaçamento acima do link */
  text-decoration: none; /* Remove o sublinhado do link */
}

footer {
  text-align: center;
  padding: 20px;
  width: 100%;
  box-sizing: border-box; /* Inclui padding no cálculo do width */
  position: relative;
  bottom: 0;
}

.credits a {
  color: var(--link-color); /* Cor do link nos créditos */
  text-decoration: none;
}

.credits a:hover {
  text-decoration: underline; /* Sublinhar o link ao passar o mouse */
}

.heart-icon {
  color: red;
}

.github-icon {
  color: #333; /* Cor padrão do ícone do GitHub */
}

.theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--text-color);
}

@media (max-width: 600px) {
  header h1 {
    font-size: 1.8rem; /* Ajusta o tamanho da fonte do título no header */
  }

  header p {
    font-size: 14px; /* Ajusta o tamanho da fonte da descrição no header */
  }

  .search-container {
    flex-direction: row; /* Alinha a caixa de pesquisa horizontalmente */
    padding: 0 10px; /* Ajusta o padding em dispositivos móveis */
    justify-content: center; /* Centraliza horizontalmente */
  }

  #search-input {
    width: calc(100% - 60px); /* Garante que o input ocupe toda a largura disponível, menos a largura do botão */
    margin-bottom: 0; /* Remove o espaçamento abaixo do input */
    border-radius: 5px 0 0 5px; /* Borda arredondada uniforme */
  }

  #search-button {
    width: 50px; /* Garante que o botão ocupe toda a largura disponível */
    border-radius: 0 5px 5px 0; /* Borda arredondada uniforme */
    margin-bottom: 0; /* Remove o espaçamento abaixo do botão */
  }

  .site {
    padding: 10px; /* Ajusta o padding do resultado */
  }

  footer {
    padding: 15px; /* Ajusta o padding do footer */
  }

  .credits a {
    font-size: 14px; /* Ajusta o tamanho da fonte nos créditos */
  }
}