.root {
	display: flex;
	flex-direction: row;
	width:100vw;
	height:100vh;
	background-color: rgb(0,0,0);
}

.navBar {
	display:flex;
	flex-direction:column;
	justify-content: flex-start; /*Vertical alignment*/
	align-items: center; /*Horizontal alignment*/
	background-color: rgb(21,22,25);
	width:20vw;	
	height:100vh;
	min-width:260px;
	position:fixed;	
	left:0;
	top:0;	
	//border:2px dashed red;
}
.navBarCompact {
	display:none;
	background-color: rgb(21,22,25);
	width:100vw;	
	height:74px;	
	position:fixed;	
	left:0;
	top:0;	
	//border:2px dashed purple;
	z-index:10;
}

.content {
	display: flex;	
	flex-grow:1;
	flex-direction: column; /*Changes the below alignment depending on column or row direction*/
	justify-content: flex-start; /*Vertical alignment*/
	align-items: flex-start; /*Horizontal alignment*/
	position: relative;
	background-color: rgb(0,0,0);
	margin-left: max(20vw, 260px);
	width:78vw;
	height:100vh;
	//border:2px dashed green;
}

.tile {
	flex-shrink:0;
	background-color: rgb(0,0,0);
	height:100px;
	width: calc(100%);
	//border:2px dashed orange;
	text-align:center;
}
.tile p {
	//border:1px dashed red;
}

/*Types of tile*/
.introTile { /*Only one of these exist, right at the top*/
	height:400px;
	overflow:hidden;
	//border:2px dashed purple;
	display:flex;
	flex-direction: row;
	flex-wrap:nowrap;	
	justify-content: flex-end; /*Horizontal alignment*/
}

.headerTile { /*Tile that comes before a content tile to signify what the content is for*/
	height:auto;	
}

.contentTile {		
	background-color: rgb(240,240,240);
	color:rgb(25,25,25);
	height:auto;
	font-size:20px;
	font-weight:100px;
	text-align:left;
}
.categoryTile { /*Divides header and content tiles by categories such as professional/personal*/
	background-color: rgb(250,250,250);
	height:auto;
}

.contactTile {
	background-color: rgb(240,240,240);
	height:auto;
	flex-wrap:nowrap;
}
.footerTile {
	background-color: rgb(21,22,25);
	height:auto;
}
/*------------*/

/* Inner tile content layout */
.horizontalTileContent {	 /*Main container of content inside a tile for row based layout*/
	margin:5%;	
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: space-between; /*Horizontal alignment*/
	align-items: center; /*Vertical alignment*/
	//border:2px dashed cyan;
	z-index:2;
}
.verticalTileContent {	 /*Main container of content inside a tile for column based layout*/
	margin:5%;	
	display:flex;
	flex-direction:column;
	justify-content: flex-start; /*Vertical alignment*/
	align-items: flex-start; /*Horizontal alignment*/
	//border:1px dashed cyan;
	text-align:left;
}
.contentBlock {
	height:auto;
	width:auto;
	min-width:340px;
	//border:1px dashed purple;
	z-index:1;
}
/*------------*/

/* Project Title */
.contentBlock h4 {
	font-size:38px;
	font-weight: 100;	
	color:rgb(250,250,250);		
	text-align:left;
}
/* Project Info Tags + ContentBlock Text*/
.contentBlock h4 ~ p, .contentBlock li {
	font-size:24px;
	font-weight: 500;	
	color:rgb(245,245,245);	
	text-align:left;
}

/* For category header tiles */
.verticalTileContent h2 {
	font-size:42px;
	font-weight: 500;	
	color:rgb(90,90,90);	
}

.horizontalTileContent .contentBlock h2 {
	font-size:42px;
	font-weight: 500;	
	color:rgb(250,250,250);	
}
.horizontalTileContent .contentBlock {
	margin-top:10px;
}
.horizontalTileContent .contentBlock:first-child {
	margin-top:-20px;
}

/*This is counteract the above margins for the footer content block.*/
.footerTile .contentBlock {
	margin-top:10px;
	margin-bottom:10px;
}
.contactTile .horizontalTileContent {
	justify-content: space-around;
}
.contactTile p {
	margin-top:2%;
	margin-bottom:-5%;
}

.introTile iframe, .introTile .videoOverlay {
	box-sizing:border-box;
	width:100%;
	flex: none;
}
.introTile .horizontalTileContent {
	flex:none;
	width:90%;
	margin-left:-110%;
}
.introTile iframe {
	width:120%;
	height:200%;
	margin-left:-200px;
	margin-top:-300px;
	min-width:1670px;
	min-height:564px;
}
/*Overlay div that prevents clicks on a video element*/
iframe + #videoOverlay {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width: 100%;
    height: 400px; /*This should always use the pixel height of the introTile*/
	overflow:hidden;
	background-color:rgba(0,0,0,.2);
	background-repeat: no-repeat;
	background-position: center bottom;
	//border:3px dashed blue;
}
.introTitle h2, .introTitle h5 {
	filter: drop-shadow(2px 2px 0.2rem rgba(0,0,0,0.6));
	text-align:left;
}
.introTitle h2 {
	font-size:32px;
	font-weight: 100;	
	color:rgb(250,250,250);	
	font-family: 'Quicksand';	
}
.introTitle h5 {
	font-size:20px;
	font-weight: 100;	
	color:rgb(250,250,250);	
	font-family: 'Quicksand';	
}

.categoryTile p {
	font-size:22px;
	font-weight: 500;	
	color:rgb(75,175,175);	
}

.footer {
	text-align:center;
	font-weight:100;
	font-size:16px;
	color:rgb(210,210,210);
}


/* Text Colors */
.welcomeText, .welcomeText p, .welcomeText h6, .welcomeText li, .welcomeText h4 ~ p {
	color:rgb(90,90,90);
}
.welcomeText h6 {
	font-size:26px;
}
.welcomeText li {
	font-size:20px;
	font-weight: 100;	
}
.welcomeText a, .welcomeText a:visited, .welcomeText a:active {
	text-decoration:none;
	color: rgb(5,105,105);
}
.welcomeText a:hover {
	color:rgb(75,175,175);
}

.contentText {
	color:rgb(245,245,245);	
}
.contentText a, .contentText a:visited, .contentText a:active {
	text-decoration:none;
	color: rgb(200,200,200);
}
.contentText a:hover {
	color:rgb(75,175,175);
}
/*------------*/