html {
		min-height: 100vh;
    		-webkit-background-size: cover;
		background-image: linear-gradient(to bottom right, black, #2e0c2d, black);
		font-family: "Noto Sans", Noto Sans Bold, Noto Sans Regular;
	}
	body {
		color: white;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		//width: 80%;
		//min-width: 800px;
	}
	h1 {
		color: white;
		//font-size: 200%;
		text-shadow: 2px 1px darkorchid;
	}
	h2 {
		font-size: 150%;
		text-shadow: 2px 1px darkorchid;
	}
	article > h1 {
		color: white;
		//font-size: 40px;
		text-shadow: 2px 1px darkorchid;
		margin-top: 8px;
		margin-bottom: 5px;
	}
	p {
		color: lavender;
		//font-size: 15px;
	}
	ul {

		color: lavender;
		list-style-position: inside;
		list-style-type: circle;
	}
	li {
		//margin-top: 3px;
		margin-bottom: 5px;
		overflow: hidden;
		white-space: pre-wrap;
	}
	article {
		
 		 background-color: #141414;
  		 background-size: contain;
 		 /* Border Settings*/
 		 border: 2px solid lavender;
 		 border-radius: 5px;
	}
	footer {
		    border-color: lavender;
	}
	footer > a {
		color: white;
		text-decoration: none;
		text-shadow: 1px 1px darkorchid;
	}
	p > a {
		color: white;
		text-decoration: none;
		text-shadow: 1px 1px darkorchid;
	}
	li > a {
		color: white;
		text-decoration: none;
		text-shadow: 1px 1px darkorchid;
	}
	/* Sidebar links */
	.sidebar a {
  		color: lavender;
 	}

	/* Active/current link */
	.sidebar a.active {
  		background-color: lavender;
  		color: black;
	}

	/* Links on mouse-over */
	.sidebar a:hover:not(.active) {
  		background-color: #555;
  		color: white;
	}
	.grid-container > div {
		background-color: lavender;
	}
	
	.grid-container > div {
		background-color: rgba(255,255,255,1);
	}
	.project-grid-element {
  border: 1px solid lavender;
  border-radius: 10px;
  background-color: rgba(0,0,0,.5);
}
/*@media (prefers-color-scheme: light) {
	html {
		height: 100%;
    		-webkit-background-size: cover;
		background-image: linear-gradient(to bottom, black, #2e0c2d, black);	}
	body {
		color: white;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		min-width: 800px;
	}
	h2 {
		color: black;
		font-size: 25px;
		text-shadow: 1px 1px white;
	}
	p {
		color: black;
	}
	ul {
		color: black;
		list-style-position: inside;
		list-style-type: circle;
	}

	article {
		
 		 background-color: white;
 		 background-size: contain;
	}
	article > h1 {
		color: black;
		font-size: 40px;
		text-shadow: 1px 1px white;
	}
	p > a {
		color: black;
		text-decoration: none;
		text-shadow: 1px 1px darkorchid;
	}
	li > a {
		color: black;
		text-decoration: none;
		text-shadow: 1px 1px darkorchid;
	}	
}*/

@media only screen and (max-width: 1599px) {
/* Grid for Project display*/
.grid-container {
  display: grid;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  text-align: center;
  color: white;
  max-width: 99%;
  height: auto;
  margin: auto;
}
	.sidebar{
	display: none;
	}	
	.grid-container {
    grid-template-columns: 33% 33% 33%; /*Make the grid smaller than the container*/
	}
.grid-container > a {
        font-size: 3vw;
}
.element-title {
	display: none;
	position: absolute;
	text-align: center;
	background-color: rgba(3,3,3,0.6);
	color: white;
	width: 31.75%;
}
.grid-container a:hover .element-title{
	display: block;
	text-align: center;
	border-radius: 20px;
}

	
}
@media only screen and (min-width: 1599px) {
/* Grid for Project display*/
.grid-container {
  display: grid;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  text-align: center;
  color: white;
  max-width: 75%;
  height: auto;
  margin: auto;
}
	.grid-container {
    grid-template-columns: 25% 25% 25%; /*Make the grid smaller than the container*/
	}
	.grid-container > a {
        font-size: 200%;
/*	font-size: 200%; */
}
	
.element-title {
	display: none;
	position: absolute;
	text-align: center;
	background-color: rgba(3,3,3,0.6);
	color: white;
	width: 18.25%;
}
.grid-container a:hover .element-title{
	display: block;
	text-align: center;
	border-radius: 20px;
}
}

/* The side navigation menu */
.sidebar {
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: c8c8e6;
  position: fixed;
  height: 100%;
  overflow: auto;
}

/* Intro Block*/
@media only screen and (min-width: 760px) {
.introduction {
  padding: 0%;
  //width: 90%;
  width: 750px;
  //max-width: 750px;
  height: 30%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  justify-content: space-evenly;
}
}
.introduction > h1 {
	text-align: center-left;
	//font-size: 200%;
	margin-bottom: 5px;
}
.introduction > p, ul {
	text-align: left;
	padding: 1%;
	text-indent: 2em;
	margin: 1%;
}
.introduction > img {
	object-fit: contain;
	max-width: 75%;
	margin-bottom: 3%;
	display: none;
	margin-right: auto;
	margin-left: auto;
}
#showimage {
	text-align: center;
	margin-top: 0%;
	padding-top: 0%;
	margin-right: auto;
	margin-left: auto;
	color: darkorchid;
	text-indent: 0%;
	font-size: 0.75em;
}
#showimage:hover {
	margin-bottom: 0%;
	padding-bottom: 0%;
	color: #141414;
}
p#showimage:hover + img {
	display: block;
	object-fit: contain;
	max-width: 75%;
	margin-bottom: 3%;
}
/* Settings for content block */
@media only screen and (min-width: 760px) {
.contentsection {
  padding: 0%;
  //width: 90%;
  width: 750px;
  //max-width: 750px;
  height: 30%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  justify-content: space-evenly;
}
}
@media only screen and (max-width: 570px) {
.contentsection > ul {
        text-align: left;
        padding: 1px;
}
}
@media only screen and (max-width: 570px) {
	.contentsection > ul {
        text-align: left;
        padding: 1px;
	text-indent: 0px;
}	
}
.contentsection > h1 {
	text-align: center;
	//font-size: 200%;
	margin-bottom: 5px;
}
.contentsection > h2 {
	text-align: center;
	//font-size: 100%;
	margin-bottom: 1px;
	margin-top: 1px;
}

