/* Estiliza o corpo da página */
body {
    font-family: "Poppins", sans-serif;
    background-image: url(../img/fundo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden; /* Remove barras de rolagem */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    transition: background-color 0.3s ease;
}

main {
    flex: 1;
}

/* Adiciona uma animação de transição suave para o fundo */
body.animado {
    background-color: #E2E8F0; /* Cor de fundo para a animação */
}

::-webkit-scrollbar {
    width: 15px;
 }

::-webkit-scrollbar-thumb {
    background-color: #2B6CB0;
 }

/* Estiliza os títulos h1 */
h1 {
    font-size: 2.5rem;
    color: #255b96; /* Cor mais suave */
    text-align: center;
    letter-spacing: 0.3rem;
    padding-bottom: 50px;
}

/* Estiliza as seções da página */
section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
    position: relative; /* Para posicionar sugestões */
}

/* Estiliza os inputs dentro das seções */
section input {
    width: 30rem;
    border: none;
    padding: 1rem;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
    color: #2D3748; /* Cor do texto */
    font-size: 1rem;
    box-sizing: border-box;
}

/* Estiliza os botões dentro das seções */
section button {
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 1.5rem;
    background-color: #255b96; /* Cor de fundo tranquila */
    color: #F5F7F8;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Adiciona efeito hover ao botão de pesquisa */
section button:hover {
    background-color: #1c4672;
    color: #F3C332;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Estiliza a caixa de resultados da pesquisa */
.resultados-pesquisa {
    width: 60rem;
    height: 46vh;
    overflow-y: auto;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.6rem;
    background-color: #ff000000; /* Fundo branco para resultados */
}

/* Estiliza cada item de resultado */
.item-resultado {
    background: #E2E8F0; /* Cor de fundo suave */
    border-radius: 0.6rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* Adiciona efeito hover aos itens de resultado */
.item-resultado:hover {
    transform: scale(1.02);
}

/* Estiliza os títulos dentro dos itens de resultado */
.item-resultado h2 {
    font-size: 1.5rem;
    color: #2D3748;
}

/* Estiliza os links dentro dos itens de resultado */
.item-resultado a {
    text-decoration: none;
    color: #2B6CB0;
}

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

/* Estiliza a descrição meta dentro dos itens de resultado */
.descricao-meta {
    color: #4A5568;
    margin: 0.5rem 0;
}

/* Estiliza o rodapé da página */
footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f7fafca9;
    color: #4A5568;
    text-align: center;
    width: 100%;
    font-size: 1rem;
    height: 37px;
}