* {
  box-sizing: content-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  color:#eee;
  background-color:#000;
  font-family: "Fira Code", monospace, tahoma, arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size:12pt;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

a {
	color:#eee;
	text-decoration:none;
}
a:visited {
	color:#eee;
}

#header {
	align-self:stretch;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	padding:.25em .5em;
	margin-bottom:1em;
}
#logo {
	font-size:24pt;
	font-weight:bold;
}
#menu {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:flex-start;
}
#menu > span {
	margin:.25em .75em;
	padding:.25em .5em;
}
#menu > span:hover {
	cursor:pointer;
	background-color:#666;
}

#bio {
	align-self:stretch;
	flex:1;
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	justify-content:space-between;
}
#bio1 {
	flex:1;
	align-self:stretch;
	padding:1em 2em;
}
#bio2 {
	align-self:stretch;
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	justify-content:space-between;
	padding:1em 2em;
}

.video-container {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
}

@media (orientation: portrait) {
	#bio2 > img {
		max-width:320px;
	}
	
	html, body {
		font-size:16pt;
	}
	
	#bio2 {
		justify-content:space-around;
	}
}