/* Created by Eric Podlin */

/*** Variables ***/
:root {
	--clink: #1E3080;
	--clink-hover: #551E80;
	--ctext-black: #1B2935;
	--ctext-black-body: rgba(27, 41, 53, 0.85);
	--ctext-black-sub: rgba(27, 41, 53, 0.7);
	--cpurple: #C998F0;
	--cblue: #BCDBF0;
}

/*** Base Styles ***/
html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	color: var(--ctext-black);
	font-family: 'Inter', sans-serif;
	font-size: 100%;
}

	@media screen and (max-width: 680px) {
		body {
			font-size: 85%;
		}
	}

h2 {
	margin-top: 0;
}

p {
	line-height: 160%;
}

	p.subtext {
		color: var(--ctext-black-sub);
		font-size: 0.813em;
		margin: 0;
	}

ul {
	line-height: 160%;
}

a {
	color: var(--clink);
    transition: all .25s ease;
}

	a svg path {
		fill: var(--clink);
		transition: all .25s ease;
	}
		
	a:hover, a:active{
		color: var(--clink-hover);
		text-decoration: none;
	}

		a:hover svg path,
		a:active svg path {
			fill: var(--clink-hover);
		}

img {
	max-width: 100%;
	height: auto;
}

.button {
	display: inline-block;
	background: var(--clink);
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	padding: 1rem 1.5rem;
	box-shadow: 0px 4px 8px rgba(85, 120, 143, 0.1);
	border-radius: 6px;
}

	.button svg path {
		fill: #fff;
	}

	.button:hover,
	.button:active {
		transform: translateY(-5px);
		background: var(--clink-hover);
		color: #fff;
	}

	.button.light {
		background: #fefefe;
		color: var(--clink);
	}

		.button.light svg path {
			fill: var(--clink);
		}

		.button.light:hover,
		.button.light:active {
			background: #fefefe;
			color: var(--clink-hover);
		}

			.button.light:hover svg path,
			.button.light:active svg path {
				fill: var(--clink-hover);
			}

/*** Site Styles ***/
.nav-wrapper {
	background: #151e2b;
	position: sticky;
	top: 0;
	z-index: 99;
	padding: 0 1rem 0 0;
}

	nav {
		display: flex;
		align-items: center;
		max-width: 1156px;
		margin: 0 auto;
	}

		nav a img {
			max-height: 50px;
		}

		nav a {
			color: rgba(255, 255, 255, 0.9);
			text-decoration: none;
			font-weight: bold;
			padding: 0 .75rem;
			
			display: flex;
			align-items: center;
			gap: .5rem;
		}

			a svg path {
				fill: rgba(255, 255, 255, 0.9);;
				transition: all .25s ease;
			}
		
			nav a:hover,
			nav a:active {
				color: var(--cpurple);
			}

				nav a:hover svg path,
				nav a:active svg path {
					fill: var(--cpurple);
				}

			nav a:first-of-type {
				padding: 0;
			}

			nav a:last-of-type {
				padding-right: 0;
			}

			nav a:nth-child(2) {
				margin-left: auto;
			}

