.inline-emphasis {
	color: var(--primary);

	&.bold {
		font-weight: 600;
	}
}

section#home-section {
	display: flex;
	flex-direction: column;
	padding: 3rem 5%;
	align-items: center;
	container-type: inline-size;

	& > * {
		transition: all 750ms;
	}

	& .tm-introduction {
		margin-bottom: 4rem;

		& h1 {
			font-weight: 700;
			font-size: 5.5vmax;
			color: var(--header-color);
			margin: 0 0 1rem 0;
			line-height: 1.2;
		}

		& .subtitle {
			font-size: 36px;
			text-transform: uppercase;
			margin-bottom: 1.5rem;
		}

		& p {
			margin-bottom: 1.5rem;
		}

	}

	& > picture {
		max-width: 55%;
	}


	& .social-icons--container.vertical {
		flex-direction: row;
		padding: 3rem 0;
		transition: all 450ms linear 250ms;
	}

	&.initial {
		& > * {
			opacity: 0;
		}

		& .tm-introduction {
			transform: translateX(-100%);
		}

		/* Needs to be in a parent */
		& :not(.tm-introduction) {
			transform: translateX(100%);
		}

		& .social-icons--container {
		}
	}

}

@media (min-width: 1080px) {
	section#home-section {
		flex-direction: row;
		height: 85vh;

		& .tm-introduction {
			margin-bottom: 0;
		}

		& > picture {
			margin: 0 5% 0 16%;
			max-width: 35%;
		}

		& .social-icons--container.vertical {
			flex-direction: column;
		}
	}
}

section#about-me {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr;
	padding: 3rem 5%;
	gap: 1.5rem;

	& h2 {
		font-size: 5vmax;
		color: var(--header-color);
		font-weight: 300;
		text-align: center;

		& span {
			color: var(--primary);
			font-weight: 500;
			display: block;
		}

		& img {
			margin: 2rem auto;
			transform: rotate(124.5deg);
		}
	}

	& p {
		margin-bottom: 1rem;
	}
}

@media (min-width: 1200px) {
	section#about-me {
		grid-template-columns: 2fr 3fr;

		& h2 img {
			transform: none;
		}

		& p {
			padding-left: 4.5rem;
		}
	}
}

section#skills {
	background-color: var(--grey-secondary);
	background-image: url("/assets/img/skills-bg.avif");
	background-image: url("/assets/img/skills-bg.avif"), linear-gradient(90deg,rgba(20, 23, 31, 1) 0%, rgba(20, 23, 31, 1) 60%, rgba(9, 11, 17, 1) 100%);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
	grid-template-columns: 1fr;
	padding: 10rem 5%;
	display: grid;
	gap: 5rem;

	& > :not(ul) {
		display: flex;
		flex-direction: column;
		justify-content: center;

		& h2 {
			color: var(--header-color);
			font-size: 5.5vmax;
		}

		& h3 {
			font-size: 2.5vmax;
			text-transform: uppercase;
			margin-bottom: 2rem;
			font-weight: 400;

			& span {
				font-weight: 700;
			}
		}

		& p {
			margin-bottom: 1rem;
		}

		& ul {
			list-style: none;
			display: flex;
			justify-content: space-between;
			padding: 2rem 0 3rem;

			& li {
				& a {
					background: var(--grey-tertiary);
					display: flex;
					justify-content: center;
					align-items: center;
					width: 3rem;
					height: 3rem;
					border-radius: 100%;

					&:hover {
						background: var(--primary);
					}

					& svg {
						width: 1.5rem;
						height: 1.5rem;
						fill: var(--header-color);
						color: var(--header-color);
					}
				}
			}
		}

		& .gradient-button {
			padding: .75rem 2rem;
			display: flex;
			gap: 1.5rem;
			align-items: center;
			width: fit-content;
			text-transform: uppercase;

			& span {
				font-size: 2rem;

				& svg {
					fill: var(--header-color);
					color: var(--header-color);
					width: .7rem;
					height: auto;
				}
			}
		}
	}

	& > ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		list-style: none;
		background: #FFFFFF;
		background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(64, 65, 70, 0) 78%, rgba(9, 11, 17, 0.35) 100%);
		border-radius: 10rem;

		& li {
			padding: 0 0 3rem 1.5rem;
			position: relative;
			border-left: 2px solid transparent;

			& h4 {
				margin-bottom: .5rem;
			}

			&:before {
				content: "";
				width: 15px;
				height: 15px;
				border-radius: 100%;
				position: absolute;
				top: 0;
				left: -8.5px;
				background: var(--grey-tertiary);
			}

			&:not(:last-of-type) {
				border-left: 2px solid var(--grey-tertiary);
			}
		}
	}
}

