body {
	background-color: #f9f9f9;
	margin: 0;
	background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 380 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='160' height='90' x='5' y='5' rx='2' style='fill:%23e3e3e3;'/%3E%3Crect width='200' height='20' x='175' y='5' rx='2' style='fill:%23e3e3e3;'/%3E%3Crect width='120' height='20' x='175' y='35' rx='2' style='fill:%23e3e3e3;'/%3E%3C/svg%3E");
	background-repeat: repeat-y;
	background-size: 380px auto;
	background-position: calc(100vw - 400px) 72px;
	height: 100vh;
	padding-top: 72px;
	box-sizing: border-box;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.7);
	transition: .5s;
	font: 25px / 1.5 'Roboto', sans-serif; }
	body::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 54px;
		background-color: white;
		box-shadow: 0 18px 0 #f9f9f9; }
	body::after {
		content: "";
		width: calc(100% - 440px);
		max-width: 900px;
		height: 200px;
		margin: 20px 0 0 20px;
		display: block;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 850 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='fill:%23e3e3e3;'%3E%3Crect width='400' height='20' x='5' y='5'/%3E%3Crect width='200' height='20' x='5' y='40'/%3E%3Ccircle cx='30' cy='120' r='25'/%3E%3Crect width='200' height='20' x='65' y='95'/%3E%3Crect width='200' height='20' x='65' y='130'/%3E%3Crect width='140' height='40' x='700' y='100'/%3E%3Ccircle cx='825' cy='50' r='10'/%3E%3Ccircle cx='785' cy='50' r='10'/%3E%3Ccircle cx='745' cy='50' r='10'/%3E%3Ccircle cx='705' cy='50' r='10'/%3E%3Ccircle cx='665' cy='50' r='10'/%3E%3C/g%3E%3Cline x1='5' y1='82' x2='845' y2='82' style='stroke:%23e3e3e3;stroke-width:1px;stroke-linecap:round;'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: 100% auto; }

#svg-definitions {
	display: none; }

#youtubepls-logo {
	color: red;
	position: fixed;
	top: 18px;
	left: 24px;
	height: 18px;
	width: 18px; }

#vrugtehagel-logo {
	color: #e3e3e3;
	position: fixed;
	top: 9px;
	right: 18px;
	height: 36px;
	width: 36px;
	z-index: 3;
	transition: .5s; }

main {
	position: relative;
	width: calc(100% - 440px);
	height: calc((100vw - 440px) / 16 * 9);
	background-color: black;
	margin: 5px 0 0 20px;
	overflow: hidden;
	transition: .5s;
	background-color: #e85656;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer; }
	main > * {
		z-index: 2; }

#video-background {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1; }

#quick-nav {
	position: absolute;
	bottom: 24px;
	right: 24px;
	font-size: .8em;
	transition: .5s .3s; }

#read-more, .download-button {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	display: inline-block;
	padding: 12px 30px;
	color: rgba(255, 255, 255, 0.8);
	border: none;
	cursor: pointer;
	border-radius: 4px;
	outline: none; }

.download-button {
	text-decoration: none;
	background: #cc0000;
	border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

#read-more {
	text-decoration: underline;
	background: none;
	margin-right: 8px;
	transition: .2s; }
	#read-more:hover {
		background-color: rgba(255, 255, 255, 0.1); }

header {
	font-size: 3em;
	font-weight: 900;
	transition: .5s;
	margin: 0; }
	header svg {
		display: inline-block;
		height: 1.5em;
		float: left;
		margin-right: .8ch; }

section {
	height: 0;
	opacity: 0;
	max-width: 600px;
	width: 90%;
	transition: height .5s 0s, opacity .3s; }
	section nav {
		margin-top: 64px;
		width: 100%;
		text-align: center;
		opacity: 0;
		transform: translateY(12px);
		transition: 0s; }
		section nav span {
			display: none; }

#github {
	color: inherit;
	padding: 12px 24px;
	border: 1px solid currentColor;
	box-shadow: -4px 4px 0 currentColor;
	position: absolute;
	bottom: 18px;
	left: 18px;
	font-size: .8em;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .2ch;
	opacity: 0;
	transform: translateY(12px);
	transition: .5s; }
	#github:hover {
		box-shadow: 0 0 0 3px currentColor; }

.not-chrome section nav span {
	display: block; }
.not-chrome .download-button {
	display: none; }

.full-mode {
	padding: 0; }
	.full-mode main {
		margin: 0;
		width: 100%;
		height: 100vh;
		cursor: initial; }
	.full-mode #vrugtehagel-logo {
		color: inherit; }
	.full-mode #quick-nav {
		transform: translateY(24px);
		opacity: 0;
		pointer-events: none;
		transition-delay: 0s; }
	.full-mode header {
		margin: 0 0 64px 0; }
	.full-mode section {
		opacity: 1;
		transition: height .5s, opacity .5s .3s; }
		.full-mode section nav {
			opacity: 1;
			transform: none;
			transition: .5s .8s; }
	.full-mode #github {
		opacity: 1;
		transform: none; }

@media (max-width: 1100px) {
	body {
		font-size: 20px; }
		body::after {
			width: unset;
			max-width: unset;
			margin: 20px 20px 0; }

	main {
		width: calc(100% - 40px);
		margin: 5px 20px 0;
		height: calc((100vw - 20px) / 16 * 9); } }
@media (max-width: 800px) {
	body {
		padding: 54px 0 0; }

	main {
		margin: 0;
		width: 100%;
		height: 56.25vw; }

	header {
		font-size: 2em; } }
@media (max-width: 650px) {
	body {
		font-size: 18px;
		background-size: 90vw auto;
		background-position: 5vw calc(61.25vw + 54px); }
		body::after {
			content: none; }

	main {
		box-shadow: 0 5vw 0 #f9f9f9; } }
@media (max-width: 500px) {
	body {
		font-size: 16px; }

	#quick-nav .download-button {
		display: none; } }
@media (max-width: 1100px) and (min-width: 651px) {
	body {
		background-image: none; } }
@media (min-width: 1340px) {
	body::after {
		margin-left: calc(33% - 442px); } }
@media (min-width: 1700px) {
	body {
		background-position: calc(50vw + 470px) 72px; }

	main {
		height: 709px;
		width: 1300px;
		margin: 5px 0 0 calc(50vw - 850px); } }


@keyframes sway1 {
	from {
		transform: none; }
	to {
		transform: rotate(-5deg) translateX(-1px); } }
@keyframes sway2 {
	from {
		transform: none; }
	to {
		transform: rotate(-2deg) translateY(1px); } }
@keyframes sway3 {
	from {
		transform: none; }
	to {
		transform: rotate(1deg) translateY(-0.8px); } }
@keyframes sway4 {
	from {
		transform: none; }
	to {
		transform: rotate(4deg) translateY(-0.7px); } }
#video-background path {
	fill: rgba(119, 30, 30, 0.4);
	transition: 1s; }

#video-background path:nth-child(1) {
	animation: 5s ease-in-out alternate infinite sway1; }

#video-background path:nth-child(2) {
	animation: 4s ease-in-out alternate infinite sway2; }

#video-background path:nth-child(3) {
	animation: 6s ease-in-out alternate infinite sway3; }

#video-background path:nth-child(4) {
	animation: 9s ease-in-out alternate infinite sway4; }

.full-mode #video-background path {
	opacity: 0.3; }