/*
 * Autor: Nicolas Ramos
 * Data : 28/01/2017
 *
 */
@import url('https://fonts.googleapis.com/css?family=Vollkorn:400,600,700,900');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap');
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body {
    background-color:#E6E6E6;
    font-family: 'Vollkorn', serif;
}
h1 {
    font-size: 42px;
    font-weight: lighter;
    color: #48D1CC;
    text-shadow: 1px 1px 1px #191970;
}
h2, h3, h4, h5, h6 {
    font-size: 28px;
    font-weight: lighter;
    text-shadow: 1px 1px 1px #A52A2A;
    color: #ff6666;
    margin-bottom: 12px;
}
.reduzido {
    font-size: 20px;
    font-family: 'Ubuntu Mono', monospace;
    font-weight: bold;
    text-shadow: none;
    color: #222222;
    margin-bottom: 8px;
}
.comum {
    font-size: 16px;
    font-family: 'Ubuntu Mono', monospace;
    color: #26294C;
    margin-top: 6px;
}
.miniatura {
    font-size: 12px;
    font-family: 'Ubuntu Mono', monospace;
    /*font-weight: 700;*/
    color: black;
    margin-top: 13px;
    margin-bottom: 2px;
}
/* links */
.a, .b {
    font-size: 15px;
    font-family: 'Noto Sans', sans-serif;
    text-decoration: none;
}
.a:hover{
    font-weight: bolder;
    color: darkblue;
    text-decoration: underline;
}
.justify {
    text-align: justify;
}
.indent {
    text-indent: 2em;
}
.right {
    text-align: right;
}
.header {
    width: 800px;
    height: 80px;
    background-color: #FFFFFF;
}
.fix {
    width: 800px;
    position: absolute;
}
.titulo-header {
    font-family: 'Vollkorn', serif;
    font-size: 62px;
    font-weight: lighter;
    color: #222222;
    text-shadow: 2px 2px 2px #88DDFF;
    position: absolute;
    top: 0;
    right: 10px;
    opacity: 0.5;
    height: 78px;
    width: 415px;
}
.top {
    text-align: right;
}
.line{
    width: 800px;
    height: 1px;
    background: #9DACB4;
    margin-top: 0;
    margin-bottom: 15px;
}
.lineIn{
    width: 770px;
    height: 1px;
    background: #9DACB4;
    margin-top: 0;
    margin-bottom: 15px;
}
.geral {
    width: 800px;
    margin: 0 auto auto auto;
    border: transparent;
    z-index: -1;
}
header {
    position: absolute;
    top: 0;
    right: 0;
}
section {
    position: static;
    width: 800px;
}
/* box com sombra */
.box{
    width: 800px;
    font-size: 15px;
    font-family: 'Noto Sans', sans-serif;
    background: #FFF;
    margin: auto auto 25px;
    padding: 15px;
    box-sizing: border-box;
}
.quadro {
    width: 800px;
    font-size: 15px;
    font-family: 'Noto Sans', sans-serif;
    background: #E0E6E6;
    margin: 15px auto 25px;
    padding: 15px;
    border: 1px #9DACB4 solid;
}
.sombra {
    position: relative;   /* Posição relativa que se refere a antes y depois */
}
.sombra:before, .sombra:after  /* Aplicar algumas propriedades mutuas antes y despois deste elemento */
{
    z-index: -1;          /* Enviar este elemento para tras */
    position: absolute;   /* Posicionamento absoluto do effect2 */
    content: "";          /* Necessario para que apareça */
    bottom: 8px;          /* Alienação da sombra inferior, quanto menos for o valor, mais perto da parte inferior */
    left: 12px;           /* Considere como margem esquerda */
    width: 50%;           /* Tamanho de fundo da sombra */
    top: 10px;            /* 50% Considere como borda superior da sombra */
    max-width: 387.5px;   /* Tamanho máximo da sombra  */
    background: #E6E6E6;  /* #111 #E6E6E6 Cor de fundo da sombra  */
    box-shadow: 0 15px 10px #111;         /* Aplicado a propriedade básica da caixa sombra */
    -moz-box-shadow: 0 15px 10px #111;
    -webkit-box-shadow: 0 15px 10px #111;
    transform: rotate(-2deg);             /* Rotação de sombras / elementos que dão o aspecto 3D da caixa */
    -o-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-3deg);
}
.sombra:after
{
    -webkit-transform: rotate(2deg);  /* alinhamento da sombra a direita */
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
    right: 12px;                      /* Considere como margem direita */
    left: auto;                       /* deixe em 'auto' para definir automaticamente a esquerda */
}
.papel {
    width: 800px;
    font-size: 15px;
    font-family: 'Noto Sans', sans-serif;
    margin: auto;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid gray;
    position: relative;
}
.papel:after {
    content: " ";
    width: 100%;
    height: 10%;
    background: red;
    position: absolute;
}
.azul {
    color: #5858a7;
}
.verde {
    color: #4d735c;
}