:root {
	--navbarTransitionSpeed: 0.2s;
	--navbarTransitionSpeedCurve: ease-in-out;

	--mobile_barsize_notcollapsed: 27.5vw;
	--mobile_barsize_collapsed: 47.5vw;

	--mobileTransitionSpeedOpacity: 0.08s;
	--mobileTransitionSpeedOpacityCurve: ease-in-out;
	--mobileTransitionSpeedOpacityDelay: 0.05s;
	--mobileTransitionSpeedOpacityDelayMultiplier: 1.8;

	--mobileTransitionSpeedNavbarMultiplier: 1.8;
	--mobileTransitionSpeedNavbar: calc((var(--mobileTransitionSpeedOpacity) * var(--mobileTransitionSpeedNavbarMultiplier)) + (var(--mobileTransitionSpeedOpacityDelay) + calc(var(--mobileTransitionSpeedOpacityDelay) * var(--mobileTransitionSpeedOpacityDelayMultiplier))));
}

.shouldBeVisible {
	opacity: 1 !important;
}

.noTransition {
	transition: none !important;
}

.navbar_text_elements:nth-child(3).shouldBeVisible {
	transition: opacity var(--mobileTransitionSpeedOpacity) var(--mobileTransitionSpeedOpacityCurve) var(--mobileTransitionSpeedOpacityDelay);
}

.navbar_text_elements:nth-child(4).shouldBeVisible {
	transition: opacity var(--mobileTransitionSpeedOpacity) var(--mobileTransitionSpeedOpacityCurve) calc(var(--mobileTransitionSpeedOpacityDelay) * var(--mobileTransitionSpeedOpacityDelayMultiplier));
}

.logo,
.logo:hover,
.logo:active,
.logo svg,
.logo svg:hover,
.logo svg:active,
.logo use,
.logo use:hover,
.logo use:active {
  cursor: var(--cursor-pointer);
}

#header_sticky {
	display: flex;
	position: fixed;
	top: 0;
	width: 100%;
	height: fit-content;
	margin: 0 auto;
	z-index: 5;
	transition: all .4s cubic-bezier(0,.86,0,1.05);
}

.navbar {
	background: var(--colorBlack);
	color: var(--colorWhite);
	width: 50vw;
	height: auto;
	margin: auto;
	border-radius: 0 0 var(--ElementRounding) var(--ElementRounding);
	padding: 1.0vw 2.0dvh;
	transform-style: preserve-3d;
}

.navbar::after	{
	content: "";
	position: absolute;
	inset: -0.8vw;
	background: var(--MainGradient);
	filter: var(--GlowBlur);
	transform: translate3d(0, 0, -1px);
	border-radius: 0 0 var(--ElementRounding) var(--ElementRounding);
	animation: flicker_navbar 2s linear infinite;
}

.nav-list {
	display: flex;
	list-style: none;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	width: 100%;
	transform: translateX(-1.3vw);
	margin: auto;
	z-index: 5;
	position: relative;
	pointer-events: none;
	touch-action: none;
}

.nav-list a,
.nav-list p {
    pointer-events: all;
	touch-action: all;
}

.navbar_switch_elements {
	display: none;
	-webkit-user-select: none;
  	-ms-user-select: none;
  	user-select: none;

	opacity: 1;
}

.navbar_text_elements a {
	cursor: var(--cursor-pointer);
}

.nav-list li:first-child:hover {
	animation: blink-1 .6s;
}

.nav-list li {
	margin-right: 1.0vw;
	scale: 1;
	transition: scale var(--navbarTransitionSpeed) var(--navbarTransitionSpeedCurve);
}

.nav-list li:last-child {
	margin-right: 0;
}

.nav-list li a {
	text-decoration: none;
	color: var(--colorWhite);
	font-size: 0.9vw;
	text-align: center;
	font-weight: bold;
	text-shadow: 0 0 0, black;
	transition: text-shadow var(--navbarTransitionSpeed) var(--navbarTransitionSpeedCurve), color var(--navbarTransitionSpeed) var(--navbarTransitionSpeedCurve);
}

.nav-list li:hover {
	scale: 1.15;
}

.nav-list li a img {
	width: 3.0vw;
}

