body 
{margin: 0;
max-width: 100vw;
background-color: rgb(41,38,55);}

*
{color: BurlyWood;
text-align: center;}

.container 
{display: flex;
flex-wrap: wrap;
max-width: 100vw;
overflow: hidden;}

.column 
{flex-flow: column;
flex: 1;
align-content: stretch;}

#header 
{display: flex;
flex: 1;
justify-content: center;
align-items: center;
height: 50vw;
color: burlywood;
padding-top: 20px;}

h1
{font-family: Berkshire Swash;
font-weight: initial;
font-size: 30pt;
line-height: 5%;
padding-top: 5vh;}

h2
{font-family: Josefin Sans, sans-serif;
font-weight: 200;
font-size: 12pt;
line-height: 10%;}

.box 
{display: flex;
height: 40vw;
min-width: 80vw;
margin: 20px;}

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

#box2
{background-image: url('../images/bk4.jpg');
background-size: cover;}

#box3
{background-image: url('../images/bk3.jpg');
background-size: cover;
background-position: left;}

#box4
{background-image: url('../images/bk2.jpg');
background-size: cover;}



.mask 
{display: flex;
flex: 1;
overflow: hidden;
padding: 10px;
background-color: rgba(33, 28, 56, 0.8);}


a
{display: flex;
flex: 1;
font-family: Josefin Sans, sans-serif;
font-weight: 200;
font-size: 20pt;
text-transform: uppercase;
text-decoration: none;
color: BurlyWood;
text-align: center;}


.link
{display: flex;
flex: 1;
border-style: solid;
border-width: 3px;
border-color: BurlyWood;
align-items: center;
justify-content: center;}