@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100..700&family=Roboto:wght@100..900&display=swap');
@import url(./styles/header.css);
@import url(./styles/orcamento.css);
@import url(./styles/sobrenos.css);
@import url(./styles/projetos.css);
@import url(./styles/contatos.css);
@import url(./styles/maps.css);
@import url(./styles/catalago.css);
@import url(./styles/zoom.css);
@import url(./styles/rodape.css);

:root {
  --cor-de-fundo: #272727;
  --branco: #FFFFF7;
  --preto: #181818;
  --amarelo: #F4BA2C;
  --cinza-claro: lightgrey;


  --highlight-font: "Roboto", sans-serif;
  --text-font: "Josefin Sans", sans-serif;
} 

* {
  padding: 0;
  margin: 0;
}

body {
  font-size: 16px;
  background-color: var(--cor-de-fundo);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.titulo {
  text-align: center;
  color: var(--amarelo);
  text-transform: uppercase;
  font: var(--highlight-font);
  font-size: 24px;
  font-weight: 700;
  margin: 0.5em 0 1em;
}

.texto {
  font: var(--text-font);
  color: var(--branco);
  text-align: center;
  width: 90%;
}

.subtitulo {
  text-align: center;
  color: var(--branco);
  text-transform: uppercase;
  font: var(--highlight-font);
  font-size: 16px;
  font-weight: 700;
  margin: 2em 0 2em;
}


@media screen and (min-width: 1024px) {
  .titulo {
    font-size: 40px;
  }

  .subtitulo, .texto {
    font-size: 30px;
  }
}