@media (min-width: 1080px) {
	section#skills {
		background-position: center right;
		grid-template-columns: 2fr 3fr;

		& > :not(ul) {
			& h2 {
				font-size: 3.5vmax;
			}

			& h3 {
				font-size: 1.7vmax;
				margin-bottom: 1rem;
			}
		}
	}
}

section#projects {
	padding: 7rem 10% 0;

	& .projects--header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 3rem;
		flex-direction: column;
		gap: 3rem;

		& h2 {
			color: var(--header-color);
			font-size: 5.5vmax;
			line-height: 1.2;

			& br {
				display: none;
			}
		}

		& > div {
			display: flex;
			align-items: center;

			& p {
				font-size: 1.7vmax;
			}

			& img {
				transform: rotate(90deg);
			}
		}
	}

	& .projects--feature {
		display: grid;
		grid-template-columns: 1fr;
		padding: 3rem 0 0;
		gap: 3rem;

		& > article {
			& > a {
				& h3 {
					font-size: 2vmax !important;
				}
			}

			& .featured-project--image {
				position: relative;
				position: relative;
				width: 75%;
				margin-bottom: 3rem;

				& .site-screenshot {
					position: absolute;
					z-index: -1;
					width: 96%;
					margin: auto;
					top: 4.5%;
					left: 1.75%;
				}
			}
		}

		& article {
			& > a {
				text-decoration: none;

				&:hover {
					& h3 {
						text-decoration: underline;
					}
				}

				& h3 {
					color: var(--header-color);
					font-size: 1.5vmax;
					margin-bottom: 1rem;
					display: flex;
					justify-content: space-between;
					align-items: center;

					& svg {
						width: 1rem;
						height: auto;
						fill: var(--primary);
					}
				}

				& > span {
					background: var(--grey-primary);
					border-radius: .5rem;
					text-transform: uppercase;
					padding: .25rem .5rem;
					color: var(--body-color);
				}
			}
		}

		& ul {
			list-style: none;
			display: flex;
			flex-direction: column;
			justify-content: center;

			& li {
				border-bottom: 1px solid var(--grey-primary);
				padding: 2rem 0;

				&:first-of-type {
					padding-top: 0;
				}
			}
		}
	}
}

@media (min-width: 1024px) {
	section#projects {
		& .projects--header {
			flex-direction: row;
			align-items: center;

			& h2 {
				font-size: 2.75vmax;

				& br {
					display: block;
				}
			}

			& > div {
				width: 60%;

				& p {
					font-size: 1.1vmax;
				}
			}
		}

		& .projects--feature {
			grid-template-columns: 2fr 3fr;

			& > article {
				& h3 {
					font-size: inherit;
				}

				& .featured-project--image {
					width: 55%;
				}
			}

			& article {
				& > a {
					& h3 {
						font-size: 1.1vmax;
					}
				}
			}
		}
	}
}

section#service {
	padding: 6rem 10%;

	& h2 {
		font-size: 5.5vmax;
		color: var(--header-color);
		text-align: center;
		padding-bottom: 1rem;
	}

	& p {
		text-align: center;
		font-size: 1.7vmax;
		max-width: 60%;
		margin: 0 auto 1.5rem;
	}

	& h3 {
		font-size: 2.5vmax;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: .2rem;
	}
}

