body {
	background-color: #FFFFFF;
	color: #222222;

	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

img {
	border-style: none;
	max-width: 100%;
	height: auto;	
}

nav {
	background-color: #FFFFFF !important;
	color: #222222 !important;
	box-shadow: 5px 0px 30px rgba(0, 0, 0, 0.08);
}
	#navbar-button {
		font-size: 22px;
		color: #000000;
		opacity: 0.8;
		transition: all 0.5s ease;
	}
		#navbar-button:hover {
			opacity: 1;
			cursor: pointer;
			color: #666666;
		}

	#mobile-nav {
		background-color: #FFFFFF;
		font-weight: 600;
		transition: background-color 0.2s ease;
	}
		#mobile-nav > li > a {
			font-weight: 600;
			text-transform: uppercase;
			color: #000000;
		}
	
	#desktop-nav > li > a {
		color: #000000;
		font-weight: 600;
		font-size: 14px;
		transition: all 0.2s ease-in-out;
		text-transform: uppercase;
	}
		#desktop-nav > li > a:hover { color: #999999; }

	.logo {
		font-weight: bold;
		font-size: 24px;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;

		background: linear-gradient(270deg, #44A08D, #093637, #4568DC, #B06AB3, #FFAFBD, #ffC3A0, #DCE35B, #45B649, #0099F7);
		background-size: 400% 400%;
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	
		-webkit-animation: GradientAnimation 20s ease infinite;
		-moz-animation: GradientAnimation 20s ease infinite;
		animation: GradientAnimation 20s ease infinite;
	}

.header {
	background-color: #FFA400;
	color: #FFFFFF;
	width: 100%;
	height: 10vh;
}

main {
	flex: 1 0 auto;
	overflow: hidden;
}

hr {
	opacity: 0.2;
	width: 100%;
}

h1 {
	font-weight: 600;
	font-size: 24px;
	font-family: 'Varela Round', sans-serif;
}

h6 {
	font-size: 20px;
	margin-top: 35px;
	font-family: 'Varela Round', sans-serif;
}

.header-font {
	font-family: 'Varela Round', sans-serif;
	font-size: 30px;
	text-transform: uppercase;
}

#post-title {
	font-size: 28px;
	font-weight: 600;
	text-transform: uppercase;
	color: #9E9E9E;
}

.post-title {
	font-size: 22px;
	margin-bottom: 10px;
	font-weight: bold;
	color: #000000;
	text-transform: uppercase;
	transition: all 0.2s ease-in-out;
}

.card-holder {
	display: flex;
	overflow: hidden;
	width: 100%;
}

#posts-nav {
	font-weight: 600;
	text-transform: uppercase;
	color: #000000;
	position: relative;
	left: 15px;
}

.emphasize {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 24px;
}

.category-link { color: #3498db; }
.category-link:hover { color: #1d6fa5; }

#back-btn { font-size: 16px; }
.grey-text { color: #333333; }
.smaller { font-size: 12px; }
.uppercase { text-transform: uppercase; }

#desktop-posts:hover { background-color: #000000; }

#dropdown-posts {
	width: 100%;
	color: #000000;
}

.no-style {
	color: #000000;
	width: 100%;
	flex: 1;
}

.post-card {
	width: 100%;
	border-radius: 8px;
	padding: 5px 50px 5px 50px;
	background-color: #FEFEFE;
	box-shadow: 10px 15px 40px rgba(0, 0, 0, 0.04), 1px 3px 8px rgba(0, 0, 0, 0.05);
}

.inline-icon {
	display: inline-flex;
	vertical-align: top;
	line-height: 22px;
}

.pagination-active { background-color: #EEEEEE; }

.blank-btn {
	border: none;
	background-color: transparent;
}
	.blank-btn:hover { cursor: pointer; }

.equation {
	background-color: #EFEFEF;
	padding: 10px 20px 10px 20px;
	border-radius: 10px;
}

.short-code {
	background-color: #002b36;
	padding: 2px 15px;
	border-radius: 0px;
	font-family: "Courier";
}

.solarized-text { color: #859900; }

/* Scrollbar styling. */
* {
	scrollbar-width: auto;
	scrollbar-color: #111111 #343434;
}

*::-webkit-scrollbar-track { background: #343434; }
	*::-webkit-scrollbar { 
		width: 12px;
		height: 12px;
	}
	*::-webkit-scrollbar-thumb {
		background-color: #111111;
		border-radius: 5px;
	}

/* Smoothstate CSS. */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.scene-element {
	animation-duration: 0.5s;
	transition-timing-function: ease-in;
	animation-fill-mode: both;
}

.scene-element-fadein { animation-name: fadeIn; }
.scene-element-fadeinup { animation-name: fadeInUp; }
.scene-element-fadeinright { animation-name: fadeInRight; }
.is-exiting { animation-duration: alternate-reverse; }

/* Hover effects. CREDIT: https://github.com/IanLunn/Hover/ */
/* Shrink */
.hvr-shrink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

/* Grow */
.hvr-grow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
}

/* Keyframes for the gradient animation. */
@-webkit-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}