* {
	margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

body {
	background-color: #8ecae6;
	font-family: 'sans-serif';
	padding: 12px;
	padding-bottom: 10000px;
}

h1 {
	text-align: center; font-weight: normal; font-size: 4em;
	background-color: #219ebc; padding: 8px;
	margin-top: 8px;
}

h1 span {
	color: #ffba08; font-weight: bold;
	text-shadow: 2px 2px #222;
}

h1 + p {
	text-align: center; font-size: 3em; letter-spacing: .5em;
	color: #023047;
	background-color: #219ebc; padding: 8px;
}

figure.tr-photo {
	width: 300px; float: right; margin: 12px 0px 24px 24px;
}

figure img {
	width: 100%;
}

nav {
	margin-top: 48px;
}

nav a {
	display: block; margin-bottom: 8px;
	font-size: 1.4em;
	text-decoration: none;
}

a:hover {
	color: #ffba08;
}

section#main {
	display: flex; flex-flow: row wrap;
	justify-content: center;
}

section#main article {
	flex: 0 0 40%;
	background-color: #222; color: #EEE;
	margin: 24px; padding: 8px;
}

article#asn2Box {
	min-height: 200px;
}


article h2 {
	text-align: center; color: #ffba08;
}

article.regular {
	background-color: #219ebc ;
	margin-top: 8px; padding-bottom: 8px;
}

article h3 {
	text-align: left; color: #ffba08;
	margin-bottom: 5px;
}

p.output {
	background-color: burlywood;
	height: 100px; width: 150px;
	margin-left: 8px;
	border: 4px solid black;
}

div.codepenlogo {
	background-image: url(../images/codepenlogo.png);
	background-size: cover;
	transition: transform .2s ease-in;
	width: 100px; height: 100px;
}

button, input[type=submit], input[type=button] {
    font-size: 1.4em; font-weight: bold;
	margin: 8px; padding: 12px;
	background-color:lightslategray;
    border: 4px solid black;
}

footer {
	position: fixed;
	width: 100%;
	background-color: #219ebc;
	color: white;
	text-align: center;
	bottom: 0;
	left: 0;
	font-size: 50px;
	
}

ul {
	padding-left: 20px;
}

table {
	border-collapse: collapse;
}

table th, table td {
	border: 2px solid sandybrown;
	padding: 1em;
	text-align: left; vertical-align: top;
}

p.ptext {
	background-color: rgb(255, 246, 122);
	padding-top: 20px;
	padding-bottom: 20px;

}

div.stringboxes {
	padding-bottom: 50px;
}

#placeholder {
	height: 100px;
	width: 100px;
	padding: 30px;
	border: 1px solid gray;
	border-radius: 10px;  
	font-size:40px;
	background-color: white;
  }
