/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Hello there */
/* 37signals application */

html { font-size: 16px; }

* {
	box-sizing: border-box;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

body {
	background: #FBF8FB;
	color: #111111;
	font-family: "Albert Sans", serif;
	font-size: 1.375rem;
	hyphens: manual;
	line-height: 2rem;
	margin: auto;
	max-width: 80rem;
	padding: 0 2rem;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Paytone One", sans-serif;
	line-height: 1.4em;
}

h1 {
	font-size: 3rem;
	line-height: 3.75rem;
}

h2 {
	background: linear-gradient(98.96deg, #391E2F 7.25%, #6767b6 90.66%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 3.75rem;
	line-height: 5rem;
}

h3 {
	background: linear-gradient(98.96deg, #391E2F 7.25%, #6767b6 90.66%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 1.875rem;
	line-height: 2.5rem;
}

strong { font-weight: 700; }

a {
	border-bottom: 2px solid #294C7D;
	color: #294C7D;
	font-weight: 700;
	transition: all 0.15s linear;
	text-decoration: none;
}

	a:hover {
		border-bottom-width: 6px;
	}




header {
	background: #2A3333;
	border-radius: 40px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: white;
	padding: 4rem;
	margin: 5rem 0 0.5rem 0;
}

	header h1 {
		margin-left: 15rem;
	}
	
	header p {
		font-size: 1.875rem;
		line-height: 2.625rem;
		margin-left: 18rem;
	}

	header img {
		bottom: 0;
		left: 0;
		position: absolute;
		height: 256px;
		width: 400px;
		z-index: 2;
	}
	
		header i.bubble {
			bottom: auto;
			display: block;
			left: 190px;
			opacity: 0;
			position: absolute;
			top: -50px;
			transition: all 0.3s ease-out;
			z-index: 1;
		}
		
			header i.bubble img {
				height: 90px;
				opacity: 0;
				position: static;
				transition: all 0.3s ease-out;
				transition-delay: 0.3s;
				width: 135px;
			}
		
			header i.bubble:before,
			header i.bubble:after {
				background: white;
				border: 1px solid #5d5d5d;
				border-radius: 999px;
				content: '';
				display: block;
				position: absolute;
				transition: all 0.3s ease-out;
				transition-delay: 0.3s;
			}
			
				header i.bubble:before {
					bottom: 8px;
					left: 4px;
					height: 6px;
					width: 6px;
				}
				
				header i.bubble:after {
					bottom: 12px;
					left: 12px;
					height: 16px;
					opacity: 0;
					transition: all 0.3s ease-out;
					transition-delay: 0.2s;
					width: 16px;
				}
		
			header img:hover + i.bubble {
				opacity: 1;
				transform: translate(16px, -16px);
			}
			
				header img:hover + i.bubble:after {
					opacity: 1;
					transform: translate(4px, -4px);
				}
				header img:hover + i.bubble img {
					opacity: 1;
					transform: translate(4px, -4px);
				}
	
	header mark {
		background: #A83786;
		border-radius: 8px;
		color: white;
	}


	
nav {
	display: flex;
	gap: 1rem;
	margin: 1rem 0;
}

	nav a {
		background: #2A3333;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		color: white;
		flex: 1;
		padding: 1rem 1.5rem;
		text-align: center;
		transition: all 0.1s linear;
		width: 25%;
	}
	
		nav a:hover {
			border: 1px solid rgba(0, 0, 0, 0.2);
			background: #4D5C5C;
		}
	
		nav a small {
			display: block;
			font-size: 1rem;
			font-weight: normal;
		}


main {
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 40px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding-bottom: 5rem;
	z-index: 1;
}
	
	main section {
		padding: 5rem 5rem 0 5rem;
	}
	
		main section.stats {
			background: #F6F5EB;
			color: #616052;
			padding: 0 5rem;
		}
		
		main section + section {
			margin-top: 3rem;
		}
	

	main h2 {
		margin-bottom: 2rem;
	}

	main h2 + p {
		font-size: 1.875rem;
		line-height: 2.625rem;
		margin-bottom: 2rem;
	}
	
	main p {
		margin-bottom: 1.5rem;
	}
	
	main section svg {
		vertical-align: middle;
	}
	
	main hr {
		background: #D1D9DB;
		border: 0;
		height: 2px;
		margin: 5rem 0;
	}
	
	
	main div.grid {
		display: flex;
		flex-grow: 2;
		flex-flow: row wrap;
		gap: 1.5rem;
		width: 100%;
	}
	
		main div.grid div {
			background: #EBF6F6;
			border-radius: 16px;
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 1.2rem;
			padding: 2rem;
			min-width: 20rem;
			width: 30%;
		}
		
			main div.grid div:nth-child(2) { background: #EEEAD7; }
			main div.grid div:nth-child(3) { background: #F6EBF3; }
			main div.grid div:nth-child(4) { background: #E5E0C3; }
			main div.grid div:nth-child(5) { background: #EED7E7; }
			main div.grid div:nth-child(6) { background: #D7EDEE; }
			
			main div.grid.projects div { background: #F4F0F4; }
			
			
			main div.grid.stats { gap: 0; }
			
			main div.grid.stats div {
				background: transparent;
				border-radius: 0;
				flex-direction: column;
				min-width: 10rem;
				text-align: center;
				width: 24%;
			}
			
				main div.grid.stats div + div { border-left: 2px solid white;}
			
				main div.grid.stats div h4 {
					color: #111111;
					font-size: 2rem;
					padding-bottom: 0.5rem;
				}
			
			main div.grid div summary { flex: 1; }
		
			main div.grid div h5 {
				font-size: 1rem;
				margin-bottom: 1rem;
				text-transform: uppercase;
			}
		
			main div.grid div img,
			main div.grid div svg {
				display: block;
				height: 10rem;
				margin: auto;
				margin-top: 2rem;
				width: 10rem;
			}
			
			main div.grid div svg,
			main div.grid div svg .anim {
				transition: all 1s ease-in-out;
				transform-origin: 50% 50%;
			}
			
			main div.grid div.expert:hover svg { transform: rotate(-90deg); }
			
			main div.grid div.expert:hover svg .anim { transform: rotate(180deg); }
			
			
			
			main div.grid div.creator:hover svg g.ship {
				transform: translate(8px, -8px);
			}
			
			main div.grid div.creator svg rect {
				transform: rotate(45deg);
			}
				
				main div.grid div.creator:hover svg rect.anim.f1 {
					transform: rotate(45deg) scale(1, 1.7) translate(0, -20px);
				}
				main div.grid div.creator:hover svg rect.anim.f2 {
					transform: rotate(45deg) scale(1, 1.5) translate(0, -20px);
				}
				main div.grid div.creator:hover svg rect.anim.f3 {
					transform: rotate(45deg) scale(1, 1.3) translate(0, -15px);
				}
			
			
			
			main div.grid div.figma svg {
				animation: figma 3s ease-in-out infinite paused;
			}
			
				main div.grid div.figma:hover svg {
					animation: figma 3s ease-in-out infinite;
				}
				
				@keyframes figma {
					0% { transform: translate(0, 0); }
					20% { transform: translate(10px, -12px); }
					50% { transform: translate(25px, 20px); }
					70% { transform: translate(-6px, 6px); }
					100% { transform: translate(0, 0); }
				}
			
			
			main div.grid div.motion svg {}
				
				main div.grid div.motion:hover svg .c1 {
					transform: translate(-23px, -46px);
				}
				main div.grid div.motion:hover svg .c2 {
					transform: translate(-23px, 46px);
				}
				main div.grid div.motion:hover svg .c3 {
					transform: translate(46px, 0);
				}
				main div.grid div.motion:hover svg .c4 {
					transform: translate(46px, 79px);
				}
				main div.grid div.motion:hover svg .c5 {
					transform: translate(-100px, 0);
				}
				main div.grid div.motion:hover svg .c6 {
					transform: translate(46px, -79px);
				}
			
			
			
			main div.grid div.mentor svg path.anim,
			main div.grid div.mentor svg circle.anim {
				transition: 0.6s all cubic-bezier(.5, -1, .5, 1.4);
				transform-origin: 50% 33%;
			}
			
				main div.grid div.mentor:hover svg circle.c1 {
					transform: translate(0, -8px)
				}
			
				main div.grid div.mentor:hover svg path.anim {
					transform: translate(0, -8px) rotate(20deg);
				}
				
				main div.grid div.mentor:hover svg circle.c2 {
					transform: translate(0, -10px)
				}
			
			
			
			main div.grid div.details svg {}
			
				main div.grid div.details svg .c1 {
					transition-duration: 0.5s;
					transform-origin: 18px 42px;
				}
				main div.grid div.details:hover svg .c1 {
					fill: transparent;
					transform: scale(1.5);
				}
				
				main div.grid div.details svg .c2 {
					transition-duration: 0.8s;
					transform-origin: 18px 112px;
				}
				main div.grid div.details:hover svg .c2 {
					fill: transparent;
					transform: scale(1.5);
				}
				
				main div.grid div.details svg .c3 {
					transition-duration: 0.4s;
					transform-origin: 64px 42px;
				}
				main div.grid div.details:hover svg .c3 {
					fill: #64E0E1;
					transform: scale(0.7);
				}
				
				main div.grid div.details svg .c4 {
					transition-duration: 0.6s;
					transform-origin: 40px 88px;
				}
				main div.grid div.details:hover svg .c4 {
					fill: #38A6A8;
					transform: scale(0.7);
				}
				
				main div.grid div.details svg .c5 {
					transition-duration: 0.3s;
					transform-origin: 64px 18px;
				}
				main div.grid div.details:hover svg .c5 {
					fill: transparent;
					transform: scale(1.5);
				}
				
				main div.grid div.details svg .c6 {
					transition-duration: 0.3s;
				}
				main div.grid div.details:hover svg .c6 {
					fill: #38A6A8;
					stroke: #38A6A8;
				}
				
				main div.grid div.details svg .c7 {
					transition-duration: 0.3s;
				}
				main div.grid div.details:hover svg .c7 {
					fill: white;
					stroke: white;
				}
				
				main div.grid div.details svg .c8 {
					transition-duration: 0.7s;
					transform-origin: 88px 62px;
				}
				main div.grid div.details:hover svg .c8 {
					fill: #38A6A8;
					transform: scale(0.7);
				}
				
				main div.grid div.details svg .c9 {
					transition-duration: 0.3s;
				}
				main div.grid div.details:hover svg .c9 {
					fill: #38A6A8;
					stroke: #38A6A8;
				}
			
			
			
			main div.grid.projects div {
				cursor: pointer;
			}
			
			main div.grid.projects div,
			main div.grid.projects div img { transition: all 0.2s ease-out; }
			
			main div.grid.projects div:hover {
				background: #F9F7F9;
				box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
			}
			
				main div.grid.projects div:hover h5 { color: #294C7D; }
			
			main div.grid.projects div:hover img { transform: scale(1.1) rotate(3deg); }
			
			main div.grid.projects div:nth-child(2n):hover img { transform: scale(1.05) rotate(-3deg); }
			
			
	
	main section.cv div.job {
		display: flex;
		gap: 2rem;
		margin: 3rem 0;
	}
	
		main section.cv div.job img {
			height: 6.25rem;
			width: 6.25rem;
		}
		
			main section.cv div.job i:before {
				border: 1px solid #2A3333;
				border-radius: 1.3rem;
				content: '';
				display: block;
				height: 6.25rem;
				position: absolute;
				right: 8px;
				top: -8px;
				transition: all 0.15s ease-in-out;
				width: 6.25rem;
				z-index: 0;
			}
			
			main section.cv div.job:nth-child(4) i:before { left: -8px; top: 8px; right: 0; }
			main section.cv div.job:nth-child(5) i:before { left: 8px; top: -8px; right: 0; }
			main section.cv div.job:nth-child(6) i:before { left: 8px; top: 8px; right: 0; }
			
			main section.cv div.job:hover i:before {
				transform: rotate(10deg);
			}
			
	main section.cv div.job small {
		display: block;
		font-size: 1.2rem;
		margin: 0.5rem 0;
		opacity: 0.7;
	}




footer {
	font-size: 1.1rem;
	margin: 2rem 2rem 4rem 2rem;
	text-align: center;
}

div.dim {
	background: rgba(0, 0, 0, 0.8);
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 0;
	transition: all 0.4s ease-out;
	z-index: 2;
}

	div.dim.active {
		opacity: 1;
		pointer-events: all;
	}


section.projectDetails {
	background: white;
	border-radius: 40px;
	bottom: 2rem;
	left: 4rem;
	margin: auto;
	max-width: 60rem;
	opacity: 0;
	padding: 6rem 2rem 0 2rem;
	pointer-events: none;
	position: fixed;
	right: 4rem;
	top: 7rem;
	transition: all 0.4s ease-out;
	transform: translate(0, 4rem);
	z-index: -1;
}

	section.projectDetails.active {
		opacity: 1;
		pointer-events: all;
		transform: translate(0, 0);
		z-index: 999;
	}

	section.projectDetails img.icon {
		left: calc(50% - 5rem);
		height: 10rem;
		position: absolute;
		top: -5rem;
		width: 10rem;
	}
	
	section.projectDetails a.x {
		border: 0;
		border-radius: 999px;
		cursor: pointer;
		display: block;
		height: 4rem;
		position: absolute;
		right: 2rem;
		text-indent: -9999px;
		top: 2rem;
		width: 4rem;
	}
	
		section.projectDetails a.x:hover {
			background: rgba(0, 0, 0, 0.1);
		}
	
		section.projectDetails a.x:before,
		section.projectDetails a.x:after {
			background: #4D5C5C;
			border-radius: 40px;
			content: '';
			display: block;
			left: 1.05rem;
			height: 3px;
			transform-origin: center center;
			top: 1.9rem;
			position: absolute;
			width: 24px;
		}
			section.projectDetails a.x:before { transform: rotate(45deg); }
			section.projectDetails a.x:after { transform: rotate(-45deg); }
	
	section.projectDetails div {
		height: 100%;
		overflow: auto;
		padding: 0 2rem 4rem 2rem;
	}
	
		section.projectDetails div h2 {
			margin: 0 0 1rem 0;
		}
		
		section.projectDetails div p { margin-bottom: 1rem; }
	
		section.projectDetails div img {
			border-radius: 24px;
			margin: 2rem 0 0 0;
			-webkit-user-select: none !important;
			width: 100%;
		}
	
	

@media screen and (max-width: 1080px) {
	html { font-size: 13px; }
	main { padding-bottom: 4rem; }
		main section { padding: 4rem 4rem 0 4rem; }
		main section.stats { padding: 0 4rem; }
	
	header { padding: 3rem; }
	
		header img {
			height: 192px;
			width: 300px;
		}
		
		header i.bubble { left: 140px; }
}


@media screen and (max-width: 850px) {
	
	html { font-size: 12px; }
	
	header { padding: 1.6rem; }
	
		header h1 {
			font-size: 2.5rem;
			margin-left: 11rem;
		}
		
		header p {
			font-size: 1.8rem;
			margin-left: 15rem;
		}
		
		header img {
			height: 128px;
			width: 200px;
		}
		
		header i.bubble {
			left: 90px;
			top: -40px;
		}
		
	
	main section.stats { padding: 0; }
	
	main div.grid div {
		align-items: center;
		flex-direction: row-reverse;
		justify-content: center;
		min-width: 20rem;
	}
	
		main div.grid:not(.stats) div:nth-child(2n) { flex-direction: row; }
		main div.grid div:nth-child(2n) img,
		main div.grid div:nth-child(2n) svg { margin: 0 0 0 2rem; }
		
		main div.grid div h5 { font-size: 1.3rem; }
		main div.grid div p { margin: 0; }
	
		main div.grid div img,
		main div.grid div svg {
			margin: 0 2rem 0 0;
		}
		
		main div.grid.stats div {
			min-width: 50%;
			padding: 2rem;
		}
		main div.grid.stats div + div { border: 0; }
		main div.grid.stats div:nth-child(1),
		main div.grid.stats div:nth-child(2) {
			border-bottom: 2px solid white;
		}
		
		main div.grid.stats div:nth-child(2),
		main div.grid.stats div:nth-child(4) {
			border-left: 2px solid white;
		}
}


@media screen and (max-width: 700px) {
	html { font-size: 11px; }
	
	body { padding: 0 0.5rem; }
	
	h2 {
		font-size: 3rem;
		line-height: 4rem;
	}
	
	header {
		border-radius: 20px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	
		header i.bubble {
			left: 90px;
			top: -40px;
		}
		
			header i.bubble img {
				height: 60px;
				widows: 90px;
			}
	
	main {
		border-radius: 20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding-bottom: : 2rem;
	}
		main section { padding: 2rem 2rem 0 2rem; }
	
	header h1 {
		font-size: 1.5rem;
		line-height: 2.5rem;
		margin-left: 12rem;
	}
	
	header p {
		font-size: 1.2rem;
		line-height: 2.2rem;
		margin-left: 16rem;
	}
	
	main div.grid:not(.stats) { gap: 1rem; }
	
		main div.grid.projects:not(.stats) div:nth-child(2n) { flex-direction: row-reverse; }
		main div.grid.projects div:nth-child(2n) img { margin: 0 2rem 0 0; }
	
		main div.grid div img,
		main div.grid div svg {
			height: 6rem;
			width: 6rem;
		}
	
	main section.cv div.job img,
	main section.cv div.job i:before {
		height: 4rem;
		width: 4rem;
	}
	
	main section.cv div.job i:before {
		border-radius: 1rem;
	}
	
	section.projectDetails {
		border-radius: 24px;
		bottom: 1rem;
		left: 1rem;
		padding-left: 2rem;
		padding-right: 2rem;
		right: 1rem;
	}
	
		section.projectDetails div { padding: 0 0 2rem 0; }
	
			section.projectDetails div img { border-radius: 16px; }
	
}