/*
	modern.css
	A light visual refresh layered on top of main_mandychen.css (HTML5 UP "Prologue").
	Flat backgrounds, Inter typeface, card-style paper entries, solid sidebar.
	To revert to the original look, remove the <link> to this file in index.html.
*/

:root {
	--text: #2b2f33;
	--muted: #6b7076;
	--heading: #15181b;
	--accent: #2f6f9f;
	--line: #e6e8eb;
	--card: #ffffff;
	--sidebar: #16191c;
}

/* Typography */

	body, input, textarea, select {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		font-size: 17px;
		font-weight: 400;
		line-height: 1.65;
		color: var(--text);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	h1, h2, h3, h4, h5, h6 {
		color: var(--heading);
		font-weight: 600;
		line-height: 1.3;
	}

	h2 {
		font-size: 1.75em;
		letter-spacing: -0.015em;
	}

	h3 {
		font-size: 1.15em;
	}

	strong, b {
		font-weight: 600;
		color: inherit;
	}

	p, ul, ol, dl, table {
		margin-bottom: 1.25em;
	}

	a {
		color: var(--accent);
		border-bottom: 1px solid transparent;
		transition: color 0.2s ease, border-bottom-color 0.2s ease;
	}

		a:hover {
			color: var(--accent);
			border-bottom-color: currentColor;
		}

/* Layout */

	.container {
		width: auto;
		max-width: 920px;
		padding: 0 2.5em;
	}

	#main > section {
		background-image: none;
		box-shadow: none;
		text-align: left;
		padding: 4.5em 0;
	}

		#main > section.two,
		#main > section.three,
		#main > section.four {
			background-color: #fff;
			border-top: 1px solid var(--line);
		}

		#main > section > .container > header {
			margin: 0 0 1.5em 0;
		}

/* Cover (intro) */

	#main > section.one.cover {
		text-align: center;
		padding: 7em 0;
		background-color: #81918E;
		background-image: url("../../images/magellan_cropped.JPG");
	}

		#main > section.one.cover > .container > header {
			margin: 0;
		}

		#main > section.one.cover h2.alt {
			color: #fff;
			text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
			font-size: 1.6em;
			font-weight: 500;
			line-height: 1.4;
			letter-spacing: 0;
		}

		#main > section.dark p {
			color: rgba(255, 255, 255, 0.9);
			text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
		}

		#main > section.dark a {
			color: #fff;
			border-bottom-color: rgba(255, 255, 255, 0.4);
		}

			#main > section.dark a:hover {
				border-bottom-color: #fff;
			}

		#main > section.dark p.updated {
			font-size: 0.85em;
			color: rgba(255, 255, 255, 0.65);
			margin-bottom: 0;
		}

/* Cards (papers, tools, notes) */

	.item {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 12px;
		box-shadow: none;
		padding: 1.5em 1.5em 1.35em 1.5em;
		margin-bottom: 1.5em;
	}

		.item header {
			background: transparent;
			padding: 0;
			margin: 0 0 1em 0;
			font-size: 1em;
		}

			.item header h3 {
				font-size: 1.15em;
				margin: 0;
			}

			.item header p {
				margin: 0.35em 0 0 0;
			}

			.item header p.meta {
				font-size: 0.9em;
				color: var(--muted);
			}

		.item > p {
			font-size: 0.95em;
			margin: 1.1em 0 0 0;
		}

			.item > p + p {
				margin-top: 0.75em;
			}

		.item.note p {
			margin: 0;
		}

			.item.note p + p {
				margin-top: 0.75em;
			}

		/* Tools: image first, then title + text */
		.item > .image.fit + header {
			margin: 1.1em 0 0 0;
		}

			.item > header p:not(.meta) {
				font-size: 0.95em;
				margin-top: 0.5em;
			}

	.image.fit {
		border: 0;
		border-radius: 8px;
		overflow: hidden;
		margin: 0;
	}

		.image.fit img {
			display: block;
			width: 100%;
			border-radius: 8px;
		}

		.image.fit:after {
			background: rgba(18, 22, 26, 0.55);
		}

		.image.fit:before {
			z-index: 1;
			top: 50%;
			transform: translateY(-50%);
			text-align: center;
			font-weight: 500;
		}

/* Sidebar */

	#header {
		background: var(--sidebar);
		box-shadow: none;
	}

		#header .bottom {
			border-top: 0;
			box-shadow: none;
		}

		#header .icons a {
			color: rgba(255, 255, 255, 0.4);
		}

			#header .icons a:hover {
				color: #fff;
			}

	#logo h1 {
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	#logo p {
		color: rgba(255, 255, 255, 0.55);
	}

	#logo .image.avatar48 {
		background: transparent;
		border-radius: 50%;
		overflow: hidden;
	}

		#logo .image.avatar48 img {
			border-radius: 50%;
		}

	#nav ul li a {
		color: rgba(255, 255, 255, 0.6);
	}

		#nav ul li a:hover {
			color: #fff;
		}

		#nav ul li a span:before {
			color: rgba(255, 255, 255, 0.35);
		}

		#nav ul li a.active {
			background: rgba(255, 255, 255, 0.06);
			box-shadow: none;
			color: #fff;
		}

			#nav ul li a.active span:before {
				color: #8fc1e3;
			}

/* Footer */

	#footer {
		background: #fff;
		border-top: 1px solid var(--line);
		box-shadow: none;
		color: var(--muted);
		font-size: 0.85em;
		padding: 2.5em 0 3em 0;
	}

/* Responsive */

	@media screen and (max-width: 1320px) {

		body, input, textarea, select {
			font-size: 16px;
		}

	}

	@media screen and (max-width: 960px) {

		.container {
			padding: 0 1.5em;
		}

		#main > section {
			padding: 3em 0;
		}

		#main > section.one.cover {
			padding: 5em 0;
		}

		.item {
			padding: 1.25em;
			border-radius: 10px;
		}

	}

	@media screen and (max-width: 736px) {

		body, input, textarea, select {
			font-size: 15px;
		}

		.container {
			padding: 0 1.25em;
		}

		#main > section {
			padding: 2.5em 0;
		}

		#main > section.one.cover {
			padding: 4em 0;
		}

			#main > section.one.cover h2.alt {
				font-size: 1.3em;
			}

		.item {
			padding: 1em;
		}

	}