@import url(variaveis.css);

html, body {
  margin: 0;
  padding: 0;
}

body {

  padding: 0em 0em 12em 0em;

  font-family: "PT Sans", Trebuchet, sans-serif;
  font-weight: 400;
  font-style: normal;

  line-height: 1.6em;
  color: var(--cinza7);

  background-color: #e1e5e3;
}

a {
  color: var(--texto-link);
}

h1 {
  padding-top: 3em;
  text-align: center;

  opacity: 1;
  transition: 0.1s linear opacity;
}


body[data-rolado] h1 {
  opacity: 0;
  transition: 0.1s linear opacity;
}

h2 {

  margin: 0;
  padding: 0.5em 0em 1em;

  text-align: center;
  color: var(--cinza6);
}

h3 {

  margin-bottom: 0.5em;
  color: var(--verde5);
  text-align: center;
  font-size: 1.6em;
  
  text-shadow: 1px 2px 2px rgba(255, 255, 255, 0.8);
}

h4 {
  color: var(--verde6);
}

ul {
  margin-top: 0;
}

li {
  margin-bottom: 0.8em;
}

em { 
  font-weight: bold;
}

.texto-com-sombra-branca-1 {
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.texto-com-sombra-branca-2 {
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.5);
}

#menu-principal {

  display: block;
  position: fixed;

  left: 0;
  top: 0;

  width: 100%;
  height: 2em;

  padding: 0.8em 0em 0.3em 0em;
  border-bottom: 1px solid var(--verde3);

  background-color: var(--branco2);

  visibility: hidden;
  opacity: 0;
  transition: 0.1s linear opacity;
}

body[data-rolado] #menu-principal {

  visibility: visible;
  opacity: 1;
  transition: 0.2s linear opacity;
}

#menu-principal div {

  margin: auto;

  max-width: 50em;
}

#menu-principal ul {

  float: right;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#menu-principal li {
  float: left;
  margin-left: 0.2em;
}

#menu-principal a {

  padding: 0.3em 0.8em;
  font-size: 0.9em;
  font-weight: bold;

  text-decoration: none;

  color: var(--verde5);
  background-color: transparent;

  border: 1px solid transparent;

  border-radius: 0.6em;
  transition: 0.2s linear all;
}

#menu-principal a:hover {

  color: var(--verde6);
  background-color: var(--cinza3);
  border-color: var(--verde6);
}

#corpo {

  margin: auto;
  max-width: 42em;

  text-align: justify;
}

h3.sonho {

  padding-top: 1em;

  color: var(--azul4);
}

p.sonho {

  text-align: center;
  font-size: 1.2em;
  font-weight: bold;

  line-height: 1.7em;
  padding: 0em 0em 2em 0em;

  color: var(--azul6);
}