/* All Pages */
html, body
{
	background: #121212;
}

body {
	width: 80vw;
	color:#fff;
	text-align:center;
	text-transform:uppercase;
	margin: auto;
}

a {
	color: #03a9f4;
	text-decoration: none;
}

a, p {
	line-height: 1.75;
	font-family: 'Merriweather', serif;
}

p {
	font-size: 18px;
	line-height: 1.75;
}

h4 {
	font-family: 'Merriweather', serif;
}

h1 {
	font-family: 'Permanent Marker', cursive;
    font-size: 48px;
	color: #ff80ab;
}

h2 {
    font-size: 32px;
	font-family: 'Merriweather', serif;
	color: #fff;
	text-transform: lowercase;
}

h3
{
	font-family: 'Merriweather', serif;
	color: #ff80ab;
	font-size: 3.5vh;
	text-transform: lowercase;
}

.blog-content, #social {
	padding-bottom: 50px;
}

.chromatic
{
	text-shadow: 3px 2px 2px rgba(251, 12, 12,1), 0px -1px 3px rgba(12, 79, 251,.5),-3px 0px 2px rgba(52, 251, 12, 1);
	animation: pulse ease 2000ms infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}

/* Homepage */
#homepage-header h1 {
	animation: none;
	font-size: 6vw;
}

#homepage-header h2 {
	font-size: 4vw;
}

#homepage-header .titles {
	opacity: 0;
}

.titles h1 {
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}

#homepage-header {
	height: 0;
	padding-bottom: 56.25%;
	max-height: 96vh;
	margin-top: 2vh;
	margin-bottom: 2vh;
	width: 100%;
	position: relative;
	background: linear-gradient(
		to bottom,
		#121212,
		#121212 50%,
		#222 50%,
		#222
	);
	animation: gradientMove 4.5s linear infinite;
	border-radius: 5%;
}

#homepage-header img {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	border-radius: 5%;
	height: 100%;
	max-height: 96vh;
}

#homepage-header .controls {
	position: absolute;
	left: 5%;
	top: 7%;
}

#homepage-header path {
	fill: #fff;
	stroke: #fff;
}

#homepage-header .pause {
	display: block;
}

#homepage-header .play {
	display: none;
}

#homepage-header .loading {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	opacity: 0.75;
	border-radius: 5%;
	background:cornflowerblue;
	max-height: 96vh;
}

#homepage-header h2 {
	padding-top: 25%;
}

#intro img {
	width: 50%;
	opacity: 0.6;
}

#intro {
	padding-top: 2vh;

}

.header-title {
	position: absolute;
	top: 8%;
	width: 100%;
}

#mobile-links {
	display: none;
}

/* Navigation */
.navigation-links a h4, #social a {
	color: #03a9f4;
	text-align: center;
	transition: transform 300ms, text-shadow 100ms;
}

.navigation-links a h4:hover, #social a:hover{
	text-shadow: 0px 1px 2px white;
	transform: scale(1.1);
}

#social {
	display: flex;
}

#social a {
	flex-grow: 1;
}

#navigation {
	background-color: #121212;
}

.sticky {
	position: sticky;
	top: 0;
}

/* blog posts */
div.blog-content
{
	text-transform: none;
	font-size: 1.5em;
}

div.blog-content h2
{
	padding-top: unset;
	line-height: 2em;
	color: #fff;
}

div.blog-content p
{
	text-align: left;
	padding-bottom: 20px;
}

div.blog-content a
{
	text-decoration: none;
	color: #03a9f4;
}

/* post cards */
.card-holder {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

.card {
	background-color: #383838;
	width: 256px;
	height: 256px;
	margin: 0px 10px 20px 10px;
	line-height: 1;
	transition: transform 300ms;
}

.card img {
	height: 60%;
	padding: 5% 5% 5% 5%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.card:hover {
	transform: scale(1.025);
}

/* Media query */
@media (max-width: 767px) {
	#navigation h4 {
		font-size: 4vw;
	}

	#homepage-header, #desktop-links {
		display: none;
	}

	#mobile-links {
		display: block;
	}
}

/* Animations */
@keyframes gradientMove { 
    0%{background-size: 100% 10px}
    50%{background-size: 100% 9px}
    100%{background-size: 100% 10px}
}

@keyframes pulse { 
    0%{ transform: skewX(.5deg);}
    75%{ transform:skewX(1deg);}
}

@keyframes fadeInHeader {
	0% {
		opacity: 0;
	}
	
	25% {
		opacity: 0;
	}

	100% {
		opacity: 0.75;
	}
}

@keyframes fadeOutHeader {
	0% {
		opacity: 0.75;
	}

	25% {
		opacity: 0.75;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeInTitle {
	0% {
		opacity: 0;
	}

	25% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}