html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
background-image:url(paragraphtxt.png);
display: flex;
flex-direction: column;
background-color:#1d1f1c;
color: #000000;
margin: 0;
padding: 0;
font-family:Arial,Helvetica,sans-serif;
}

table {
border: 4px solid #7F7F7F;
border-collapse: collapse;
}

td{
padding: 0.5em;
border: 1px solid #000000;
text-align: center;
}

th{
padding: 0.5em;
border: 1px solid #3399CC;
}

header{
background-color:#1d1f1c;
background-image:linear-gradient(to bottom, #696969, #1d1f1c);
color: #FFFFFF;
height: auto;
text-align: center;
padding-top: 30px;
padding-bottom: 20px;
}

header a{text-decoration: none; color: #FFFFFF;}

h1 {
margin-bottom: 0;
text-shadow: 4px 4px 4px #B8860B;
font-size: 2em;
font-family:Georgia,"Times New Roman",serif;
margin-top: 0;
}

nav {
background-color: #DAA520;
background-image:radial-gradient(#DAA520, #1d1f1c);
padding: 12px 0;
display: flex;
justify-content: center; /* this was looked up, and display flex, to make nav bar look nicer :) */
gap: 15px;
}

nav a {
text-decoration: none;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;  
letter-spacing: 1px;
}

aside {  display: none; padding: 1em;}

img { max-width: 100%; height: auto; }
@media (min-width: 38em) {
	     aside { display: block; }
	footer { grid-row: 4 / 5; grid-column: 1 / 3; }
	h1 {margin-bottom: 0;
		text-shadow: 4px 4px 4px #B8860B;
		font-size: 3em;
		font-family:Georgia,"Times New Roman",serif;
		margin-top: 0;
}
	nav a {text-decoration: none;
		font-weight: bold;
		font-size: 1em;
		text-transform: uppercase;  
		letter-spacing: 1px;
}
#librarydiv {margin: 0 0 1em 0;}
#librarydiv img{display: none;}
}

@media (min-width: 65em) {
		  aside { display: block; }
	footer { grid-row: 3 / 4; grid-column: 1 / 4; }
	h1 {margin-bottom: 0;
		text-shadow: 4px 4px 4px #B8860B;
		font-size: 5em;
		font-family:Georgia,"Times New Roman",serif;
		margin-top: 0;
}
	nav a {text-decoration: none;
		font-weight: bold;
		font-size: 1em;
		text-transform: uppercase;  
		letter-spacing: 1px;
}
#librarydiv img{display: block; width: 35%; max-width:800px; float: right; margin: 0 0 1em 1.25em;}
}




nav a:link{
color: #000000;
text-decoration: none;
font-weight: bold
}

nav a:visited{
color: #454545;
text-decoration: none;
font-weight: bold
}

nav a:hover{color: #DAA520;}

figure {}
figcaption {text-align: center; font-family: Arial, Helvetica, sans-serif;}



h2{color: #B8860B;
font-family:Georgia,"Times New Roman",serif;
padding: 0px 20px 0px 20px;
}

h3{color: #DAA520;
font-family:Georgia,"Times New Roman",serif;
padding: 0px 20px 0px 20px;
}

footer{
background-color:#1d1f1c;
color: #FFFFFF;
border-top: 5px solid #DAA520;
font-style: italic;
text-align: left;
font-family:Georgia,"Times New Roman",serif;
padding: 20px;
}

label{
float: left;
display: block;
text-align: right;
width: 120px;
padding-right: 1em;
}

input{
display: block;
margin-bottom: 0.5em;
}

textarea{
display: block;
margin-bottom: 0.5em;
}

main{
flex: 1;
background-color: #FFFFFF;
display: block;
padding:0;
}

p{
padding: 0px 20px 0px 20px;
}

#textblock{
text-align: center;
background-color: #DAA520;
color: #FFFFFF;
padding: 0;
margin: 0;
}

#textblock h1{
color: #FFFFFF;
}

#productselect {display: flex; flex-direction:row; flex-wrap: wrap; justify-content: center; align-items: flex-start;  }
#productselect figure{float:left; width:225px;}
#productselect	figcaption{background-color: #DAA520; font-size: 2em;}
#productselect	figcaption:hover{background: #FAFAD2;}
#productselect	figure a{ color: #000000;}