html, body{
	margin: 0;
	padding: 0;
	overflow: hidden;
	
	font-family: "Courier New", Courier, monospace;
}

.hidden{
	display: none;
}

hr{
	height: initial;
	border-width: 1px;
	border-style: inset;
}

#pageHeader{
	color: white;
	background: black;
	width: 100%;
	height: 100vh;
	line-height: 100vh;
	text-align: center;
	position: absolute;
	z-index: 11;
}

#pageHeaderListContainer{
	/* position: sticky; */
	position: absolute;
	width: 100%;
	top: 0;
	height: initial;
	line-height: initial;
	z-index: 1000;
	color: white;
	font-size: 2rem;
	background: black;
	z-index: 100;
}

.pageHeaderItem{
	text-align: left;
	cursor: pointer;
}

.pageHeaderItem.scrolled, .blogHeaderItem.scrolled{
	background: #333;
	text-decoration: underline;
}



.pageHeaderItem:first-child:hover{
	text-decoration: none;
	cursor: initial;
}

.pageHeaderItem:hover{
	text-decoration: underline;
}

#headerTextContainer{
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 100vh;
}

#headerText{
	line-height: initial;
	vertical-align: middle;
	display: inline-block;
	color: white;
	z-index: 20;
	position: relative;
}

#headerTextContainer h1{
	font-size: 3rem;
	margin: 0;
	color: #dfd382;
}

#headerTextContainer h3{
}

#headerDownArrow, #pageMain2DownArrow{
	line-height: initial;
	position: absolute;
	bottom: 1rem;
	width: 100%;
	font-size: 2rem;
	vertical-align: middle;
}

.fullDiv, .lastDiv{
	/* height: 100vh; */
	width: 100%;
	top: 0;
	font-size: 2rem;
}

.fullDiv{
	position: absolute;
}

.lastDiv{
	position: relative;
}

#pageMain1{
	background: white;
	z-index: 10;
	text-align: center;
	color: black;
	line-height: 100vh;
	height: 125vh;
	
}

#welcomeParaContainer{
	display: inline-block;
	vertical-align: middle;
}

#pageMain1 p{
	line-height: initial;
	vertical-align: middle;
}

#smilePara{
	transform: rotate(90deg);
	font-size: 3rem;
}

#pageMain2{
	background: lightgray;
	/* background: black; */
	/* color: white; */
	color: black;
	z-index: 9;
	min-height: 100vh; 
	/* height: 200vh; */
	line-height: 100vh;
	text-align: center;
	/* padding-top: 5rem; */
	padding-bottom: 8rem;
}

#pageMain2 p{
	line-height: initial;
}

#cvParaContainer{
	display: inline-block;
	vertical-align: middle;
}

#resumeGridItem, #portfolioGridItem{
	line-height: 50vh;
	height: 50vh;
}

.cvGridItem{
	/* background: #eee; */
	/* border: solid gray 1px; */
	/* border-radius: .5rem; */
	/* border-style: outset; */
	/* width: calc(250px - 2rem - 10px); */
	/* margin: 1rem; */
	margin-left: auto;
	margin-right: auto;
	cursor: pointer;
	height: 100%;
	width: 100%;

}

.cvGridItem:hover{
	background: #aaa;
}

.cvGridItemContent{
	vertical-align: middle;
	display: inline-block;
	line-height: initial;
}

.cvGridItem h4{
	margin: 1rem;
}

#cvGrid img{
		height: 200px;
	}

#pageMain2DownArrow{
	color: gray;
}

#pageMain3{
	z-index: 8;
	min-height: 100vh;
	background: black;
	color: white;
	line-height: 100vh;
	text-align: center;
	
	border-bottom: solid gray 1px;
}

#projectsParaContainer{
	display: inline-block;
	vertical-align: middle;
	line-height: initial;
	
}

#projectGridContainer{
	min-height: 100vh;
	width: 100%;
	max-width: 100vh;
	display: grid;
	gap: .25rem;
	line-height: 50vh;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10rem;
	margin-top: 10rem;
	/* border-top: solid gray 1px; */
	background: #dfd382;
}

#webAudioCell{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}

#webGlCell{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}

#web2dCell{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 4;
}

#stylingCell{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 4;
	grid-row-end: 5;
}

