@font-face {
	font-family: "Amsi Pro Normal";
	src: url('../fonts/amsi-pro-normal-ultra.woff') format('woff');
}

@font-face {
	font-family: Montserrat Bold;
	src: url("../fonts/Montserrat-Bold.ttf");
}

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

@font-face {
	font-family: Nexa Bold;
	src: url("../fonts/nexa_bold.otf");
}

:root {
	--global-font-amsi-pro-normal: "Amsi Pro Normal";
	--global-font-montserrat-bold: "Montserrat Bold";
	--global-font-montserrat-regular: "Montserrat Regular";
	--global-font-nexa-bold: "Nexa Bold";
	--global-color-navigation-text-grey: 122, 125, 147; /* #7a7d93 or #4d516c */
	--global-color-navigation-gradient-grey-dark: 15, 18, 23; /* #0F1217 */
	--global-color-navigation-gradient-grey-light: 18, 21, 25; /* #0F1219 */
	--global-color-navigation-lines: 93, 103, 175; /* #0F1219 */
	--global-color-bg-tiled-light: 35, 34, 40; /* #242427 */
	--global-color-text-black: 27, 27, 27; /* #1b1b1b */
	--global-color-text-white: 242, 242, 242; /* #f2f2f2 */
	--global-color-text-grey-dark: 91, 94, 107; /* #5b5e6b */
	--global-color-text-3d-white: 204, 204, 204; /* #ccc */
	--global-color-text-shadow: 19, 19, 28; /* #f2f2f2 */
	--global-color-button-pink-light: 200, 10, 74; /* 135cef or 6212dc */
	--global-color-button-blue: 18, 137, 220; /* #004ce4 */
	--global-color-button-red: 190, 73, 101; /* #be4965 */

	--global-color-border-grey: 240, 240, 243; /* #f0f0f3 OR #005fd7 */
}

html {
	scrollbar-color: rgba(var(--global-color-bg-tiled-light), 1) rgba(var(--global-color-navigation-gradient-grey-dark), 1);
	scroll-behavior: smooth;
	overflow-y: scroll;
	overflow-x: hidden;
	touch-action: auto;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-font-smoothing: antialiased
	-webkit-tap-highlight-color: transparent;
	-webkit-overflow-scrolling: auto;
}

body {
	font-size: 62.5%;
	color: rgba(var(--global-color-text-black), 1);
	text-rendering: optimizeLegibility;
	background-color: rgba(var(--global-color-navigation-gradient-grey-light), 1);
	padding: 0;
	margin: 0;
}

h1 {
	font-family: var(--global-font-amsi-pro-normal), Sans-serif;
	font-weight: 900;
	font-size: 3.3rem;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 2px 5px rgba(var(--global-color-text-shadow), .4);
	line-height: .9;
	letter-spacing: -.03em;
	hyphens: manual;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	padding: 0 .5em 0 .5em;
	margin: 0;
}

h2 {
	font-family: var(--global-font-montserrat-bold), Sans-serif;
	font-weight: normal;
	font-size: .9rem;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(var(--global-color-text-shadow), .4);
	line-height: 1;
	letter-spacing: .02em;
	hyphens: manual;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	background-color: rgba(var(--global-color-border-grey), 1);
	border-radius: 15px;
	-webkit-border-radius: 15px; 
	-moz-border-radius: 15px;
	padding: .5em 1.2em .5em 1.2em;
	margin: .5em 0 -2.2em 0;
}

p {
	font-family: var(--global-font-montserrat-regular), Sans-serif;
	font-weight: normal;
	font-size: 1.05rem;
	color: rgba(var(--global-color-navigation-text-grey), 1);
	text-align: center;
	line-height: 1.6;
	letter-spacing: -.01em;
	hyphens: auto;
	max-width: 50em;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	padding: 0 2em 2em 2em;
	margin: 0;
}

a {
	font-size: 1rem;
	font-weight: normal;
	color: rgba(var(--global-color-button-blue), 1);
	text-decoration: none;
	transition: opacity 1000ms cubic-bezier(.19, 1, .22, 1), color 1000ms cubic-bezier(.19, 1, .22, 1);
}

::selection {
	color: rgba(var(--global-color-text-black), 1);
	background-color: rgba(var(--global-color-text-white), .4);
	text-shadow: none;
}

/* Header & Navigation */

header {
	position: fixed;
	background: linear-gradient(rgba(var(--global-color-navigation-gradient-grey-dark), .97) 50%, rgba(var(--global-color-navigation-gradient-grey-light), .92) 100%);
	border-bottom: rgba(var(--global-color-text-shadow), .8) 4px solid;
	backdrop-filter: blur(5px);
	width: 100%;
	height: 5.5em;
	transition: height 300ms ease-in-out;
	z-index: 2;
}

