@font-face {
	font-family: "AlteHaasGrotesk";
	src: url("/fonts/AlteHaasGroteskRegular.ttf");
}

@font-face {
	font-family: "AlteHaasGrotesk";
	src: url("/fonts/AlteHaasGroteskBold.ttf");
	font-weight: bold;
}

body {
	margin: 0;
	padding: 0;
	width: 60%;
	margin: auto;
	padding-bottom: 200px;
	font-family: AlteHaasGrotesk, serif;
}

@media (max-width: 800px){
	body {
		width: 90%;
		font-size: 18px;
	}
}

hr {
	height: 70vh;
	border: none;
}

h1, h2 {
	
	margin-top: 20vh;
	margin-bottom: 20vh;
}

.logo {
	position: fixed;
	width: 80px;
	left: 10px;
	top: 10px;
}

img {
	width: 100%;
}

figure {
	margin: 0;
}

figcaption {
	font-size: 0.6em;
	font-style: italic;
}

iframe {
	width: 100%;
	height: 60vh;
}

blockquote {
	border-left: 1px solid black;
	padding-left: 4px;
}

.notes {
	font-size: 0.9em;
	background-color: #eee;
	padding: 10px;
}

.invisible {
	display: none;
}

button {
	position: fixed;
	left: 10px;
	bottom: 10px;
	background-color: white;
	border-radius: 500px;
	border-width: 1px;
}