/*HTML Elements*/
html {
	font-size: 16pt;
	font: inherit;
}

/*Dates for the portfolio*/
header .date {
	display: block;
	font-size: 0.8rem;
	margin: 0 0 1rem 0;
	position: relative;
}

body {
	margin: 0;
	font-family: 'Source Sans Pro', Arial, sans-serif;
}

h1 {
	margin: 0 8rem;
	font-size: 2rem;
	line-height: 1.1;
}

h2 {
	margin: 0 0 1rem 0;
	padding: 0 8rem;
	font-size: 1.75rem;
	line-height: 1.3;
}

h3 {
	margin: 0 0 1.5rem 0;
	padding: 0 8rem;
	font-size: 1.25rem;
}

h4 {
	margin: 0;
	padding: 0 8rem;
	font-size: 1rem;
	font-weight: unset;
}

h5 {
	font-size: 0.9rem;
}

p {
	padding: 0 8rem;
	text-align: justify;
	font-style: italic;
}


li {
	padding: 0 2rem;
}

article p {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	color: #212931;
}

img {
	background-blend-mode: multiply;
	mix-blend-mode: multiply;
}

/*The background images for each page*/
#background {
	width: 100%;
	height: 100%;
	position: relative;
	background-image: url("../Images/Backgrounds/Background.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	text-align: left;
}

/*The background image for pacman*/
#pacmanBackground {
	width: 100%;
	position: absolute;
	background-image: url("../Images/Backgrounds/PacManPreview.png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/*The background image for group project*/
#tlotpkBackground {
	width: 100%;
	position: absolute;
	background-image: url("../Images/Backgrounds/TlotpkPreview.png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/*The background image for website*/
#WebsiteBackground {
	width: 100%;
	position: absolute;
	background-image: url("../Images/Backgrounds/WebsitePreview.png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/*The background image for website*/
#UnrealRPGBackground {
	width: 100%;
	position: absolute;
	background-image: url("../Images/Backgrounds/UnrealPreview.png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/*The background image for website*/
#DonkeyKongBackground {
	width: 100%;
	position: absolute;
	background-image: url("../Images/Backgrounds/DonkeyKongPreview.png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/*The header*/
#header {
	width: 75%;
	height: 8rem;
	padding-bottom: 8rem;
	position: relative;
	z-index: 1;
}

/*The navigation bar*/
#nav {
	width: calc(100% - 4rem);
	max-width: 72rem;
	height: 4rem;
	margin: 0 auto;
	padding: 0;
	position: relative;
	background-color: rgba(255, 255, 255, 0.7);
	display: flex;
	vertical-align: baseline;
	z-index: 2;
}
	/*The links to the pages*/
	#nav ul.links {
		padding-left: 0;
		margin: 0 auto 0 0;
		display: flex;
		line-height: 4rem;
		list-style: none;
		letter-spacing: 0.5px;
	}
		/*The list elements in the links*/
		#nav ul.links li {
			display: block;
			padding: 0;
		}
			/*The page being used*/
			#nav ul.links li.active {
				background-color: #ffffff;
			}
				/*Stops the used page from changing when hovered over*/
				#nav ul.links li.active:hover {
					background-color: #ffffff;
				}

			/*Changes the link background when hovered over*/
			#nav ul.links li:hover {
				background-color: rgba(255, 255, 255, 0.4)
			}

		/*The link element*/
		#nav ul.links a {
			padding: 0 2rem;
			margin: 0 auto 0 0;
			display: flex;
			line-height: 4rem;
			list-style: none;
			letter-spacing: 0.5px;
		}

	/*The social media icons*/
	#nav ul.icons {
		padding-right: 0;
		display: flex;
		flex-grow: 0;
		align-content: center;
		list-style: none;
		letter-spacing: 0.5px;
	}
		/*Changes the icon when hovered over*/
		#nav ul.icons li:hover {
			opacity: 0.4;
		}

/*All the content between the navigation bar and the footer*/
#main {
	width: calc(100% - 4rem);
	max-width: 72rem;
	height: fit-content;
	margin: 0 auto;
	padding: 0 0 2rem 0;
	position: relative;
	background-color: #ffffff;
	z-index: 2;
}

	/*centers element*/
	#main .center {
		text-align: center;
	}

	/*Button too go back to portfolio*/
	#main a.backButton {
		padding: 0;
		margin: 2rem 0 0 2rem;
		cursor: pointer;
		font-size: 20px;
		display: inline-block;
	}

	/*The title for each page*/
	#main h1.title {
		margin: 0;
		padding: 4rem 0 2rem 0;
		position: relative;
		font-size: 26pt;
		font-weight: bold;
		text-align: center;
	}

	/*lines surrounding title*/
	/*#main h1.title:before, #main h1.title:after {
		background-color: #000;
		content: "";
		display: inline-block;
		height: 1px;
		position: relative;
		vertical-align: middle;
		text-align: justify;
		width: 50%;
	}*/

	/*Left line*/
	/*#main h1.title:before {
		right: 0.1em;
		margin-left: -50%;
	}*/

	/*Right Line*/
	/*#main h1.title:after {
		left: 0.1em;
		margin-right: -50%;
	}*/



/*The tags for what was used in the project*/
#main h1.tags {
	font-size:20px;
	font-weight: bold;
	text-align: center;
}

	/*The images that lead to the projects*/
	#main a.projectWindows {
		padding-left: 10px;
		padding-right: 10px;
		display: inline-block;
	}

	/*The images of the projects*/
	#main ul.projectShowcase {
		margin: 0 auto;
		position: relative;
		display: grid;
		grid-template-columns: auto auto;
		list-style: none;
		justify-content: center;
		z-index: 2;
	}

	/*The download buttons*/
	#main a.button {
		background-color: DodgerBlue;
		border: none;
		color: white;
		padding: 0.8rem 1.5rem;
		margin: 2rem;
		cursor: pointer;
		font-size: 20px;
		display: inline-block;
		text-align: center;
	}

		/*The state for highlighted buttons*/
		#main a.button:hover {
			background-color: RoyalBlue;
		}

/*A part to say who made this website*/
#credits {
	width: calc(100% - 4rem);
	max-width: 72rem;
	height: fit-content;
	margin: auto;
	padding: 0;
	position: relative;
	background-color: rgb(0, 0, 0, 0.70);
	display: flex;
	vertical-align: baseline;
	text-align: center;
	z-index: 2;
}

/*The name of the developer*/
#signature {
	color: rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	margin: inherit;
	padding: 2rem 0;
}

/*The area below the main content*/
#footer {
	width: 75%;
	height: 8rem;
	position: relative;
	z-index: 1;
}

/*All the projects I made*/
#projects {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: inherit;
	background-color: #ffffff;
	display: grid;
	grid-template-columns: auto auto;
	border-top: solid 2px #eeeeee;
	list-style: none;
	justify-content: center;
	align-items: stretch;
	z-index: 2;
}
	/*The list of elements in the projects*/
	#projects li {
		padding: 2rem 2rem;
		border-style: solid;
		border-color: #eeeeee;
		border-top: 0;
		text-align: center;
	}