/* ================================================================
Missing-Nin Layout v3.0
https://missing-nin.org
DO NOT STEAL, MODIFY, USE, CLAIM, OR REDISTRIBUTE ANY OF MY CODES!
Coding and content © Kupo; Created May 2021
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&family=Zilla+Slab:ital,wght@1,300&display=swap');
@font-face {
    font-family: 'Cattie';
    src:url('../../assets/fonts/Cattie.woff2') format('woff2'),url('../../assets/fonts/Cattie.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Medici Text';
    src:url('../../assets/fonts/MediciText.woff2') format('woff2'),url('../../assets/fonts/MediciText.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* general layout
================== */
* {
	scrollbar-width: thin;
	/* scrollbar-color: #647985 #CCC; */
	cursor: url('../../assets/img/cursor.png'), auto !important;
}

::selection {
	background: #ecb4b4; /* WebKit/Blink Browsers */
	color: #fff;
}
::-moz-selection {
	background: #ecb4b4; /* Gecko Browsers */
	color: #fff;
}

body {
	background: url('../../assets/img/bg.png') center center;
	color: #60767d;
	font-family: 'Glegoo', serif;
	font-size: 0.8750em;
	font-weight: 400;
	letter-spacing: 0.4px;
	line-height: 2.25em;
}

.container { max-width: 1200px; padding: 0; }

.col-3h { flex: 0 0 auto; width: 29.5%; }
.col-8h { flex: 0 0 auto; width: 70.5%; }
.my-4h { margin-top: 2.3rem !important; margin-bottom: 2.3rem !important; }
.ps-4h { padding-left: 2em; }


/* text styles
================== */
.text-justify { text-align: justify; }
.text-muted { color: #aaa !important; }

.cp-lg { font-size: 1.33333em; }
.cp-xl { font-size: 1.5em; }
.cp-xlh { font-size: 1.57em; }

main a, footer a {
	color: #da8a8a;
	font-weight: 700;
	letter-spacing: 0.7px;
	position: relative;
	z-index: 999;
}
	
	main a:hover, footer a:hover {
		color: #60bab0;
	}
		
		main a, main a:hover {
			text-decoration: underline;
			text-decoration-color: #e3ca86;
			text-decoration-skip: all;
		}

		main a {
			text-decoration-style: dashed;
		}
		
			main a:hover {
				text-decoration-style: solid;
			}
		
		blockquote a, footer a, footer a:hover {
			text-decoration: none;
		}

p:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

strong {
	color: #60bab0;
	font-weight: 700;
	letter-spacing: 0.7px;
}

em {
	color: #dab773;
	font-family: 'Zilla Slab', serif;
	font-size: 1.33em;
	font-weight: 400;
	letter-spacing: 0.7px;
	text-shadow: 1px 1px white;
	text-transform: lowercase;
}

u {
	color: #46cda1;
	letter-spacing: 0.5px;
	text-decoration: underline;
	-webkit-text-decoration-color: #a0e1cc; /* Safari */  
	text-decoration-color: #a0e1cc;
	text-decoration-skip: edges;
	text-decoration-skip-ink: all;
	text-decoration-style: wavy;
}

.heart {
	color: #efabab;
}


/* header & nav styles
================== */
.header {
	background: url('../../assets/img/header.jpg');
	align-items: center;
	background-position: top center;
	background-size: cover;
	display: flex;
	justify-content: center;
	height: 700px;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 1;
}
	
	.header:after{
		content:" ";
		display: block;
		height: 60px;
		background-image: url('../../assets/img/tear-top.png');
		position: absolute;
		bottom: 0;
		width: 200%;
		left: -250px;
		z-index: 3;   
	}

	.header .filter::after {
		background-color: rgba(255, 255, 255, 0.05);
		content: "";
		display: block;
		height: 100%;
		left: 0;
		top: 0;
		position: absolute;
		width: 100%;
		z-index: 1;
	}

	.header h1, .header h2 {
		background: transparent;
		filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.55));
		font-weight: 400;
		line-height: 1.25em;
		padding: 0;
		position: relative;
		padding: 0;
		text-align: center;
		text-transform: lowercase;
		z-index: 2;
	}
		
		.header h1 {
			color: #f0f0f0;
			font-family: 'Cattie', sans-serif;
			font-size: 15em;
			letter-spacing: 1px;
			margin: 250px 0 0 0;
		}
		
		.header h2 {
			color: #ff95ae;
			display: block;
			font-family: 'Glegoo', serif;
			font-size: 2.5em;
			letter-spacing: 17px;
			margin: -85px 0 0 0;
		}

.main-nav {
	background: #202020 url('../../assets/img/nbg.png') center center repeat;
	border-bottom: 3px solid #e3ca86;
}

	.nav-item {
		font-family: 'Glegoo', serif;
		font-size: 1.25em;
		letter-spacing: 2.5px;
		padding: 0.5em 1.5em;
		text-shadow: 1px 1px #202020;
		text-transform: lowercase;
	}
		
		.nav-link {
			padding: 0;
		}


