p {
	font-family:Arial;
	/*padding to clear the margins but not have too much space between paragraphs*/
	padding-left:20px;
	padding-right:20px;
}
h1, h2, h3 {
	font-weight:normal;
	margin:auto;
	font-family:Rockwell;
}
h1 {
	font-size:300%;
	margin-top:20px;
}
h3 {
	text-align:center;
	text-transform:uppercase;
}
body {
	max-width:750px;
	margin:auto;
	font-size:16px;
}
hr {
	background:lightslategrey;
	padding:1px;
}
#portfolio_proper {
	max-width:750px;
	min-height:400px;
}
.showcase {
	display:inline-block;
	width:45%;
	padding:2.5%;
	margin:auto;
	vertical-align:top;
}
.showcase:nth-child(odd):last-child {
	display:block;
}
.showcase img {
	display:block;
	margin:auto;
	border:1px solid black;
}
.showcase a {
	text-align:center;
	font-weight:bold;
	text-decoration:none;
	margin-bottom:20px;
	color:darkblue;
}
.showcase a:visited {
	color:lightslategray;
}
.showcase span {
	display:block;
	margin-bottom:20px;
	margin-top:10px;
}
#brand {
	text-align:center;
}
#resume {
	border:1px solid darkblue;
	border-radius:4px;
	padding:5px;
	color:darkblue;
	font-weight:bold;
	text-align: center;
    width: 100px;
    display: block;
    margin: auto;
}
}
#resume:hover, #resume:focus {
	text-decoration:none;
}
form {
	padding:20px;
}
input, textarea {
	font-family:Fondamento;
	font-size:16px;
	width:90%;
	max-width:500px;
}
textarea {
	height:500px;
}
label {
	font-family:MedievalSharp;
    width:90%;
    max-width:500px;
}
form * {
    margin:auto;
    display:block;
}
form button {
    /*styles taken from Bootstrap */
	color: #333;
    background-color: #fff;
    border-color: #ccc;
	padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid black;
    border-radius: 4px;
}
button:disabled {
	visibility:hidden;
}
#msg {
	font-weight:bold;
	width:90%;
	max-width:500px;
	margin:auto;
	line-height:2.5;
}
@media screen and (max-width: 375px) {
	h2 {
		text-align:center;
		font-size:85%;
	}
	h1 {
		font-size:200%;
	}
}
@media screen and (max-width:425px) {
	.screenShot {
		width:90%;
		max-width:150px; /*so the pics don't blur because they stretched too far.*/
		/*the rest of the code for this class will place the pics atop the description to avoid awkward wraparounds in the mobile screen.*/
		float:none;
		display:block;
		margin:auto;
	}
	.showcase {
		/*changes the showcases to stack on top of each other rather than side by side, so they aren't too awkward to read and the screen shots are still a decent size.*/
		display:block;
		padding:0;
		width:90%;
	}
	.showcase img {
		margin-top:20px;
	}
}
@media screen and (max-width:800px) {
	/*the border needs breathing room at smaller sizes, otherwise it brushes against the edge of the screen and everything looks too crowded.*/
	body {
		margin:7.5px;
	}
}