body.indexPage {
	background: #081a0c;
	color: #ddd;
	margin-top: 20px;
}

.title {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 80px 0 50px;
}

.intro { 
	width: 65%; 
	width: -moz-fit-content;
	width: fit-content;
	max-width: 565px;
}

.titleWordmark {
	width: 70%;
	height: auto;
	margin: 0 0 3%;
}

.titleImage {
	width: 35%;
	height: auto;
	margin-right: 50px;
}

.title h1 {
	line-height: 0.8em;
	font-weight: 500;
	font-size: 2.6em; /*45px*/
	letter-spacing: -0.8pt;
    color: #fff;
}

.title .bottom {
	list-style-type: none;
	padding: 0;
	margin: 15px 0 0 -5px;
	display: inline-block;
}

.title .bottom.info { margin-right: 16px; }
.title .bottom li { display: inline-block; }
.title .bottom.info li { margin-right: 15px; }

.indexPage main { display: flex;  }
.indexPage .portal { margin: 40px auto 20px; }

.indexPage .portal .area {
	display: block;
	padding: 0 0 50px;
	margin-left: 50px;
	box-sizing: border-box;
	color: inherit;
	cursor: pointer;
}

.indexPage .portal .container { cursor: default; }
.portal .area > * { display: inline-block; }

.indexPage .portal h2 {
	margin: 0px 10px 0 5px;
	font-size: 36px;
	line-height: 40px;
	letter-spacing: -0.4pt;
	clear: none;
}

.indexPage .themed, .indexPage .area > svg { color: #1bce6a; }
.portal .area:hover, .portal .area:active, .portal .peek:hover, .portal .peek:active { text-decoration: none; }
.indexPage a:hover .themed, .indexPage a:active .themed, .indexPage .themed > *:hover , .indexPage .themed > *:active { text-decoration: underline; }

.portal .summary {
	font-size: 18px;
	line-height: 18px;
	letter-spacing: -0.3px;
	margin: 0;
	position: relative;
}

.portal .area > svg {
	vertical-align: top;
	width: 30px;
	height: 30px;
	margin: 2px 10px 0 -50px;
	fill: currentColor;
}

.indexPage .toTypography .themed, .indexPage .toTypography > svg { color: #ce961b; }
.indexPage .toHeraldry .themed, .indexPage .toHeraldry > svg { color: #da411d; }
.indexPage .toSketchbook .themed, .indexPage .toSketchbook > svg { color: #df27ce; }
.indexPage .toLinkroll .themed, .indexPage .toLinkroll > svg { color: #00c0ad; }
.indexPage .toLiked .themed, .indexPage .toLiked > svg { color: #2d89df; }
.indexPage .toWebcomics .themed, .indexPage .toWebcomics > svg { color: #c0b382; }
.indexPage .toProjects .themed, .indexPage .toProjects > svg { color: #addf27; }
.indexPage .toKitchen .themed, .indexPage .toKitchen > svg { color: #df2727; }

.portal .content { display: block; }

.portal .subcategories h3 { 
	display: inline-block; 
	margin-right: 10px;
}

.portal .grid { 
	display: flex; 
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 600px;
}

.portal .grid a {
	width: 48%;
	display: block;
	margin: 2px 0 5px;
}

.portal .peek { color: inherit; }
.portal .archive { margin-top: 10px; }
.portal .peek p { margin: 0; }

.portal .archive .icon {
	width: 15px;
	margin-left: 6px;
}

#discord:target { 
	top: 80px;
	position: absolute;
	background: #e80004;
	display: inline-block;
	font-size: 30px;
	width: 200px;
	text-align: center;
	transform: rotate(20deg);
}

#discord:target .small {
	display: block; 
	font-size: 18px;
} 

.portal .random {
	display: inline-block;
	margin: 0 0 10px;
	opacity: 0.8;
}

@media screen and (max-width: 600px) {
	.title h1 { 
		font-size: 2em;
		letter-spacing: -1px;
	}
	
	.title {
		justify-content: left;
		flex-wrap: wrap;
		padding: 30px 0 50px;
	}
	
	.intro { width: 100%; }
	
	.titleImage {
		width: 70%;
		margin: 0 0 20px;
	}
	
	.titleWordmark { width: 65%; }
	
	.title .bottom.info li { 
		font-size: 0.8em;
		line-height: 0.5em;
		padding: 0;
	}
	
	.portal .grid a { width: 100%; }
}