* {
	margin:  0px;
	padding:  0px;
	box-sizing: border-box;
}

body {
	font-family: monospace, serif, Helvetica, sans-serif;
	color: rgb(255, 255, 255);
}

p, li, figcaption {
	font-size:  16px;
	line-height: 30px;
}

header {
	padding-top: 40px;
	padding-bottom: 40px;
}

footer {
	padding-top: 50px;
	padding-bottom:60px
}

/* adjusting spacing */

#center {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

#row {
	display:flex;
	justify-content: space-between;
	padding-left: 20px;
	padding-right: 20px;
}

#box {
	margin:10px;
	width:250px;
	height:250px;
}

#box figcaption {
	opacity: 0;
}

#box:hover {
	border-style: inset;
}

#box:hover figcaption {
	opacity: 100;
	height:10px;
}

#box:hover img {
	opacity:0;
}

#ornament {
	padding-left: 5px;
	padding-right: 5px;
}

#ornament + span {
	padding-left: 10px;
	padding-right: 10px;
}

h1 {
	margin-bottom:  15px;
}

figcaption {
	height:250px;
	width: 250px;
	position:relative;
	top:-250px;
	padding: 10px;
}

h3 {
	margin-top:  20px;
}

ul, ol {
	margin-left: 20px;
}

img {
	max-width: 100%;
	height:  auto;
}

/* uncomment the code below to set the grid */

/*#grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

body {
	overflow: hidden;
}

.scroll {
	padding:  20px;
	overflow: scroll;
	height: 100vh;
}

#left-column {
}

#right-column {
	background: #333;
}*/