@font-face {
	font-family: IBM Plex Mono;
	src: url(./static/fonts/ibmplexmono.ttf);
}

* {
	font-family: IBM Plex Mono;
}

body {
	width: 90vw;
}

h1 {
	font-size:25px;
}

h2 {
	font-size:20px
}

video {
	size: 100%;
	max-width: 720px;
	max-height: 720px
}

@keyframes lightmix {
	0% { color: #3E78B3; }
	25% { color: #B38F90; }
	75% { color: #91B38F; }
	100% { color: #3E78B3; }
}

@keyframes rainbow {
	0% { color: #FF4040; }
	40% { color: #FFFF40; }
	60% { color: #40FFFF; }
	80% { color: #4040FF; }
	100% { color: #FF40FF; }
}

#logo {
	font-size:30px;
	animation: lightmix 10s ease-in-out infinite;
	text-decoration:none;
}

#welcome-heading {
	animation: rainbow 0.5s steps(2) infinite;
}

.nav {
	display: inline-block;
	padding: 20px;
	width: 100%;
}

.nav a {
	float: left;
	display: block;
	text-align: center;
	padding: 10px;
	font-size: 20px;
	vertical-align: middle;
	line-height: 30px;
	color: black;
	text-decoration: none;
}

.text-section {
	display: inline-block;
	padding: 15px;
	width: 90%;
	position: relative;
	left: 20px;
	box-shadow: -5px 0px 0px -4px #3E78B3;
}