@charset "UTF-8";

article, aside, footer, header, main, nav, section {
	display: block;
}

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

html {
	overscroll-behavior: none;
	overflow-x: hidden;
	overflow-y: scroll;
	font-size: 62.5%;
}

body {
	width: 100%;
	height: unset;
	margin: auto;
	font-family: Arial;
	font-size: 1.5rem;
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}

/* Header */
	header {
		background-color: #000000;
		color: #ffffff;
		padding: 1rem 2rem;
	}

	header h1 {
		font-size: 3rem;
		text-wrap: nowrap;
	}
/**/

/* Nav */
	nav {
		margin-top: 1rem;
		font-size: 1.5rem;
		display: flex;
		flex-direction: row;
	}

	nav .navLink {
		margin-right: 4rem;
	}

	nav .navLink a {
		text-decoration: none;
		color: #ffffff;
		text-wrap: nowrap;
	}

	nav .navLink a:hover, nav .currentPageLink a {
		border-bottom: solid #ffffff 3px;
	}
	
	/* Page less than 430px */
	@media (max-width: 430px) {
		nav {
			flex-direction: column;
			margin-bottom: -1rem;
		}

		nav .navLink {
			margin-bottom: 1rem;
			margin-right: none;
		}

		nav .navLink a:hover, nav .currentPageLink a {
			border-left: solid #ffffff 3px;
			border-bottom: none;
			padding-left: 0.5rem;
		}
	}
/**/

/* Main */
	main {
		background-color: #ffffff;
		padding: 5rem;
	}
/**/

/* Footer */
	footer {
		background-color: #000000;
		color: #ffffff;
		padding: 1rem 2rem;
	}

	footer p {
		font-size: 1.5rem;
		text-wrap: nowrap;
	}
/**/

/* Font Size */
	/* Width of 1200px or greater */
	@media (min-width: 1200px) {html {font-size: 62.5%;}}

	/* Width of 1200px or less */
	@media (max-width: 1200px) {html {font-size: 50%;}}

	/* Width pf 992px or less */
	@media (max-width: 992px) {html {font-size: 45%;}}

	/* Width of 768px or less */
	@media (max-width: 768px) {html {font-size: 40%;}}

	/* Width of 600px or less */
	@media (max-width: 600px) {html {font-size: 35%;}}

	/* Width of 430px or less */
	@media (max-width: 430px) {html {font-size: 35%;}}

	/* Height of 1000px or greater */
	@media (min-height: 1000px) {html {font-size: 70%;}}
/**/

/* mainDiv */
	.mainDiv {
		display: flex;
		justify-content: space-evenly;
	}

	.home .mainDiv, .aboutme .mainDiv, .contact .mainDiv {
		flex-direction: row;
	}

	.portfolio .mainDiv, .links .mainDiv, .formsubmitted .mainDiv {
		flex-direction: column;
	}
/**/

/* Heading */
	.heading {
		width: 100%;
		height: unset;
	}

	.heading h2 {
		width: 100%;
		height: unset;
		font-size: 4.5rem;
		text-align: left;
		text-wrap: nowrap;
	}
/**/

/* Paragraph */
	.paragraph {
		width: 100%;
		height: unset;
	}

	.paragraph p {
		width: 100%;
		height: unset;
		font-size: 2.5rem;
		text-align: left;
	}
/**/
	
/* Left Text */
	.leftText {
		width: 40%;
		height: unset;
		aspect-ratio: 1/1;
		max-width: 50rem;
		max-height: 50rem;
	}

	/* Heading */
	.leftText .heading h2 {
		text-align: left;
	}

	/* Paragraph */
	.leftText .paragraph {
		margin-top: 5rem;
	}

	.leftText .paragraph p {
		text-align: left;
	}
/**/

/* Right Image */
	.rightImage {
		width: 40%;
		height: unset;
		aspect-ratio: 1/1;
		max-width: 50rem;
		max-height: 50rem;
	}

	.rightImage img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: top right;
		display: block;
	}
/**/
	
/* Top Text */	
	.topText {
		width: 100%;
		height: unset;
		max-width: 60rem;
		max-height: unset;
		margin: auto;
	}

	/* Heading */
	.topText .heading h2 {
		text-align: center;
	}

	/* Paragraph */
	.topText .paragraph {
		margin-top: 5rem;
	}

	.topText .paragraph p {
		text-align: center;
	}
/**/

