/* Sistema de Agronegocio :: Stay Green
 * CEFET-MG
 * INF-2A 2018
 * * * * * * * * * * * * * * * * * * * *
 * CSS Geral
 */

:root {
  --brancoIvory: #FDFCF3;
  --verdeCamarone: #1D883A; /* Verde Claro */
  --verdeCrusoe: #126624; /* Verde Escuro */
  --pretoNight: #AAA9A4;
  --cinzaFoggy: #2D2D2E;
}

::selection {
  background-color: var(--verdeCamarone);
  color: var(--brancoIvory);
}

*:focus {
  outline: none;
}

body {
  font-family: 'Niramit', sans-serif;
  margin: 0;
  background-color: var(--brancoIvory);
  font-size: calc(14px + .2vw);
  color: var(--cinzaFoggy);
}

a {
  color: var(--verdeCrusoe);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  transition: 200ms;
  cursor: pointer;
  padding: .5em 2em;
  border: none;
  font-family: inherit;
  background-color: var(--verdeCamarone);
  color: var(--brancoIvory);
}

button:hover {
  background-color: var(--verdeCrusoe);
  color: var(--brancoIvory);
}

.botaoInvertido {
  color: var(--verdeCamarone);
  background-color: var(--brancoIvory);
}

.botaoInvertido:hover {
  background-color: var(--verdeCamarone);
  color: var(--brancoIvory);
}

.botaoFantasma {
  border: 1px solid var(--verdeCamarone);
  background-color: transparent;
  color: var(--verdeCamarone);
}

.botaoDesab {
  background-color: grey;
  cursor: not-allowed;
}

.botaoDesab:hover {
  background-color: grey;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 200;
}

input {
  padding: .15em;
  font-family: inherit;
  border: none;
  border-bottom: 1px solid black;
  background-color: transparent;
}

input, button {
  font-size: inherit;
}

select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  border-bottom: 1px solid var(--pretoNight);
  background-color: transparent;
  color: var(--cinzaFoggy);
}

select > option {
  background-color: var(--brancoIvory);
}

table {
  border-collapse: collapse;
  text-align: center;
  background-color: var(--brancoIvory);
}

tfoot {
  background-color: var(--verdeCrusoe);
  color: var(--brancoIvory);
}

th {
  padding: 0em 1em;
  font-weight: normal;
}

thead {
  background-color: var(--verdeCamarone);
  color: var(--brancoIvory);
  border: none;
}

thead > tr {
  border: none;
}

tr {
  border-bottom: 1px solid var(--pretoNight);
  padding: 1em;
}

td > button {
  padding: 0 .5em;
  margin: calc(4px + .1vw);
}

/* Estilização do Header e do Footer */

header {
  display: flex;
  background-color: yellow;
  height:93%;
  width:100%;
  background-image: url('../imgs/home/fazenda.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
}
header > #mascara-conteudo {
  background-color: rgba(16, 43, 18, 0.7);
  height:100%;
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
header > #mascara-conteudo > h1 {
  color: white;
  text-align: center;
  font-family: 'Niramit', sans-serif;
  font-size:calc(30px + 2vh );
}
header > #mascara-conteudo > p {
  color: white;
  text-align: center;
  font-family: 'Niramit', sans-serif;
  font-size: calc(20px + 2vh);
}
header > #mascara-conteudo > button {
  text-align: center;
  width: 15%;
  height: 9%;
  border: none;
  font-family: 'Niramit' , sans-serif;
  background-color: white;
  color:rgba(16, 43, 18,1);
  font-size: calc(20px + 2vh);
  cursor: pointer;
}

nav{
  height: 3.2em;
  width: 100%;
  display: flex;
  background-color: #1d883a;
  justify-content: space-around;
  align-items: center;
  position: sticky;
  top:0;
}

nav > h3 {
  width:20vw;
  height: 100%;
  text-align: center;
  font-family: 'Niramit' , sans-serif;
  color:white;
  font-size: calc(20px + 1vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

nav> a[href="index.html"]{
  width:20vw;
}
nav> a[href="index.html"] > img{
  height: 100%;
}


nav > a {
  text-decoration:none;
  width:13.3vw;
  height: 100%;
  text-align: center;
  font-family: 'Niramit' , sans-serif;
  color:white;
  font-size: calc(20px + .7vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
nav > a:hover {
  background-color: #116623;
  text-decoration:none;
}

footer {
  height: 50%;
  width: 100%;
  display: flex;
  background-color: #2d2d2d;
}

footer > section {
  width: 15%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

footer > section > h3 {
    font-family: 'Niramit' , sans-serif;
    font-size: calc(10px + 1.5vh);
    color: white;
}

footer > section > a {
    text-decoration: none;
    font-family: 'Niramit' , sans-serif;
    font-size: calc(10px + 1vh);
    color: #c6c7c9;
}

footer > section > img {
  height: 100px ;
  width:  100px;
}

.redes {
  justify-content: center;
}