@supports (display: grid) {
	main {width: auto;}
}

@media all and (max-width: 600px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "header"
      "nav"
      "main"
      "footer";
    }
}

@font-face {font-family: "Alligator_Sky_Regular"; src:url(../../fonts/Alligator_Sky_Regular.otf);}
@font-face {font-family: "Hoefler_Text_Ornaments"; src:url(../../fonts/Hoefler_Text_Ornaments.otf);}
@font-face {font-family: "Deftone_Stylus_Regular"; src:url(../../fonts/Deftone_Stylus_Regular.otf);}
@font-face {font-family: "Acid_Regular"; src:url(../../fonts/Acid_Regular.otf);}
@font-face {font-family: "MarkerFelt"; src:url(../../fonts/MarkerFelt.otf);}
@font-face {font-family: "Comic Sans MS Bold"; src:url(../../fonts/Comic Sans MS Bold.ttf);}

/* Recommended Font Stacks */

/* 

Font-family: Arial, Helvetica Neue, Helvetica, sans-serif
Font-family: Baskerville, Baskerville Old Face, Garamond, Times New Roman, serif
Font-family: Bodoni MT, Bodoni 72, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif
Font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif
Font-family: Calisto MT, Bookman Old Style, Bookman, Goudy Old Style, Garamond, Hoefler Text, Bitstream Charter, Georgia, serif
Font-family: Cambria, Georgia, serif
Font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif
Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
Font-family: Consolas, monaco, monospace
Font-family: Copperplate, Copperplate Gothic Light, fantasy
Font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace
Font-family: Dejavu Sans, Arial, Verdana, sans-serif
Font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Calisto MT, Times New Roman, serif
Font-family: Franklin Gothic, Arial Bold
Font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif
Font-family: Georgia, Times, Times New Roman, serif
Font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif
Font-family: Goudy Old Style, Garamond, Big Caslon, Times New Roman, serif
Font-family: Helvetica Neue, Helvetica, Arial, sans-serif
Font-family: Impact, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif
Font-family: Lucida Bright, Georgia, serif
Font-family: Lucida Sans, Helvetica, Arial, sans-serif
Font-family: MS Sans Serif, sans-serif
Font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif
Font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif
Font-family: Perpetua, Baskerville, Big Caslon, Palatino Linotype, Palatino, serif
Font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif
Font-family: Segoe UI, Frutiger, Dejavu Sans, Helvetica Neue, Arial, sans-serif
Font-family: Tahoma, Verdana, Segoe, sans-serif
Font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif
Font-family: Verdana, Geneva, sans-serif

 */
 
 /* CSS Variables */

