@font-face {
	font-family: Pressura;
	src: url('/assets/GT-Pressura-Standard-Regular.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Regular.woff') format('woff'), url('/assets/GT-Pressura-Standard-Regular.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}

@font-face {
	font-family: Pressura;
	src: url('/assets/GT-Pressura-Standard-Regular-Italic.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Regular-Italic.woff') format('woff'), url('/assets/GT-Pressura-Standard-Regular-Italic.ttf') format('truetype');
	font-style: italic;
	font-weight: normal;
}

@font-face {
	font-family: Pressura;
	src: url('/assets/GT-Pressura-Standard-Bold.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Bold.woff') format('woff'), url('/assets/GT-Pressura-Standard-Bold.ttf') format('truetype');
	font-style: normal;
	font-weight: bold;
}

:root {
	--design: #E85;
	--design-high: #FA8;
	--research: #0B7;
	--research-high: #0D8;
	--manage: #99F;
	--manage-high: #BBF;
	--highlight: #FFF;
	--primary: #CCC;
	--secondary: #999;
	--tertiary: #666;
	--background-primary: #111;
	--background-secondary: #222;
}




/* Animations */




@keyframes text-rainbow {
	0% { color: var(--design); }
	33% { color: var(--research); }
	66% { color: var(--manage); }
	100% { color: var(--design); }
}

@keyframes border-rainbow {
	0% { border-color: var(--design); }
	33% { border-color: var(--research); }
	66% { border-color: var(--manage); }
	100% { border-color: var(--design); }
}

@keyframes fill-rainbow {
	0% { fill: var(--design); }
	33% { fill: var(--research); }
	66% { fill: var(--manage); }
	100% { fill: var(--design); }
}




/* General stuff */




* {
	box-sizing: border-box;
}

body {
	font-family: 'Pressura', Helvetica, Arial, sans-serif;
	line-height: 1.5rem;
	background-color: var(--background-primary);
	color: var(--primary);
	margin: 0;
}

a:link, a:visited {
	color: var(--primary);
}

a:hover, a:active {
	color: var(--highlight);
}

a.design:link, a.design:visited { color: var(--design); }
a.design:hover, a.design:active { color: var(--design-high); }

a.research:link, a.research:visited { color: var(--research); }
a.research:hover, a.research:active { color: var(--research-high); }

a.manage:link, a.manage:visited { color: var(--manage); }
a.manage:hover, a.manage:active { color: var(--manage-high); }

p, ul, ol {
	max-width: 48rem;
	margin: 0 auto;
}

p {
	padding: 0 1.5rem 1rem 1.5rem;
}

p:has(> img) {
	max-width: 72rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.video {
	padding: .5rem 0 .5rem 0;
}

p:has(> img) img {
	display: block;
	width: 100%;
	border-radius: 1rem;
	border: .125rem solid red;
	animation-name: border-rainbow;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background-color: #eee;
}

p:has(> span) {
	text-align: center;
	font-style: italic;
	color: var(--secondary);
	padding-bottom: 1.5rem;
}

blockquote {
	margin: 0;
	padding: 0 1.5rem;
	color: var(--secondary);
	font-style: italic;
	text-align: center;
}

blockquote p {
	max-width: 72rem;
}

blockquote em {
	font-style: normal;
}

ul, ol {
	padding: 0 1.5rem 1rem 3rem;
}

#intro, #content, #nav {
	padding-bottom: 1rem;
}

@media only screen and (min-width: 840px) {
	
	blockquote p {
		font-size: 1.5rem;
		line-height: 2.25rem;
	}
	
}

@media only screen and (min-width: 1152px) {
	
	p, ul, ol {
		font-size: 1.5rem;
		line-height: 2.25rem;
		max-width: 56rem;
	}
	
	p {
		padding: 0 3rem 1.5rem 3rem;
	}
	
	.video {
		padding: 1rem 0 1rem 0;
	}
	
	blockquote {
		padding: 0 3rem;
	}
	
	blockquote  p {
		font-size: 2rem;
		line-height: 3rem;
	}
	
	ul, ol {
		padding: 0 3rem 1.5rem 5.5rem;
	}
	
	#intro, #content, #nav {
		padding-bottom: 1.5rem;
	}
	
	p:has(> img) {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	
	p:has(> span) {
		padding-bottom: 1rem;
		padding-bottom: 2.5rem;
	}
	
}




/* Headings */




h1, h2, h3 {
	text-align: center;
	padding: 1rem 3rem;
	margin: 0 auto;
	max-width: 72rem;
}

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

h2 {
	font-size: 2rem;
	line-height: 2.75rem;
}

h3 {
	font-size: 1.5rem;
	line-height: 2.25rem;
}

h1.tagged { color: var(--secondary); font-weight: normal; }
h1.tagged span { font-weight: bold; }
h1.tagged span.design { color: var(--design); }
h1.tagged span.research { color: var(--research); }
h1.tagged span.manage { color: var(--manage); }

h1 a, h2 a {
	text-decoration: none;
}

h1 a::after, h2 a::after {
	content: " →";
	text-wrap: nowrap;
	font-weight: normal;
}

h1 a:link::after, h1 a:visited::after,
h2 a:link::after, h2 a:visited::after {
	color: var(--tertiary);
}

h1 a:hover::after, h1 a:active::after,
h2 a:hover::after, h2 a:active::after {
	animation-name: text-rainbow;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
}

h1.about {
	font-weight: normal;
	color: var(--tertiary);
}

h1.about strong {
	color: var(--primary);
}

@media only screen and (min-width: 1152px) {
	
	h1, h2, h3 {
		padding: 2rem 3rem;
	}
	
	h1 {
		font-size: 6rem;
		line-height: 7.5rem;
	}
	
	h2 {
		font-size: 3rem;
		line-height: 4.125rem;
	}
	
	h3 {
		font-size: 2rem;
		line-height: 2.75rem;
	}
	
}




/* Header area */




header {
	padding-top: 2rem;
}

header p {
	text-align: center;
}

header ul {
	padding: 0 1.5rem 1rem 1.5rem;
	max-width: none;
}

header p a {
	text-decoration: none;
}

header p a:link, header p a:visited {
	color: var(--secondary);
}

header p a:link strong, header p a:visited strong {
	color: var(--primary);
}

header p a:hover, header p a:active {
	color: var(--primary);
}

header p a:hover strong, header p a:active strong {
	color: var(--highlight);
}

@media only screen and (min-width: 480px) {
	
	header {
		padding-top: 1rem;
		display: flex;
	}
	
	header p, header ul {
		flex: 1;
	}
	
	header p {
		text-align: left;
	}
	
	header ul {
		text-align: right !important;
	}
	
}

@media only screen and (min-width: 1152px) {
	
	header {
		padding-top: 2rem;
	}
	
	header p {
		padding: 0 3rem 2rem 3rem;
	}
	
	header ul {
		padding: 0 3rem 2rem 3rem;
	}
	
}




/* Content area */



p.caption {
	text-align: center;
	font-style: italic;
	color: var(--secondary);
}

.endmark {
	text-align: center;
	font-size: 3rem;
	line-height: 3.75rem;
	padding: 0 1.5rem 1rem 1.5rem;
	animation-name: text-rainbow;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
}

.blurbs {
	padding: .5rem 1.5rem 0 1.5rem;
	margin: 0 auto;
}

.blurb {
	background-color: var(--background-secondary);
	border-radius: 1.5rem;
	padding: 1rem 0 .5rem 0;
	margin: 0 auto 1.5rem auto;
	max-width: 48rem;
}

.blurb p {
	padding: 0 1.5rem 1rem 1.5rem;
}

.blurb  p:has(> img) {
	padding: 0 1rem 1rem 1rem;
}

@media only screen and (min-width: 840px) {
	
	.blurbs {
		display: flex;
		gap: 1.5rem;
		max-width: 72rem;
	}
	
	.blurb-col {
		flex: 1;
	}
	
}

@media only screen and (min-width: 1152px) {
	
	.endmark {
		font-size: 6rem;
		line-height: 7.5rem;
		padding: 0 3rem 2rem 3rem;
	}
	
	.blurbs {
		padding: 1.5rem 2rem 1.5rem 2rem;
		gap: 2rem;
	}
	
	.blurb {
		padding: 1rem 0 .5rem 0;
		margin: 0 auto 2rem auto;
	}
	
	.blurb p {
		padding: 0 2rem 1.5rem 2rem;
	}
	
}




/* Footer area */




footer {
	background-color: var(--background-secondary);
	padding: 2rem 0;
}

.tools {
	text-align: center;
	color: var(--secondary);
}

.tools a:link, .tools a:visited {
	color: var(--secondary);
}

.tools a:hover, .tools a:active {
	color: var(--primary);
}

@media only screen and (min-width: 1152px) {
	
	footer {
		padding: 3rem 0;
	}
	
}



/* More articles*/




#more {
	background-color: var(--background-secondary);
}

#more {
	padding: 1rem 0;
}

