@charset "UTF-8";

/* Reset e boas práticas */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Lucida Sans", sans-serif;
  background-color: white;
}



/* Topo */
.topo {
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 3px #000;
  letter-spacing: 9px;
  background: linear-gradient(349deg, rgba(255, 255, 255, 0.48) 69%, rgba(237, 221, 83, 0.69) 84%, rgba(87, 199, 133, 0.74) 100%);
}

.topo h1 {
  font-size: 30px;
  font-size: 40px;
  color: #007756;
  text-shadow: 2px 2px 3px #97670d;
  letter-spacing: 9px;
}

.topo p {
  letter-spacing: normal;
  font-size: medium;
   color: #f95c96;
  text-shadow: 1px 1px 1px #000;
  font-family: papyrus, serif;
  font-weight: bold;
  padding: 0.5em;
}

#logo {
  padding: 0.5rem;
}

/* Menu */
.menu {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 500px;
  /* ajuste conforme necessário */
  margin: 0 auto;
  /* centraliza horizontalmente */
}

.menu a {
  color: #007756;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 5em;
  transition: all 0.3s; 
}

.menu a:hover {
  background-color: #007756;
  color: white;
}

/* Conteúdo principal */
.main h1 {
  font-size: 30px;
  text-align: center;  
  margin: 0.5rem;
  color: #555555;
}

.main p {
  text-align: justify;
  line-height: 1.8rem;
  padding: 1rem;
}

/* Pesquisa */
.pesquisa {
  text-align: center;
  color: #5a4112;
}

.pesquisa h2 {
  font-size: 18px;
}

.pesquisa p {
  display: inline-block;
  margin: 0 0.5rem;
}

/* Rodapé */
.rodape {
  font-size: small;
  color: #44220c;
  font-weight: lighter;
  font-family: papyrus, serif;
  text-align: center;
  background: linear-gradient(177deg, rgba(255, 255, 255, 0.48) 69%, rgba(237, 221, 83, 0.69) 84%, rgba(87, 199, 133, 0.74) 100%);
  padding: 1rem;
}

/* Responsividade */
@media (max-width: 599px) {
  .menu {
    flex-direction: column;
    gap: 0.5rem;
  }

  .main p {
    padding: 0.5rem;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  .main p {
    padding: 0.75rem;
  }
}



@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
      "topo     topo"
      "menu     menu"
      "main     main"
      "pesquisa pesquisa"
      "rodape   rodape";
  }

  .menu {
    justify-content: space-around;
  }
}