/*
=====================
=====================
	MOBILE CSS
=====================
=====================
*/


/*
=====================
GRID FORMATTING STUFF
=====================
*/

.ContentView1 {
	display: grid;
	grid-template-columns: 5fr;
	gap: 0px;
	max-width: 1024px;
	margin: auto;
}

header {
	grid-column: 1 / 5;
	grid-row: 1;
	background-color: white;
}

nav {
	grid-column: 1 / 5;
	grid-row: 2;
	background-color: white;
}

article {
	grid-column: 1 / 5;
	grid-row: 3;
	background-color: white;
}

footer {
	grid-column: 1 / 5;
	grid-row: 4;
	background-color: white;
}

/*
=====================
HEADER & FOOTER STYLING
=====================
*/

header {
	color: black;
	text-decoration: none;
	font-family: Helvetica, Arial, sans-serif;
	font-size: x-large;
	text-align: center;
	font-weight: 500;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

header a {
	text-decoration: none;
	color: black;
}

footer {
	color: rgb(0 0 0 / 0.75);
	font-family: Helvetica, Arial, sans-serif;
	font-size: x-small;
	text-align: center;
	padding-top: 5px;
}

/*
========================
NAVIGATION BLOCK STYLING
========================
*/

nav {
	color: white;
	font-family: Helvetica, Arial, sans-serif;
	font-size: medium;
	text-align: center;
	font-weight: 500;
	text-decoration: none;
	column-count: 5;
	column-gap: 0px;
	position: sticky;
	padding-bottom: 0px;
	top: 0;
}

nav div:hover {
	background-color: magenta;
}

.nostylenavlink {
	color: white;
	text-decoration: none;
}

.writing {
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: darkgreen;
}

.tech {
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: seagreen;
}

.art {
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: mediumseagreen;
}

.music {
	padding-top: 3px;
	/* "Can I get that in cornflower blue?" */
	padding-bottom: 3px;
	background-color: cornflowerblue;
}

.linkedin {
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: blue;
}

/*
===============
ARTICLE STYLING 
===============
*/

article {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
}

article h1 {
	color: rgb(0 0 0 / 0.90);
	background-color: white;
	margin: 0px;
	padding-top: 5px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: medium;
	font-weight: 500;
	position: sticky;
	top: 26px;
}

article h4 {
	color: rgb(0 0 0 / 0.90);
	background-color: white;
	margin: 0px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: small;
	font-weight: 500;
}

article p {
	color: rgb(0 0 0 / 0.85);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 350;
	font-size: small;
	padding-left: 10px;
}

article p.small {
	color: rgb(0 0 0 / 0.85);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 350;
	font-size: x-small;
	padding-left: 10px;
}

article ul {
	color: rgb(0 0 0 / 0.85);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 350;
	font-size: small;
	padding-left: 35px;
	padding-right: 35px;
}

article ol {
	color: rgb(0 0 0 / 0.85);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 350;
	font-size: small;
	padding-left: 35px;
	padding-right: 35px;
}

/*
=============================
ARTICLE DIV HIGHLIGHT STYLING 
=============================
*/

article div.highlightorchid {
	color:white;
	background-color:orchid;
	/* "Is that Orchied Explosion by Fournier?" */
	font-family:Helvetica, Arial, sans-serif;
	font-size: small;
	padding-left:15px;
	width:300px;
}

article div.highlightpurple {
	color:white;
	background-color:purple;
	font-family:Helvetica, Arial, sans-serif;
	font-size: small;
	padding-left:15px;
	width:300px;
}

article div.highlightdimgrey {
	color:white;
	background-color:dimgrey;
	font-family:Helvetica, Arial, sans-serif;
	font-size: small;
	padding-left:15px;
	width:300px;
}

article div.highlightblack {
	color:white;
	background-color:black;
	font-family:Helvetica, Arial, sans-serif;
	font-size: small;
	padding-left:15px;
	width:300px;
}

/*
====================
RANDOM STUFF STYLING 
====================
*/

hr {
	color: rgb(0 0 0 / 0.85);
	width: 50%;
}

.hrbreathe {
	margin-bottom: 1px;
	margin-top: 1px;
}

a {
	color: rgb(0 102 204 / 0.90);
}

a.nostylelink {
	color: rgb(0 0 0 / 0.85);
	text-decoration: none;
}

a.inlinelink {
	color: rgb(0 0 0 / 0.85);
}

img {
	width: 100%;
	height: auto;
	padding-top: 10px;
}

img.narrow {
	width: 45%;
	height: auto;
	padding-top: 20px;
}

/*
=====================
=====================
	DESKTOP CSS
=====================
=====================
*/

@media (min-width: 925px) {

/*
=====================
GRID FORMATTING STUFF
=====================
*/

.ContentView1 {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0px;
	column-gap: 0px;
	max-width: 1024px;
	margin: auto;
	background-color: white;
}

header {
  grid-column: 1 / 9;
  grid-row: 1;
  background-color: white;
}

nav {
  grid-column: 1 / 9;
  grid-row: 2;
  background-color: lightgrey;
  		column-gap: 0px;
}

article {
  grid-column: 2 / 8;
  grid-row: 3;
  background-color: white;
}

footer {
  grid-column: 1 / 9;
  grid-row: 4;
  background-color: white;
}

/*
=====================
HEADER & FOOTER STYLING
=====================
*/

header {
	color: black;
	text-decoration: none;
	font-family: Helvetica, Arial, sans-serif;
	font-size: xx-large;
	font-weight: 500;
	max-width: 1024px;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

header a {
	text-decoration: none;
	color: black;
}

header div {
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0px;
}

header div:hover {
	background-color: lightgrey;
}

footer {
	color: rgb(0 0 0 / 0.75);
	font-family: Helvetica, Arial, sans-serif;
	font-size: small;
	text-align: center;
	max-width: 1024px;
	padding-top: 25px;
	padding-left: 0px;
}

/*
========================
NAVIGATION BLOCK STYLING
========================
*/

nav {
	color: white;
	font-family: Helvetica, Arial, sans-serif;
	font-size: large;
	font-weight: 300;
	text-decoration: none;
	position: sticky;
	top: 0px;
	column-gap: 0px;
}

nav div:hover {
	background-color: darkgrey;
}

.nostylenavlink {
	color: white;
	text-decoration: none;
}

.writing {
	background-color: darkgreen;
	padding-left: 15px;
	padding-right: 25px;
	padding-top: 18px;
	height: 36px;
}

.tech {
	background-color: seagreen;
	padding-left: 15px;
	padding-right: 25px;
	padding-top: 18px;
	height: 36px;
}

.art {
	background-color: mediumseagreen;
	padding-left: 15px;
	padding-right: 25px;
	padding-top: 18px;
	height: 36px;
}

.music {
	/* "Can I get that in cornflower blue?" */
	background-color: cornflowerblue;
	padding-left: 15px;
	padding-right: 25px;
	padding-top: 18px;
	height: 36px;
}

.linkedin {
	background-color: blue;
	padding-left: 15px;
	padding-right: 25px;
	padding-top: 18px;
	height: 36px;
}

/*
===============
ARTICLE STYLING 
===============
*/

article {
	padding-left: 24px;
	padding-right: 24px;
}

article h1 {
	color: rgb(0 0 0 / 0.90);
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 350;
	font-size: x-large;
	margin: 0px;
	padding-top: 15px;
	position: sticky;
	top: 57px;
}

article h4 {
	color: rgb(0 0 0 / 0.90);
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: medium;
	margin: 0px;
}

article p {
	color: rgb(0 0 0 / 0.85);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 350;
	font-size: large;
	padding-left: 40px;
}

article p.small {
	color: rgb(0 0 0 / 0.85);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 350;
	font-size: small;
	padding-left: 40px;
}

article ul {
	color: rgb(0 0 0 / 0.85);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 350;
	font-size: large;
	padding-left: 75px;
	padding-right: 75px;
}

article ul {
	color: rgb(0 0 0 / 0.85);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 350;
	font-size: large;
	padding-left: 75px;
	padding-right: 75px;
}

/*
=============================
ARTICLE DIV HIGHLIGHT STYLING 
=============================
*/

article div.highlightorchid {
	color:white;
	background-color:orchid;
	/* "Is that Orchied Explosion by Fournier?" */
	font-family:Helvetica, Arial, sans-serif;
	font-size: medium;
	padding-left:15px;
	padding-top: 4px;
	padding-bottom: 2px;
	width:400px;
}

article div.highlightpurple {
	color:white;
	background-color:purple;
	font-family:Helvetica, Arial, sans-serif;
	font-size: medium;
	padding-left:15px;
	padding-top: 4px;
	padding-bottom: 2px;
	width:400px;
}

article div.highlightdimgrey {
	color:white;
	background-color:dimgrey;
	font-family:Helvetica, Arial, sans-serif;
	font-size: medium;
	padding-left:15px;
	padding-top: 4px;
	padding-bottom: 2px;
	width:400px;
}

article div.highlightblack {
	color:white;
	background-color:black;
	font-family:Helvetica, Arial, sans-serif;
	font-size: medium;
	padding-left:15px;
	padding-top: 4px;
	padding-bottom: 2px;
	width:400px;
}

/*
====================
RANDOM STUFF STYLING 
====================
*/

hr {
	color: rgb(0 0 0 / 0.85);
	width: 50%;
}

.hrbreathe {
	margin-bottom: 1px;
	margin-top: 1px;
}

a {
	color: rgb(0 102 204 / 0.90);
}

a.nostylelink {
	text-decoration: none;
}

a.inlinelink {
	color: rgb(0 0 0 / 0.85);
}

a.nostyleinlinelink {
	color: rgb(0 0 0 / 0.85);
	text-decoration: none;
}

img {
	width: 100%;
	height: auto;
	padding-top: 20px;
}

img.narrow {
	width: 45%;
	height: auto;
	padding-top: 20px;
}

}