body 
{margin: 0;
height: 100vh;
overflow: hidden;
background-color: rgb(41,38,55);}

* {color: BurlyWood;}

/* ESTRUTURA FLEX EM ORDEM HIERÁRQUICA */

.container 
{display: flex;
height: 100vh;}

	.column 
	{display: flex;
	flex: 1;
	flex-flow: column;
	flex-wrap: nowrap;
	margin: 0px 10px 0px 10px;}

	#header
	{justify-content: center;}

		.box 
		{display: flex;
		flex: 1;
		background-color: PaleGreen;}

/* BOXES: IMAGENS DE FUNDO E DIMENSÕES */
/* retirar o ../ quando for upar. funciona para preview local só */

#box1 
{background-image: url('../images/bk1.jpg');
background-size: cover;
flex: 2;}

#box2 
{padding-bottom: 0px;
background-image: url('../images/bk4.jpg');
background-size: cover;
margin-top: 20px;}

#box3 
{background-color: PowderBlue ;
background-image: url('../images/bk3.jpg');
background-size: cover;
padding-top: 0px;}

#box4 
{background-color: Plum ;
background-image: url('../images/bk2.jpg');
background-size: cover;
margin-top: 20px;
flex: 2;}

/* máscara que cobre a div box e tem cor rgba, que não altera os elementos-filhos*/

.mask
{display: flex;
flex: 1;
background-color: rgba(41,38,55, 0.8);}

.mask:hover 
{background-color: rgba(0,0,0, 0.5);}

/* html5 para transfomar a div inteira em link */

a 
{display: flex;
flex: 1;
text-decoration: none;}

	.link 
	{display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	margin: 10px;
	
	
	border-style: solid;
	border-color: BurlyWood;
	border-width: 2px;
	
	font-family: Josefin Sans, sans-serif;
	font-weight: 200;
	font-size: 30px;
	text-transform: uppercase;
	text-align: center;}


/* margens seletivas para links*/

	#link3 
	{border-top-width: 0px;
	margin-top: 0px;}


	#link2
	{border-bottom-width: 0px;
	margin-bottom: 0px;}

/* texto do header */

	h1 
	{font-family: Berkshire Swash;
	font-size: 30pt;
	font-weight: initial;
	padding-left: 30px;
	color: #c09f7a;
	margin-bottom: 0;}

	h2
	{font-family: Josefin Sans, sans-serif;
	font-weight: 200;
	font-size: 12pt;
	padding-left: 30px;}