@import './alegreya-sans/font.css';

:root{

    /* --monospace:"my-iosevka"; */
    --vellum:  #e0dacc;
    --vellum-0:#c9c4b7;
    --vellum-1:#b3aea3;
    --vellum-2:#9c988e;
    --vellum-3:#86827a;
    --vellum-4:#706d66;
    --vellum-5:#595751;
    --vellum-6:#43413d;
    --vellum-7:#2c2b28;
    --vellum-8:#161514;

    --verde-0:#82906e;
    --verde-1:#66765a;
    --verde-2:#666c52;
    --verde-3:#557158;

    --roxo-0:#ad8783;
    --roxo-1:#a27179;
    --roxo-2:#8c5d67;
    --roxo-3:#602030;

    --laranja-1:#9e6439;
    --laranja-2:#b65b32;

    --azul-0:#5b6b8c;
    --azul-1:#5b688b;
    --azul-2:#4f556e;

    --vermelho-0:#a26b5a;
    --vermelho-1:#9e4e41;

    --lazuli-0:#3247b0;
    --lazuli-1:#1b2e72;
    --lazuli-2:#18327d;
    --lazuli-3:#222558;

    --vermillion-0:#b01b05;
    --vermillion-1:#9f1002;


    --red		:#ef2f27;
    --red-bright	:#f75341;
    --green		:#519f50;
    --green-bright	:#98bc37;
    --yellow		:#fbb829;
    --yellow-darker	:#C89020;
    --yellow-bright	:#fed06e;
    --blue		:#2c78bf;
    --blue-darker	:#226096;
    /* value: 150 */
    --blue-bright	:#68a8e4;
    --magenta		:#e02c6d;
    --magenta-bright	:#ff5c8f;
    --cyan		:#0aaeb3;
    --cyan-bright	:#53fde9;
    --black		:#121212;
    --black-bright	:#2d2c29;
    --white		:#918175;
    --white-bright	:#fce8c3;    
}

body{-ms-word-break: break-all;
     word-break: break-word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     hyphens: auto;
    }

@media (width >  1470px) {body {width: 64em;}}
@media (width <= 1470px) {body {width: 42em;}}
@media (width <= 1060px) {body {width: 21em;}}


.bloco {
    width:20em;
    margin:0.5em;
    /* background-color:orange;     */
}


html {
    font-family: "my-sans";    
	/* "Iosevka Aile"; */
    line-height:1.5em;	
    font-size:22px;
    /* background-color:var(--vellum-0); */
    /* margin-left:auto; */
    /* margin-right:auto; */
    padding:3em;
}

body{
    margin-left:auto;
    margin-right:auto;
}
.pedaco {
  box-sizing: border-box;
  display: inline-block;
  /* text-align: center; */
  /* vertical-align: middle; */
  margin:0.5em;
}


.terco {
    padding:0.5em;
    width: 13em;}

.diptico {width: 18.5em;
	  padding:1em;}

.tudo {
    width: 42em;
    margin:0em;
    padding: 0em;
    justify-content: center;
}

img {
    display: block;
    width: 80%;
    height: auto;
    margin:auto;
}

body {
    background-image:url("e8uv02tm2zk51-darker.webp");
    background-size: 30vw;
}

p {margin-top: 0em;}

.align-right{text-align:right;}
.align-left{text-align:left;}
.float-right{float: right;}

.small-text{font-size:90%;}

.flexxed {
    /* margin:1em; */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    vertical-align: top;
    padding-top:0.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--vellum);
    align-items: flex-start;
}

.flexxed > div {
    /* margin:0.5em; */
    /* padding:0.5em; */
    /* color: #EEE; */
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* justify-content: center; */
}

/* #content { */
/*     background-color:var(--vellum); */
/* } */

/* CSS */
.botao {
    background-color: var(--blue);
    border: 1px solid var(--dark-blue);
    border-radius: 0.5em;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  line-height: 16px;
  min-height: 50px;
  outline: 0;
  padding: 12px 12px;
  text-align: center;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  font-size:80%;
  margin:2em;  
}

.botao:hover, .botao:active {
    background-color: var(--blue-darker);
}

.botao:active {
  opacity: .5;
}

.invert-color{
    filter: hue-rotate(180deg);
}

.icone {
    width:3em;
    height:3em;
}

.cards-box {
    position: relative;
}

.icon-box {
    /* margin:1em; */
    /* height:3em; */
    /* width: 3em;     */
}

.cards-box .icon-box:nth-child(odd) {
    transform: rotate(15deg);
    /* z-index: 1; */
}

.cards-box .icon-box:nth-child(even) {
    /* background-color: #f0efed; */
    transform: rotate(-15deg);
    /* z-index: 2; */
}

h1, h2, h3, h4 {
    margin-bottom: 0.5em;
    line-height:1.5em;
    font-weight:normal;}

h4 {font-size:120%;}
h3 {font-size:130%;}
h2 {font-size:140%;}
h1 {font-size:150%;}

figure {margin-left:0.5em;
	margin-right:0.5em;
	display:block;}

figcaption{font-size:80%;}