// Charset =============================================================
@charset "UTF-8";

// Normalize ===========================================================
@import "partials/normalize";
@import "partials/reset";
@import "partials/extensions";
@import "partials/functions";
@import "partials/palette";

// Variables ===========================================================
$tablet: 40em;
$desktop: 60em;

$space-small: 2.5rem;
$space-large: 5rem;

:root {
	--radius-small: 0.25em;
	--radius-medium: 0.5em;
	--radius-large: 1em;
	--transition: 0.35s;
	--transition-hover: 0.1s;
	--duration: 4s;

	--black: #16161d;
	--black-a: rgba(22, 22, 29, 0.15);
	--gray: #909099;

	--blue: #1e90ff;
	--blue-a: rgb(30, 144, 255, 0.3);
	--blue-dark: #005cb8;
	--blue-light: #52c3fb;
	--purple: #a029de;
	--purple-dark: #5f267d;
	--purple-muted: #a377d2;
	--white: #fff;
	--offwhite: #ccc;

	--sky-100: #3b2f4a;
	--sky-150: #302944;
	--sky-200: #1f1f3a;
	--sky-300: #16161d;

	--background-gradient: radial-gradient(
		circle at center bottom,
		var(--sky-100),
		var(--sky-200),
		var(--sky-300)
	);

	// Light Mode
	--background: var(--white);
	--text-color: var(--black);
	--text-color-a: var(--gray);
	--link-color: var(--blue);
	--link-color-hover: var(--blue);
	--link-color-visited: var(--purple);
	--link-color-visited-hover: var(--purple);
}

// Structual styles ====================================================
body {
	position: relative;
	font: 100%/1.5 Nunito, sans-serif;
	color: var(--text-color);
	overflow-x: hidden;
}

.header-wrapper {
	max-width: 35em;
	margin: 0 auto;
	text-align: center;
	padding-top: 1.5em;

	@media (min-width: $tablet) {
		max-width: 42em;
	}

	@media (min-width: $desktop) {
		max-width: 50em;
	}
}

.main-wrapper {
	margin: 1.5em auto 0;
	max-width: 35em;

	@media (min-width: $tablet) {
		margin: 0 auto;
		max-width: 25em;
		padding: 2.5em 0;
	}
}

.container {
	position: relative;
	padding: 2rem;

	.header-wrapper &,
	.footer-wrapper & {
		padding: 1.5em 0;
		margin: 0 1.5em;
	}

	.contact-wrapper & {
		text-align: center;
		margin: 1.5rem auto;
		padding: 0 1.5rem;

		@media (min-width: $tablet) {
			max-width: 42em;
		}

		@media (min-width: $desktop) {
			max-width: 50em;
		}
	}
}

// Typography ==========================================================
h1,
h2 {
	font-weight: 400;
	line-height: 1.2;
}

h1 {
	font-size: 1.5em;

	@media (min-width: $desktop) {
		font-size: 2em;
	}
}
h2 {
	@extend %no-select;
	display: block;
	cursor: default;
	text-align: center;
	font-size: 1.25em;
	opacity: 0.75;
}

a {
	text-decoration: none;
	color: var(--text-color);
}

img {
	@extend %no-drag;
	@extend %no-select;
}

.outline {
	position: relative;
	color: var(--text-color);
	border-radius: var(--radius-large);

	&:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 1px;
		background: var(--black-a);
	}

	span {
		position: relative;
		display: inline-block;
		z-index: 10;
		background: var(--background);
		padding: 0.5em 1em;
	}
}

// Header ==============================================================
header {
	.container {
		text-align: center;

		@media (min-width: $tablet) {
			display: flex;
			align-items: center;
			text-align: left;
		}
	}

	h1 {
		@media (min-width: $tablet) {
			flex: 1;
			align-items: center;
		}
	}

	br {
		@media (max-width: $tablet) {
			display: none;
		}
	}
}

.me {
	width: 6em;
	height: 6em;
	border-radius: 50%;
	margin: 0 0 0.5rem 0;

	@media (min-width: $tablet) {
		width: 7em;
		height: 7em;
		margin: 0 1.5rem 0 0;
	}

	@media (min-width: $desktop) {
		width: 8em;
		height: 8em;
	}
}

// Jobs ================================================================
.job-wrapper {
	max-width: 40em;
	margin: 0 auto 0;
	text-align: center;

	.outline {
		margin: 0 1.5em;
		border-radius: var(--radius-large);
		padding: 1.5em;
		border-color: rgba(128, 128, 128, 0.3);
	}

	p {
		font-size: 1em;
		margin-top: 1em;
	}

	a {
		display: inline-block;
		margin-top: 1em;
		font-weight: bold;
		color: var(--link-color);
		padding: 0.5em 1.5em;
		border-radius: var(--radius-medium);
		transition: background var(--transition), color var(--transition),
			box-shadow var(--transition);
		box-shadow: inset 0 0 0 0.1em var(--blue-a), 0 0 0 0 transparent;

		&:hover {
			background: var(--blue-a);
			color: var(--link-color-hover);
			box-shadow: inset 0 0 0 0.1em transparent, 0 0 0 0.25em var(--blue-a);
		}
	}
}

// List ================================================================
ul {
	@extend %no-select;
	font-size: 1.2em;
}

li {
	position: relative;
	list-style: none;
}

