/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Importa a fonte Chakra Petch do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Estiliza o corpo da página */
body {
    font-family: "Comic Sans MS", Comic, sans-serif; /* Define a fonte padrão */
    background-color: #f3f3f3; /* Cor de fundo da página */
    display: flex; /* Usa Flexbox para layout */
    flex-direction: column; /* Alinha os itens na vertical */
    height: 100vh; /* Preenche a altura total da viewport */
    margin: 0; /* Remove a margem padrão */
    padding: 0; /* Remove o padding padrão */
}

/* Estiliza os títulos h1 */
h1 {
    font-size: 3rem; /* Tamanho da fonte */
    color: #19181b;
    text-align: left; /* Alinha o texto ao centro */
    letter-spacing: 0rem; /* Espaçamento entre letras */
    margin-bottom: -1em; /* Espaçamento entre h1 e h2*/
    margin-top: -1.5rem; /* Espaçamento entre h1 e topo da página*/
    background: linear-gradient(#f83e5d, #f83e5d, #f9d625, #42c177, #335fe3, #9a45d2, #9a45d2); /* Cor do texto */
  -webkit-background-clip: text; /* Aonde o gradiente ficará */
  -webkit-text-fill-color: transparent; /* fundo transparente ou não */
  text-shadow: 5px 5px 10px #2c2c2cac /* Sombra atrás do texto */
}

/*estiliza os títulos h2*/
h2 {
margin-top: 2.7rem;
text-shadow: 5px 5px 5px #0000009b; /* Sombra atrás do texto */
}

 /*estiliza a borda entre o subtítulo h2 e a barra de pesquisa*/
section::before {
    content: "";
    display: block; 
    height: 2px; /* Grossura da borda */
    background-color: #000000; /* Cor da borda */
    margin-top: 0.01rem; /* Margem entre h2 e barra de pesquisa */
    margin-bottom: 1rem; /* Margem entre barra de pesquisa e a borda */
  }

/* Imagem atrás do título e subtítulo */
.titulo-e-subtitulo {
background-image: url(https://www.shutterstock.com/image-photo/banner-kittens-cats-background-animals-260nw-731395711.jpg); /* URL da imagem */
background-size: 120rem 15rem; /* Tamanho da imagem */
background-position: center; /* Posição da imagem */
background-repeat: no-repeat; /* Se a imagem se repete ou não */
}

/* Estiliza as seções da página */
section {
    display: flex; /* Usa Flexbox para layout */
    flex-direction: column; /* Alinha os itens na vertical */
    align-items: left; /* Centraliza os itens horizontalmente */
    margin-bottom: 3rem; /* Espaçamento abaixo de cada seção */
}

/* Estiliza os inputs dentro das seções */
section input {
    height: 2rem; /* altura dos inputs */
    width: 15rem; /* Largura dos inputs */
    border-color: #19181b; /* Cor da borda padrão */
    padding: 1rem; /* Espaçamento interno */
    border-radius: -1rem; /* Borda arredondada */
    margin-left: 0.5em; /*espaçamento da esquerda dos inputs*/
    margin-top: -0.5em; /*espaçamento acima dos inputs*/
    margin-bottom: 0.4rem; /* Espaçamento abaixo dos inputs */
    color: #000000; /* Cor do texto */
    font-size: 1rem; /* Tamanho da fonte */
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

/* Estiliza os botões dentro das seções */
section button {
    text-align: center;
    height: 1.7rem;
    width: 4.5rem;
    padding: 0rem 0rem; /* Espaçamento interno do botão */
    border-color: #19181b; /* Cor da borda padrão */
    border-radius: 0rem; /* Borda arredondada */
    background: linear-gradient(#f83e5d, #f83e5d, #f9d625, #42c177, #335fe3, #9a45d2, #9a45d2); /* Cor do texto */
    background-color: #b3b3b3; /* Cor de fundo do botão */
    color: #232323; /* Cor do texto do botão */
    font-size: 1rem; /* Tamanho da fonte */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
}

/* Adiciona efeito hover ao botão de pesquisa */
section button:hover {
    background-color: #00000069; /* Muda a cor de fundo ao passar o mouse */
    box-shadow: 0 4px 8px #5c5c5c38; /* Adiciona uma sombra mais intensa */
}

/* Estiliza a caixa de resultados da pesquisa */
.search-results {
    text-align: center;
    width: 20rem; /* Largura máxima da caixa de resultados */
    height: 20vh; /* Altura máxima da caixa de resultados */
    overflow-y: auto; /* Adiciona rolagem vertical se necessário */
    margin-top: 1rem; /* Espaçamento acima da caixa de resultados */
    padding: 0.5rem; /* Espaçamento interno */
    background-color: #b7bbbbd5; /* cor da caixa */
    border-width: 1px; /* Tamanho da borda */
    border-color: #232323; /* Cor da borda */
    border-radius: 0rem; /* Borda arredondada */
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

/* Estiliza cada item de resultado */
.search-results {
    background: #b7bbbbd5; /* Cor de fundo dos itens */
    border-radius: 0rem; /* Borda arredondada */
    padding: 1rem; /* Espaçamento interno */
    margin-bottom: 1rem; /* Espaçamento abaixo dos itens */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */
}

/* Estiliza os títulos dentro dos itens de resultado */
.search-results h2 {
    font-size: 1.5rem; /* Tamanho da fonte */
    color: #222831; /* Cor do texto */
}

/* Estiliza os links dentro dos itens de resultado */
.item-resultado a {
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    color: #30475E; /* Cor do texto dos links */
}

/* Estiliza os links quando são passados o mouse sobre */
.item-resultado a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

/* Estiliza a descrição meta dentro dos itens de resultado */
.descricao-meta {
    color: #45474B; /* Cor do texto */
    margin: 0.5rem 0; /* Margem acima e abaixo */
}

/* Estiliza o rodapé da página */
footer {
    background-color: #F5F7F8; /* Cor de fundo do rodapé */
    color: #45474B; /* Cor do texto */
    text-align: center; /* Alinha o texto ao centro */
    padding: 0; /* Espaçamento interno */
    width: 100%; /* Largura total da página */
    position: absolute; /* Posiciona o rodapé */
    bottom: 0; /* Alinha ao fundo da página */
    font-size: 1rem; /* Tamanho da fonte */
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem; /* Tamanho da fonte em telas menores */
        letter-spacing: 0.2rem; /* Espaçamento entre letras em telas menores */
    }

    section input {
        width: 25rem; /* Largura dos inputs em telas menores */
        padding: 0.8rem; /* Espaçamento interno em telas menores */
    }

    .resultados-pesquisa {
        width: 40rem; /* Largura da caixa de resultados em telas menores */
        height: 40vh; /* Altura da caixa de resultados em telas menores */
    }

    .item-resultado h2 {
        font-size: 1.3rem; /* Tamanho da fonte dos títulos em telas menores */
    }
}

/* Responsividade para celulares */
@media (max-width: 480px) {

    h1 {
        font-size: 1.8rem; /* Tamanho da fonte em telas pequenas */
        letter-spacing: 0.1rem; /* Espaçamento entre letras em telas pequenas */
    }

    section input {
        width: 17rem; /* Largura total dos inputs em telas pequenas */
    }

    section button {
        padding: 0.6rem 1rem; /* Espaçamento interno do botão em telas pequenas */
        font-size: 0.9rem; /* Tamanho da fonte do botão em telas pequenas */
    }

    .resultados-pesquisa {
        width: 90%; /* Largura da caixa de resultados em telas pequenas */
        height: 50vh; /* Altura da caixa de resultados em telas pequenas */
    }

    .item-resultado h2 {
        font-size: 1.1rem; /* Tamanho da fonte dos títulos em telas pequenas */
    }

    footer {
        font-size: 0.9rem; /* Tamanho da fonte do rodapé em telas pequenas */
    }
}