@media only screen and (min-width: 1152px) {
	
	#more {
		padding: 1.5rem 0;
	}
	
}




/* Skill categories */




#skills {
	background-color: var(--background-secondary);
	text-align: center;
	padding: 1rem 0;
}

#skills ul {
	list-style: none;
	margin: 0 auto;
	padding: 1rem 3rem;
	font-size: 2rem;
	line-height: 2.75rem;
}

#skills li {
	padding: 0 0 1rem 0;
}

#skills a {
	text-decoration: none;
}

#skills a span {
	font-weight: bold;
}

#skills a:link span.design, #skills a:visited span.design { color: var(--design); }
#skills a:hover span.design, #skills a:active span.design { color: var(--design-high); }

#skills a:link span.research, #skills a:visited span.research { color: var(--research); }
#skills a:hover span.research, #skills a:active span.research { color: var(--research-high); }

#skills a:link span.manage, #skills a:visited span.manage { color: var(--manage); }
#skills a:hover span.manage, #skills a:active span.manage { color: var(--manage-high); }

#skills a::after {
	content: " →";
}

#skills a:link::after, #skills a:hover::after {
	color: var(--tertiary);
}

#skills a:hover::after, #skills a:active::after {
	animation-name: text-rainbow;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
}

@media only screen and (min-width: 720px) {
	
	#skills li {
		display: inline-block;
		padding: 0 1rem;
	}
	
}