.hero-wrapper {
	position: relative;
	background: linear-gradient(90deg, #1B2935 0%, #151E2B 100%);
	padding: 5.25rem 1.5rem;
}

	.hero {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
		column-gap: 8.875rem;
		row-gap: 5.25rem;
		align-items: center;
		max-width: 1156px;
		margin: 0 auto;
	}

	@media screen and (max-width: 388px) {
		.hero {
			grid-template-columns: auto;
		}
	}

		.hero::before {
			content: "";
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			-webkit-clip-path: polygon(100% 100%,-12% 100%,100% 35%);
			clip-path: polygon(100% 100%,-12% 100%,100% 35%);
			background: linear-gradient(270deg, #1B2935 0%, #151E2B 100%);
		}

		.hero .content {
			position: relative;
			z-index: 2;
		}

			.hero .content h1 {
				color: #fff;
				font-size: 6.875em;
				line-height: 110%;
				margin: 0 0 1.5rem;
			}

			@media screen and (max-width: 441px) {
				.hero .content h1 {
					font-size: 4.875rem;
				}
			}

			.hero .content p {
				color: #fff;
				font-size: 1.5em;
				margin: 0;
			}

				.hero .content p span {
					color: var(--cpurple);
					font-weight: 600;
				}

			.hero .content .button-group {
				display: flex;
			}

				.hero .content .button-group a {
					margin: 0 .5rem;
				}

					.hero .content .button-group a:first-of-type {
						margin-left: 0;
					}

					
					.hero .content .button-group a:last-of-type {
						margin-right: 0;
					}

			@media screen and (max-width: 490px) {
				.hero .content .button-group {
					flex-direction: column;
				}

					.hero .content .button-group a {
						margin: 0 0 1rem;
					}

						.hero .content .button-group a:last-of-type {
							margin-bottom: 0;
						}
			}

		.hero .img {
			position: relative;
			z-index: 2;
			margin: 0 auto;
		}

			.hero .img img.maxH {
				max-height: 610px;
				display: block;
				border-radius: 6px;
			}

			.hero .img img.shadow {
				filter: drop-shadow(0px 25px 50px rgba(0, 0, 0, 0.3));
			}

			.hero.accents .img::before {
				content: "";
				position: absolute;
				max-width: 266px;
				max-height: 244px;
				width: 40vw;
				height: 40vw;
				z-index: -1;
				top: 21.46%;
				left: -3.4%;
				background: var(--cpurple);
			}

			.hero.accents .img::after {
				content: "";
				position: absolute;
				max-width: 266px;
				max-height: 244px;
				width: 40vw;
				height: 40vw;
				z-index: -1;
				top: -3.1%;
				right: -3.4%;
				background: var(--cpurple);
			}

			.internal .hero.accents .img::before {
				top: 17.38%;
				left: -2.1%;
			}
			.internal .hero.accents .img:after {
				top: -2.5%;
				right: -2.1%;
			}

		.internal .hero {
			grid-template-columns: auto;
		}

			.internal .hero .content {
				max-width: 960px;
				margin: 0 auto;
			}

				.internal .hero .content p {
					margin: 1.5rem 0;
				}

.projects-wrapper {
	background: url('../images/texture.svg') repeat #D9ECF9;
	background-attachment: fixed;
	padding: 5.25rem 1.5rem;
}

	.projects {
		max-width: 1156px;
		margin: 0 auto;
	}

	/* Temp for ONEPAGE */
	.projects .content-single {
		background: #fefefe;
		box-shadow: 0px 4px 8px rgba(85, 120, 143, 0.1);
		border-radius: 6px;
		text-decoration: none;
		padding: 1.5rem;
	}

		.projects .content-single p {
			max-width: 960px;
			margin: 0 auto;
		}
	/* END : Temp for ONEPAGE */

	.projects-grid {
		display: grid;
		gap: 1.5rem;
	}

		.internal .projects-grid {
			grid-template-columns: repeat(auto-fit, minmax(274px, 1fr));
		}

		.projects .project {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(274px, 1fr));
			background: #fefefe;
			box-shadow: 0px 4px 8px rgba(85, 120, 143, 0.1);
			border-radius: 6px;
			text-decoration: none;
			overflow: hidden;
		}

			.internal .projects .project {
				display: flex;
				flex-direction: column;
			}

			.projects .project.home {
				display: flex;
				background: none;
				border: 2px dashed #fefefe;
				text-align: center;
			}

			.projects a.project:hover {
				transform: translateY(-5px);
				box-shadow: 0px 4px 28px rgba(85, 120, 143, 0.1);
			}

			.projects .project .img {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F5F9FF;
				padding: 3rem;
				transition: all .25s ease;
				overflow: hidden;
			}

				@media screen and (max-width: 595px) {
					.projects .project .img {
						padding: 2rem;
					}
				}

				.internal .projects .project .img {
					height: 140px;
				}

				.projects .project .img.desktop {
					padding-right: 0;
				}

				.projects .project:hover .img {
					background: #e7f1ff;
				}

				.projects .project .img img {
					transition: all .25s ease;
					max-height: 600px;
					filter: drop-shadow(0 4px 8px rgba(85, 120, 143, 0.1));
				}

					.projects .project:hover .img img {
						transform: scale(1.05);
						filter: drop-shadow(0px 4px 28px rgba(85, 120, 143, 0.1));
					}

			.projects .project .content {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				padding: 3rem;
				margin: auto;
			}

				@media screen and (max-width: 595px) {
					.projects .project .content {
						padding: 2rem;
					}
				}

				.internal .projects .project .content {
					margin-top: 0;
				}

					.internal .projects .project .content h3 {
						margin: 0;
					}

					.internal .projects .project.home .content {
						margin-top: auto;
					}

				.projects .project .content h2 {
					margin: 0;
				}

				.projects .project .content p {
					color: var(--ctext-black);
					margin: 0;
				}

				.projects .project .content .button {
					margin-top: .5rem;
				}

				@media screen and (min-width: 850px) {
					.projects .project .content .button {
						align-self: flex-start;
					}
				}

.info-wrapper {
	background: linear-gradient(180deg, #FEFEFE 0%, #F5F9FF 100%);
	padding: 5.25rem 1.5rem;
	box-shadow: 0 0 8px rgba(85, 120, 143, 0.1);
	z-index: 3;
	position: relative;
}

	.info {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(221px, 1fr));
		column-gap: 8.875rem;
		row-gap: 5.25rem;
		max-width: 1156px;
		margin: 0 auto;
	}

		.info.project-page {
			grid-template-columns: auto;
			max-width: 960px;
		}

		.info h2 {
			position: relative;
		}

		.info h2::before {
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
			z-index: 1;
			top: 4px;
			left: -44px;
			background: var(--cpurple);
		}

		@media screen and (max-width: 1290px) {
			.info h2 {
				margin-left: 2.75rem;
			}
		}

		.info .work {
			grid-column: auto / span 2;
		}

			.info.project-page .work {
				grid-column: auto;
			}

		@media screen and (max-width: 490px) {
			.info .work {
				grid-column: auto;
			}
		}

			.info .work .two-col {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 6%;
				margin: 3.25rem 0;
			}

			.info .work .one-col {
				margin: 3.25rem auto;
				text-align: center;
			}

				.info .work .two-col.top,
				.info .work .one-col.top {
					margin-top: 0;
				}

				.info .work .two-col.bottom,
				.info .work .one-col.bottom {
					margin-bottom: 0;
				}

			.info .work img.shadow {
				border: 1px solid rgba(85, 120, 143, 0.1);
				border-radius: 6px;
				filter: drop-shadow(0 4px 8px rgba(85, 120, 143, 0.1));
			}

			.info .work .position {
				display: grid;
				grid-template-columns: auto 1fr;
				gap: 2.75rem;
			}

			@media screen and (max-width: 490px) {
				.info .work .position {
					grid-template-columns: none;
					gap: 0.75rem;
				}
			}

				.info .work .position .date p {
					margin: 0;
				}

					.info .work .position .content h3 {
						margin: 0 0 0.25rem;
					}

		/*.info .side {}*/

			.info .side ul {
				list-style: none;
				padding: 0;
			}

				.info .side ul li {
					margin-bottom: 0.75rem;
				}

					.info .side ul li:last-of-type {
						margin-bottom: 0;
					}

			.info .side .marginB {
				padding-bottom: 5.25rem;
			}

			.info .side .sticky {
				position: sticky;
				top: 5.25rem;
			}