:root {
	--palette0: #040202;
	--palette1: #523b3b;
	--palette2: #5e4343;
	--palette3: #6a4c4c;
	--palette4: #e9d8d8;
	--palette5: #f0e5e5;
	--palette6: #f4efec;
	--palette7: #bcb58f;
	--palette8: #d0bb88;
	--palette9: #c19c81;
	--palette10: #ac9c5e;
	--palette14: #b48e9e;
}

html {
	height: 100vh;
}

html, body {
	box-sizing: border-box;
}

body {
	background-color: var(--palette0);
	color: var(--palette6);
	font-family: "Inconsolata", monospace;
}

p {
	font-weight: 400;
}

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

a {
	color: var(--palette10);
	text-decoration: none;
	outline: none;
	cursor: pointer;
}

blockquote {
	border-left: 4px solid var(--palette3);
	padding-left: 12px;
}

blockquote.testimonial {
	border-left: 4px solid var(--palette7);
	font-style: italic;
	font-size: large;
}

footer {
	margin-top: 10px;
	font-size: smaller;
	text-align: center;
}

footer[floating] {
	position: fixed;
	bottom: 0;
	right: 0;
	text-align: right;
}

@media (max-aspect-ratio: 1/1) {
	footer[floating] {
		left: 0;
		width: 100%;
		text-align: center;
	}
}

/*
a:visited, 
*/
a:hover {
	color: var(--palette9);
}

.bigtitle {
	color: var(--palette8);
	text-align: center;
	font-size: 3rem;
	padding: 10px;
	margin: 0;
}

.title {
	color: var(--palette8);
	text-align: center;
	margin: 0;
}

.subtitle {
	color: var(--palette7);
	text-align: center;
	margin: 0;
}

#main-container {
	margin: 0 auto;
	padding: 0 0 6vh 0;
	width: 50%;
	box-sizing: border-box;
}

#page-content {
	box-sizing: border-box;
}

#page-content[fillpage] {
	/* Div that takes up the whole page and centers its contents */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	/* Need to force to screen height to make parent divs grow */
	height: 94vh; /* 100vh - 6vh to account for footer */
	box-sizing: border-box;
}

#nav-container {
	background-color: var(--palette0);
	overflow: hidden;
	position: sticky;
	width: 100%;
	left: 0;
	top: 0;
}

#nav-container[floating] {
	position: fixed;
}

#nav-container a {
	display: block;
	position: relative;
	float: left;
	text-align: center;
	padding: 14px 16px;
}

#nav-container a span {
	position: relative;
	z-index: 1;
}

#nav-container a::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--palette3);
	clip-path: polygon(0 20%, 100% calc(20% + 0.2em), 100% 80%, 0 calc(80% - 0.2em));
	transform: scaleY(0);
	transition: transform 0.2s;
}

#nav-container a:hover::before,
#nav-container a[active]::before {
	transform: none;
}

#nav-container a:hover,
#nav-container a[active] {
	color: var(--palette0);
}

.boxed-link {
	position: relative;
	display: inline-block;
	--th: 2px;
	--vlen: 10px;
	--hlen: 10px;
	background:
		linear-gradient(to right, var(--palette7) var(--th), transparent var(--th)) 0 0,
		linear-gradient(to right, var(--palette7) var(--th), transparent var(--th)) 0 100%,
		linear-gradient(to left, var(--palette7) var(--th), transparent var(--th)) 100% 0,
		linear-gradient(to left, var(--palette7) var(--th), transparent var(--th)) 100% 100%,
		linear-gradient(to bottom, var(--palette7) var(--th), transparent var(--th)) 0 0,
		linear-gradient(to bottom, var(--palette7) var(--th), transparent var(--th)) 100% 0,
		linear-gradient(to top, var(--palette7) var(--th), transparent var(--th)) 0 100%,
		linear-gradient(to top, var(--palette7) var(--th), transparent var(--th)) 100% 100%;

	background-repeat: no-repeat;
	background-size: var(--hlen) var(--vlen);
	padding: 0.8rem;
	margin: 1rem;
}

.boxed-link:hover {
	background: none;
}

