@charset "UTF-8";

body{
	font-size: 20px;
	line-height: 24px;
	font-family: "Unica One", Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	color: #442D1C; 
	margin: 0; 
	padding: 0;
	background-color: #6FA9BB;
}

#logo{
	width:100px;
	margin-right:20px; 
	margin-bottom:20px;
	padding-top: 5px;
}

header{
	display: flex;
	align-items: center;
	justify-content: space-between; 
	background-color: #79A151;
	padding: 5px 20px;
	margin: 0px;
	box-sizing: border-box;
	
}

nav{
	text-transform: uppercase;
	padding: 16px; 
	margin: 0;
	box-sizing: border-box;
	
	
}

nav li{
	display: inline;
	padding: 48px; 
}

main{
	background-color: #d5d3cc;
	padding: 10px;
	max-width: 68%;
	min-width: 68%;
	margin: 0 auto;
	box-sizing: border-box;
	float: left;
	min-height: 300px;
}

.fullWidthMain{
	width: 100% !important;     
    max-width: 100% !important;
    float: none;
    display: block;
}

.message-bar {
width: 100%;
margin: 0;
padding: 1em;
color: #fff;
background-color: #ff9900;
text-align: center;
}

h1{
	color: #6FA9BB;
	font-size: 32px;
	line-height: 24px;
	font-weight: 900;
}

h2{
	color: #6FA9BB;
	font-size: 32px;
	line-height: 24px;
	font-weight: normal;
}

hr{
	border: none; 
	background-color: #79A151;
	height: 5px;
	width: 15%;
}

#hrFull{
	border: none; 
	background-color: #79A151;
	height: 5px;
	width: 100%;
}

a{
	text-decoration: underline;
}

a:link{
	color:#d5d3cc;
}

a:visited{
	color: #F3C3C5;
}

a:focus{
	color:#503935;
}

a:hover{
	color:#6FA9BB;
}

a:active{
	color:#FFB40F;
}


#wrapper{
	max-width: 1000px;
	margin: 0 auto;
	
}

#homeContentWrapper{
	display: flex;
	align-items: flex-start; 
	gap: 20px;
}

#homeHeader{
	text-align: center;
	
}


#bookPicR{
	margin-right: 20px; 
	margin-bottom: 20px;
}

#picR{
	float:left; 
	margin-right: 20px; 
	margin-bottom: 20px;
	max-width: 300px; 
	height: auto;
}

#sillyG{
	float: left;
	margin-right: 20px;
	margin-bottom: 20px; 
	max-width: 550px;
	height: auto;
}

.archiveGrid{
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 15px;
	
}

.archiveGrid img{
	width: 100%;
	height: auto;
	display: block;
}

.storeGrid{
	display: grid;
	grid-template-columns: 32% 32% 32%; 
	gap: 2%;
}

.productCard{
	text-align: center;
}

.storeGrid img{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 15px auto;
}

/* Table Style */
table{
	width: 100%;
	cellspacing: 0;
	
}

th{
	background-color: #d3b6d3; 
}

tr{
	background-color: #F7E3B1;
}

td, tr, th{
	border: 3px solid #d3b6d3;
	padding: 1em;
	vertical-align: top;
	text-align: left;
}
table caption{
	text-transform: uppercase;
}

/* form styles */ 
label{
	text-align: left;
	padding-right: 0.5em;
	width: 25%;
}

.formField{
	width: 60%;
	padding: 0.5em;
	box-sizing: border-box;
}

aside{
    float: right;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width: 30%;
	background-color: #d5d3cc;
	padding: 20px;
	margin: 0 auto;
}

aside p {
    margin-bottom: 25px;
    font-size: 24px;
   
}

#connect {
    display: inline-block;
    padding: 18px 35px;
    background-color: #C65C69;
    text-transform: uppercase;
    font-weight: 900;
    border-radius: 50px; 
   }

.purchaseButton{
    display: inline-block;
    padding: 18px 35px;
    background-color: #C65C69;
    text-transform: uppercase;
    font-weight: 900;
    border-radius: 50px; 
   }


footer{
	background-color: #79A151;
	width: 100%;
	clear: both;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5px;
	box-sizing: border-box;
}

footer p{ 
	margin: 20px;
}

/* 768px */ 
@media screen and (max-width:48em){
	main{
		width:100%;
		max-width: 100%;
		float: none;
	}
	
	body{
		width:100%;
		max-width: 100%;
		float: none;
	}
	
	aside{
		width:100%;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	nav li{ 
		padding: 10px; 
		display: block;
	}
	
	footer{
		width: 100%;
		max-width: 100%; 
		float: none;
		clear: both;
	}
}

/* 640px */ 
@media screen and (max-width: 40em){
	#sillyG, #picR, #bookPicR{
		width: 100%;
	}
}

/* 320px */ 
@media screen and (max-width:20em)
{
	main{
		padding: 0.125em 0.5em 0.25em;
	}
	aside{
		padding: 0.125em 0.5em 0.25em;
	}
	
	body{
		padding: 0.125em 0.5em 0.25em;
	}
}