@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Lobster&family=Merienda:wght@300..900&family=Onest:wght@100..900&display=swap');

@import url('./header.css');
@import url('./banner.css');
@import url('./main-section.css');


:root {
  --font-color-principal: rgb(1, 6, 32);
  --font-color-secundaria: rgb(137, 71, 0);
  --font-color-titulo-banner: rgb(15, 54, 145); 

  --font-family-geral: "Onest", sans-serif;
  --font-family-menu: "Merienda", cursive;
  --font-family-titulo-section: "Cinzel", serif;
  --font-family-titulo-banner: "Lobster", sans-serif;

  --box-shadow: 0 4px 8px 0 rgba(1, 6, 32, 0.2), 0 6px 20px 0 rgba(1, 6, 32, 0.19);
}

body {
  background-color: #fff;
}

/* Link voltar ao topo */
#voltar-topo {
  position: sticky;
  bottom: .5rem;
  left: 90vw;
  display: none;
}

#voltar-topo a {
  display: inline-block;
}

#voltar-topo a img {
  margin: .38rem;
  width: 1.7rem;
  height: 1.7rem;
}

#voltar-topo:active {
 border: 1px solid var(--font-color-titulo-banner);
}

/* Footer */
footer {
  padding: 1rem;
  text-align: center;
  color: #fff;
  font-size: .8rem;
  font-family: var(--font-family-menu);
  background-color: var(--font-color-secundaria);
}


@media only screen and (min-width: 600px) {
  #voltar-topo {
    bottom: 1rem;
    left: 93vw;
  }
}

@media only screen and (min-width: 992px) {
  #voltar-topo.button {
    width: 3rem;
    height: 3rem;
    margin: 1.5rem;
  }

  #voltar-topo a img {
    margin: .45rem;
    width: 2rem;
    height: 2rem;
  }

  footer {
    font-size: 1rem;
  }
}