html {
	height: 100.1%;
	overflow-y: scroll;
}
body {
	color: black;
        padding-bottom: 5em;
        font-family: sans-serif;
        font-size: 14px;
        line-height: 1.4;
}
@media only screen and (min-width: 50em) {
        body { font-size: 16px; }
}
#logo-container {
    padding: 2rem;
    text-align: center;
}
#logo {
    max-width: 500px;
}
#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;
    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;
                }
        }
    @media (hover: hover) and (pointer: fine) {
        #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;
	}