@media only screen and (min-width: 1152px) {
	
	#skills {
		padding: 1.5rem 3rem;
	}
	
	#skills ul {
		font-size: 3rem;
		line-height: 4.125rem;
		max-width: 72rem;
		padding: 1.5rem 3rem;
	}
	
	#skills li {
		padding: 0 1.5rem;
	}
	
}




/* Horizontal unordered lists with bullet separators */




header ul,
.meta,
.actions,
.links,
#nav ul {
	list-style: none;
	text-align: center;
	margin: 0 auto;
}

header ul li,
.meta li,
.actions li,
.links li,
#nav li {
	display: inline-block;
}

.meta,
.actions,
.links,
#nav ul {
	padding: 0 3rem 1rem 3rem;
}

header li:not(:last-child)::after,
.meta li:not(:last-child)::after,
.actions li:not(:last-child)::after,
.links li:not(:last-child)::after,
#nav li:not(:last-child)::after {
	content: " • ";
	color: var(--tertiary);
}

.meta {
	color: var(--secondary);
}

.meta li strong {
	color: var(--primary);
}

.links a:link, .links a:visited {
	color: var(--secondary);
}

.links a:hover, .links a:active {
	color: var(--primary);
}

@media only screen and (min-width: 1152px) {
	
	.meta,
	.actions,
	.links,
	#nav ul {
		padding: 0 6rem 1.5rem 6rem;
	}
	
}




/* People Party animated badge */




.pledge {
	text-align: center;
	padding: 2rem 3rem;
}

.badge {
	width: 64px;
	height: 64px;
}

.badge path {
  animation-name: fill-rainbow;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.badge:hover path {
	animation-duration: 1s;
}

@media only screen and (min-width: 1152px) {
	
	.pledge {
		padding: 3rem;
	}
	
	.badge {
		width: 96px;
		height: 96px;
	}
	
}




/* Divider with animated center "almost equal" symbol */




.divider {
	text-align: center;
	font-size: 1.5rem;
	line-height: 2rem;
	padding: 1rem 1.5rem 0 1.5rem;
}

p.divider:has(> span) {
	font-style: normal;
}

.divider .outside { color: var(--tertiary); }
.divider .middle { color: var(--secondary); }
.divider .inside { color: var(--primary); }

.divider strong {
	animation-name: text-rainbow;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
}

@media only screen and (min-width: 1152px) {
	
	.divider {
		font-size: 3rem;
		line-height: 4.125rem;
		padding: 1rem 1.5rem 0 1.5rem;
	}
	
}