.projectCell{
	/* background: lightgray; */
}

.projectCellContent{
	width: 100%;
	background: lightgray;
	background: black;
	color: white;
	color: #dfd382;
	/* aspect-ratio: 1 / 1; */
	height: calc(50vh - .125rem);
	line-height: 50vh;
	text-align: center;
}

.projectCellContent:hover{
	cursor: pointer;
	background: #333;
}

.projectCellContent h4{
	margin: 0;
}

.projectCellContent img{
	max-height: calc(100% - 2rem);
}

.projectCellContentContainer{
	line-height: initial;
	vertical-align: middle;
	display: inline-block;
	height: calc(50% + 2rem);
}



#pageMain4{
	z-index: 7;
	line-height: 100vh;
	text-align: center;
	background: white;
}

#thanksParaContainer{
	display: inline-block;
	vertical-align: middle;
	line-height: initial;
}

#pageMain5{
	height: 100vh;
	z-index: 6;
}

#blogHeader{
	min-height: 4rem;
	background: black;
	color: #dfd382;
	position: fixed;
	top: 0;
	text-align: justify;
	z-index: 20;
	width: 100%;
}

#blogHeaderBackground{
	height: 4rem;
	width: 100%;
	background: black;
	position: absolute;
	z-index: 4;
}

#blogHeaderListContainer{
	display: inline-block;
	position: absolute;
	top: -8rem;
	width: 100%;
	left: 0;
	transition: top .25s linear;
	
}

#blogHeaderListContainer.openedList{
	top: 4rem;
}

/* #blogHeaderListContainer .blogHeaderItem{
	display: block;
	background: black;
	position: relative;
	color: white;
	border-left: 0;
	border-top: solid white 1px;
} */

.blogHeaderItem{
	display: block;
	border-left: 0;
	border-top: solid white 1px;
	background: black;
}



#blogHeaderLogo{
	text-align: left;
	width: initial;
	height: 100%;
	line-height: 4rem;
	display: inline-block;
	z-index: 5;
	position: relative;
	cursor: pointer;
	padding-left: .5rem;
	padding-right: .5rem;
}

#blogHeaderLogo:hover{
	background: #333;
}

#blogHeaderLogo img{
	height: 3rem;
	vertical-align: middle;
}

.blogHeaderItem{
	border-top: solid white 1px;
	vertical-align: middle;
	line-height: 4rem;
	text-align: center;
	padding-left: .5rem;
	padding-right: .5rem;
	cursor: pointer;
}

#blogHeaderListContainer .blogHeaderItem:hover{
	background: #333;
}

.blogHeaderItem img{
	height: 3rem;
	vertical-align: middle;
}

.blogHeaderItem span{
	vertical-align: middle;
}

#blogHeaderListOpener, #portfolioHeaderListOpener{
	position: absolute;
	right: 0;
	top: 0;
	color: white;
	width: 4rem;
	height: 4rem;
	z-index: 6;
	cursor: pointer;
}

#blogHeaderListOpener:hover{
	background: #333
}

.listOpenerBar{
	margin-left: auto;
	margin-right: auto;
	margin-top: .25rem;
	margin-bottom: .25rem;
	width: 50%;
	height: .65rem;
	background: white;
	border-radius: 1rem;
}

.listOpenerBar:first-child{
	margin-bottom: 0;
	margin-top: .75rem;
}

.listOpenerBar:last-child{
	margin-top: 0;
	margin-bottom: .75rem;
}



#blogContent{
	overflow-y: scroll;
	overscroll-behavior: none;
	height: calc(100dvh - 6rem);
	top: 4rem;
	position: relative;
	background: #333;
	color: white;
	padding: 1rem;
}

.blogPost{
	font-size: 1.25rem;
}

/* #testContent{
	height: 200vh;
	background: red;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

#testContent2{
	height: 50vh;
	background: blue;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
} */

#focusedImageContainer{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0; 
	right: 0;
	background: rgba(0, 0, 0, 1.0);
	width: 100%;
	height: 100%;
	z-index: 100;
	/* line-height: 100dvh; */
	text-align: center;
}

#focusedImage{
	transition: all .25s linear;
	position: absolute;
	/* will-change: top, left, width, height; */
	/* text-align: center; */
	/* background: green; */
}

