/*! v27.min.css | v27.alpha.0 | pakal.org */

/* == Fonts ================================================================= */
/* -- Titles fonts ---------------------------------------------------------- */
@font-face {
	font-family:	"Oswald-Bold";
	font-style:		normal;
	font-weight:	700;
	src:			url("/fonts/oswald/Oswald-Bold.woff2")	format("woff2"),
					url("/fonts/oswald/Oswald-Bold.woff")	format("woff"),
					url("/fonts/oswald/Oswald-Bold.ttf")	format("truetype");
	font-display:	optional;
}

/* -- Everythings fonts ----------------------------------------------------- */
@font-face {
	font-family:	"Roboto Condensed";
	font-weight:	100 900;
	font-style:		normal;
	src:			url("/fonts/roboto-condensed/RobotoCondensed-VariableFont_wght.woff2") format("woff2 supports variations"),
					url("/fonts/roboto-condensed/RobotoCondensed-VariableFont_wght.woff2") format("woff2"),
					url("/fonts/roboto-condensed/RobotoCondensed-VariableFont_wght.woff") format("woff"),
					url("/fonts/roboto-condensed/RobotoCondensed-VariableFont_wght.ttf") format("truetype");
	font-display: 	optional;
}

@font-face {
	font-family:	"Roboto Condensed";
	font-weight:	100 900;
	font-style:		italic;
	src:			url("/fonts/roboto-condensed/RobotoCondensed-Italic-VariableFont_wght.woff2") format("woff2 supports variations"),
					url("/fonts/roboto-condensed/RobotoCondensed-Italic-VariableFont_wght.woff2") format("woff2"),
					url("/fonts/roboto-condensed/RobotoCondensed-Italic-VariableFont_wght.woff") format("woff"),
					url("/fonts/roboto-condensed/RobotoCondensed-Italic-VariableFont_wght.ttf") format("truetype");
	font-display:	optional;
}



/* ========================================================================== */
/* -- Da CSS ---------------------------------------------------------------- */
:root {
	--font-default:				"Roboto Condensed", "Arial Narrow", sans-serif;
	--font-headers:				"Oswald-Bold", Impact, "Arial Narrow", sans-serif;

	--font-size-base:			1.25rem;
	--font-size-small:			1rem;

	--font-size-menu:			23px;
	--font-size-header:			72px;

	--font-size-title:			2rem;

	--line-height-default:		1.3;
	--line-height-texts:		1.35;


	--color-background:			#eee;

	--color-base:				#222;
	--color-texts:				#555;

	--color-brand:				#ce453e;

	--gap-default:				16px;
	--gap-menu:					calc(36px + var(--gap-default));
	--gap-footer:				calc(31px + var(--gap-default));

	--size-rotated-header:		calc(54px + var(--gap-default));
}

*, *::before, *::after {
	margin: 0;
	padding: 0;

	box-sizing:	border-box;
}


html {
	width: 100%;
	min-height: 100%;
	scroll-behavior: smooth;
	color-scheme: light;
}