.boxed-link > * {
	position: relative;
	margin: 0;
	padding: 0;
	z-index: 1;
}

.boxed-link::before {
	--th: 2px;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 101%;
	height: 100%;
	background: var(--palette7);
	clip-path: polygon(
		/* 10 points to build a frame */
		0 0,
		0 0,
		0 var(--th),
		0 var(--th),
		0 var(--th), 
		0 var(--th), 
		0 var(--th), 
		0 var(--th), 
		0 var(--th), 
		0 var(--th) 
	);
}

.boxed-link:hover::before {
	animation: 0.5s cubic-bezier(1.000, 0.030, 0.780, 1.025) forwards boxed-link-border-animation;
}

/* Animate a border appearing around the boxed-link */
@keyframes boxed-link-border-animation {
	0% {
		clip-path: polygon(
			0 0,
			0 0,
			0 var(--th),
			0 var(--th),
			0 var(--th),
			0 var(--th),
			0 var(--th),
			0 var(--th),
			0 var(--th),
			0 var(--th)
		);
	}
	33% {
		/* Move out the top border */
		clip-path: polygon(
			0 0,
			100% 0,
			100% var(--th),
			calc(100% - var(--th)) var(--th),
			calc(100% - var(--th)) var(--th),
			calc(100% - var(--th)) var(--th),
			calc(100% - var(--th)) var(--th),
			calc(100% - var(--th)) var(--th),
			calc(100% - var(--th)) var(--th),
			0 var(--th)
		);
	}
	50% {
		/* Move out the right border */
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			calc(100% - var(--th)) 100%,
			calc(100% - var(--th)) calc(100% - var(--th)),
			calc(100% - var(--th)) calc(100% - var(--th)),
			calc(100% - var(--th)) calc(100% - var(--th)),
			calc(100% - var(--th)) calc(100% - var(--th)),
			calc(100% - var(--th)) var(--th),
			0 var(--th)
		);
	}
	83% {/* Move out the bottom border */
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			0 100%,
			0 calc(100% - var(--th)),
			var(--th) calc(100% - var(--th)),
			var(--th) calc(100% - var(--th)),
			calc(100% - var(--th)) calc(100% - var(--th)),
			calc(100% - var(--th)) var(--th),
			0 var(--th)
		);
	}
	100% { /* Move out the left border */
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			0 100%,
			0 0,
			var(--th) 0,
			var(--th) calc(100% - var(--th)),
			calc(100% - var(--th)) calc(100% - var(--th)),
			calc(100% - var(--th)) var(--th),
			0 var(--th)
		);
	}
}

/*
.boxed-link:hover {
	--th: 4px;
	--vlen: 15px;
	--hlen: 15px;
}
*/

@media (max-aspect-ratio: 1/1) {
	#main-container {
		width: 90%;
	}
}

.image-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	gap: 1rem 1rem;
	width: 100%;
}

.image-grid > * {
	width: auto;
	height: 20vh;
}

/* Project Index */
.project-box {
	background-color: var(--palette1);
	margin: 6px;
	padding: 12px;
}

.project-name {
	font-size: larger;
	border-bottom: 2px solid var(--palette3);
}

.project-thumbnail {
	margin: 6px auto;
	width: 80%;
}

@media (max-aspect-ratio: 1/1) {
	.project-thumbnail {
		width: 90%;
	}
}

/* Project Pages */
.project-image {
	margin: 6px auto;
	width: 50%;
}

.project-image-fullwide {
	margin: 6px auto;
	width: 100%;
}

p:not([noindent]) {
	text-indent: 30px;
}

@media only screen and (max-width: 1000px) and (min-width: 601px) {
	.project-image {
		width: 60%;
	}
}

@media only screen and (max-width: 599px) {
	.project-image {
		width: 80%;
	}
}

/* Contact Page */
#contact-form {
	width: 80%;
	margin: 0 auto;
}

#contact-form > * {
	background-color: var(--palette3);
	color: var(--palette6);
	box-sizing: border-box;
	border-style: none;
	width: 100%;
	padding: 12px;
	margin-top: 6px;
	margin-bottom: 6px;
}

#content {
	resize: vertical;
}
/*
#submit {
	width: 25%;
}*/