#videoBackground {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.content {
  position: relative;
  top: 0;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  height: 100%;
  padding: 1em;
}

body {
	font-family: "Roboto Condensed", sans-serif;
	background-color: #000000;
}

#logo {
	text-align: center;
	  animation: flicker 1s infinite alternate;

}
#logo img {
	width: 50%;
	height: auto;
}

#links {
	text-align: center;
}

#links img {
	height: 4em;
}

#links a {
	padding-left:1em;
	padding-right:1em;
	opacity: .5;
	padding-top: 10em;
}

#links a:hover {
	opacity: 1;
}

#bio {
	text-align: left;
	margin: 0 auto;
	width: 75%;
}

.quote {
	color: #cccccc;
	font-size: .8em;
	font-style: italic;
	padding-bottom: .2em;
	padding-top: 1em;
}

.cite a {
	text-decoration:none;
	font-size: .8em;
	color: #bfbfbf;
}
.cite a:hover {
	color: #ffffff;
}

#videos {
	display: flex;
	flex-wrap: wrap;
	padding-top: 2em;
	justify-content: center;
}

.video {
	padding: 1em;
	float: center;
	width: 25%;
}

.video img {
	width: 100%;
}

.video a {
	text-decoration: none;
}

.videoTitle {
	text-align: left;
	color: #cccccc;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0.8;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0.95;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0.9;
  }
}


@media (max-width: 768px) {
	#logo img {
		width: 80%;
		height: auto;
	}
	
	#links img {
		height: 2em;
	}
	.video {
		width: 40%;
	}
}