html {
	--pillar-width: 10em;
	background:  
		repeat-y top right calc(40vw - calc(var(--pillar-width) / 2) - 200px) / var(--pillar-width) url("pillar_right.png"),
		repeat-y top left calc(40vw - calc(var(--pillar-width) / 2) - 200px) / var(--pillar-width) url("pillar_left.png"),
		no-repeat top left / calc(25vw - 10px) url("/static/top_left_graphics.png") fixed,
		no-repeat top right / calc(25vw - 10px) url("/static/top_right_graphics.png") fixed,
		repeat-y right / calc(40vw - 200px) url("/static/bobs.png") fixed,
		repeat-y left / calc(40vw - 200px) url("/static/bobs.png") fixed,
		repeat center  / 1000px url("/static/space.jpg") fixed;
}

body {
	font-size: 18px;
	margin: 0 auto;
	width: calc(20% + 280px);
}
header {
	position: sticky;
	top: 0;
	z-index: 1;
}

.TopNavBar {
	margin-top: 10px;
	>a {
		background: #3338;
		color: #FFF;
		padding: 0.25em;
		text-decoration: none;
		&:hover {
			mix-blend-mode: color-dodge;
			text-decoration: underline;
		}
	}
}

main {
	/* background: #FFFB; */
	color: #FFF;
	mix-blend-mode: difference;
	font-size: 22px;
	text-shadow: 1px 1px 2px #888;
}

#circle {
	width: calc(120% + 100px);
	margin: 0 calc(-5% - 25px);
	max-height: 73vh;
}