body {
	max-width: 100%;
	margin:0;
	display: flex;
	flex-direction: column;
	padding:0px;
	min-height: 100vh;
}

h1 {
	line-height: 50px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:0px;
	margin-bottom:0px;
}

h4 {
	margin: 0;
	padding: 0;
}

#page_container {
	padding-left: 50px;
	padding-right: 50px;
	height: 100%;
}

#hi {
	margin-top: 120px;
	margin-bottom: 65px;
}

#introduction {
	padding-top:0px;
	padding-bottom: 0px;
	margin-top:0px;
	margin-bottom:65px;
}

#nav {
	display: flex;
	flex-direction: row;
	font-weight: 600;
	justify-content: space-between;
}

li a {
	line-height: 38px;
	display:flex;
	font-size:23px;
}

#hidden_break {
	display:none;
}

ul {
	list-style-type: none;
	padding:0px;
	margin:0px;
}

li {
	font-weight: 600;
}

@media only screen and (max-width: 700px) {
	#hi {
		margin-top: 50px;
	}
	#nav {
		display:inline-block;
	}
	#hidden_break {
		display:block;
	}
	.centered {
		margin: 0px;
	}
}

@media only screen and (max-width: 600px)  {
	#page_container {
		padding-left: 20px;
		padding-right:20px;
		padding-top:20px;
		padding-bottom:60px;
	}
	#hi {
		margin-top: 0px;
		margin-bottom: 60px;
	}
	#introduction {
		margin-bottom: 60px;
	}
}

@media(any-hover: hover) and (any-pointer: fine) {
	a:hover {
		color: var(--highlight);
		transition: color ease-in-out .15s;
		cursor: pointer;
	}
}

/* Dark mode by default, use light mode when preferred */
@media (prefers-color-scheme: light) {
	:root {
		--text: #000000;
		--background: #ffffff;
		--highlight: #370fff;
	}
}