/* general content
================== */
main {
	padding: 50px 0;
}

	main h1 {
		background: url('../../assets/img/h1.png') bottom center no-repeat;
		color: #e3ca86;
		font: 6.5em 'Cattie', sans-serif;
		margin: 0 0 25px 0;
		padding: 0 0 10px 0;
		text-align: center;
		text-shadow: 1px 1px 1px #fff;
		text-transform: lowercase;
	}

	main h2 {
		color: #73888f;
		font-family: 'Medici Text', sans-serif;
		font-size: 2.6em;
		letter-spacing: 1.5px;
		position: relative;
		text-align: right;
		word-spacing: 3px;
		z-index: 1;
	}

		main h2::after {
			color: #ecd8a3;
			content: '\ea3d';
			font-family:'cappuccicons';
			font-size: 0.85em;
			margin-left: -14px;
			opacity: 0.5;
			position: relative;
			z-index: -1;
		}
	
blockquote {
	background: #dcdfe5 url('../../assets/img/bq.png') top center repeat;
	border-radius: .25rem;
	color: #cfccc6;
	line-height: 1.85em;
	margin: 2% auto;
	max-width: 65%;
	padding: 20px 20px 20px 35px;
	position: relative;
	word-spacing: 5px;
	z-index: 4;
}
	
	blockquote:after {
		background-color: #eee;
		border: 1px solid white;
		border-radius: 50%;
		bottom: 0;
		color: #ef9c9c;
		content: '\eb03';
		font: 2em 'cappuccicons';
		height: 50px;
		left: -13px;
		line-height: 0.85em;
		margin: auto 0 auto -10px;
		padding: 15px 10px;
		position: absolute;
		text-align: center;
		top: 0;
		width: 50px;
		z-index: 5;
	}
			
		.updated {
			font-size: 1em;
			letter-spacing: 1px;
		}
	
.div-tooltip {
	display: none;
	position: absolute;
	z-index: 1500;
		
	/* optional css */
	background: #333834 url('../../assets/img/tbg.png');
	border-radius: 5px;
	color: #eaeaea;
	font: 12.5px 'Glegoo';
	letter-spacing: 0.3px;
	padding: 10px 13px;
	text-shadow: none;
	word-spacing: 1.5px;
}
	
	.div-tooltip em {
		text-shadow: none;
	}


/* about section
================== */

.preview {
	border: 1px solid #f4e2b1;
	margin: 7px 15px 0 0;
	opacity: 0.85;
	padding: 4px;
}

	.preview:hover {
		opacity: 1;
	}

.princess {
	float: right;
	shape-outside: url('../../assets/img/md.png');
	width: 175px;
	height: 215px;
	opacity: 0.75;
}
	
	.princess:hover {
		opacity: 0.9;
	}

.social {
	font-size: 0.87em;
	margin-top: -17px;
	text-align: center;
}

	.socials {
		background: #dcdfe5 url('../../assets/img/nbg.png') center center;
		border-radius: 50%;
		display: inline-block;
		height: 35px;
		line-height: 35px;
		margin: 0 3.5px;
		opacity: 0.5;
		text-align: center;
		vertical-align: middle;
		width: 35px;
	}
			
		.socials:hover {
			opacity: 1;
		}

		.socials .cp, .socials .iconify, .socials .fab {
			position: relative;
			text-align: center;
			transform: translate(0%, -50%);
			vertical-align: baseline !important;
		}

			.socials .cp { top: 7.5%; left: 1px; }
			.socials .iconify { top: 12%; }
			.socials .fab { top: 27%; left: 1px; }

	a.socials, .iconify {
		color: #cfccc6;
		text-decoration: none;
	}

		a.socials:hover, .iconify:hover {
			color: #60bab0 !important;
			text-decoration: none;
		}


/* network section
================== */
.card-network {
	background: transparent;
	border: none;
	text-align: center;
	box-shadow: 0 0 3px rgba(0,0,0,.1);
	margin: 0 0 20px 0;
}
	
	.card-cover, .card-cover-x {
		background-position: center center;
		background-size: cover;
		border-radius: 0;
		border-bottom: 4px solid #FFF;
		height: 115px;
	}

		.card-cover {
			background: url('../../assets/img/cbg.png') repeat;
		}
		
		.card-cover-x {
			background: url('../../assets/img/lbg.png') repeat;
		}

	.card-network .card-avatar {
		max-width: 155px;
		max-height: 155px;
		margin: -90px auto 0;
		border-radius: 50%;
		border: 4px solid #FFF;
		overflow: hidden;
	}
		
		.card-network .card-avatar img {
			max-width: 100%;
			height: auto;
		}
			
			.card-network .card-avatar img:hover {
				-moz-filter: grayscale(100%);
				-o-filter: grayscale(100%);
				-webkit-filter: grayscale(100%);
				background: rgba(255,255,255,.35);
				filter: grayscale(100%);
				transition: filter .5s;
			}

	.card-network .card-body {
		background: rgba(255,255,255,.35);
		padding: .25em 0 0 0;
	}

	.card-network .card-content {
		padding: 0 0 .45em 0;
	}
	
	.card-network h3 {
		color: #73888f;
		font: 3.1em 'Cattie', sans-serif;
		margin: 0 0 -15px 0;
		text-transform: lowercase;
	}

