@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 400;
	src: url("Assets/Google-Montserrat.woff2") format("woff2");
}

@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 700;
	src: url("Assets/Google-Montserrat.woff2") format("woff2");
}

html,
body {
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body {
	background-color: #273338;
	background-image: radial-gradient(circle, #273338 35%, #172023 100%);
	background-attachment: fixed;
	color: #9cb080;
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-size: 16px;
}

a,
a:visited {
	color: #9cb080;
}

a:hover {
	color: #f6f0d7;
}

.pageContents {
	width: 610px;
	margin: 22px auto 18px auto;
}

.pageHead {
	padding: 8px;
	background: #2b5748;
	box-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.navTable {
	width: 100%;
	border-collapse: separate;
}

.navCell {
	width: 33%;
	padding: 0 4px;
}

.headBtn {
	display: block;
	height: 68px;
	line-height: 68px;
	background: #273338;
	color: #f6f0d7;
	text-align: center;
	text-decoration: none;
	font-size: 28px;
	font-weight: 700;
	box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

.headBtn:visited {
	color: #f6f0d7;
}

.headBtn:hover {
	background: #583338;
}

.pageBody {
	margin-top: 22px;
	padding: 10px;
	background: #2b5748;
	box-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.panel {
	overflow: hidden;
	background: #273338;
	box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

.topTable {
	width: 100%;
	border-collapse: collapse;
}

.topLeft {
	padding-right: 10px;
	vertical-align: top;
}

.topRight {
	width: 180px;
	vertical-align: top;
}

.bodyName {
	height: 180px;
	padding: 0 22px;
}

.name-text {
	margin: 25px 0 10px 0;
	color: #9cb080;
	font-size: 29px;
	line-height: 32px;
	font-weight: 700;
}

.desc-text {
	margin: 0;
	color: #9cb080;
	font-size: 15px;
	line-height: 18px;
	font-weight: 400;
}

.bodyPFP {
	width: 180px;
	height: 180px;
	padding: 0;
	text-align: center;
}

.pfpImage,
.pfp-img {
	display: block;
	width: 158px;
	height: 158px;
	margin: 11px auto 0 auto;
	border: 0;
}

.bodyPart {
	position: relative;
	height: 260px;
	margin-top: 12px;
	padding: 0 22px;
}

.name-text-middle {
	margin: 22px 0 0 0;
	color: #9cb080;
	font-size: 29px;
	line-height: 32px;
	font-weight: 700;
	text-align: left;
}

.desc-text-middle {
	width: 360px;
	margin: 48px auto 0 auto;
	color: #9cb080;
	font-size: 15px;
	line-height: 18px;
	font-weight: 400;
	text-align: center;
}

.linkRow {
	margin: 22px 0 0 10px;
	font-size: 15px;
	line-height: 18px;
}

.linkRow a {
	margin-right: 34px;
}

.bodyPart .old-note {
	width: 360px;
	margin: 12px auto 0 auto;
	color: #9cb080;
	font-size: 15px;
	line-height: 18px;
	text-align: center;
}

.projectItem {
	position: relative;
	height: auto;
	min-height: 150px;
	margin-top: 0;
	padding-bottom: 62px;
}

.projectItem+.projectItem {
	margin-top: 12px;
}

.projectDesc {
	width: 460px;
	min-height: 72px;
	margin: 22px auto 0 auto;
	color: #9cb080;
	font-size: 15px;
	line-height: 18px;
	text-align: center;
}

.projectFooterBox {
	position: absolute;
	right: 22px;
	bottom: 20px;
	left: 22px;
}

.projectFooter {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.projectFooter td {
	height: 24px;
	vertical-align: middle;
}

.projectType {
	width: 30%;
	text-align: left;
}

.projectView {
	width: 40%;
	text-align: center;
	font-size: 15px;
	line-height: 18px;
}

.projectTools {
	width: 30%;
	text-align: right;
	white-space: nowrap;
}

.projectTypeIcon,
.toolIcon {
	display: inline;
	vertical-align: middle;
	border: 0;
}

.toolIcon {
	margin-left: 5px;
}

body.projectsPage {
	background-color: #302b3d;
	background-image: radial-gradient(circle, #302b3d 35%, #18151f 100%);
	color: #c1a6c9;
}

body.projectsPage a,
body.projectsPage a:visited {
	color: #c1a6c9;
}

body.projectsPage a:hover {
	color: #fff4dc;
}

body.projectsPage .pageHead,
body.projectsPage .pageBody {
	background: #70465e;
}

body.projectsPage .headBtn,
body.projectsPage .panel {
	background: #302b3d;
}

body.projectsPage .headBtn,
body.projectsPage .headBtn:visited {
	color: #fff4dc;
}

body.projectsPage .headBtn:hover {
	background: #374964;
}

body.projectsPage .name-text,
body.projectsPage .name-text-middle,
body.projectsPage .desc-text,
body.projectsPage .desc-text-middle,
body.projectsPage .projectDesc,
body.projectsPage .bodyPart .old-note {
	color: #c1a6c9;
}

body.projectPage {
	background-color: #263442;
	background-image: radial-gradient(circle, #263442 35%, #151c24 100%);
	color: #b8ccd8;
}

body.projectPage a,
body.projectPage a:visited {
	color: #b8ccd8;
}

body.projectPage a:hover {
	color: #fff4dc;
}

body.projectPage .pageHead,
body.projectPage .pageBody {
	background: #49677d;
}

body.projectPage .headBtn,
body.projectPage .panel {
	background: #26313e;
}

body.projectPage .headBtn,
body.projectPage .headBtn:visited {
	color: #fff4dc;
}

body.projectPage .headBtn:hover {
	background: #4f6046;
}

body.projectPage .name-text-middle,
body.projectPage .projectSectionTitle,
body.projectPage .projectLead,
body.projectPage .projectMeta,
body.projectPage .projectText,
body.projectPage .galleryCaption {
	color: #b8ccd8;
}

.projectPageBody {
	padding: 10px;
}

.projectHero {
	padding: 1px 22px 20px 22px;
}

.projectLead {
	width: 500px;
	margin: 20px auto 0 auto;
	font-size: 15px;
	line-height: 19px;
	text-align: center;
}

.projectMeta {
	margin: 18px 0 0 0;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	letter-spacing: 1px;
}

.projectFeatureTable {
	width: 100%;
	margin-top: 12px;
	border-collapse: collapse;
	table-layout: fixed;
}

.projectFeatureTable td {
	width: 50%;
	vertical-align: top;
}

.projectFeatureLeft {
	padding-right: 6px;
}

.projectFeatureRight {
	padding-left: 6px;
}

.projectInfoPanel {
	min-height: 205px;
	padding: 1px 18px 18px 18px;
}

.projectImagePanel {
	min-height: 205px;
	padding: 0;
	text-align: center;
}

.projectImage {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

.projectSectionTitle {
	margin: 18px 0 12px 0;
	font-size: 22px;
	line-height: 25px;
	font-weight: 700;
}

.projectText {
	margin: 0 0 12px 0;
	font-size: 15px;
	line-height: 19px;
}

.projectWidePanel {
	margin-top: 12px;
	padding: 1px 22px 16px 22px;
}

.projectGallery {
	margin-top: 12px;
	padding: 1px 12px 14px 12px;
}

.galleryTable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 6px;
}

.galleryCell {
	width: 33%;
	vertical-align: top;
	text-align: center;
}

.galleryImage {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

.galleryCaption {
	margin: 7px 0 0 0;
	font-size: 12px;
	line-height: 15px;
	text-align: center;
}

.projectBottomPanel {
	margin-top: 12px;
	padding: 14px 18px;
}

.projectBottomTable {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.projectBottomTable td {
	width: 33%;
	vertical-align: middle;
	font-size: 14px;
	line-height: 20px;
}

.projectBottomLeft {
	text-align: left;
}

.projectBottomMiddle {
	text-align: center;
}

.projectBottomRight {
	text-align: right;
	white-space: nowrap;
}

@media screen and (max-width: 760px) {
	.pageContents {
		width: 96%;
		margin-top: 8px;
	}

	.headBtn {
		height: 44px;
		line-height: 44px;
		font-size: 14px;
	}

	.pageBody {
		margin-top: 10px;
		padding: 6px;
	}

	.bodyName {
		height: auto;
		min-height: 120px;
		padding: 10px;
	}

	.name-text,
	.name-text-middle {
		margin-top: 10px;
		font-size: 22px;
		line-height: 25px;
	}

	.desc-text,
	.desc-text-middle,
	.bodyPart .old-note,
	.linkRow {
		font-size: 14px;
		line-height: 18px;
	}

	.desc-text-middle,
	.bodyPart .old-note {
		width: auto;
		margin-top: 20px;
	}

	.bodyPart {
		height: auto;
		min-height: 180px;
		padding: 10px;
	}

	.bodyPFP {
		height: 132px;
		padding: 0;
	}

	.pfpImage,
	.pfp-img {
		width: 112px;
		height: 112px;
		margin-top: 10px;
	}

	.linkRow a {
		margin-right: 10px;
	}

	.projectDesc {
		width: auto;
		min-height: 0;
	}

	.projectItem {
		padding-bottom: 16px;
	}

	.projectFooterBox {
		position: static;
		margin-top: 20px;
	}

	.projectType {
		width: 25%;
	}

	.projectView {
		width: 50%;
	}

	.projectTools {
		width: 25%;
	}

	.projectTypeIcon {
		width: 20px;
		height: 20px;
	}

	.toolIcon {
		width: 18px;
		height: 18px;
		margin-left: 2px;
	}

	.projectLead {
		width: auto;
	}

	.projectFeatureTable,
	.projectFeatureTable tbody,
	.projectFeatureTable tr,
	.projectFeatureTable td {
		display: block;
		width: auto;
	}

	.projectFeatureLeft,
	.projectFeatureRight {
		padding: 0;
	}

	.projectFeatureRight {
		margin-top: 12px;
	}

	.projectInfoPanel,
	.projectImagePanel {
		min-height: 0;
	}

	.galleryTable,
	.galleryTable tbody,
	.galleryTable tr,
	.galleryTable td {
		display: block;
		width: auto;
	}

	.galleryCell {
		margin-bottom: 12px;
	}

	.projectBottomTable,
	.projectBottomTable tbody,
	.projectBottomTable tr,
	.projectBottomTable td {
		display: block;
		width: auto;
		text-align: center;
	}

	.projectBottomMiddle,
	.projectBottomRight {
		margin-top: 10px;
	}
}

.projectCodePanel {
	margin-top: 12px;
	padding: 1px 22px 18px 22px;
}

.inlineCode {
	padding: 1px 4px;
	background: #18222b;
	color: #d8e3e9;
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
}

.codeBlock {
	overflow: auto;
	margin: 16px 0 0 0;
	padding: 16px;
	background: #18222b;
	color: #d8e3e9;
	border-left: 4px solid #648aa2;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	line-height: 17px;
	text-align: left;
	white-space: pre;
}

.codeBlockSmall {
	margin-top: 12px;
}

.codeAfterText,
.tableAfterText {
	margin-top: 16px;
}

.codeKeyword {
	color: #d5a6bd;
	font-weight: 700;
}

.codeType {
	color: #91c7c9;
}

.codeFunction {
	color: #decf8d;
}

.codeString {
	color: #a9cf90;
}

.codeComment {
	color: #82929d;
}

.codeNumber,
.codeLiteral {
	color: #c5afe2;
}

.codeMacro {
	color: #dcad7d;
	font-weight: 700;
}

.docFlowTable {
	width: 100%;
	margin-top: 14px;
	border-collapse: collapse;
}

.docFlowTable td {
	padding: 7px 0;
	vertical-align: top;
	font-size: 14px;
	line-height: 19px;
}

.docFlowNumber {
	width: 30px;
	color: #fff4dc;
	font-family: "Courier New", Courier, monospace;
	font-weight: 700;
	text-align: left;
}

.docFlowText {
	color: #b8ccd8;
	text-align: left;
}

.docPath {
	margin: 18px 0 2px 0;
	padding: 10px;
	background: #18222b;
	color: #d8e3e9;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	line-height: 17px;
	text-align: center;
}

.packetHeaderTable {
	width: 100%;
	margin-top: 16px;
	border-collapse: collapse;
	table-layout: fixed;
}

.packetHeaderTable th,
.packetHeaderTable td {
	padding: 8px 7px;
	border: 1px solid #49677d;
	color: #b8ccd8;
	font-size: 12px;
	line-height: 16px;
	text-align: left;
	vertical-align: top;
}

.packetHeaderTable th {
	background: #18222b;
	color: #fff4dc;
	font-weight: 700;
}

.packetHeaderTable th:first-child,
.packetHeaderTable td:first-child {
	width: 22%;
}

.packetHeaderTable th:nth-child(2),
.packetHeaderTable td:nth-child(2) {
	width: 16%;
	white-space: nowrap;
}

@media screen and (max-width: 760px) {
	.projectCodePanel {
		padding: 1px 12px 14px 12px;
	}

	.codeBlock {
		padding: 11px;
		font-size: 11px;
		line-height: 16px;
	}

	.inlineCode {
		font-size: 12px;
	}

	.docFlowTable td {
		font-size: 13px;
		line-height: 18px;
	}

	.packetHeaderTable {
		table-layout: auto;
	}

	.packetHeaderTable th,
	.packetHeaderTable td {
		padding: 6px 4px;
		font-size: 10px;
		line-height: 14px;
	}
}