html, body {
    height: 100%;
}
body {
    margin: 0;
}

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 100%;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

h1 { 
	font-family: 'brandon-grotesque', Arial, serif; 
	font-weight: 300; 
	font-size: 20px;
}

h2 { 
	font-family: 'brandon-grotesque', Arial, serif; 
	font-weight: 500; 
	font-size: 18px;
}