:root {
	--navyblue: #283891;
	--shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
	--darkest: #192917;  /* deepforest */
	--darker: #116466;  /* evergreen */
	--dark: #194e47; /* deepteal */
	--midtonedark: #5c4948;  /* leather */
	--midtonemedium: #4F4A41;  /* coffee */
	--midtonelight: #66EE58;  /* latte */
	--light: #B9D08C;  /* orangekhaki */
	--lighter: #FFCB9A;  /* orangeblush */
	--lightest: #D1E8E2;  /* foamgreen */
	--warmneutraldark: #342f2d;  /* bear */
	--warmneutralmedium: #978073; /* mouse */
	--warmneutrallight: #fdedd4; /* cream */
	--coolneutraldark: #2C3531;	 /* charcoal */
	--coolneutralmedium: #464866;	/* purplerain */
	--coolneutrallight: #BAAAAD; /* dusk */
	--basefont: 'Merriweather', serif;
	--headerfont: 'Oswald', sans-serif;
	--heavyfont: 'Alfa Slab One', cursive;
	--darkred: #CC0000;
	--darkgray: #A9A9A9;
	--lightgray: #E8E7E2;
	--warmgray: #807977;
	--mediumwarmgray: #CC0000;
	--white: #FFFFFF;
	--black: #000000;
	--AndaleMonoMTSTD: 'Andale Mono MT STD', monospace;
	--Consolas: 'Consolas', monospace;
	--Courier: 'Courier', monospace;
	--CourierNew: 'Courier New', monospace;
	--LucidaSansTypewriter: 'Lucida Sans Typewriter', monospace;
	--LucidaTypewriter: 'Lucida Typewriter', monospace;
	--Monaco: 'Monaco', monospace;
	--Baskerville: 'Baskerville', serif;
	--BaskervilleOldFace: 'Baskerville Old Face', serif;
	--BigCaslon: 'Big Caslon', serif;
	--BitstreamCharter: 'Bitstream Charter', serif;
	--BodoniMT: 'Bodoni MT', serif;
	--Bodoni72: 'Bodoni 72', serif;
	--BookAntiqua: 'Book Antiqua', serif;
	--BookmanOldStyle: 'Bookman Old Style', serif;
	--Bookman: 'Bookman', serif;
	--CalistoMT: 'Calisto MT', serif;
	--ComicSansMSBold: 'Comic Sans MS Bold', sans-serif;
	--Courier: 'Courier', serif;
	--CourierBold: 'Courier Bold', serif;
	--Didot: 'Didot', serif;
	--DidotLTSTD: 'Didot LT STD', serif;
	--Garamond: 'Garamond', serif;
	--Georgia: 'Georgia', serif;
	--GoudyOldStyle: 'oudy Old Style', serif;
	--HoeflerText: 'Hoefler Text', serif;
	--LucidaBright: 'Lucida Bright', serif;
	--Palatino: 'Palatino', serif;
	--PalatinoLinotype: 'Palatino Linotype', serif;
	--PalatinoLTSTD: 'Palatino LT STD', serif;
	--Perpetua: 'Perpetua', serif;
	--Rockwell: 'Rockwell', serif;
	--Times: 'Times', serif;
	--TimesNewRoman: 'Times New Roman', serif;
	--Arial: 'Arial', sans-serif;
	--Calibri: 'Calibri', sans-serif;
	--Candara: 'Candara', sans-serif;
	--CenturyGothic: 'Century Gothic', sans-serif;
	--Consolas: 'Consolas', sans-serif;
	--DejavuSans: 'Dejavu Sans', sans-serif;
	--FranklinGothic: 'Franklin Gothic', sans-serif;
	--GillSans: 'Gill Sans', sans-serif;
	--Helvetica: 'Helvetica', sans-serif;
	--LucidaSans: 'Lucida Sans', sans-serif;
	--MSSansSerif: 'MS Sans Serif', sans-serif;
	--NeueHelvetica: 'Neue Helvetica', sans-serif;
	--Optima: 'Optima', sans-serif;
	--SegoeUI: 'Segoe UI', sans-serif;
	--Tahoma: 'Tahoma', sans-serif;
	--TrebuchetMS: 'Trebuchet MS', sans-serif;
	--Verdana: 'Verdana', sans-serif;
	--BradleyHand: 'Bradley Hand', cursive;
	--LucidaHandwriting: 'Lucida Handwriting', cursive;
	--Rage: 'Rage', cursive;
	--Segoescript: 'Segoe script', cursive;
	--SnellRoundhand: 'Snell Roundhand', cursive;
	--Copperplate: 'Copperplate', fantasy;
	--Copperplate Gothic Light: 'Copperplate Gothic Light', fantasy;
	--Luminari: 'Luminari', fantasy;
	--ComicSansMSBold: 'Comic Sans MS Bold','.ttf'.ttf
}

/* CSS General */

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

ul {
	padding-bottom: 1rem;
}

html {
}

