@charset "utf-8";


/*
   Author: Shane Molter
   Date:   2022-12-04
   Filename: styles.css
*/






/* HTML BODY HEADER SECTION */
html {
	height: 100%;
	margin: 0px auto;
	background-color: ivory;
	background: linear-gradient(300deg, blue, rgba(255,0,255,.5), purple);
	background-repeat: no-repeat;
    background-attachment: fixed;
	font-size: 20px;
}
img, object, embed, video {
	max-width: 100%;
}
body {
	min-height: 100%;
	width: 88.2%;	
	max-width: 1400px;
	padding-left: 1.0%;
	padding-right: 1.0%;
	margin: 0px auto auto auto;
	clear: none;
	float: none;
	color: rgb(0, 0, 80);
	background-color: white;
	font-family: Verdana, Geneva, sans-serif;
	-moz-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
	-webkit-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px,  rgba(31, 61, 31, 0.9) -20px 0px 25px;
	box-shadow: purple 20px 0px 25px,  purple -20px 0px 25px;
}

body > header > h1 {
	text-align: center;
}

body article h1 {
	font-size: 1.15em;
}

header img {
	float: none;
	width: 40%;
	margin: 0% 0% 0% 0%;
	
}

/* Heading Styles */
h1 {
   font-size: 2.5em;
   text-align: center;
   font-family: Quicksand, Verdana, Geneva, sans-serif;
	letter-spacing: 0.1em;
}

h2 {
   font-size: 1.5em;
   text-align: center;
   font-family: Quicksand, Verdana, Geneva, sans-serif;
	letter-spacing: 0.1em;
}


/* NAV STYLES */
nav {
	display: table;
	width: 100%;
	margin: 0 auto;
	float: none;
}



nav ul {
	display: table-row;
	margin: 0;
}

nav ul li a {
	color: #210;
	text-decoration: none;
	display: block;
	margin: 0px;
	padding: 5px;
	font-weight: bold;
}

nav ul li:last-of-type {
	margin-right: 0%;
}

nav ul li a:visited {
	color: #222;
}
nav ul li a:hover {
	background-color: #222;
	color: white;
}
nav ul li a:focus {
	outline: thin dotted;
}
nav ul li a:hover, nav ul li a:active {
	outline: 0;
}



/* HYPER LINK APPEARANCE */
a {
	color: #00e;
}
a:visited {
	color: #551a8b;
}
a:hover {
	color: #06e;
}
a:focus {
	outline: thin dotted;
}
a:hover, a:active {
	outline: 0;
}
.aside a:visited {
		color: purple	
}

/* FOOTER LAYOUT AND DISPLAY */

footer {
	text-align: center;
	font-size: 1.2em;
	margin-top: 4%;
	border-top: 3px solid rgba(128,98,26,1.00);
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	clear: both;
	padding-bottom: 20px;
}


/* ARTICLE LAYOUT AND DISPLAY */
article {
	width: 95%;
	float: none;
	margin: 0px auto;
	padding: 5px;
	text-align: left;
}


/* Audio and Video Player Styles */
audio, video {
	filter: drop-shadow(10px 10px 10px rgb(100, 0, 100)); 
	display: block; 
	margin: 0px auto; 
	width: 98%;
}

article img {
	float: left;
	max-width: 70%;
	margin: 0% 0% 0% 0%;
	padding: 10px 10px 10px 10px;
	border-radius: 15px;	
}

article video {
	padding: 15px 15px 15px 15px;
	
}

.clearfix:after {
  content:"";
  display:block;
  clear:both;
 }


/* ============================================= 
	Table Styling
   =============================================
*/
table.services { 
	background: white;
	border: 10px outset rgb(100, 0, 100); 
	border-collapse: collapse;
	font-size: 0.85em; 
	width: 100%;
}
table.services thead tr {
	height: 40px;
	background: rgb(238, 210, 238); 
	
}
.coats{
	text-decoration: underline;
	text-align: center;
	
}
	

table.services tbody tr {
	height: 25px;
	text-align: center;
	border: 1px solid gray;
}

table.services tbody tr:nth-child(even){
	background-color: rgb(240, 230, 250);
}
table.services tbody tr:nth-child(odd){
	background-color: rgb(255, 255, 255);
}

table.services tfoot {
	background: black; 
	color: white;
}

table.services caption {
	font-weight: 800;
	font-size: 32px;
	text-align: left;
	border: 5px outset rgb(100, 0, 100);
	background-color: rgb(225, 225, 225);
} 

col#firstCol {
	background: rgb(238, 210, 238); 
	width: 20%;
	text-decoration: none;
}

col.priceCol{
	background: rgb(255, 250, 255); 
	/* width: 16%; */
	width: 15%;
	
}



