* {
	font-family: helvetica, arial, sans-serif;
}

html {
	background-color: white;
}

main {
	display: inline-flex;
	justify-content: center;
	flex-wrap: wrap;
}

:root {
	--padding-horizontal: 2px;
	--basic-width: 400px;
	--primary-color: #000000;
	--secondary-color: #adadad;
	--hover-transition: cubic-bezier(0.54, 0, 0, 1.01) 0.2s;
}

/* Header */

#endlos {
	color: white;
	mix-blend-mode: difference;

	position: fixed;
	left: 0;
	top: 2px;
	width: 100vw;

	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}

.nav-category {
	position: fixed;
	bottom: calc( 4 * var( --padding-horizontal ) );
	left: calc( 6 * var( --padding-horizontal ) );
	display: inline;
	list-style: none;
	z-index: 100;
}

.nav-category li a{
	color: black;

	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;

	transition: var( --hover-transition );
}

.nav-category li a:hover {
	background: black;
	color: white;
	mix-blend-mode: difference;

	transition: var( --hover-transition );
}

/* Post */

.media-wrapper {
	width: 400px;
	max-width: calc( 100vw - var(--padding-horizontal) * 2 );
	padding: calc( var(--padding-horizontal) * 2 ) var(--padding-horizontal);
	display: flex;
    flex-direction: column;
}

	/*	ACF Selectable Styles */

	.width-s { width: var( --basic-width ); }
	.width-m { width: calc( var( --basic-width ) * 2 + var( --padding-horizontal ) * 2 ); }
	.width-l { width: calc( var( --basic-width ) * 3 + var( --padding-horizontal ) * 4 ); }

	.align-top { justify-content: start; }
	.align-center { justify-content: center; }
	.align-bottom { justify-content: end; }


/* Lazy Loading */

img.lazy,
video.lazy {

}


/* Source */

a.source,
a.source:active,
a.source:visited {
	width: fit-content;

	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: var(--secondary-color);

	transition: var( --hover-transition );
}

a.source:hover {
	color: black;
	transform: translateX(10px);

	transition: var( --hover-transition );
}