body {
	font-family: serif;
	text-align: center;
	background-color: var(--darkred);
	font-size: 100%;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

h1 {
	font-family: var(--headerfont);
	color: var(--darker);
	margin:0;
	font-size:1.25rem;
	padding-top: 1rem;
	padding-bottom: .5rem;
	text-align: center;
}

h2 {
	padding: 1rem 0 1rem 1rem;
	margin-left: 1rem;
}

a {
	font-family: var(--headerfont);
	font-weight: 400;
	font-size: 1rem;
	display: block;
	text-decoration: none;
	color: var(--dark);
	letter-spacing: 0.1rem;
}

.ampm {
	font-variant: small-caps;
	font-size: .8rem;
}

li {
	list-style-type: none;
}

/* CSS header column */

header {
	display: flex;
	grid-area: header;
	background-color: var(--darkgray);
	height: 4.5rem;
	font-family: var(--SnellRoundhand), cursive;
	font-size: 4em;
	padding: 10px 0;
	color: var(--darkred);
	justify-content: center;
	align-items: center;
	margin: 10px auto auto 0;
	letter-spacing: 5px;
}

/* CSS nav column */

nav {
	display: flex;
	grid-area: nav;
	background-color: var(--darkgray);
	height: 3rem;
	font-family: "Acid_Regular", sans-serif;
	font-size: 2.5em;
	padding: 10px 0;
	color: var(--white);
	justify-content: center;
	align-items: center;
	margin: 0 auto 10px auto;
	letter-spacing: 5px;
}

nav a {
	padding-left: 15px;
	color: var(--white);
	letter-spacing: 2px;
	font-size: .4em;
}

/* CSS footer column */

footer {
	display: flex;
	grid-area: footer;
	background-color: var(--darkgray);
	height: 3rem;
	font-family: "Acid_Regular", sans-serif;
	font-size: 2.5em;
	padding: 10px 0;
	color: var(--white);
	justify-content: center;
	align-items: center;
	margin: 10px auto;
	letter-spacing: 5px;
}

footer a {
	padding-left: 2px;
	color: var(--white);
	letter-spacing: 2px;
	font-size: .5em;
}

home {
	padding-right: 100px;
}

footer a {
	font-size: .35em;
	padding-left: 20px;
}

.square:hover, li a:hover {
	color: var(--light);
}

.thumb {
margin-top: .2rem;
}

/* CSS Main Content Column */

#cellview-v {
  width: 860px;
  height: 400px;
  margin: auto;
}

main {
	margin: 10px auto;
}

.copyright {
	text-align: center;
	padding-top: 50px;
	color: #FFFFFF;
	font-size: 1.2em;
	line-height: 1.2em;
}

#prices-header {
color: #FFFFFF;
text-align: center;
width:100%;
font-size: 1.2em;
line-height: 1.2em;
padding-bottom: 15px;
}

p.prices-body {
color: #FFFFFF;
text-align: left;
float:left;
font-size: 1em;
line-height: 1em;
}

#prices-left {
padding-top: 15px;
padding-bottom: 15px;
color: #FFFFFF;
text-align: left;
float:left;
font-size: 1em;
line-height: 1em;
}

#prices-right {
color: #FFFFFF;
text-align: right;
float: right;
font-size: 1em;
line-height: 1em;
}

#prices-footer {
clear: both;
padding-top: 10px;
color: #FFFFFF;
text-align: left;
font-size: .9em;
line-height: .9 em;
}

.profile-heading {
color: #A9A9A9;
font-style: bold;
font-size: 1.25em;
padding: 10px;
}

.contact {
	padding-top: 70px;
	text-align: center;
	color: #FFFFFF;
	font-size: 1.2em;
	line-height: 1.2em;
}
#philosophy-image-left {
width: 75px;
height: 100px;
border: 2px;
border-color: #FFFFFF;
border-style: solid;
margin-right: 15px;
}

p.philosophy-caption {
float:left;
font-size: .8em;
width: 78px;
margin-right: 15px;
margin-top: 20px;
text-align: center;
font-style: italic;
color: #A9A9A9;
}

p.philosophy-body {
color: #FFFFFF;
text-align: left;
font-size: 1em;
line-height: 1em;
padding-top: 15px;
padding-bottom: 15px;
}

.just {
	text-align: justify;
	text-justify: inter-word;
	line-height: 1.1rem;
	padding-left: 1rem;
	padding-right: 1.2rem;
	padding-bottom: 1rem;
	background-color: var(--darker);
	color: var(--lighter);
	margin:0;
}

bio {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: 
      "image-left	profile-right"
      "rule-line	rule-line"
      "profile-left	image-right";
margin: auto;
}

#image-left {
	grid-area: image-left;
	display: block; 
	margin: auto;
	}

#image-right {
	grid-area: image-right;
	display: block; 
	margin-right: 420px;
	margin-top: 20px;
	}

#profile-left {
	grid-area: profile-left;
	text-align: left;
	color: white;
	padding: 10px;
	width: 300px;
	margin-left: 220px;
	}

#profile-right {
	grid-area: profile-right;
	text-align: left;
	color: white;
	padding: 10px;
	width: 300px;
}

hr {
	grid-area: rule-line;
	border: 1px solid white;
}

.photo-header{
font-family: var(--headerfont), sans-serif;
font-size: 2rem;
color: white;
}

photobase {position: relative;}
photobase div a:hover {opacity: .5;}
.price {}
.sku{
  position: absolute;
  bottom: -120px;
  right: -120px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

div ~ img {
  border: 1px solid white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}