/*Fonts*/
@font-face {
	font-family: karl;
	src: url(../fonts/karl-regular-webfont.woff);
	font-weight: 400;
}

@font-face {
	font-family: karl;
	src: url(../fonts/karl-light-webfont.woff);
	font-weight: 300;
}

/* Typography */
body {
	font-family: karl, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 300;
	padding-top: 100px;
}

p {
	line-height: 1.5;
	margin-bottom: 16px;
	color: rgba(0, 0, 0, .64)
}

a {
	font-weight: 400;
	color: black;
	position: relative;
	transition: .3s;
}

h1 {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 400;
}

.special {
	font-feature-settings: 'aalt' 1, 'ss01' 1;
	text-transform: uppercase;
}

blockquote {
	line-height: 1.5;
	padding: 20px 40px 40px 40px;
	position: relative;
	color: rgba(0, 0, 0, 1);
}

blockquote p {
	color: rgba(0, 0, 0, 1);
}

blockquote::before {
	display: block;
	content: url(../img/quotes.png);
	position: absolute;
	top: 0;
	left: 0;
}

ul,
ol {
	margin-left: 32px;
}

ol li {
	margin-bottom: 20px;
	color: rgba(0, 0, 0, .64);
	line-height: 1.5;
}

ul li {
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	line-height: 1.5;
}

ul li::before {
	display: inline-block;
	content: '';
	height: 4px;
	width: 4px;
	border-radius: 100%;
	background-color: #000;
}


/* Layout */
* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

#wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 0 8%;
}

#wrapper section {
	width: 100%;
	max-width: 1100px;
	position: relative;
}

#wrapper section header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

#wrapper section header .header-line {
	height: 2px;
	flex: 1;
	background-color: #000;
	border-radius: 100px;
}

#wrapper section header svg {
	max-width: 60px;
}

#wrapper section article {
	overflow-y: auto;
	padding: 0 16px 16px 0;
	position: relative;
}

#wrapper section .center p {
	text-align: center;
}

#read-more-cont {
	width: 100%;
	background-color: white;
	height: 48px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

#read-more-arrow {
	width: 20px;
	margin: auto;
	position: absolute;
	cursor: pointer;
	animation: bounce 2s infinite;
}


@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
	  -moz-transform: translateY(0);
	  -ms-transform: translateY(0);
	  -webkit-transform: translateY(0);
	  transform: translateY(0);
	}
	40% {
	  -moz-transform: translateY(-16px);
	  -ms-transform: translateY(-16px);
	  -webkit-transform: translateY(-16px);
	  transform: translateY(-16px);
	}
	60% {
	  -moz-transform: translateY(-8px);
	  -ms-transform: translateY(-8px);
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
  }


/* scrollbar width */
#wrapper section article::-webkit-scrollbar {
	width: 3px;
	border-radius: 100px;
}

/* scrollbar track */
#wrapper section article::-webkit-scrollbar-track {
	background: #c0c0c0;
	border-radius: 100px;
}

/* scrollbar handle */
#wrapper section article::-webkit-scrollbar-thumb {
	background: black;
	border-radius: 100px;
}



/* Categories */
body.kwinters-essay, body.kwinters-essay #read-more-cont {
	background-color: #EEEBFF;
}

body.universities, body.universities #read-more-cont {
	background-color: #E2F3F2;
}

body.hypertext, body.hypertext #read-more-cont {
	background-color: #FFF8DD;
}

body.different-gestures, body.different-gestures #read-more-cont {
	background-color: #FEE2E2;
}

body.kwinters-essay path.universities,
body.kwinters-essay path.hypertext,
body.kwinters-essay path.different-gestures {
	fill: white;
}

body.universities path.kwinters-essay,
body.universities path.hypertext,
body.universities path.different-gestures {
	fill: white;
}

body.hypertext path.kwinters-essay,
body.hypertext path.universities,
body.hypertext path.different-gestures {
	fill: white;
}

body.different-gestures path.kwinters-essay,
body.different-gestures path.universities,
body.different-gestures path.hypertext {
	fill: white;
}

path.kwinters-essay {
	fill: #624CD2;
}

path.universities {
	fill: #05D7C5;
}

path.hypertext {
	fill: #FDCC03;
}

path.different-gestures {
	fill: #FA6A6C;
}

body.kwinters-essay a:visited, body.kwinters-essay a:hover {
	color: #624CD2;
}

body.universities a:visited, body.universities a:hover {
	color: #05D7C5;
}

body.hypertext a:visited, body.hypertext a:hover {
	color: #FDCC03;
}

body.different-gestures a:visited, body.different-gestures a:hover,
a:hover {
	color: #FA6A6C;
}




/* Navigation */
#nav-btns {
	position: fixed;
	top: 12px;
	right: 20px;
	margin: 20px;
	padding: 0;
	line-height: 1;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 32px;
	width: 100%;
	justify-content: flex-end;
	z-index: 999;
}

#documentation-button, #return-button {
	position: relative;
}

#documentation-button:after {
	content: 'Documentation';
	font-size: 18px;
	text-align: right;
	font-family: karl, Helvetica, sans-serif;
	text-transform: uppercase;
}

#documentation-menu.hide {
	display: none;
}

#return-button:after {
	content: 'Return';
	font-size: 18px;
	text-align: right;
	font-family: karl, Helvetica, sans-serif;
	text-transform: uppercase;
}

#return-menu.hide {
	display: none;
}

#return-menu, #documentation-menu {
	position: absolute;
	top: 32px;
	right: 0;
	background-color: #000;
	padding: 32px;
	border-radius: 8px;
	z-index: 999;
}

nav ul {
	padding: 0;
	margin: 0;
}

nav li {
	margin-bottom: 24px;
}

nav li::before {
	display: none;
}

nav li:last-of-type {
	margin-bottom: 0;
}

nav a {
	color: white;
	font-weight: 300;
}

nav a::after {
	display: none;
}

#back-button {
	position: fixed;
	top: 0;
	left: 0;
	padding: 12px;
}

#back-button:hover {
	color: inherit;
}

#back-button:after {
	content: '\21B6';
	font-size: 52px;
}


/* Title Page */
#intro-animation {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#intro-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
}

#intro-animation h2 {
	text-align: center;
	text-transform: uppercase;
}

#intro-animation h2:first-of-type {
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 10px;
}

#intro-animation h2:last-of-type {
	font-size: 48px;
	line-height: 1.25;
	font-weight: 400;
}

#intro-animation svg {
	margin: 0 auto;
	width: 40%;
}

#intro-copyright {
	position: fixed;
	z-index: 101;
	bottom: 24px;
	left: 24px;
}

@media screen and (min-width: 600px) {
	body {
	  padding-top: 0;
	  font-size: 20px;
	}

	h1 {
		font-size: 44px;
	}

	h1 .subtext {
		display: block;
		font-size: .5em;
	}

	#wrapper section header svg {
		max-width: 84px;
	}

	#wrapper section article {
		height: 50vh;
		max-height: 600px;
		overflow-y: auto;
		padding: 0 16px 16px 0;
	}
	
	#intro-animation h2:first-of-type {
		font-size: 40px;
	}
	
	#intro-animation h2:last-of-type {
		font-size: 100px;
	}
	
	#intro-animation svg {
		width: auto;
	}
  }

  #color-ref {
	padding: 5% 10%;
  }