#focusedImage.focused{
	/* top: 0px !important; */
	left: 0px !important;
	top: 0px !important;
	width: 100% !important; 
	height: 100% !important;
	line-height: 100dvh !important;
}


#focusedImageContainer img{
	/* transition: all .25s linear;
	max-width: 25%;
	max-height: 25%; */
	position: relative;
	/* margin: auto; */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	vertical-align: middle;
	/* margin: auto; */
}

/* #focusedImageContainer img.focused{
	/* position: absolute; 
	/* top: 50% !important; 
	/* transform: translate(-50%, -50%) !important;
	/* left: 50% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	vertical-align: middle;
	
} */

#focusedImageContainer #closeButton{
	position: absolute;
	color: white;
	top: 1rem;
	right: 1rem;
	line-height: initial;
	font-size: 2rem;
	font-weight: bold;
	cursor: pointer;
}

.carousel-control-prev, .carousel-control-next{
	background: rgba(0, 0, 0, 0.9);
	height: 6rem;
	margin-top: auto;
	margin-bottom: auto;
}

#portfolioHeader{
	text-align: left;
	
}

#portfolioHeader #blogHeaderLogo{
	z-index: 6;
}

#headerText{
	width: 100%;
	line-height: 4rem;
	vertical-align: middle;
	text-align: center;
	z-index: 5;
}

#headerText h1{
	margin: 0;
	color: #dfd382;
	/* font-weight: normal; */
}

#portfolioHeader #headerText{
	position: absolute;
	left: 0;
	height: 4rem;
	vertical-align: bottom;
	line-height: 4rem;
	/* font-size: 1rem; */
}

#portfolioHeader #headerText h1{
	font-weight: normal;
	font-size: 1.5rem;
	vertical-align: bottom;
	line-height: 4rem;
}

#portfolioHeader #blogHeaderListOpener:hover{
	cursor: pointer;
	background: #333;
}

#portfolioHeader #navList{
	background: black;
	color: white;
	z-index: 2;
	position: absolute;
	top: 0;
	transition: top .25s linear;
	width: 100%;
}

#navList .navListItem{
	width: 100%;
	z-index: 100;
	border-top: solid white 1px;
}

#navList .navListItem a{
	width: 100%;
	padding: 1rem;
	display: inline-block;
	z-index: 100;
	color: #dfd382;
	font-size: 1.25rem;
}

#portfolioHeader #navList.open{
	top: 4rem;
}

#portfolioBody{
	background: #333;
	width: calc(100%);
	height: calc(100dvh - 4rem);
	overflow-y: scroll;
	overflow-x: hidden;
	color: white;
	padding: 1rem;
	position: relative;
}



#portfolioBody h2{
	margin: 0;
	font-weight: bold;
	line-height: inherit;
}

#portfolioBody h3{
	font-weight: bold;
	line-height: inherit;
}

.portfolioPost{
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	/* background: #666; */
	/* padding: 1rem; */
}

.portfolioPostHeaderImage{
	text-align: center;
	height: 300px;
	line-height: calc(300px - 2rem);
	padding: 1rem;
}

#homeNetworkHeaderImage img{
	background: white;
}

.portfolioPostHeaderImage img{
	max-width: 100%;
	vertical-align: middle;
	max-height: 100%;
}


.portfolioPostHeader{
	display: inline-block;
	vertical-align: middle;
}

.portfolioPostImageButton{
	display: inline-block;
	
	vertical-align: middle;
	text-align: center;
}

.portfolioPostImageButton span{
	font-size: .8rem;
	width: 96px;
	display: inline-block;
}

.portfolioPostImageButton img{
	width: 48px;
}

.portfolioPost a{
	color: white;
	text-decoration: underline;
}

#portfolioImageViewerContainer{
	position: fixed;
	min-width: 100%;
	min-height: 100%;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	top: 4rem;
	bottom: 0;
}

#portfolioImageViewer{
	width: 100%;
	margin-top: 2rem;
	margin-bottom: 2rem;
	height: 100vw;
	max-height: calc(100% - 8rem);
	min-height: 50%;
	background: black;
}

