/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: Lexend-Bold;
  src: url(Lexend-Bold.ttf);
}

@font-face {
  font-family: Lexend-Medium;
  src: url(Lexend-Medium.ttf);
}

@font-face {
  font-family: Poppins-Regular;
  src: url(Poppins-Regular.ttf);
}

@font-face {
  font-family: Poppins-Medium;
  src: url(Poppins-Medium.ttf);
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url(Poppins-SemiBold.ttf);
}



/* Set global font styles and set body background color*/
body {
  font-family: Poppins-Regular, Lexend-Medium, Arial Black, Arial Regular;
  line-height: 1.5; 
  background-image: url("brand_gradient_macbook_pro_screen.png");
  background-size: cover;
}



/* Main styles */
main {
	padding: 0.63em;
}

section {
	max-width: 99.5%;
	margin-left: 0.25%;
	margin-right: 0.25%;
	padding: 2.5em;
	background-color: #fafafa;
	align-content: center;
}



/* Header styles */
header img {
	float: left;
	padding: 0.65em 0em 1.25em 1.25em;
}

header h1 {
	justify-content: center;
	font-family: Lexend-Bold, Arial Black;
	text-align: center;
	padding-top: auto;
	padding-bottom: auto;
}

div.banner {
	max-width: 98%;
	margin-left: 1%;
	margin-right: 1%;
	background: #fafafa;
}



/* Navigation styles */
nav {
  background-image: url("brand_gradient_scale_banner1.png");
  background-repeat: no-repeat;
  display: flex;
  flex: auto;
  width: 100%;
  padding: 0.63em;
}

nav ul {
	list-style: none;
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	flex-grow: 1;
	flex-shrink: 1;
	color: #000000;
	justify-content: center;
	text-align: center;
}

nav.sitenavigation li {
	font-size: 1.5em;
	-ms-transition-duration: 0.1s;
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	-ms-transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

nav.sitenavigation li:hover, nav.sitenavigation li:focus, nav.sitenavigation li:active {
   text-shadow: 0.06em 0.06em 0em rgb(0,0,0);
   -ms-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   transform: scale(1.2); 
}

nav li {
	color: #000000;
	margin: 0 0.63em;
}

nav a:link {
  color: #000000;
  text-decoration: none;
  transition: all 0.2s ease;
}

nav a:visited {
	color:#000000
}

nav a:hover {
  color: #ffffff;
}



/* Content styles */
section.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background-color: #fafafa;
	width: 100%;
	height: 100%;
}

section.title p {
	font-family: Lexend-Medium, Arial Black;
	font-size: 2.91em;
	color: #000000;
	text-align: center;
}

section.home {
	align-content: center;
	text-align: center;
}

figure.profile {
	float: left;
	margin: 0.63em 1.88em 0em 0em;
}

figcaption {
	font-family: Poppins-Medium, Arial Black;
	font-size: 1.16em;
	color: #000000;
}

figcaption.works, figcaption.projects {
	font-family: Lexend-Medium, Arial Black;
	font-size: 2em;
	text-align: center;
	color: #000000;
}

figure.works, figure.mockups, figure.professional, figure.personal, figure.other, figure.traditional, figure.anime {
	justify-content: center;
	padding: 1.25em;
	margin: 1.25em;
}

section.image, figcaption.description {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-shrink: 1;
	flex-grow: 1;
	justify-content: space-around;
	font-family: Lexend-Medium, Arial Black;
	font-size: 1.5em;
	text-align: center;
	color: #000000;
}

h1 {
	font-family: Lexend-Bold, Arial Black;
	font-size: 5.83em;
	color: #000000;
}

h2 {
	font-family: Lexend-Medium, Arial Black;
	font-size: 2em;
	color: #000000;
}

h3 {
	font-family: Poppins-SemiBold, Arial Black;
	font-size: 1.5em;
	color: #000000;
}

h4 {
	font-family: Poppins-Medium, Arial Black;
	font-size: 1.16em;
	color: #000000;
}

p {
	font-family: Poppins-Regular, Arial Regular;
	font-size: 1em;
	padding: 0.31em;
	color: #000000;
	line-height: 2em;
	padding: 0em 0.63em 0em 0em;	
	margin: 0em 0.63em 0em 0em;
}


ul, ol {
	padding-left: 0em;
}

a:link {
  color: #63c8d0;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #f9a661;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #bb92c3;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #63c8d0;
  background-color: transparent;
  text-decoration: underline;
}



/* form styles */
form {
   padding: 0.63em;
}