@media (min-width: 1024px) {
	section#service {
		padding: 12rem 10%;

		& h2 {
			font-size: 4.5vmax;
		}
		& p {
			font-size: 1vmax;
		}
	}
}

section#hobbies {
	background-color: var(--grey-secondary);
	padding: 3rem 10% 7rem 10%;

	& h2 {
		font-size: 5.5vmax;
		color: var(--header-color);
		text-align: center;
		padding-bottom: 1rem;
	}

	& p {
		text-align: center;
		font-size: 1.7vmax;
		max-width: 85%;
		margin: auto;
	}

	& ul {
		display: flex;
		list-style: none;
		justify-content: space-between;
		max-width: 60%;
		margin: auto;
		padding: 2.5rem 0 0;
		flex-direction: column;
		gap: 1.5rem;
		align-items: center;

		& li {
			font-size: 1.7vmax;
			font-weight: 700;
			position: relative;


			&.bullet {
				display: none;
			}
		}
	}
}

@media (min-width: 640px) {
	section#hobbies {
		& p {
			max-width: 85%;
		}
	}
}

@media (min-width: 1024px) {
	section#hobbies {
		padding: 7rem 10% 11rem 10%;

		& h2 {
			font-size: 4.5vmax;
		}

		& p {
			font-size: 1vmax;
			max-width: 50%;
		}

		& ul {
			flex-direction: row;

			& li {
				font-size: 1.15vmax;

				&.bullet {
					display: block;
				}
			}
		} 
	}
}

section#contact {
	display: grid;
	grid-template-columns: 1fr;
	padding: 6rem 5%;

	& > div:not(.form--container) {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2rem;

		& h2 {
			font-size: 5.5vmax;
			color: var(--header-color);
			margin-bottom: 1rem;
			line-height: 1.2;
		}
	}

	& .form--container {
		display: flex;
		justify-content: center;

		& > p {
			background: var(--grey-secondary);
			padding: 3rem 2rem;
			border-radius: 1rem;
			align-self: center;
			font-size: 1.7vmax;
			text-align: center;
		}

		& form {
			background-color: var(--grey-secondary);
			padding: 3.5rem 2rem;
			border-radius: 1rem;
			display: flex;
			flex-direction: column;
			width: 100%;

			& .form--message {
				color: var(--header-color);
				margin-bottom: 2rem;
				font-weight: 700;
				font-size: .95vmax;

				&.form--message-error {
					color: #ff6c6c;
				}
			}

			/* Top Level style for spacing of single fields */
			& > input, textarea {
				margin-bottom: 2rem;
			} 

			& input, textarea {
				background: var(--input-bg);
				border: 1px solid var(--input-bg);
				border-radius: .5rem;
				padding: .4rem 1rem;
				color: var(--body-color);

				&:focus {
					border: 1px solid var(--primary);
				}
			}

			& button {
				width: fit-content;
			}

			& label {
				margin-bottom: .35rem;
			}

			& .field-group--container {
				display: flex;
				gap: 1rem;
				flex-direction: column;
				margin-bottom: 1.5rem;

				& .field-group {
					display: flex;
					flex-direction: column;
					flex: 1;
				}
			}
		}
	}
}

@media (min-width: 750px) {
	section#contact {
		padding: 6rem 6%;


		/* Top Level style for spacing of single fields */
		& > input, textarea {
			margin-bottom: 1rem;
		} 

		& .form--container {
			max-width: 100%;

			& form {
				/* width: fit-content; */

				& .field-group--container {
					flex-direction: row;
					margin-bottom: 2rem;

					& .field-group {
						margin-bottom: 0;
					}
				}
			}
		}
	}
}

@media (min-width: 1100px) {
	section#contact {
		grid-template-columns: 2fr 3fr;
		padding: 6rem 3rem;

		& .form--container {
			justify-content: flex-end;

			& > p {
				font-size: 1vmax;
			}

			& form {
				max-width: 35rem;
			}
		}
	}
}

@media (min-width: 1300px) {
	section#contact {
		padding: 6rem 8%;
	}
}