html, body, ul, h1 {
	margin: 0;
    padding: 0;
    border: 0;
	overflow: hidden;
	height: 100%;

	font-family: 'Nunito', sans-serif;
}

h1 {
	font-family: 'Nunito', sans-serif;
    margin-bottom: 20px;
}

nav {
	position: fixed;
	padding: 20px 0 0 20px;
}

canvas[resize] {
	width: 100%;
	height: 100%;
    position: absolute;
}

ul {

    list-style: none outside none;
}

#selectedList {
    margin-left: 8px;
    font-size: 0.9em;
}

/* Flip only a specific browser? */
#flipIt {
	-moz-transform: scaleX(-1) scaleY(-1);
	-webkit-transform: scaleX(-1) scaleY(-1);
	-o-transform: scaleX(-1) scaleY(-1);
    	transform: scaleX(-1) scaleY(-1);
	-ms-filter: fliph; /*IE*/
    	filter: fliph; /*IE*/
}

#projectContainer {

	display: flex;
	flex-flow: row wrap;
	flex-wrap: wrap;
	border-color: red;
	flex-direction: row;
	background-color: green;
	
}

.projectCol {
	display: flex;
	flex-direction: column;	
	background-color: yellow;

}

.projectSquares {

	border: solid;
	border-width: 2px;
	border-color: red;
	background-color: blue;
	
}

.projectSquares::before {
	content: "Work in progress";
}