/* fieldset styles */
fieldset {
   margin-bottom: 0.8em;
}

fieldset fieldset {
   margin-top: 1em;
   padding: 0.8em;
}

legend {
   font-size: 1.25em;
}

legend > p {
	font-family: Poppins-Regular, Arial Regular;
	font-size: 1em;
	color: #7f7f7f;	
}

.contactinfo legend {
   margin-left: 0.5em;
   font-weight: bold;
}



/* field styles */
.contactinfo input, textarea {
   padding: 0.2em;
   font-size: 1em;
}

.contactinto input {
   position: absolute;
   left: 5em;
}

#nameinput, #emailinput {
   width: 25em;
}

#phoneinput {
   width: 12em;
}



/* label styles */
label {
   font-size: 1em;
   line-height: 1.6em;
}

.contactinfo label {
   display: block;
   position: relative;
   margin: 0.8em 0;
}

#back {
	float: left;
	padding: 0.4em 0.6em;
	font-size: 1.25em;
	border-radius: 0.63em;
}

#submit {
   padding: 0.4em 0.6em;
   font-size: 1.25em;
   border-radius: 0.63em;
}



/* Footer styles */
footer {
	display: flex;
	font-family: Poppins-Regular, Arial Regular;
	font-size: 1.16em;
	text-align: center;
	justify-content: space-around;
	bottom: 0;
	position: relative;
	background-image: url("brand_gradient_scale_banner1.png");
	background-repeat: no-repeat;
	flex: auto;
	width: 100%;
	padding: 0.63em;

}



/* Grid styles */
.grid {
	display: grid;
	gap: 0rem;
	grid-template-columns:
		repeat(1, 1fr);
}


