@font-face {
  font-family: 'OpenSans';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/Open_Sans/Open-Sans-regular.eot');
  src: url('fonts/Open_Sans/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
       local('Open Sans'),
       local('Open-Sans-regular'),
       url('fonts/Open_Sans/Open-Sans-regular.woff2') format('woff2'),
       url('fonts/Open_Sans/Open-Sans-regular.woff') format('woff'),
       url('fonts/Open_Sans/Open-Sans-regular.ttf') format('truetype'),
       url('fonts/Open_Sans/Open-Sans-regular.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Exo2';
  font-weight: 900;
  font-style: normal;
  src: url('fonts/Exo2/Exo2-VariableFont_wght.ttf') format('truetype');
}

body {
	margin: 0;
	font-size: 1rem;
	font-family: OpenSans, Arial, Helvetica, sans-serif;
}

h1 {
	font-family: Exo2, OpenSans, Arial, Helvetica, sans-serif;
}

#theVideo {
	position: fixed;
	min-width: 100vw;
	min-height: 100vh;
	z-index: -10; /* Makes video a background layer */
	top: 0;
	left: 0;
}

.flex-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	height: auto;
}

.content {
	width: 50vw;  /* Content spans half the screen */
	min-width: 210px; /* But will never go below 210px (mobile-friendly) */
	margin-top: 2rem;
	margin-bottom: 2rem;
	padding: 2rem;
	background-color: rgba(0, 0, 0, 0.5);
	color: rgb(240, 240, 240);
}

a {
	color: rgb(240, 240, 240);
	text-decoration: underline;
}

a:hover {
	color: rgb(240, 240, 240);
	text-decoration: none;
}

a:visited {
	color: rgb(240, 240, 240);
	text-decoration: underline;
}

#play-pause-btn {
	position: fixed; /* Play/pause button in fixed position */
	bottom: 0; /* Absolute bottom */
	left: 0; /* Absolute left */
	margin: 0.5rem;
	padding: 0.7rem;
	background: #000;
	color: #fff;
}