body {
	width: 100%;
	min-height: 100vh;

	background: var(--color-background);

	color: var(--color-base);
	font-family: var(--font-default);
	font-size: var(--font-size-base);

	line-height: var(--line-height-default);

	-webkit-overflow-scrolling: touch;

	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



/* -- Menubar / Menu -------------------------------------------------------- */
.fixed-bars {
	position:						fixed;
	z-index:						200;

	width:							auto;
	height:							auto;
	padding:						0 16px;
}

.frost-effect {
	background:						rgba(238, 238, 238, .75);
	backdrop-filter:				blur(8px);
}


.menu-position {
	inset:							0 0 auto 0;
}

.menu-content {
	display: flex;
	width: 100%;

	padding: 4px 0 3px 0;

	justify-content: space-between;
	border-bottom: 2px solid var(--color-brand);
}

.menu-logo {
	display: flex;
	padding: 3px 0 0 0;
}

/* -- Menu navigation */
.menu-nav {
	display: flex;
	gap: 12px;

	list-style: none;
}

.menu-nav li:nth-child(1), .menu-nav li:nth-child(4), .menu-nav li:nth-child(5), .menu-nav li:nth-child(7) {
 	margin-right:					12px;
}

.menu-nav a {
	text-decoration:				none;

	color:							var(--color-base);
	font-family:					var(--font-default);
	font-size:						var(--font-size-menu);
	font-weight:					700;

	white-space:					nowrap;
	line-height:					normal;
	letter-spacing:					0.01rem;
	text-transform:					uppercase;
}

.menu-nav a:hover,
.menu-nav a.menu-current {
	color:							var(--color-brand);
}



/* -- Site footer ----------------------------------------------------------- */
.footer-position {
	inset: auto 0 0 0;
/*	padding: 0 16px env(safe-area-inset-bottom) 16px;	*/
}

.footer-content {
	display: flex;

	padding: 4px 0 6px 0;

	color: var(--color-base);
	font-size: var(--font-size-small);
	line-height: normal;

	align-items: center;
	justify-content: space-between;
	border-top: 2px solid var(--color-brand);
}



/* -- Main contents --------------------------------------------------------- */
.vertical-container {
	margin: var(--gap-menu) var(--gap-default) var(--gap-footer) var(--gap-default);
}

.vertical-layout {
	display: grid;
	grid-template-columns: var(--size-rotated-header) 1fr;
	gap: var(--gap-default);

	width: 100%;
}

.vertical-centered {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.rotated-header {
	writing-mode: vertical-lr;

	color: var(--color-base);
	font-family: var(--font-headers);

	justify-self: start;
	pointer-events: none;
}

.rotated-header h1 {
	position: fixed;
	display: block;

	font-size: var(--font-size-header);
	font-weight: 700;

	white-space: nowrap;
	line-height: .92;
	letter-spacing: .02em;

	text-transform: uppercase;

	transform:						translate(-1px, -3px);
}


/* -- Content grid system --------------------------------------------------- */
.grid-2-cols {
	display:						grid;
	width:							100%;

	grid-template-columns:			repeat(2, 1fr); /* Create 2 equal columns */
	gap:							32px;
}

.grid-item {
}

.grid-full {
	grid-column:					span 2;
}



/* -- Titles ---------------------------------------------------------------- */
.main-title {
	color:							var(--color-base);
	font-family:					var(--font-headers);
	font-size:						var(--font-size-title);
	line-height:					.92;

	padding:						0 0 6px 0;

	transform:						translate(0px, -3px);
}



/* =============================================================================
   -- #About page ...
   ========================================================================== */
.about-text {
	color:							var(--color-texts);
	line-height: 					var(--line-height-texts);

	text-align: 					justify;
	word-break:						break-word;
	overflow-wrap:					break-word;
	hyphens:						auto;
}

.about-text p:not(:last-child) {
	margin:							0 0 1rem 0;
}

.about-text a {
	color:							var(--color-texts);
	text-decoration:				underline solid var(--color-brand) 3px;
	text-underline-offset:			2px;

	transition:						all .25s ease-in-out 0s;
}

.about-text a:hover {
	color:							var(--color-base);
	background:						var(--color-brand);
	text-decoration:				none;
}


.about-img {
	float:							right;
	margin:							2px 0px 4px 16px;
	border:							2px solid #222;
	border-radius:					80px;
}


.about-socials {
	margin:							.25rem 0 0 0;

	display:						flex;
	flex-wrap:						wrap;
	gap:							.25rem 2rem;

	list-style:						none;

	justify-content: 				center;
}

.about-socials a {
	margin:							0 8px;

	font-weight:					500;
	text-decoration:				none;

	color:							var(--color-brand);
	white-space:					nowrap;
	line-height:					normal;
}

.about-socials a:hover {
	color:							var(--color-base);
	background:						unset;
}



/* =============================================================================
   -- #Links page ...
   ========================================================================== */
.links-group {
	margin:							.25rem 0 0 0;

	display:						flex;
	flex-wrap:						wrap;
	gap:							.25rem 2rem;

	list-style:						none;

	justify-content: 				center;
}

.links-group a {
	text-decoration:				none;

	font-weight:					500;

	color:							var(--color-brand);
	white-space:					nowrap;
	line-height:					normal;
}

.links-group a:hover {
	color:							var(--color-base);
}

.links-new {
	background:						#ffee00;
	padding:						0px 8px;
}






/* =============================================================================
   == Responsive shit ...
   ========================================================================== */
@media only screen and (max-width:1024px) {

	:root {
		--font-default:				"Roboto Condensed", "Arial Narrow", sans-serif;
		--font-headers:				"Oswald-Bold", Impact, "Arial Narrow", sans-serif;

		--font-size-base:			1.25rem;
		--font-size-small:			1rem;

		--font-size-menu:			23px;
		--font-size-header:			56px;

		--font-size-title:			2rem;

		--line-height-default:		1.3;
		--line-height-texts:		1.35;


		--color-background:			#eee;

		--color-base:				#222;
		--color-texts:				#555;

		--color-brand:				#ce453e;

		--gap-default:				16px;
		--gap-menu:					calc(36px + var(--gap-default));
		--gap-footer:				calc(31px + var(--gap-default));

		--size-rotated-header:		calc(36px + var(--gap-default));
	}

}



/* ========================================================================== */
@media only screen and (max-width:800px) {

	:root {
		--font-default:				"Roboto Condensed", "Arial Narrow", sans-serif;
		--font-headers:				"Oswald-Bold", Impact, "Arial Narrow", sans-serif;

		--font-size-base:			1.25rem;
		--font-size-small:			1rem;

		--font-size-menu:			23px;
		--font-size-header:			48px;

		--font-size-title:			1.75rem;

		--line-height-default:		1.3;
		--line-height-texts:		1.35;


		--color-background:			#eee;

		--color-base:				#222;
		--color-texts:				#555;

		--color-brand:				#ce453e;

		--gap-default:				16px;
		--gap-menu:					calc(36px + var(--gap-default));
		--gap-footer:				var(--gap-default);

		--size-rotated-header:		calc(28px + var(--gap-default));
	}



	/* -- Content grid system --------------------------------------------------- */
	.grid-2-cols {
		grid-template-columns:			1fr;
	}

	.grid-full {
		grid-column:					unset;
	}


	/* -- Site footer ----------------------------------------------------------- */
	.footer-position {
		position: relative;
		inset: unset;
	}

	.footer-content {
		display: block;
		text-align: center;
		justify-content: unset;
	}



	/* =============================================================================
	   -- #About page ...
	   ========================================================================== */
	.about-img {
		width:							114px;
		height:							114px;
	}


}