/*
 * CN_Blog CSS File
 *
 * Description:
 *     Theme for CN_Blog... Not much else to say tbh.
 *
 * Author:
 *     Clara Nguyen (@iDestyKK)
 */

/* ------------------------------------------------------------------------- */
/* Custom Fonts                                                         {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Specifies custom fonts for use on the page that may not be present on the
 * user's system.
 */

@font-face {
	font-family: ssans-regular;
	src: url("../../font/SourceSansPro-Regular.ttf");
}

@font-face {
	font-family: ssans-light;
	src: url("../../font/SourceSansPro-Light.ttf");
}

@font-face {
	font-family: ssans-exlight;
	src: url("../../font/SourceSansPro-ExtraLight.ttf");
}

@font-face {
	font-family: inconsolata;
	src: url("../../font/inconsolata.otf");
}

@font-face {
	font-family: kosugimaru;
	src: url("../../font/KosugiMaru-Regular.ttf");
}

@font-face {
	font-family: lato-regular;
	src: url("../../font/Lato-Regular.ttf");
}

@font-face {
	font-family: lato-bold;
	src: url("../../font/Lato-Bold.ttf");
}

/* ------------------------------------------------------------------------- */
/* Settings Pane                                                        {{{1 */
/* ------------------------------------------------------------------------- */

@keyframes settingsslidein-crystal {
	from {
		top: -50%;
	}
	to {
		top: 2%;
	}
}

body.crystal div#settings_menu .main {
	height: 500px !important;
	top: 2% !important;
	animation-name: settingsslidein-crystal !important;

	border-radius: 4px;
	overflow: hidden;
	border: 1px solid #555;
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5);
}

body.crystal div#settings_menu .main table.settings-table td.left {
	background-color: rgba(255, 255, 255, 0.5) !important;
}

body.dark div#settings_menu .main table.settings-table td.left,
body.amoled div#settings_menu .main table.settings-table td.left {
	background-color: rgba(0, 0, 0, 0.65) !important;
}

/* ------------------------------------------------------------------------- */
/* Page                                                                 {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Now then... the real deal.
 */

html {
	margin: 0px;
	padding: 0px;

	font-family: ssans-light, kosugimaru;

	text-size-adjust: none;
}

body.crystal {
	margin: 0px;
	padding: 0px;

	font-family: ssans-light, kosugimaru;

	text-size-adjust: none;
}

body.crystal.dark::-webkit-scrollbar {
	width: 8px;
}

body.crystal.dark::-webkit-scrollbar-thumb {
	background-color: #666;
}

body.crystal.dark::-webkit-scrollbar-track-piece {
	background-color: #111;
}

body.crystal.amoled::-webkit-scrollbar {
	width: 8px;
}

body.crystal.amoled::-webkit-scrollbar-thumb {
	background-color: #666;
}

body.crystal.amoled::-webkit-scrollbar-track-piece {
	background-color: #111;
}

/* ------------------------------------------------------------------------- */
/* Top Bar                                                              {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * The top bar present on every page...
 */

body.crystal .top-bar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 28px;
	z-index: 10000;

	color: #FFF;
	padding: 12px 0px 12px 0px;
	text-shadow:
		0px 0px 4px rgba(0, 0, 0, 0.5), 0px 0px 12px #000, 0px 0px 24px #000;
}

@keyframes bg-fade-in-light-crystal {
	0% {
		color: #FFF;
		padding-top: 12px;
	}
	50% {
		padding-top: 12px;
	}
	100% {
		color: #000;
		padding-top: 12px;
		backdrop-filter: blur(15px) contrast(1.2) saturate(2);
		background-color: rgba(242, 243, 244, 0.5);
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
	}
}

@keyframes bg-fade-in-dark-crystal {
	0% {
		color: #FFF;
		padding-top: 12px;
	}
	50% {
		padding-top: 12px;
	}
	100% {
		color: #FFF;
		padding-top: 12px;
		backdrop-filter: blur(15px) contrast(1.2) saturate(2);
		background-color: rgba(11, 11, 14, 0.8);
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
	}
}