.nav-list li .nav_home:hover {
	text-shadow: 0 0 var(--NavbarHoverOverItemShadowSize) var(--MainGradientYellow);
	color: var(--MainGradientYellow);
}

.nav-list li .nav_games:hover {
	text-shadow: 0 0 var(--NavbarHoverOverItemShadowSize) var(--MainGradientBlue);
	color: var(--MainGradientBlue);
}

.nav-list li .nav_contact:hover {
	text-shadow: 0 0 var(--NavbarHoverOverItemShadowSize) var(--MainGradientPink);
	color: var(--MainGradientPink);
}

@media (max-aspect-ratio: 1000/1300) {
	.nav-list {
		flex-direction: column;
	}
	
	#header_sticky {
		width: 100%;
	}

	.navbar {
		width: 100vw;
		height: var(--mobile_barsize_notcollapsed);
		margin: 0;
		padding-bottom: 5dvh;
		align-items: center;
		border-radius: 0 0 var(--ElementRoundingMobile) var(--ElementRoundingMobile);
		transition: height var(--mobileTransitionSpeedNavbar) ease-in-out;
	}

	.navbar::after {
		border-radius: 0 0 var(--ElementRoundingMobile) var(--ElementRoundingMobile);
	}

	.mobile-collapsed {
		height: var(--mobile_barsize_collapsed);
	}
	
	.nav-list li {
		margin-right: 0;
		margin-top: 1dvh;
		transform: translateX(2vw);
	}
	
	.nav-list li a {
		font-size: 7vw;
		transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out, transform .3s cubic-bezier(0,.86,0,1.05);
	}

	.nav-list li:hover {
		scale: 1 !important;
	}

	.nav-list li a p {
		font-size: 11vw;
		transform: translateY(-3.0vw);
	}

	.nav-list li a img {
		width: 15.0vw;
	}
	
	.navbar_text_elements {
		display: flex;
		position: relative;
		top: 0;
	}

	.navbar_text_elements:nth-child(3) {
		opacity: 0;
		transition: opacity var(--mobileTransitionSpeedOpacity) var(--mobileTransitionSpeedOpacityCurve) calc(var(--mobileTransitionSpeedOpacityDelay) * var(--mobileTransitionSpeedOpacityDelayMultiplier));
	}

	.navbar_text_elements:nth-child(4) {
		opacity: 0;
		transition: opacity var(--mobileTransitionSpeedOpacity) var(--mobileTransitionSpeedOpacityCurve) var(--mobileTransitionSpeedOpacityDelay);
	}
	
	.navbar_switch_elements {
		display: flex;
		position: fixed;
		margin-left: 35vw;
		width: 100%;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 16.0vw;
	}
	
	.navbar_switch_elements a {
		width: auto;
		transition: text-shadow 0.2s ease-in-out, transform .3s cubic-bezier(0,.86,0,1.05);
	}
	
	.navbar_switch_elements a:hover {
		transform: scale(1.25);
		text-shadow: 0 0 var(----NavbarHoverOverItemShadowSizeMobile) rgba(255,255,255,1.00);
	}
	
	.navbar_switch_elements a p {
		font-weight: bold;
		font-size: 14.0vw;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.nav-list li .nav_home:hover {
		text-shadow: 0 0 var(--NavbarHoverOverItemShadowSizeMobile) var(--MainGradientYellow);
	}

	.nav-list li .nav_games:hover {
		text-shadow: 0 0 var(--NavbarHoverOverItemShadowSizeMobile) var(--MainGradientBlue);
	}

	.nav-list li .nav_contact:hover {
		text-shadow: 0 0 var(--NavbarHoverOverItemShadowSizeMobile) var(--MainGradientPink);
	}
	
	.navbar_switch_elements a:active {
		transform: scale(.95);
	}
	
	.nav-list li:last-child {
		margin-right: 0;
	}
}

/* ----------------------------------------------
 * Some were generated by Animista on 2025-01
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@keyframes flicker_navbar {
0%,30%,55%,70%,95%{filter:var(--GlowBlur) brightness(100%)}
25%,45%,60%,80%,100%{filter:var(--GlowBlur) brightness(95%)}
}
@keyframes blink-1 {
0%,50%,100%{filter:none}
25%,75%{filter:grayscale(59%) brightness(25%) saturate(85%)}
}