html {
	height: 100.1%;
	overflow-y: scroll;
}
body {
	color: black;
        padding-bottom: 5em;
        padding-top: 64px;
        font-family: sans-serif;
        font-size: 14px;
        line-height: 1.4;
}
@media only screen and (min-width: 50em) {
        body { font-size: 16px; }
}
#title {
	text-align: center;
	padding: 0.7em 2rem;
        font-size: 1.8em;
        margin: 0;
        vertical-align: middle;
}
	#title a {
                color: black;
                vertical-align: middle;
        }
	#title a:hover { text-decoration: none; }
        #title .logo {
                display: none;
                margin: 0 1em;
        }
        @media only screen and (min-width:70em){
                #title .logo { display: inline-block; }
        }
                #title .logo img {
                        height: 54px;
                        width: auto;
                }
                #title .logo:last-child img {
                        height: 80px;
                }
                #title .logo:hover img {
                        opacity: 1;
                }
#subtitle {
	text-align: center;
	padding-bottom: 0.7em;
        margin: 0;
        margin-top: -0.3em;
        font-size: 1.5em;
	color: #a00;
}

#menu {
	text-align: center;
	margin: 1em 0 4em;
    font-size: 130%;
}
	#menu a {
		display: block;
		text-decoration: none;
                padding: 0.7em 0.3em;
		color: #a41f35;
	}
        @media only screen and (min-width:38em){
                #menu a {
                        display: inline-block;
                        font-weight: bold;
                        padding: 0.7em 1em;
                }
        }
	#menu a:hover {
                background: #a41f35;
                color: white;
	}

#content {
	max-width: 46em;
	margin: 0 auto;
        padding: 0 2em;
}
	#content h1 {
		padding-top: 1em;
                padding-bottom: .5em;
		font-size: 140%;
        font-weight: bold;
	}
                #content h1:first-of-type {
                        padding-top: 0;
                        margin-top: 0;
                }
	#content h2 {
		font-size: 120%;
		padding-top: .5em;
        font-weight: bold;
	}
		#content h1 + h2 {
			padding-top: 0;
		}
	#content h3 {
		font-size: 100%;
		font-weight: bold;
	}
#content.software ul { }
	#content.software li a {
		display: block;
	}
	#content.software li + li {
		margin-top: .5em;
	}
#content.people ul:last-of-type {
        column-count: 2;
        list-style-type: none;
}

#projects {
	padding: 1em 0 2em;
}
.project {
	clear: left;
	padding-left: 3em;
}
	.project::before {
		content: "❄";
		margin-left: -2em;
		margin-top: -.2em;
		float: left;
		width: 2em;
		text-align: center;
		font-size: 2em;
	}
	.project.active::before {
		content: "✓";
		content: attr(data-icon);
	}
	.project.active {
		opacity: 1;
	}
	.project + .project {
		margin-top: 2em;
	}