/* Slideshow */
	.slideshow {
		width: 100%;
		height: unset;
		max-width: 80rem;
		max-height: unset;
		margin: 5rem auto 0rem auto;
	}

	.slideshowImage {
		padding: 0rem 2rem 0rem 2rem;
		background-color: #000000;
		color: #ffffff;
	}

	.imageNumber {
		width: unset;
		height: 2rem;
		margin-left: -1.85rem;
	}

	.imageContainer {
		width: 100%;
		height: unset;
		aspect-ratio: 16/9;
	}

	.imageContainer img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

	.imageDescription {
		width: unset;
		height: 2rem;
		text-align: center;
	}

	.changeSlideshowImage {
		width: unset;
		height: 5rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #bbbbbb;
	}

	.prev, .next {
		width: 3.5rem;
		height: 3.5rem;
		background-color: #000000;
		color: #ffffff;
		font-size: 1.5rem;
		text-align: center;
		border-radius: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		user-select: none;
	}

	.prev {
		margin-right: 0.4rem;
	}

	.next {
		margin-left: 0.4rem;
	}

	.prev:hover, .next:hover {
		border: solid #ffffff 2px;
	}

	.dot {
		width: 1.5rem;
		height: 1.5rem;
		margin: 0.4rem;
		background-color: #ffffff;
		border-radius: 100px;
		cursor: pointer;
	}

	.active {
		background-color: #000000;
	}

	.dot:hover {
		border: solid #000000 2px;
	}

	.active:hover {
		border: solid white 2px;
	}
/**/

/* Contact Form */
	.contactForm {
		width: 40%;
		height: unset;
		aspect-ratio: 1/1;
		max-width: 50rem;
		max-height: 50rem;
	}

	form {
		width: 85%;
		height: 100%;
		margin-left: auto;
	}

	label, input, textarea {
		display: block;
		font-size: 1.5rem;
		font-family: Arial;
	}

	input, textarea {
		background-color: #e7e7e7;
		border: none;
		border-radius: 10px;
	}

	input:hover, textarea:hover {
		outline: solid #000000 2px;
	}

	input:focus, textarea:focus {
		outline: solid #000000 2px;
	}

	label {
		height: 2rem;
	}

	.textField {
		width: 100%;
		height: 3rem;
		margin-bottom: 1rem;
		padding: 0.5rem;
	}

	textarea {
		width: 100%;
		height: calc(100% - 9rem - 6rem - 5rem);
		margin-bottom: 3rem;
		padding: 0.5rem;
		resize: none;
	}

	::placeholder {
		color: #888888;
	}

	.button {
		width: 7rem;
		height: 3rem;
		margin-right: auto;
	}	
/**/
				
/* Website List */
	.websiteList {
		width: 100%;
		height: unset;
		max-width: 70rem;
		max-height: unset;
		margin: 5rem auto -3rem auto;
		font-size: 2rem;
	}

	.website {
		width: 100%;
		height: unset;
		padding: 1rem 2rem;
		background-color: #000000;
		margin-bottom: 3rem;
	}

	.website p {
		color: #ffffff;
		font-size: 2rem;
		margin-bottom: 1rem;
	}

	.website img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.website a{
		font-size: 1.5rem;
		margin-top: 1rem;
		display: block;
	}

	.website a:link, .website a:visited {
		color: #ffffff;
	}

	.website a:hover {
		color: #0000ff;
	}

	.website a:active {
		color: #ff0000;
	}
/**/

/* Width of 768px or less or height of 1000px or greater */
	@media (max-width: 768px) or (min-height: 1000px) {
		/* mainDiv */
			.home .mainDiv, .aboutme .mainDiv, .contact .mainDiv {
				flex-direction: column;
			}
		/**/

		/* Left Text */
			.leftText {
				width: 100%;
				height: unset;
				aspect-ratio: unset;
				max-width: 60rem;
				max-height: unset;
				margin: auto;
			}

			/* Heading */
			.leftText .heading h2 {
				text-align: center;
			}

			/* Paragraph */
			.leftText .paragraph p {
				text-align: center;
			}
		/**/

		/* Image */
			.rightImage {
				width: 100%;
				height: unset;
				aspect-ratio: 1/1;
				max-width: 60rem;
				max-height: unset;
				margin: 5rem auto 0rem auto;
			}

			.rightImage img {
				object-position: center;
			}
		/**/

		/* Contact Form */
			.contactForm {
				width: 100%;
				height: unset;
				aspect-ratio: 1/1;
				max-width: 60rem;
				max-height: 60rem;
				margin: 5rem auto 0rem auto;
				justify-content: center;
			}

			form {
				margin: auto;
			}
		/**/
	}
/**/