@charset "UTF-8";

@font-face {
  font-family: android;
  src: url(fontes/idroid.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --corFundo: #68f268a2;
  --cor_Nav_Degrade: #81fe81;
  --cor-verde-contraste-principal: #334833;
  --cor-verde-contraste-segundaria: #98ff988c;
  --cor-fundo-link: #87ff87bf;
  --fonte-padrao: Arial, Helvetica, sans-serif;
  --fonte-destaque: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

body {
  margin: 0px;
  background-color: var(--corFundo);
}

header {
  background-image: linear-gradient(to bottom, var(--cor_Nav_Degrade), var(--cor-verde-contraste-principal));
  margin: 2px 0px;
  padding: 15px 0px;
  min-height: 150px;
  text-align: center;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.327);
}
header > .titulo {
  margin: 10px 0px;
  transition-duration: 1s;
  color: white;
  font: italic 700 2em "android", Courier, monospace;
}
#subtitulo {
  color: lightgray;
  max-width: 600px;
  margin: 35px auto;
}
nav {
  text-align: left;
  margin: 0px;
  padding: 0px;
}
nav a {
  color: white;
  background-color: transparent;
  margin: 0px 15px;
  text-decoration: none;
  font: italic 800 1em Arial, Helvetica, sans-serif;
  transition-duration: 1s;
  border-radius: 10px;
  padding: 5px;
}
nav > a:hover {
  background-color: var(--cor-verde-contraste-segundaria);
  color: var(--cor-verde-contraste-principal);
  text-decoration: none;
}

main {
  background-color: white;
  width: 55%;
  margin: auto;
  padding: 20px 10px;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.327);
  border-radius: 0px 0px 10px 10px;
}
p {
  font: italic 100 1em var(--fonte-padrao);
  text-indent: 5%;
  line-height: 1.5;
}

.titulo {
  margin: 0px;
  color: #334833;
  font: italic 700 1.5em "android";
}
h2 {
  margin: 00px;
  color: #334833;
  font: italic 700 2em sans-serif;
  background-image: linear-gradient(to right, var(--cor-verde-contraste-segundaria), white);
  text-indent: 5px;
}

img {
  display: block;
  margin: auto;
  width: 100%;
}
.pequeno {
  max-width: 400px;
}
#video {
  background-color: var(--cor-verde-contraste-principal);
  margin: 0px -10px;
  padding: 18%;
}
iframe {
  display: inline-block;
  margin: auto;
  width: 35vmax;
  height: 20vmax;
}
iframe:hover {
  box-shadow: 3px 5px 7px black;
}
h3 {
  background-color: #334833;
  color: white;
  border-radius: 10px 10px 0px 0px;
  margin: 0px;
  padding: 8px 0px 10px 10px;
}
#extra {
  background-color: var(--corFundo);
  border-radius: 10px;
  padding: 0px 0px 5px 0px;
  margin: 5px;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.327);
}
#extra > p {
  margin: 10px 10px;
  font-family: var(--fonte-destaque);
  font-style: italic;
  font-size: small;
}
.lista {
  display: inline-block;
  list-style-position: inside;
  margin: 10px 1vw;
}

aside a {
  background-color: #05b00552;
}
a {
  text-decoration: none;
  color: black;
  background-color: var(--cor-fundo-link);
  font: italic 100 1em sans-serif;
  transition-duration: .5s;
}
a:hover{
  text-shadow: .5px .5px black;
}
main a::after {
  content: '\1F517';
}

footer {
  background-color: rgb(22, 41, 5);
  padding: 10px;
  width: auto;
}
footer > p {
  color: white;
  margin: 0px;
  text-align: center;
}
footer a {
  text-emphasis: none;
  color: white;
  background-color: transparent;
}