:root {
  --navBoxAccent: Gray;
  --navBoxColor: Black;
  --backgroundSize: 300px;
}

@font-face { 
  font-family: 'Roboto'; 
  src: url('https://fonts.googleapis.com/css2?family=Roboto'); 
}

@font-face {   
  font-family: 'EB Garamond'; 
  src: url('fonts.googleapis.com/css?family=EB+Garamond'); 
} 
 
body,html {
	margin:0px;
	padding:0px;
	height: 100vh;
	width: 100vw;
	font-family: 'EB Garamond', serif;
	font-size: 3vh;
	background:repeat;
	background-image: url("../img/CrystalWhite.png");
	background-blend-mode: screen;
	background-color: var(--navBoxAccent);
	background-size: var(--backgroundSize) var(--backgroundSize);
	animation: scrollingBackground 15s linear infinite;
}	



@keyframes scrollingBackground {
	from	{ background-position: 0 0; }
	to		{ background-position: var(--backgroundSize) var(--backgroundSize); }
}

.navContainer {
	margin:0px;
	padding:0px;
	color: white;
	background-color: var(--navBoxColor);
	font-family: 'EB Garamond', serif;
	font-size: 3vh;
	overflow: hidden;
}

.navContainer li {

	list-style: none;
	padding: 1vw;
	float: right;	
	background-color: var(--navBoxColor);
	margin: 0px;
	border-radius: 50px;
}

.navContainer li a{
	color: white;
	text-align: center;
	text-decoration: none;
	margin: 0px;
	padding: 0.5vw;
}

.navContainer li ul, li.webMenu ul li{
	display: none;	
}

.navContainer li:hover ul, li.webMenu:hover ul li{
	display: flex;
	flex-direction: column;
}

.mediaIcon{
	fill: white;	
	width: 3vw;
	height:3vh;	
}

#aboutMe {
	width: 100%;
	display: flex;
	justify-content: center;
	max-height: 50vh;
	color: white;
	background-image: linear-gradient(to top, rgba(255,0,0,0), var(--navBoxColor));
	font-size: 2vh;
}

#aboutMe > * {
	margin: auto;
	font-family: 'Roboto', sans-serif;
}

#aboutMe li{
	list-style: none;
}

#aboutMe h2{
	font-family: 'EB Garamond', serif;
	letter-spacing: 1px;
	text-align: left;
	text-decoration: none;
}

#portfolioPhoto {
	background-image: 
		url("../img/myPhoto.jpg");
	filter: grayscale(100%);		
	background-size: cover;	
	max-width:  250px;
	max-height: 250px;
	min-width:  250px;
	min-height: 250px;
	border-style: solid;
	border-width: 5px;
	border-radius: 50%;
	border-color: var(--navBoxAccent);	
}

#linksContainer a{
	color: white;
	padding-top: 5px;
	text-decoration: underline;
}

#videoContainer {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	margin: auto;
	min-width: 70%;
	min-height: 60%
	
}

#videoContainer {
	 border-collapse: separate;
	 border-spacing: 2vh 5vh;
}

#videoContainer .video{
	color: white;
	text-align: center;
	border-radius: 2vw;
	margin: 2vh;
	padding: 5vh;
	background-color: var(--navBoxColor);
	/*background-image: linear-gradient(to top, rgba(255,0,0,0), var(--navBoxColor));*/
}

#videoContainer > * {
	font-family: 'Roboto', sans-serif;
}

h2{
	margin: auto;
	text-align: center;
	font-family: 'EB Garamond', serif;
	text-decoration: underline;
}

#videoContainer iframe {
	width: 640px;
	height: 480px;	
}

#videoContainer a {
	color: white;
	padding: 5px;
	text-decoration: underline;
}

#videoContainer li {
	text-align: start;
}