.upcoming {
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	background: rgba(255,255,255,.35);
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	border-radius: 50%;
	filter: grayscale(100%);
	margin: 0 10px;
	max-width: 175px;
	max-height: 175px;
	padding: 3px;
	transition: filter .5s;
}

	.upcoming:hover {
		-moz-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		-webkit-filter: grayscale(0%);
		filter: grayscale(0%);
	}


/* exits section
================== */
.friends {
	background: #dcdfe5 url('../../assets/img/cbg.png') top left;
	border-radius: 50%;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	display: inline-block;
	height: 105px;
	line-height: 105px;
	margin: 0 15px 25px 15px;
	opacity: 0.95;
	text-align: center;
	vertical-align: baseline;
	width: 105px;
}

	.friends:before {
	    border: 1px solid #fff;
		border-radius: 50%;
	    bottom: 2px;
	    content: "";
	    display: block;
	    left: 2px;
	    position: absolute;
	    right: 2px;
	    top: 2px;
	    z-index: -1;
	}
	
	.friends:nth-of-type(2n) {
		background: #dcdfe5 url('../../assets/img/lbg.png') top left;
	}
		
		.friends:hover {
			opacity: 0.85;
		}
	
		.friends img {
			line-height: 50px;
			opacity: 0.9;
			position: relative;
			top: 50%;
			transform: translate(0%, -50%);
			vertical-align: baseline !important;
		}

.linksout a {
	background: rgba(255,255,255,.25);
	border-radius: 0.65em;
	box-shadow: 0 0 3px rgba(0,0,0,.1);
	color: #7f9ba4;
	display: inline-block;
	font-size: 0.9em;
	font-weight: 400;
	letter-spacing: 0.5px;
	line-height: 2.25em;
	margin: 0 2px 7px 2px;
	padding: 3px 7px;
	text-shadow: 1px 1px #fff;
	text-align: center;
	text-decoration: none;
	text-transform: lowercase;
	width: 150px;
}

.com, .net, .org, .nu {
	display: inline;
	font-weight: 400;
}

	.com {
		color: #ef9c9c;
	}

	.net {
		color: #00d7b4;
	}
	
	.org {
		color: #41bbc0;
	}

	.nu {
		color: #e3ae5a;
	}

.button {
	margin: 8px 6px;
	opacity: 0.75;
}

	.button:hover {
		opacity: 1;
	}

.cliques {
	line-height: 1.7em;
}
	
	.joined {
		padding: 0 3.5px;
		opacity: 0.75;
	}
		
		.joined:hover {
			opacity: 1;
			text-decoration: none;
		}
		
		.joined-text {
			font-size: 0.85em;
		}

		.prompto {
			padding: 6px 0 0 0;
		}


/* footer styles
================== */
footer {
	background: url('../../assets/img/tear-bot.png') repeat-x top center, url('../../assets/img/nbg.png') repeat;
	color: #cfccc6;
	font-size: 0.85em;
	padding: 90px 0 20px 0;
}

#button {
	background: url('../../assets/img/nbg.png') top center repeat;
	border: 2px solid #eee;
	border-radius: 50%;
	bottom: 20px;
	display: inline-block;
	height: 50px;
	opacity: 0;
	outline: 4px solid #333834;
	position: fixed;
	right: 20px;
	text-align: center;
	text-decoration: none;
	transition: background .3s, opacity .5s, visibility .5s;
	visibility: hidden;
	width: 50px;
	z-index: 1000;
}
	
	#button::after {
		color: #eee;
		content: "\e9e5";
		font-family: 'cappuccicons';
		font-weight: normal;
		font-style: normal;
		font-size: 1.65em;
		line-height: 42px;
		text-decoration: none;
	}
	
	#button.show {
		opacity: 0.85;
		visibility: visible;
	}


/* fancybox styles
================== */
.fbhead {
	background: url('../../assets/img/tear-top.png') no-repeat bottom center, url('../../assets/img/nbg.png') repeat;
	border-top: 3px solid #e3ca86;
	padding: 45px 0 80px 0;
}
	
	.fbmain {
		min-height: 484px;
		padding: 40px 0 50px 0;
	}
	
	.fbfoot {
		background: url('../../assets/img/tear-bot.png') no-repeat top center, url('../../assets/img/nbg.png') repeat;
		border-bottom: 3px solid #e3ca86;
		padding: 90px 0 45px 0;
	}