:root {
	--contentWidth: 800px;
	--sideSpace: calc(50vw - var(--contentWidth) / 2);
	--sideSpaceMin: 16px;

	--main-color: #ddd;
	--secondary-color: #222;
}

a {
	color: black;
}

html, body {
	margin: 0;
	padding: 0;
	background-color: var(--main-color);
	color: var(--secondary-color);
	font-size: 1.05em;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	transition: .5s filter;
}

section {
	padding: 10px;
	padding-left: max(var(--sideSpaceMin), var(--sideSpace));
	padding-right: max(var(--sideSpaceMin), var(--sideSpace));
	overflow: hidden;
}

section#hero {
	padding-top: 35vh;
	padding-bottom: 35vh;
	overflow: hidden;
}
section#hero > p {
	margin: .5rem;
}

section.inverted {
	background-color: var(--main-color);
	filter: invert(1);
}

section > p {
	text-align: center;
}
section > h1 {
	text-align: center;
}
section#hero > h1 {
	font-size: 2em;
	margin-bottom: 0;
}

.project {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 16px;
	padding: 16px;
	background-color: var(--main-color);
	box-shadow:
		inset  2px -2px 4px 0px #ffffff70,
		inset -2px  2px 4px 0px #00000020,
		1px 1px 4px 0px #ffffff20
		;
	transform: scale(1.00);
	filter: contrast(1.0);
	margin-bottom: 16px;
	transition:
		.2s box-shadow ease-in-out,
		.3s transform ease-in-out,
		.4s filter ease-in-out
		;
}
.project:hover {
	box-shadow:
		inset  3px -3px 4px 0px #ffffff60,
		inset -3px  3px 4px 0px #00000018,
		-6px 6px 16px 0px #ffffff20
		;
	transform: scale(1.005);
	filter: contrast(0.98);
}
.project h2 {
	margin-top: 0;
	text-decoration: underline;
}
.project a {
	text-decoration: none;
}

/* Wiggle animation... */
@keyframes wiggle {
    0% { top: 0px; }
  100% { top: 3px; }
}
.wiggleChar {
	will-change: transform;
	user-select: none;
	mix-blend-mode: difference;
	position: relative;
	color: #fff;
	display: inline-block;
	animation-name: wiggle;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
#click-callout {
	visibility: hidden;
}

#overlay {
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	mix-blend-mode: difference;
	image-rendering: pixelated;
	pointer-events: none;
}