body.crystal .hover-bar {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 28px;
	z-index: 10000;

	padding: 12px 0px 12px 0px;

	/*
	text-shadow:
		0px 0px 4px rgba(0, 0, 0, 0.5), 0px 0px 12px #000, 0px 0px 24px #000;
	*/

	animation: bg-fade-in-light-crystal 0.5s forwards;

	background-image: url(../../../images/themes/crystal/menu_bar_light.svg);
}

body.crystal.dark .hover-bar,
body.crystal.amoled .hover-bar {
	background-image: url(../../../images/themes/crystal/menu_bar_dark.svg);
}

body.crystal.dark   .hover-bar,
body.crystal.amoled .hover-bar {
	animation: bg-fade-in-dark-crystal 0.5s forwards;
}

body.crystal .banner-links-inner {
	width: calc(100% - 64px);
	max-width: 1280px;

	margin: 0px auto;
	height: 100%;
	padding: 0px 0px 8px 0px;

	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

body.crystal .hover-bar .banner-links-inner {
	padding: 0px;
	border-bottom: 0px solid transparent;
}

body.crystal .dark-banner .banner-links-inner {
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

body.crystal .site-txt {
	float: left;
	margin: 0px 4px;
	font-weight: bold;
	padding: 4px 8px 4px 8px;
}

body.crystal .hover-bar .site-txt {
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

body.crystal.dark   .hover-bar .site-txt,
body.crystal.amoled .hover-bar .site-txt {
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

body.crystal .site-txt .post-name-txt {
	float: right;
	opacity: 0;
}

@keyframes stxt-fade-in {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

body.crystal .hover-bar .site-txt .post-name-txt {
	animation: stxt-fade-in 0.5s forwards;
}

body.crystal .banner-link {
	position: relative;
	float: right;
	margin: 0px 4px;
	padding: 4px 8px 4px 8px;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
}

body.crystal .hover-bar .banner-link {
	color: #000;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

body.crystal.dark   .hover-bar .banner-link,
body.crystal.amoled .hover-bar .banner-link {
	color: #FFF;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

body.crystal .banner-link:hover {
	/* background-color: #FFF; */
	color: #000;
	text-shadow: 0px 0px 4px transparent;

	backdrop-filter: invert(0.4) contrast(2.5) saturate(2) blur(15px);
	background-color: rgba(16, 16, 16, 0.25);
}

body.crystal .banner-link:hover span.txt-fx {
	color: #FFF;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

body.crystal .dark-banner .banner-link {
	color: #FFF;
}

body.crystal .dark-banner .banner-link:hover {
	background-color: #FFF;
	color: #000;
}

body.crystal .banner-links-inner a {
	color: inherit;
	text-decoration: none;
}

/* ------------------------------------------------------------------------- */
/* Top Banner                                                           {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * This deals with the top of the page when viewing a specific blog page.
 * Includes the banner, text inside the banner, etc.
 */

body.crystal .top-banner {
	width: 100%;
	height: 720px;
	max-height: 100vh;
	box-shadow: inset 0px 0px 250px rgba(0, 0, 0, 0.5);
}


body.crystal .top-banner .img-layer00 {
	background-image: url("../../../images/banners/knox_sunrise/layer_00.jpg");
	z-index: -3;
}

@keyframes banner-fade {
	25% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

body.crystal .top-banner .img-layer01 {
	background-image: url("../../../images/banners/knox_sunrise/layer_01.jpg");
	animation: banner-fade 2s forwards;
	z-index: -2;
	opacity: 0;
}

body.crystal .top-banner .img-layer02 {
	background: transparent;
	z-index: -1;
}

body.crystal.dark .top-banner .img-layer02,
body.crystal.amoled .top-banner .img-layer02 {
	background-color: rgba(0, 0, 0, 0.25);
	box-shadow: inset 0px 0px 250px rgba(0, 0, 0, 0.5);
}

body.crystal .top-banner .img-layer00,
body.crystal .top-banner .img-layer01,
body.crystal .top-banner .img-layer02 {
	background-size: cover;
	background-position: center center;

	position: fixed;
	width: 100%;
	height: 720px;
	top: 0px;
	left: 0px;
}

body.crystal .category-banner {
	height: 420px;
}

body.crystal .category-banner .img-layer00,
body.crystal .category-banner .img-layer01,
body.crystal .category-banner .img-layer02 {
	height: 420px;
}

body.crystal .top-banner .inner {
	width: calc(100% - 64px);
	max-width: 1280px;
	height: 100%;
	margin: auto;
	position: relative;
}

body.crystal .top-banner .inner .dbl-inner {
	position: absolute;
	bottom: 0px;

	font-size: 165%;
	color: #FFF;
	text-shadow:
		0px 0px 1px rgba(255, 255, 255, 1),
		1px 1px 1px rgba(0, 0, 0, 0.225),
		2px 2px 1px rgba(0, 0, 0, 0.2),
		3px 3px 2px rgba(0, 0, 0, 0.175),
		4px 4px 2px rgba(0, 0, 0, 0.15),
		5px 5px 3px rgba(0, 0, 0, 0.125),
		6px 6px 3px rgba(0, 0, 0, 0.1),
		7px 7px 4px rgba(0, 0, 0, 0.075),
		8px 8px 4px rgba(0, 0, 0, 0.05),
		9px 9px 5px rgba(0, 0, 0, 0.025),
		1px 1px 5px #000,
		1px 1px 15px #000;
}

body.crystal .top-banner .inner .dbl-inner .label {
	margin-bottom: 12px;
	overflow: auto;
}

body.crystal .top-banner .inner .dbl-inner .label a {
	text-decoration: none;
	color: inherit;
}

/* ok, we can do better */
body.crystal .top-banner .inner .dbl-inner .label .label-bg {
	float: left;
	background-color: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(15px) saturate(3.5) contrast(2);
	padding: 0px 5px 1px 5px;
	margin-right: 10px;
	font-size: 75%;
	border-radius: 4px;
	font-variant: all-small-caps;
	color: #000 !important;
	text-shadow: 0px 0px 0px transparent !important;
	font-weight: bold;
}

body.crystal .top-banner .inner .dbl-inner .title {
	margin-bottom: 14px;
	font-family: ssans-regular, kosugimaru;
	font-size: 210%;
}

body.crystal .top-banner .inner .dbl-inner .about {
	margin-bottom: 12px;
}

/*
 * Category page patches
 */

body.crystal .category-banner .inner {
	max-width: unset;
}

body.crystal .category-banner .inner .dbl-inner {
	text-shadow: 2px 2px 7px rgba(50, 50, 50, 0.5);
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);

	border-top: 3px solid #333;
	border-bottom: 3px solid #333;
	color: #000;
	padding: 24px 32px;
}

body.crystal .category-banner .inner .dbl-inner .title {
	text-align: center;
	font-variant: small-caps;
}

body.crystal .category-banner .inner .dbl-inner .about {
	text-align: center;
	font-variant: all-small-caps;

	font-family: ssans-regular, kosugimaru;
}


/* ------------------------------------------------------------------------- */
/* Sidebar                                                              {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Sidebar that appears on the home page, category pages, and second page,
 * third page, etc.
 */

body.crystal .widget {
	box-sizing: border-box;
	padding: 16px;
	margin-bottom: 32px;
	border: 1px solid #787878;
	/* background-color: #E3E4E5; */
	background-size: cover;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

body.crystal.dark .widget,
body.crystal.amoled .widget {
	border: 1px solid #444;
}

body.crystal.light .widget {
	background-image: url('../../../images/themes/crystal/module_bg_light.svg');
}

body.crystal.dark .widget {
	background-image: url('../../../images/themes/crystal/module_bg_dark.svg');
}

body.crystal.amoled .widget {
	background-color: #000;
}

body.crystal .widget::before {
	content: attr(content);
	background-image: url('../../../images/themes/crystal/module_top_light.svg');
	background-size: 28px 28px;
	width: calc(100% + 32px);
	height: 28px;
	position: relative;
	top: -16px;
	left: -16px;
	padding: 5px 6px 6px 6px;
	box-sizing: border-box;
	font-size: 15px;
	display: inline-block;
	border-bottom: 1px solid #787878;
	text-shadow: 1px 1px 0px #FFF, 0px 0px 4px rgba(0, 0, 0, 0.25);
}

body.crystal.dark .widget::before,
body.crystal.amoled .widget::before {
	background-image: url('../../../images/themes/crystal/module_top_dark.svg');
	text-shadow: 1px 1px 0px #000, 0px 0px 4px rgba(255, 255, 255, 0.25);
}

body.crystal .widget::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 8px;
	background-image: url(../../../images/themes/crystal/grey_orb.svg);
	width: 12px;
	height: 12px;
}

body.crystal.dark .widget::after,
body.crystal.amoled .widget::after {
	background-image: url(../../../images/themes/crystal/light_orb.svg);
}

body.crystal .about-me {
	position: relative;
	background-color: transparent !important;
}

body.crystal .about-me div.name {
	width: 100%;
	font-size: 175%;
	text-align: center;
	padding-bottom: 16px;
}

body.crystal .about-me img.profile-pic {
	box-sizing: border-box;
	position: relative;
	left: 25%;
	width: 50%;
	top: 8px;
	margin: 0 auto 32px auto;
	padding: 8px;
	border-radius: 22px;
	background-image: url(../../../images/themes/crystal/pic_bg.svg);
	background-size: cover;
	box-shadow: 0px 4px 15px #e980937f;
}

body.crystal.dark .about-me img.profile-pic {
	/* border: 8px solid #5F5F5F; */
}

body.crystal.amoled .about-me img.profile-pic {
	/* border: 8px solid #333333; */
}

body.crystal .widget .header {
	border-top   : 2px solid #000;
	border-bottom: 2px solid #000;

	margin-bottom: 16px;

	display: none;
}

body.crystal.dark .widget .header {
	border-top   : 2px solid #CCCCCF;
	border-bottom: 2px solid #CCCCCF;
}

body.crystal.amoled .widget .header {
	border-top   : 2px solid #FFF;
	border-bottom: 2px solid #FFF;
}

body.crystal .widget .header .inner {
	background-color: transparent;
	margin: 4px 0px;
	width: 100%;
}

body.crystal .widget .header .inner .text {
	color: #000;
	font-size: 125%;
	font-variant: all-small-caps;
	position: relative;
	top: -2px;
	text-align: center;
}

body.crystal.dark .widget .header .inner .text {
	color: #CCCCCF;
}

body.crystal.amoled .widget .header .inner .text {
	color: #FFF;
}

body.crystal .widget .cat-label {
	box-sizing: border-box;
	margin: 4px;
	width: calc(100% - 8px);

	padding: 4px 4px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.crystal.dark   .cat-label,
body.crystal.amoled .cat-label {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Social Media Icons */
body.crystal .sm {
	width: 100%;
	height: 48px;
	position: relative;
	margin-top: 8px;
}

body.crystal .sm-circle {
	margin-top: 16px;
	margin-left: 6px;
	box-sizing: border-box;
}

body.crystal .sm-regular .ico {
	width: 32px;
	height: 32px;
	float: left;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: 8px;
}

body.crystal .sm-circle .ico {
	width: 32px;
	height: 32px;
	float: left;
	background-size: 75%;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: 8px;
	margin-bottom: 8px;
	border: 2px solid #CCC;
	background-color: #EEE;
	border-radius: 50%;
}

body.crystal.dark .sm-circle .ico {
	background-color: #0b0b0e;
	border: 2px solid #4b4b4e;
}

body.crystal.amoled .sm-circle .ico {
	background-color: #000;
	border: 2px solid #FFF;
}

body.crystal .sm .content {
	float: left;
	line-height: 32px;
	height: 32px;
	box-sizing: border-box;
	margin-left: 10px;
	width: calc(100% - 50px);
}

body.crystal .sm .fb { background-image: url("../../../images/social_icons/facebook-light.svg"  ); }
body.crystal .sm .tw { background-image: url("../../../images/social_icons/twitter-light.svg"   ); }
body.crystal .sm .gh { background-image: url("../../../images/social_icons/github-light.svg"    ); }
body.crystal .sm .yt { background-image: url("../../../images/social_icons/youtube-light.svg"   ); }
body.crystal .sm .sc { background-image: url("../../../images/social_icons/soundcloud-light.svg"); }
body.crystal .sm .bc { background-image: url("../../../images/social_icons/bandcamp-light.svg"  ); }
body.crystal .sm .ln { background-image: url("../../../images/social_icons/line-light.svg"      ); }

body.crystal.dark   .sm .fb, 
body.crystal.amoled .sm .fb { background-image: url("../../../images/social_icons/facebook-dark.svg"  ); }
body.crystal.dark   .sm .tw, 
body.crystal.amoled .sm .tw { background-image: url("../../../images/social_icons/twitter-dark.svg"   ); }
body.crystal.dark   .sm .gh, 
body.crystal.amoled .sm .gh { background-image: url("../../../images/social_icons/github-dark.svg"    ); }
body.crystal.dark   .sm .yt, 
body.crystal.amoled .sm .yt { background-image: url("../../../images/social_icons/youtube-dark.svg"   ); }
body.crystal.dark   .sm .sc, 
body.crystal.amoled .sm .sc { background-image: url("../../../images/social_icons/soundcloud-dark.svg"); }
body.crystal.dark   .sm .bc, 
body.crystal.amoled .sm .bc { background-image: url("../../../images/social_icons/bandcamp-dark.svg"  ); }
body.crystal.dark   .sm .ln, 
body.crystal.amoled .sm .ln { background-image: url("../../../images/social_icons/line-dark.svg"      ); }

/* ------------------------------------------------------------------------- */
/* Post Listings                                                        {{{1 */
/* ------------------------------------------------------------------------- */

body.crystal table.page-table {
	width: 100%;
	color: inherit;
}

body.crystal table.page-table td {
	vertical-align: top;
}

/*
 * The listing of posts (home page, pages, categories, etc).
 */

body.crystal a.post-link-box {
	text-decoration: none;
	color: inherit !important;
}

body.crystal .post-box {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 16px;
	position: relative;
	border: 1px solid #787878;
	border-radius: 4px;
	overflow: hidden;

	background-size: cover;

	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

body.crystal.dark .post-box,
body.crystal.amoled .post-box {
	border: 1px solid #444;
}

body.crystal.light .post-box {
	background-image: url('../../../images/themes/crystal/module_bg_light.svg');
}

body.crystal.dark .post-box {
	background-color: #0B0B0E;
	color: #CCCCCF;
	background-image: url('../../../images/themes/crystal/module_bg_dark.svg');
}

body.crystal.amoled .post-box {
	background-color: #0B0B0B;
	color: #FFF;
	background-color: #000;

}

body.crystal .post-box::before {
	content: "Blog Post";
	background-size: 28px 28px;
	width: calc(100% + 32px);
	height: 28px;
	position: relative;
	top: -8px;
	left: -16px;
	padding: 5px 6px 6px 6px;
	box-sizing: border-box;
	font-size: 15px;
	display: inline-block;
	border-bottom: 1px solid #787878;
}

body.crystal.light .post-box::before {
	background-image: url('../../../images/themes/crystal/module_top_light.svg');
	text-shadow: 1px 1px 0px #FFF, 0px 0px 4px rgba(0, 0, 0, 0.25);
}

body.crystal.dark .post-box::before,
body.crystal.amoled .post-box::before{
	background-image: url('../../../images/themes/crystal/module_top_dark.svg');
	text-shadow: 1px 1px 0px #000, 0px 0px 4px rgba(255, 255, 255, 0.25);
}

body.crystal .post-box::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 0px;

	width: 640px;
	height: 27px;
}

body.crystal.light .post-box::after {
	background-image: url(../../../images/themes/crystal/post_grey_top_segment_light.svg);
}

body.crystal.dark .post-box::after,
body.crystal.amoled .post-box::after{
	background-image: url(../../../images/themes/crystal/post_grey_top_segment_dark.svg);
}

body.crystal .post-box .title {
	font-size: 175%;
	font-family: ssans-regular, kosugimaru;
}

body.crystal .post-box .tags,
body.crystal .post-box .date {
	font-size: 100%;
	font-family: ssans-regular, kosugimaru;
	font-variant: all-small-caps;
}

body.crystal .post-box .tags {
	margin: 8px 8px 16px 8px;
}

body.crystal .post-box .tags a {
	background-color: #1F1F1F;
	color: #FFF;
	border-radius: 4px;
	padding: 0px 4px 2px 4px;
	position: relative;
	left: -8px;
}

body.crystal.dark .post-box .tags a,
body.crystal.amoled .post-box .tags a {
	background-color: #E0E0E0;
	color: #000;
}

body.crystal .post-box .date {
	margin: 0px 0px 4px 0px;
}

body.crystal .post-box .banner {
	width: 100%;
	height: 320px;
	background-size: cover;
	background-position: center;

	border-radius: 4px;
}

body.crystal.light .post-box .banner {
	border: 1px solid rgba(128, 128, 128, 1);
	box-shadow: 0px 0px 6px rgba(64, 64, 64, 0.45);
}

body.crystal .post-box .desc {
	margin: 16px 0px;
	max-height: 192px;
	overflow-y: hidden;
}

body.crystal .post-box .fade-down {
	height: 64px;
	position: absolute;
	bottom: 50px;
	width: calc(100% - 32px);
	background: rgb(227, 228, 229);
	background: linear-gradient(
		0deg,
		rgba(240, 240, 241, 1.0) 15%,
		rgba(227, 228, 229, 0.0) 100%
	);
}

body.crystal.dark .fade-down {
	background: rgb(11, 11, 14);
	background: linear-gradient(
		0deg,
		rgba(11, 11, 14, 1.0) 15%,
		rgba(11, 11, 14, 0.0) 100%
	);
}

body.crystal.amoled .fade-down {
	background: rgb(11, 11, 11);
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 1.0) 15%,
		rgba(0, 0, 0, 0.0) 100%
	);
}

body.crystal .post-box .continue {
	display: table;
	background-color: #000;
	color: #FFF;
	padding: 1px 8px 4px 8px;
	margin: 0px auto 8px auto;
	font-variant: all-small-caps;
}

body.crystal.dark   .post-box .continue,
body.crystal.amoled .post-box .continue {
	background-color: #FFF;
	color: #000;
}

body.crystal .nav-bar {
	width: 100%;
	box-sizing: border-box;
	overflow: auto;
}

body.crystal .nav-bar .nav-left {
	float: left;
}

body.crystal .nav-bar .nav-right {
	float: right;
}

body.crystal .nav-bar .nav-left,
body.crystal .nav-bar .nav-right {
	display: table;
	background-color: #000;
	color: #FFF;
	padding: 1px 8px 4px 8px;
	font-variant: all-small-caps;
}

body.crystal.dark   .nav-bar .nav-left, body.crystal.dark   .nav-bar .nav-right,
body.crystal.amoled .nav-bar .nav-left, body.crystal.amoled .nav-bar .nav-right {
	background-color: #FFF;
	color: #000;
}

body.crystal .nav-bar a {
	color: #FFF;
}

body.crystal.dark   .nav-bar a,
body.crystal.amoled .nav-bar a {
	color: #000;
}

/* ------------------------------------------------------------------------- */
/* Post Content                                                         {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Regarding the body of the page where the post is displayed.
 */

body.crystal .content {
	background-color: #EDEEEF;
	width: 100%;
}

body.crystal a.anchor {
	position: relative;
	top: -56px;
}

body.crystal h1 a,
body.crystal h2 a,
body.crystal h3 a,
body.crystal h4 a,
body.crystal h5 a,
body.crystal h6 a {
	color: inherit !important;
	text-decoration: none;
}

body.crystal li {
	margin: 12px 0px;
}

body.crystal .disclaimer {
	border: 0px solid transparent;
	border-left: 4px solid #A00;
	background-color: rgba(255, 0, 0, 0.15);
	font-size: 15px;
	color: #b30000;
	margin: 8px 0px;
	padding: 8px;
}

body.crystal.dark   .disclaimer,
body.crystal.amoled .disclaimer {
	color: #FF0000;
}

body.crystal.dark .content {
	background-color: #121218;
	color: #CCCCCF;
}

body.crystal.amoled .content {
	background-color: #000;
	color: #FFF;
}

body.crystal .post-body {
	max-width: 1280px;
	width: calc(100% - 64px);
	margin: 0 auto;
	font-family: ssans-regular, kosugimaru;
	font-size: 125%;
	box-sizing: border-box;
	padding: 16px 32px;
}

body.crystal .post-body img {
	max-width: 100%;
}

body.crystal.dark .invertible,
body.crystal.amoled .invertible{
	filter: invert(1);
}

body.crystal a {
	color: #00a5b7 /* #5c23e0 */ /* #006ac7 */;
	text-decoration: none;
}

body.crystal.dark a {
	color: #3BD3E2;
}

body.crystal.amoled a {
	color: #00FFE7;
}

body.crystal h2 {
	border-left: 4px solid #ff768e;
	padding-left: 12px;
	position: relative;
	left: -18px;
	margin-top: 48px;
}

body.crystal h2:first-of-type {
	margin-top: 24px;
}

body.crystal h3 {
	margin-top: 42px;
}

body.crystal.dark h2, body.crystal.amoled h2 {
	border-left: 4px solid #667;
}

body.crystal pre {
	border: 1px solid #BBB;
	padding: 8px;
	overflow-x: auto;
	background-color: #e0e0e0;
	color: #000000;
	border-radius: 4px;
	box-shadow: 2px 2px 8px #0000001c;
	border-left: 4px solid #BBB;

	background-image: radial-gradient(#d4d4d4 20%, transparent 20%), radial-gradient(#d4d4d4 20%, transparent 20%);
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 3px 3px;

	position: relative;
	top: -10px;
}

/* Code without a pre on the outside */
body.crystal code {
	background-color: #D8D8D8;
	/* border: 1px solid #C3C3C3; */
	padding: 2px 4px;
	border-radius: 4px;
}

/* Code with a pre on the outside */
body.crystal pre code {
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0px;
	border-radius: 0px;
	text-shadow: 0px 0px 0px transparent;
}

body.crystal pre, body.crystal code {
	font-family: inconsolata !important;
	font-size: 92%;
	tab-size: 4;
}

body.crystal.dark pre {
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid #232323;
	border-left: 4px solid #232323;
	box-shadow: 0px 0px 0px transparent;
	border-radius: 4px;
	color: #C3C3C3;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);

	background-image: radial-gradient(#101010 20%, transparent 20%), radial-gradient(#101010 20%, transparent 20%);
}

body.crystal.dark code {
	background-color: #080808;
	border: 1px solid transparent;
}

body.crystal.dark pre code {
	background-color: transparent;
	border: 0px solid transparent;
}

body.crystal.amoled pre {
	background-color: rgba(12, 12, 12, 0.5);
	border: 1px solid #232323;
	border-left: 4px solid #232323;
	box-shadow: 0px 0px 0px transparent;
	border-radius: 4px;
	color: #C3C3C3;

	background-image: radial-gradient(#151515 20%, transparent 20%), radial-gradient(#151515 20%, transparent 20%);
}

body.crystal.amoled code {
	background-color: #1b1b1b;
	border: 1px solid transparent;
}

body.crystal.amoled pre code {
	background-color: transparent;
	border: 0px solid transparent;
}

/* Label for the code blocks */
body.crystal .code-label {
	position: relative;
	top: 2px;
	left: 20px;
	font-size: 14px;
	font-variant: all-small-caps;
	font-weight: bold;
}

/* Quote box */
body.crystal.light .quote {
	border-left: 4px solid #c3c3c3;
	padding: 8px 14px;
	font-style: italic;
}

body.crystal.dark .quote,
body.crystal.amoled .quote {
	border-left: 4px solid #232323;
	padding: 8px 14px;
	font-style: italic;
}

/* Hide elements in specific themes */
body.crystal.light .light-null {
	display: none;
}

body.crystal.dark .dark-null {
	display: none;
}

body.crystal.amoled .dark-null {
	display: none;
}

/* Tables */
body.crystal table.nt {
	border-radius: 4px;
	border-spacing: 0px;
	background-color: #e0e0e0;
	border: 1px solid #BBB;
	box-shadow: 2px 2px 8px #c7c7c7;
	overflow: hidden;
}

body.crystal table.nt,
body.crystal table.nt td.nows {
	white-space: nowrap;
}

body.crystal table.nt tr.top td,
body.crystal table.nt th {
	background-color: #3e3e3e;
	overflow: hidden;
	color: white;
	text-align: left;
}

body.crystal table.nt tr.bt td,
body.crystal table.nt td,
body.crystal table.nt th {
	padding: 6px 8px;
}

body.crystal.dark table.nt {
	background-color: #1A1A20;
	border: 1px solid #202026;
	box-shadow: 2px 2px 8px #000;
}

body.crystal.dark table.nt tr.top td {
	background-color: #2e2e37;
	color: #FFF;
}

body.crystal.dark table.nt tr.bt td {
	border-bottom: 1px solid #0A0A0A;
	color: #FFF;
}

body.crystal.dark table.nt td {
	color: #FFF;
}

body.crystal.amoled table.nt {
	background-color: #000;
	border: 1px solid #444;
	box-shadow: 2px 2px 8px #000;
}

body.crystal.amoled table.nt tr.top td {
	background-color: #111;
	color: #FFF;
}

body.crystal.amoled table.nt tr.bt td {
	border-bottom: 1px solid #0A0A0A;
	color: #FFF;
}

body.crystal.amoled table.nt td {
	color: #FFF;
}

body.crystal .caption {
	font-style: italic;
	font-size: 85%;
	margin-top: 12px;
	width: 100%;
	text-align: center;
}

body.crystal table td .caption {
	font-size: inherit;
}

body.crystal.dark .caption {
	color: #CCCCCF;
}

body.crystal.amoled .caption {
	color: #FFF;
}

/*
 * Audio Player Overrides
 */

body.crystal.light audio::-webkit-media-controls-panel {
	background-color: #DDD;
}

body.crystal.dark   audio,
body.crystal.amoled audio {
	filter: invert(1);
}

body.crystal audio:focus {
	outline-width: 0px;
}


/* ------------------------------------------------------------------------- */
/* Bottom Links & Copyright                                             {{{1 */
/* ------------------------------------------------------------------------- */

/*
 * Links are listed, as well as the copyright string and page generation time.
 * The theme will stay traditional to how other CN websites are.
 */

body.crystal hr.post-end {
	border: 1px solid rgba(0, 0, 0, 0.5);
}

body.crystal.dark   hr.post-end,
body.crystal.amoled hr.post-end {
	border: 1px solid rgba(255, 255, 255, 0.5);
}

body.crystal.dark   table,
body.crystal.amoled table {
	color: inherit;
}

body.crystal img.avi {
	width: 100%;
	border-radius: 50%; /* could be 100% idc */
	box-sizing: border-box;
	position: relative;
	margin: 0 auto 32px auto;
	padding: 8px;
	border-radius: 24px;
	background-image: url(../../../images/themes/crystal/pic_bg.svg);
	background-size: cover;
	box-shadow: 0px 4px 15px #e980937f;
}

body.crystal .blog-bottom {
	width: 100%;
	background-color: #252528;
	color: #FFF;
}

body.crystal .blog-bottom .inner {
	width: calc(100% - 64px);
	max-width: 1280px;
	margin: auto;
	position: relative;
	box-sizing: border-box;
	padding: 42px 32px;
	overflow: auto;

	font-family: ssans-regular, kosugimaru;
}

body.crystal .blog-bottom .inner .section {
	float: left;
	padding-right: 32px;
	font-size: 110%;
}

body.crystal .blog-bottom .inner .section .title {
	font-variant: all-small-caps;
	color: rgba(255, 255, 255, 0.5);
	padding-bottom: 6px;
}

body.crystal .blog-bottom .inner .section a {
	text-decoration: none;
	color: #BBB;
}

body.crystal .blog-bottom .inner .section a:hover {
	color: #FFF;
}

body.crystal .blog-bottom .copyright {
	width: 100%;
	padding-bottom: 6px;
	font-weight: bold;
	text-align: center;
}