/* Mobile styles */
@media only screen
	and (max-width: 667px)
	and (min-width: 320px)
	and (-webkit-min-device-pixel-ratio: 2) { 
	/* Reset default styles */
	* {
  		margin: 0;
  		padding: 0;
 		 box-sizing: border-box;
	}

		@font-face {
		font-family: Lexend-Bold;
		src: url(Lexend-Bold.ttf);
	}

		@font-face {
		font-family: Lexend-Medium;
		src: url(Lexend-Medium.ttf);
	}

		@font-face {
  		font-family: Poppins-Regular;
  		src: url(Poppins-Regular.ttf);
	}

		@font-face {
  		font-family: Poppins-Medium;
  		src: url(Poppins-Medium.ttf);
	}

		@font-face {
  		font-family: Poppins-SemiBold;
  		src: url(Poppins-SemiBold.ttf);
	}



	/* Set global font styles and set body background color*/
	body {
  		font-family: Poppins-Regular, Lexend-Medium, Arial Black, Arial Regular;
  		line-height: 1.5; 
  		background-image: url("brand_gradient_macbook_pro_screen.png");
  		background-size: cover;
  		width: auto;
	}



	/* Main styles */
	main {
		padding: 0.63em;
	}

	section, section.container {
		width: 645px;
		padding: 2.5em;
		background-color: #fafafa;
		align-content: center;
	}



	/* Header styles */
	header img {
		float: left;
		padding: 0.65em 0em 1.25em 1.25em;
	}

	header h1 {
		font-family: Lexend-Bold, Arial Black;
		justify-content: center;
		text-align: center;
		padding-top: 40px;
	}

	div.banner {
		max-width: 98%;
		height: 140px;
		margin-left: 1%;
		margin-right: 1%;
		background: #fafafa;
	}



	/* Navigation styles */
	nav {
		background-image: url("brand_gradient_scale_banner1.png");
		background-repeat: no-repeat;
		display: flex;
		flex: auto;
		width: 667px;
		padding: 0.63em;
	}

	nav ul {
		list-style: none;
		display: flex;
		gap: 1rem;
		margin: 0;
		padding: 0;
		flex-grow: 1;
		flex-shrink: 1;
		color: #000000;
		justify-content: center;
		text-align: center;
	}

	nav.sitenavigation li {
		font-size: 1.33em;
		-ms-transition-duration: 0.1s;
		-webkit-transition-duration: 0.1s;
		transition-duration: 0.1s;
		-ms-transition-timing-function: ease-out;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	nav.sitenavigation li:hover, nav.sitenavigation li:focus, nav.sitenavigation li:active {
   		text-shadow: 0.06em 0.06em 0em rgb(0,0,0);
   		-ms-transform: scale(1.2);
   		-webkit-transform: scale(1.2);
   		transform: scale(1.2); 
	}

	nav li {
		color: #000000;
		margin: 0 0.63em;
	}

	nav a:link {
  		color: #000000;
  		text-decoration: none;
  		transition: all 0.2s ease;
	}

	nav a:visited {
		color:#000000
	}

	nav a:hover {
  		color: #ffffff;
	}



	/* Content styles */
		section.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		background-color: #fafafa;
		width: 645px;
		height: 100%;
	}

	section.title p {
		font-family: Lexend-Medium, Arial Black;
		font-size: 2.91em;
		color: #000000;
		text-align: center;
	}

	section.home h2, section.home p {
		text-align: center;
	}

	figure.profile {
		float: left;
		margin: 0.63em 1.88em 0em 0em;
	}

	figcaption {
		font-family: Poppins-Medium, Arial Black;
		font-size: 1.16em;
		color: #000000;
	}

	figcaption.works, figcaption.projects {
		font-family: Lexend-Medium, Arial Black;
		font-size: 2em;
		text-align: center;
		color: #000000;
	}

	figure.works, figure.mockups, figure.professional, figure.personal, figure.other, figure.anime {
		justify-content: center;
		padding: 1.25em;
		margin: 1.25em;
	}

	section.image, figcaption.description {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex-shrink: 1;
		flex-grow: 1;
		justify-content: space-around;
		font-family: Lexend-Medium, Arial Black;
		font-size: 1.5em;
		text-align: center;
		color: #000000;
	}

	h1 {
		font-family: Lexend-Bold, Arial Black;
		font-size: 2.5em;
		color: #000000;
	}

	h2 {
		font-family: Lexend-Medium, Arial Black;
		font-size: 1.5em;
		color: #000000;
	}

	h3 {
		font-family: Poppins-SemiBold, Arial Black;
		font-size: 1.16em;
		color: #000000;
	}

	h4 {
		font-family: Poppins-Medium, Arial Black;
		font-size: 1em;
		color: #000000;
	}

	p {
		font-family: Poppins-Regular, Arial Regular;
		font-size: 0.83em;
		padding: 0.31em;
		color: #000000;
		line-height: 2em;
		padding: 0em 0.63em 0em 0em;	
		margin: 0em 0.63em 0em 0em;
	}


	ul, ol {
		padding-left: 0em;
	}

	a:link {
  		color: #63c8d0;
  		background-color: transparent;
  		text-decoration: none;
	}

	a:hover {
  		color: #f9a661;
  		background-color: transparent;
  		text-decoration: underline;
	}

	a:active {
  		color: #bb92c3;
  		background-color: transparent;
  		text-decoration: underline;
	}

	a:visited {
  		color: #63c8d0;
  		background-color: transparent;
  		text-decoration: underline;
	}



	/* form styles */
	form {
   		padding: 0.63em;
	}



	/* fieldset styles */
	fieldset {
   		margin-bottom: 0.8em;
	}

	fieldset fieldset {
   		margin-top: 1em;
   		padding: 0.8em;
	}

	legend {
   		font-size: 1.25em;
	}

	.contactinfo legend {
   		margin-left: 0.5em;
   		font-weight: bold;
	}



	/* field styles */
	.contactinfo input, textarea {
   		padding: 0.2em;
   		font-size: 1em;
	}

	.contactinto input {
   		position: absolute;
   		left: 5em;
	}

	#nameinput, #emailinput {
   		width: 25em;
	}

	#phoneinput {
   		width: 12em;
	}



	/* label styles */
	label {
  		font-size: 1em;
   		line-height: 1.6em;
	}

	.contactinfo label {
   		display: block;
   		position: relative;
   		margin: 0.8em 0;
	}

	#back {
		float: left;
		padding: 0.4em 0.6em;
		font-size: 1.25em;
		border-radius: 0.63em;
	}

	#submit {
   		padding: 0.4em 0.6em;
   		font-size: 1.25em;
   		border-radius: 0.63em;
	}



	/* Footer styles */
	footer {
		display: flex;
		font-family: Poppins-Regular, Arial Regular;
		font-size: 1.16em;
		text-align: center;
		justify-content: space-around;
		bottom: 0;
		position: relative;
		background-image: url("brand_gradient_scale_banner1.png");
		background-repeat: no-repeat;
		flex: auto;
		width: 667px;
		padding: 0.63em;

	}



	/* Grid styles */
	.grid {
		display: grid;
		gap: 0rem;
		grid-template-columns:
			repeat(1, 1fr);
	}
}