header.active {
	height: 4em;
}

header li {
	display: inline;
	float: left;
	font-family: var(--global-font-montserrat-bold), Sans-serif;
	font-weight: normal;
	font-size: 1.3rem;
}

header a {
	font-size: 1.3rem;
	color: rgba(var(--global-color-navigation-text-grey), 1);
	opacity: .8;
}

.header-wrapper {
	display: flex;
	justify-content: center;
	position: relative;
	margin-top: 1em;
	transition: margin-top 300ms ease-in-out;
}

.header-wrapper.active {
	margin-top: .3em;
}

.navigation {
	display: flex;
	flex-direction: column;
	position: relative;
	top: .5em;
	opacity: 1;
	user-select: none;
	pointer-events: auto;
	transition: opacity 1000ms cubic-bezier(.19, 1, .22, 1);
}

.navigation.active {
	opacity: .2;
}

.navigation ul {
	color: rgba(var(--global-color-text-white), 1);
	padding: .18em .55em .15em .75em;
	margin: 0;
}

.navigation li + li:before {
	content: "|";
	color: rgba(var(--global-color-navigation-lines), .2);
	padding: .5em;
}

.toggle {
	display: none;
	position: fixed;
	background: url(../img/m-toggle-off.svg) no-repeat;
	background-size: 3.2em;
	background-position: center;
	width: 3.5em;
	height: 3.5em;
	right: 2.5em;
	margin-top: .9em;
	cursor: pointer;
	opacity: .5;
	transition: opacity 1000ms cubic-bezier(.19, 1, .22, 1);
	z-index: 4;
}

.toggle.active {
	background: url(../img/m-toggle-on.svg) no-repeat;
	background-size: 3.2em;
	background-position: center;
}

.mobile-menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	font-size: 2rem;
	background-color: rgba(var(--global-color-navigation-gradient-grey-dark), 1);
	width: 100%;
	height: 100vh;
	top: -.5em;
	left: 100em;
	padding: 0 0 0 .25em;
	user-select: none;
	opacity: 0;
	z-index: 3;
}

.mobile-menu.active {
	opacity: 1;
}

.mobile-menu a {
	font-family: var(--global-font-montserrat-bold), Sans-serif;
	font-weight: normal;
	font-size: 2rem;
	line-height: 1.2;
}

.content-wrapper {
	display: flex;
	flex-direction: column;
	position: absolute;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	top: 33%;
	opacity: 1;
	gap: 4em;
}

.content-wrapper h1 {
	color: rgba(var(--global-color-text-white), 1);
	text-shadow: 
		0 1px 0 rgba(var(--global-color-text-3d-white), 1), 
		0 2px 0 rgba(var(--global-color-text-3d-white), 1), 
		0 3px 0 rgba(var(--global-color-border-grey), .1), 
		0 4px 1px rgba(var(--global-color-text-shadow), .1), 
		0 10px 10px rgba(var(--global-color-text-shadow), .3);
}

.content-wrapper h2 {
	color: rgba(var(--global-color-button-pink-light), 1);
	text-shadow: 1px 1px 2px rgba(var(--global-color-text-shadow), .5);
	box-shadow: inset 0 0 0 1.5px rgba(var(--global-color-button-pink-light), 1), 2px 2px 5px 3px rgba(var(--global-color-text-shadow), .2);
	background: rgba(var(--global-color-text-shadow), .8);
}

footer {
	display: flex;
	flex-direction: column;
	position: absolute;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	bottom: 0;
	padding: 3em 0 3em 0;
}

footer p {
	font-size: .9rem;
	opacity: .5;
}

/* Media Queries */

@media (prefers-color-scheme: dark) {
  :root {
    --global-color-button-pink-light: 200, 10, 74; /* 135cef or 6212dc */
  }
}

@media (hover: hover) and (pointer: fine) {
	a:hover {
		text-decoration: underline;
	}
	header a:hover {
		text-decoration: none;
		opacity: 1;
	}
	.navigation.active:hover {
		opacity: 1;
	}
	.toggle:hover {
		opacity: 1;
	}
	.mobile-menu a:hover {
		color: rgba(var(--global-color-button-red), 1);
	}
}

@media only screen and (max-width: 1000px) {

	header {
		height: 7em;
	}

	.header-wrapper {
		margin-top: 1em;
	}

	.navigation {
		display: none;
	}

	.toggle {
		display: block;
	}

	.mobile-menu.active {
		left: 0;
	}

}