// Links ===============================================================
.project-link,
.contact-link {
	display: block;
	position: relative;
	cursor: pointer;
	padding: 1.5rem 0;

	strong {
		color: var(--link-color);
		transition: color var(--transition);
	}

	&:hover {
		strong {
			color: var(--link-color-hover);
		}
	}

	&:visited {
		strong {
			color: var(--link-color-visited);
		}

		&:hover {
			strong {
				color: var(--link-color-visited-hover);
			}
		}
	}

	@media (min-width: $tablet) {
		transition: background-color var(--transition);
		border-radius: var(--radius-medium);
		margin: 1rem 0;
		padding: 1.5rem;

		&:hover {
			background: var(--blue-a);
			transition-duration: var(--transition-hover);
		}
	}
}

.project-link {
	display: flex;
	align-items: center;

	.project:nth-child(odd) & {
		flex-direction: row-reverse;
	}
}

// Screenshots =========================================================
$space: 5em;

.screenshot-wrapper {
	min-width: 50%;
	max-width: 50%;
	height: auto;
	margin: 0 1.5rem 0 0;
	transition: transform var(--transition);
	transform: scale(0.9);

	.project:nth-child(odd) & {
		margin: 0 0 0 1.5rem;
	}

	.project-link:hover & {
		transform: scale(1);
		transition-duration: var(--transition-hover);
	}

	@media (min-width: $tablet) {
		position: absolute;
		z-index: 10;
		width: 12em;
		height: 9em;

		.project:nth-child(odd) & {
			margin: 0;
		}
	}
}

.screenshot {
	width: 100%;
	height: auto;
	border-radius: var(--radius-small);
	box-shadow: 0 2.5em 5em var(--offwhite);
	box-shadow: 0 2em 2em -1em var(--offwhite);

	@media (min-width: $tablet) {
		display: block;
		width: 100%;
		height: auto;
		transition: box-shadow var(--transition);
	}
}

.project-link:hover .screenshot {
	box-shadow: 0 1em 2em var(--offwhite);
}

.line {
	@media (min-width: $tablet) {
		position: absolute;
		content: "";
		width: $space * 2;
		height: 1px;
		background: var(--text-color);
		opacity: 0.25;
		pointer-events: none;
		top: 50%;
		transition: opacity var(--transition);

		.project-link:hover & {
			opacity: 1;
		}
	}
}

// Left side -----------------------------------------------------------
$spread: 1.5em;

.project {
	&:nth-child(odd) {
		.line {
			right: calc(100% + 0.5em);
			transform-origin: center right;
		}

		.screenshot-wrapper {
			@media (min-width: $tablet) {
				right: calc(100% + #{$space-small});
			}
			@media (min-width: $desktop) {
				right: calc(100% + #{$space-large});
			}

			.screenshot {
				transform: rotate(5deg);
			}
		}
	}

	@media (min-width: $tablet) {
		&:nth-child(1) {
			.line {
				transform: rotate(6deg);
			}
			.screenshot-wrapper {
				top: -40%;

				.screenshot {
					transform: rotate(4deg);
				}
			}
		}
		&:nth-child(3) {
			.line {
				transform: rotate(14deg);
			}
			.screenshot-wrapper {
				top: -45%;

				.screenshot {
					transform: rotate(-2deg);
				}
			}
		}
		&:nth-child(5) {
			.line {
				transform: rotate(-5deg);
			}
			.screenshot-wrapper {
				top: -35%;

				.screenshot {
					transform: rotate(8deg);
				}
			}
		}
		&:nth-child(7) {
			.line {
				transform: rotate(5deg);
			}
			.screenshot-wrapper {
				top: -20%;

				.screenshot {
					transform: rotate(-8deg);
				}
			}
		}
	}
}

// Right side ----------------------------------------------------------
.project {
	&:nth-child(even) {
		.line {
			left: calc(100% + 0.5em);
			transform-origin: center left;
		}

		.screenshot-wrapper {
			@media (min-width: $tablet) {
				left: calc(100% + #{$space-small});
			}
			@media (min-width: $desktop) {
				left: calc(100% + #{$space-large});
			}

			.screenshot {
				transform: rotate(-5deg);
			}
		}
	}

	@media (min-width: $tablet) {
		&:nth-child(even) {
			.line {
				transform-origin: left center;
			}

			.screenshot img {
				transform: rotate(-5deg);
			}
		}

		&:nth-child(2) {
			.line {
				transform: rotate(-25deg);
			}
			.screenshot-wrapper {
				top: -80%;

				.screenshot {
					transform: rotate(-8deg);
				}
			}
		}
		&:nth-child(4) {
			.line {
				transform: rotate(-25deg);
			}
			.screenshot-wrapper {
				top: -60%;

				.screenshot {
					transform: rotate(2deg);
				}
			}
		}
		&:nth-child(6) {
			.line {
				transform: rotate(-18deg);
			}
			.screenshot-wrapper {
				top: -70%;

				.screenshot {
					transform: rotate(8deg);
				}
			}
		}
	}
}

// Contact =========================================================
.contacts {
	@media (min-width: $tablet) {
		display: flex;
		flex-wrap: wrap;
		border: none;
	}
}

.contact {
	flex: 1 0 50%;
}

.contact-link {
	display: block;
	padding: 1rem 1.5rem;
}

.email-link {
	cursor: text;

	strong {
		user-select: none;
	}

	input {
		background: transparent;
		text-align: center;
		border: 0;
		width: 11em;

		&:focus {
			outline: 0;
			border-radius: var(--radius-small);
		}
	}
}

// Footer ===============================================================
.footer-wrapper {
	text-align: center;
	font-size: smaller;
	text-align: center;
}

.copyright {
	@extend %no-select;
	cursor: default;
	margin: 0 0 1.5rem;
}
