@font-face {
  font-family: spacegrotesk;
  src: url(fonts/SpaceGrotesk-VariableFont_wght.ttf);
}

@font-face {
  font-family: inconsolata;
  src: url(fonts/Inconsolata-VariableFont_wdth,wght.ttf);
}

@font-face {
  font-family: sourcesans3;
  src: url(fonts/SourceSans3-VariableFont_wght.ttf);
}

* {
	box-sizing: border-box;
	color: #242325;
	font-family: sourcesans3;
}

.center-div{
	margin: auto;
	width: 500px;
	background-color: red;
}

a:link {
	color: #B82424;
}

a:visited {
	color: #B82424;
}

a:hover {
	color: #FF1C1C;
}

h1 {
	font-size: 1.7em;
}

h2 {
	font-size: 1.3em;
}

h3 {
	font-size: 1em;
}

html {
	height: 100%;
	background-color: #EBE4E8;
}

body {
	display: flex;
}

header {
	max-height: 90vh;
	max-width: min(300px, 30vw);
	position: sticky;
	top: 0;
}

.main-vid {
	max-width: 80%;
	display: flex;
	flex-wrap: wrap;
	overflow: scroll;
	flex-direction: row;
	padding: 0;
	margin: auto;
}

.main-text {
	max-width: 80%;
	padding: 0;
	margin: auto;
}

.bio-text {
	max-width: 600px;
	margin: 40px;
}

video {
	max-width: min(400px, 50vw);
}


span.spamprotection {
	display: none;
}

.prevnext {
	width: 100%;
	text-align: center;
}

.menu-icon {
	height: 20px;
}