/****** FORM STYLES ******/
form#contact {
	display: flex; flex-flow: row wrap;
}

form#contact > fieldset {
	background-color: rgb(240, 220, 240); 
	border-radius: 15px; 
	flex: 1 1 300px; 
	font-size: 0.85em; 
	padding: 10px; 
	margin: 10px;
	border: 5px solid black;
}

div.formRow { 
	display: flex; 
	flex-flow: row wrap; 
	margin: 5px 5px;
}

div.formRow > * { 
	flex: 1 1 300px;
} 

legend {
	background-color: rgb(60, 60, 125); 
	color: white; 
	padding: 5px;
	border: 5px solid black;
}

textarea {
	margin-top: 5px;
	height: 120px; 
	width: 100%;
}

input[type="submit"], input[type="button"], input[type="reset"]{
	text-align: center; 
	width: 45%;
	background: purple;
	border: 5px solid black;
	padding: 10px 20px;
	color: white;
	font-size: 1.2em;
}

div#buttons {
	text-align: center; 
	width: 100%;
}

input:focus, select:focus, textarea:focus { 
	background-color: rgb(220, 220, 250);
}



/* ============================================= 
	MOBILE STYLES: 0px to 768px or greater
   =============================================
*/
@media only screen and (max-width: 768px){

	

		nav ul { 	
		font-family: Verdana, sans-serif;
		font-size: 1.5em;
		display: table-cell;
		text-align: center;
		margin-right: 2%;
		border: thin solid rgba(0,0,0,1.00);
		background-color: rgba(234,200,255,1.00);
		border-collapse: collapse;
	}

	.aside  img{
		display: block;
		margin: auto; 
		border-left: 5px solid purple;
		border-right: 5px solid purple;
		border-bottom: 5px solid purple;
		border-radius: 10px;
		padding: 5px;
		background-color: purple;
		object-fit: cover;
		
	}
	.aside  h2{
		display: block;
		background: pink;
		text-align: center;
		margin: auto;
		border-top: 5px solid purple;
		border-left: 5px solid purple;
		border-right: 5px solid purple;
		border-radius: 10px;
		border-bottom: 5px solid purple;
	}
	.aside2  img{
		display: block;
		margin: auto;
		border-left: 5px solid purple;
		border-right: 5px solid purple;
		border-bottom: 5px solid purple;
		border-radius: 10px;
		padding: 5px;
		background-color: purple;
		object-fit: cover; 
	
	}

	.aside2  h2{
		display: block;
		background: pink;
		text-align: center;
		margin: auto;
		width: auto;
		border-top: 5px solid purple;
		border-left: 5px solid purple;
		border-right: 5px solid purple;
		border-radius: 10px;
		border-bottom: 5px solid purple;
	}

}
/* ============================================= 
	DESKTOP STYLES: 769px or greater
   =============================================*/

@media only screen and (min-width: 769px){
	
	.gridA {
		display: grid; 
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: 	"header header header" 
								"article article aside"
								"footer footer footer";
		grid-column-gap: 5px;
	}
	
	nav ul li { 	
	font-family: Verdana, sans-serif;
	font-size: 1.5em;
	display: table-cell;
	width: 15%;
	text-align: center;
	margin-right: 2%;
	border: thin solid rgba(0,0,0,1.00);
	background-color: rgba(234,200,255,1.00);
	border-collapse: collapse;
	}
	
	.article{
		padding: 10px;

	}

	.aside  img{
		display: block;
		width: 400px;
		max-height: 400px;
		margin: auto;
		object-fit: cover; 
		border-left: 5px solid purple;
		border-right: 5px solid purple;
		border-bottom: 5px solid purple;
		border-radius: 10px;
		padding: 5px;
		background-color: purple;
		
	}
	.aside  h2{
		display: block;
		background: pink;
		text-align: center;
		margin: auto;
		width: 400px;
		border-top: 5px solid purple;
		border-left: 5px solid purple;
		border-right: 5px solid purple;
		border-radius: 10px;
		border-bottom: 5px solid purple;
	}
	.aside2  img{
	display: block;
	background: yellow;
	width: auto;
	margin: auto;
	object-fit: cover; 
	border-left: 5px solid purple;
	border-right: 5px solid purple;
	border-bottom: 5px solid purple;
	border-radius: 10px;
	padding: 5px;
	background-color: purple;
	}
	.aside2  h2{
		display: block;
		background: pink;
		text-align: center;
		margin: auto;
		width: auto;
		border-top: 5px solid purple;
		border-left: 5px solid purple;
		border-right: 5px solid purple;
		border-radius: 10px;
		border-bottom: 5px solid purple;
	}

}