/* Settings for donation block */
@media only screen and (min-width: 760px) {
.donatesection {
	//width: 47%;
	width: 365px;
	//max-width: 365px;
	height: 298.2px;
	//resize: none;
	display: inline-block;
	margin-right: auto;
	margin-left: 5px;
	margin-top: 20px;
	//padding: 0.2%;
	//float: left;
	
}
.moneroQRcode {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        padding-top: 0px;
        padding-bottom: 0px;
        display: block;
        width: 45%;
        height: auto%;
}

}
@media only screen and (max-width: 760px) {
.moneroQRcode {
        display: none;

		}
}
.donatesection > h1 {
	text-align: center;
	//font-size: 200%;
	margin-bottom: -6px;
}
.donatesection > h2 {
	display: inline-block;
	text-align: center;
	font-size: 100%;
	color: orange;
	text-shadow: 1px 1px black;
	margin-bottom: -6px;
}
.donatesection > p {
	text-align: center;
	word-break: break-all;
	font-size: 10px;
	color: Chartreuse;
	text-shadow: 1px 1px black;
	margin: 0px 5% 2% 5%;
}
.xmr {
	display: inline-block;
	width: 15px;
	height: 15px;
}

/* Settings for contact block */
@media only screen and (min-width: 760px) {
.contactsection {
	//width: 47%;
	width: 365px;
	//max-width: 365px;
	height: 298.2px;
	//min-height: 291.533px;
	//resize: none;
	display: inline-block;
	vertical-align: top;
	margin-left: auto;
	margin-right: 5px;
	//float: right;
}
}
.contactsection > ul {
        /*margin-right: 0px;
        margin-top: 40px;*/
        text-align: center;
        top: 12%;
        position: relative;
        list-style-position: inside;


}
.contactsection > h1 {
	text-align: center;
	//font-size: 200%;
	margin-bottom: -6px;
}
.contactsection > h2 {
	display: inline-block;
	text-align: center;
	//font-size: 100%;
	color: orange;
	margin-bottom: -6px;
}
.contactsection > p {
	text-align: center;
	//word-break: break-all;
	//font-size: 10px;
	color: Chartreuse;
}

.contactsection > li {
	text-align: left;
}

footer {
	padding-top: 15px;
        margin-top: 1px;
        padding: 1em;
        border-style: dashed;
        border-width: 1px 0px 0px 0px;
        text-align: center;
        clear: both;
	width: 90%;
        max-width: 750px;
	margin-top: 35px;
        margin-left: auto;
        margin-right: auto;
}

body {
		padding-bottom: 50px;
}

/* Space between article sections */
article + article {
    margin-top: 20px;
    //margin-right: 10px;
    //margin-left: 10px;
}

/* Sidebar links */
.sidebar a {
  display: block;
  padding: 16px;
  text-decoration: none;
}



/* Settings for individual grid items */
.grid-container > a {
  text-decoration: none;
  margin:1%;
}
.project-grid-element > img {
	width: 100%;
	height: 100%;
	border-radius: 10px;
}

/*.grid-container > a:hover {
  color: rgba(255,255,255,1);
  text-shadow: 3px 3px black;
}*/
.project-grid-element {
	display: block;
}

.project-grid-element:hover {
	/*opacity: 0.5;*/
}

.discord {
	//margin-left: 35px;
	list-style-image: url('images/discord-icon.svg');
}
.proton {
	margin-left: -15px;
	list-style-image: url('images/proton-icon.svg');
	text-indent: 0px;
}
.proton::marker {
	font-size: 3rem;
}
.okstate {
	margin-left: -25px;
	//margin-left:20px;
	list-style-image: url('images/osu-icon.svg');
	text-indent: 0px;
}
.okstate::marker {
	font-size: 3rem;
}

#project-image1 {background-image:url('images/P1-CV.gif');}
#project-image2 {background-image:url('images/P2-TE.webp');}
#project-image3 {background-image:url('images/eTrencher.webp');}
#project-image4 {background-image:url('images/locator.webp');}
#project-image5 {background-image:url('images/P5-8I.webp');}
#project-image6 {background-image:url('images/eUtil.webp');}
#project-image7 {background-image:url('images/eHDD.webp');
		 background-position: 35% center;
		}
#project-image8 {background-image:url('images/server.webp');}
#project-image9 {
		background-image:url('images/cessnatest.gif'); 
		background-position: 35% center;
		}
#project-image-bmw-n12-engine-rebuild {background-position: 70% center;}