.portfolioPostImageCarousel{
	width: 100%;
	background: black;
	height: 25rem;
	position: relative;
	
}

.portfolioPostImageCarouselControls{
	position: absolute;
	width: 100%;
	font-size: 4rem;
	z-index: 10;
	height: 100%;
}

.portfolioPostImageCarouselButton{
	background: rgba(0, 0, 0, 0.4);
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 1rem;
}

.portfolioPostImageCarouselLeftButton{
	left: 0;
}

.portfolioPostImageCarouselRightButton{
	right: 0;
}

.portfolioPostCarouselInner{
	height: 100%; 
	width: 100%;
}

.portfolioPostCarouselItem{
	height: 100%;
	text-align: center;
	/* line-height: 25rem; */
}

.portfolioPostImageCarousel img{
	max-height: 100%;
	max-width: 100%;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	transform: translateY(-50%);
	cursor: pointer;
	
}

.portfolioPostCarouselMainItems{
	height: 100%;
	width: 100%;
	/* overflow: hidden; */
	white-space: nowrap;
	position: relative;
	left: 0;
	transition: left .25s linear;
}

/*.portfolioPostCarouselItem{
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	text-align: center;
	display: inline-block;
	top: 0;
	vertical-align: middle;
}*/

/*.portfolioPostCarouselItem img{
	max-height: 100%;
	max-width: 100%;
	z-index: 20;
	position: relative;
	vertical-align: middle;
}*/

.portfolioPostCarouselLeftCover{
	left: -100%;
	background: #333;
	z-index: 5;
	position: absolute;
}

.portfolioPostCarouselLeft{
	left: -100%;
	background: red;
}

.portfolioPostCarouselRight{
	background: blue;
	left: 100%;
}

.portfolioPostCarouselRightCover{
	background: #333;
	left: 100%;
	z-index: 5;
	position: absolute;
}

#experimentPageBody{
	background: #333;
	min-height: calc(100dvh - 4rem);
	color: white;
	overflow-y: scroll;
	overflow-x: hidden;
	height: calc(100dvh - 4rem);
}

.experimentPost .coverImage img{
	width: 100%;
}

.experimentDesc{
	padding-left: 1rem;
	padding-right: 1rem;
}

.experimentDesc h2{
	margin-top: .5rem;
}

.experimentTag{
	display: inline-block;
	background: #666;
	padding: 1rem;
	border-radius: .5rem;
	margin-top: .5rem;
	margin-bottom: .5rem;
}

.experimentLink{
	color: white;
	display: block;
	padding-top: .5rem;
	padding-bottom: .5rem;
	text-decoration: underline;
}

@media(min-width: 768px){
	
	
	#cvGrid{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		/* line-height: initial; */
		
		/* line-height: 100vh; */
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		/* min-height: 100vh; */
	}

	#cvGrid hr{
		display: none;
	}
	
	.cvGridItem{
		/* width: calc(400px - 2rem - 10px); */
		width: calc(100% - 1rem);
		display: inline-block;
		vertical-align: middle;
	}

	#resumeGridItem{
		grid-column-start: 1;
		grid-column-end: 2;
	}

	#portfolioGridItem{
		border-left: solid gray 5px;
		grid-column-start: 2;
		grid-column-end: 2;
	}
	
	#cvGrid img{
		height: 300px;
	}
	
	#projectCellContent{
		width: initial;
	}
	
	#webAudioCell{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	}

	#webGlCell{
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
	}

	#web2dCell{
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 3;
	}

	#stylingCell{
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	
	
}

@media(min-width: 1024px){
	#blogHeaderListContainer{
		position: relative;
		width: initial;
		z-index: 8;
		top: 0;
	}
	
	#blogHeaderListContainer.openedList{
		top: 0;
	}
	
	#blogHeaderListContainer .blogHeaderItem{
		display: inline-block;
		border-top: 0;
		border-left: solid white 1px;
	}
	
	#blogHeaderListOpener{
		display: none;
	}
	
	.blogHeaderItem{
		border-left: solid white 1px;
		border-top: 0;
		width: initial;
	}
	
	#portfolioHeader #headerText h1{
		font-size: 2rem;
	}
}

@media(orientation:portrait){
	#portfolioBody{
		/* height: calc(100vh - 4rem); */
	}
}