/**
 * ----------------------------------------
 * Reset
 * ----------------------------------------
 */
* {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
	text-decoration: none;
	border: 0;
  	outline: 0;
}

/**
 * ----------------------------------------
 * Main
 * ----------------------------------------
 */

/* main gradient
	background: rgb(255,217,28);
	background: -moz-linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	background: linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd91c",endColorstr="#ff1cc2",GradientType=1);
*/

@font-face {
    font-family: 'Rubik VariableFont';
    src: url("../fonts/Rubik-VariableFont_wght.ttf") format('embedded-opentype'), /* Internet Explorer */
         url("../fonts/Rubik-VariableFont_wght.woff2") format('woff2'),             /* Super Modern Browsers */
         url("../fonts/Rubik-VariableFont_wght.woff2") format('woff'),              /* Pretty Modern Browsers */
         url("../fonts/Rubik-VariableFont_wght.woff2") format('truetype'),          /* Safari, Android, iOS */
         url("../fonts/Rubik-VariableFont_wght.ttf") format('svg');               /* Legacy iOS */
}

.main_class {
  	position: relative;
  	min-height: 100%;
	min-width: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	background: black;
	background-color: black;
	color: white;
	margin-top: -2%;
	cursor: url(../cursor/cursor_vibrant.png) 3 2, default !important;
}

.containter_top {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background: black;
}

html, body {
	font-family: 'Rubik VariableFont', Arial;
	font-display: swap;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding: 0;
	margin:  0;
	height: 100%;
	width: 100%;
	overflow: visible;
	min-height: 100%;
	background: black;
	background-color: black;
}

/**
 * ----------------------------------------
 * Body
 * ----------------------------------------
 */

body {
	background: black;
	height: 100%;
	width: 100%;
	background-color: black;
}

button {
	display: block;
  	background-color: black;
  	font-size: 14px;
	color: white;
	width: 100%;
  	height: 100%;
  	line-height: 60px;
	margin-top: 50px;
  	border-radius: 25px;
	position: relative;
	font-weight: bold;
	transform-style: preserve-3d;
	cursor: url(../cursor/cursor_vibrant_pointer.png) 12 0, pointer !important;
	border: 0px;
	transition: 0.2s ease-in-out;
	text-decoration: none;
}

.mobile_button {
	width: 200px;
	height: 60px;
	line-height: 60px;
	text-decoration: none;
	animation: slide-in-left 0.65s;
}

button:hover {
	transform: scale(1.1);
}

button::after {
	content: "";
	position: absolute;
	inset: -5px;
	background: rgb(255,217,28);
	background: -moz-linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	background: linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	filter: blur(10px);
  	border-radius: 25px;
	transform: translate3d(0px, 0px, -1px);
}

/**
 * ----------------------------------------
 * Footer
 * ----------------------------------------
 */
footer {
	display: flex;
	position: absolute;
  	bottom: 0;
  	width: 70%;
	height: 2.5rem;
	text-align: center;
	align-items: center;
	justify-content: center;
	background-size: cover;
	margin: auto;
	transform: translateY(150px);
	background: black;
	color: white;
	padding: 10px 20px;
	border-radius: 50px 50px 0px 0px;
	transform-style: preserve-3d;
}

footer svg {
	width: 30px;
  	height: 30px;
}

footer::after {
	content: "";
	display: flex;
	position: absolute;
	inset: -15px;
	margin: auto;
	bottom: 0;
	background-size: cover;
	background: rgb(255,217,28);
	background: -moz-linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	background: linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	filter: blur(20px);
	border-radius: 50px 50px 0px 0px;
	transform: translate3d(0px, 0px, -1px);
	animation: flicker_navbar 2.0s linear infinite;
}

.footer_container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: flex-end;
	width: 100%;
}

.footer_container div {
	display: flex;
	flex-direction: row;
}

.footer_left  {
	margin-left: 2%;
	font-style: italic;
}

.footer_left p {
	transition: transform .3s cubic-bezier(0,.86,0,1.05);
}

.footer_left p:active {
	transform: scale(.95);
}

#year {
	margin-right: 5px;
}

.footer_right  {
	margin-right: 2%;
	height: 24px;
}

.footer_right svg {
	padding-left: 10px;
	padding-right: 10px;
	transition: transform .3s ease;
	height: 100%;
	fill: #fff;
}

.footer_right svg:hover {
	transform: scale(1.5);
}

.logo,
.logo:hover,
.logo:active,
.logo svg,
.logo svg:hover,
.logo svg:active,
.logo use,
.logo use:hover,
.logo use:active {
  cursor: url(../cursor/cursor_vibrant_pointer.png) 12 0, pointer !important;
}

/**
 * ----------------------------------------
 * Navigation bar
 * ----------------------------------------
 */

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

.navbar {
	top: 0px;
	background: black;
	width: 50%;
	height: 100%;
	margin: auto;
	color: white;
	padding: 10px 20px;
	border-radius: 0px 0px 50px 50px;
	transform-style: preserve-3d;
}

.navbar::after	{
	content: "";
	position: absolute;
	inset: -15px;
	background: rgb(255,217,28);
	background: -moz-linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	background: linear-gradient(90deg, rgba(255,217,28,1) 0%, rgba(28,255,255,1) 50%, rgba(255,28,194,1) 100%);
	filter: blur(20px);
	transform: translate3d(0px, 0px, -1px);
	border-radius: 0px 0px 50px 50px;
	animation: flicker_navbar 2.0s linear infinite;
}

.nav-list {
	display: flex;
	list-style: none;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	transform: translateX(-32.5px);
}

.navbar_switch_elements {
	display: none;
	-webkit-user-select: none; /* Safari */
  	-ms-user-select: none; /* IE 10 and IE 11 */
  	user-select: none; /* Standard syntax */
}

.navbar_text_elements a,
.navbar_text_elements a:hover,
.navbar_text_elements a:active {
	cursor: url(../cursor/cursor_vibrant_pointer.png) 12 0, pointer !important;
}

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

.nav-list li {
	margin-right: 20px;
}

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

.nav-list li a {
	text-decoration: none;
	color: white;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	text-shadow: 0px 0px 0px, black;
	transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
}

.nav-list li .nav_home:hover {
	text-shadow: 0px 5px 36px rgb(255,217,28);
	color: rgb(255,217,28);
}

.nav-list li .nav_games:hover {
	text-shadow: 0px 0px 12px rgb(28,255,255);
	color: rgb(28,255,255);
}

.nav-list li .nav_contact:hover {
	text-shadow: 0px 0px 12px  rgb(255,28,194);
	color: rgb(255,28,194);
}

/**
 * ----------------------------------------
 * Main Page
 * ----------------------------------------
 */

.mainpage_container {
    display: flex;
	position: relative;
	width: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.home_text {
	width: 30%;
	align-items: center;
	justify-content: center;
	transform: translateX(10%);
}

.home_text h1 {
	transition: transform .3s cubic-bezier(0,.86,0,1.05);
	animation: slide-in-left 0.45s;
}

.home_text h1:active {
	transform: scale(.95);
}

.home_text h2 {
	transition: transform .3s cubic-bezier(0,.86,0,1.05);
	transform-origin: 20% 50%;
	animation: slide-in-left 0.55s;
}

.home_text h2:active {
	transform: scale(.95);
}

.home_logo {
	width: 30%;
	align-items: center;
	justify-content: center;
	height: 100%;
	transform: translateX(10%);
	animation: flicker_in_logo_big 2.0s linear, flicker_loop_logo_big 7.0s 7.0s linear infinite;
}

.home_logo img {
	height: 100%;
	transform: perspective(15vw) rotateY(-10deg) scale(1.2);
}

/**
 * ----------------------------------------
 * My Games + Contact
 * ----------------------------------------
 */
.container_centered_collum {
	display: flex;
	flex-direction: column;
	margin-top: 150px;
	align-items: center;
	justify-content: center;
	text-align: center;
/*	calc(100% + 1000px)*/
	width: 100%;
}

.container_centered_collum h1 {
	transition: transform .3s cubic-bezier(0,.86,0,1.05);
}

.container_centered_collum h1:active {
	transform: scale(.95);
}

.container_centered_collum h2 {
	transition: transform .3s cubic-bezier(0,.86,0,1.05);
}

.container_centered_collum h2:active {
	transform: scale(.95);
}

.container_centered_collum h3 {
	transition: transform .3s cubic-bezier(0,.86,0,1.05);
}

.container_centered_collum h3:active {
	transform: scale(.95);
}

.container_centered_collum h5 {
	transition: transform .3s cubic-bezier(0,.86,0,1.05);
}

.container_centered_collum h5:active {
	transform: scale(.95);
}

/**
 * ----------------------------------------
 * Responsive
 * ----------------------------------------
 */
@media screen and (max-width: 780px) {
	
	/* navbar */
	.nav-list {
		flex-direction: column;
	}
	
	.header_sticky {
		height: 150px;
	}
	
	.nav-list li {
		margin-right: 0px;
		margin-top: 14px;
		transform: translateX(32.5px);
	}
	
	.nav-list li a {
		font-size: 25px;
		transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out, transform .3s cubic-bezier(0,.86,0,1.05);
	}
	
	.navbar_text_elements {
		display: none;
		position: relative;
		top: 0px;
		font-size: 25px;
	}
	
	.navbar_switch_elements {
		display: flex;
		position: fixed;
		margin-left: 75%;
		width: 100%;
		top: 63px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	.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: 0px 5px 34px rgba(255,255,255,1.00);
	}
	
	.navbar_switch_elements a p {
		font-weight: bold;
		font-size: 60px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	.navbar_switch_elements a:active {
		transform: scale(.95);
	}
	
	.nav-list li:last-child {
		margin-right: 0px;
	}
	
	.navbar {
		width: 100%;
	}
	
	/* footer */
	footer {
		padding: 0;
		width: 90%;
		height: 100px;
	}
	
	footer::after {
		overflow-x: hidden;
	}
	
	.footer_container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		width: 100%;
	}

	.footer_container div {
		display: flex;
		justify-content: center;
		align-content: center;
		width: 100%;
	}
	
	.footer_left {
		padding-left: 0;
		margin: 0;
	}
	
	.footer_right {
		padding-top: 30px;
		padding-right: 0;
		margin: 0;
	}
	
	.footer_right a {
		width: 25%;
	}
	
	/* main */
	.main_class {
		margin-top: 0%;
	}
	
	/* mainpage */
	.mainpage_container {
		flex-direction: column;
		width: 90%;
		height: 100%;
		z-index: 2;
		align-content: center;
	}
	
	.home_text {
		flex-direction: column;
		width: 100%;
		align-content: center;
		align-items: center;
		text-align: center;
		transform: translateX(0%);
	}

	.home_text h1 {
		animation: slide-in-bottom 0.45s;
	}

	.home_text h2 {
		animation: slide-in-bottom 0.55s;
	}
	
	.home_logo {
		position: absolute;
		transform: translateX(-10%) scale(3.5) translateY(5%);
		z-index: -1;
		opacity: 0.25;
		align-content: center;
		align-items: center;
		padding-left: auto;
		padding-right: auto;
		background-size: cover;
		overflow: hidden;
	}
	
	.home_logo img {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-clip: padding-box;
	}

	button {
		width: 100%;
		height: 100%;
	}
	
	.mobile_button {
		width: 50%;
		align-content: center;
		align-items: center;
		text-align: center;
		margin: 0 auto;
		animation: slide-in-bottom 0.65s;
	}
	
	.home_text h2 {
		transform-origin: 50% 50%;
	}
}


/**
 * ----------------------------------------
 * Animations
 * ----------------------------------------
 */
/* ----------------------------------------------
 * 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_in_logo_big {
  0% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  10% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  10.1% {
    filter: none;
  }
  10.2% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  20% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  20.1% {
    filter: none;
  }
  20.6% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  30% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  30.1% {
    filter: none;
  }
  30.5% {
    filter: none;
  }
  30.6% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  45% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  45.1% {
    filter: none;
  }
  50% {
    filter: none;
  }
  55% {
    filter: none;
  }
  55.1% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  57% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  57.1% {
    filter: none;
  }
  60% {
    filter: none;
  }
  60.1% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  65% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  65.1% {
    filter: none;
  }
  75% {
    filter: none;
  }
  75.1% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  77% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  77.1% {
    filter: none;
  }
  85% {
    filter: none;
  }
  85.1% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  86% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  86.1% {
    filter: none;
  }
  100% {
    filter: none;
  }
}
@keyframes flicker_loop_logo_big {	
  0%,
  100% {
    filter: none;
  }
  8.398% {
    filter: none;
  }
  8.4% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  9.2% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  9.202% {
    filter: none;
  }
  10.398% {
    filter: none;
  }
  10.4% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  11.8% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
  11.802% {
    filter: none;
  }
}

@keyframes flicker_navbar {
  0% {
    filter: blur(20px) brightness(100%);
  }
  25% {
    filter: blur(20px) brightness(95%);
  }
  30% {
    filter: blur(20px) brightness(100%);
  }
  45% {
    filter: blur(20px) brightness(95%);
  }
  55% {
    filter: blur(20px) brightness(100%);
  }
  60% {
    filter: blur(20px) brightness(95%);
  }
  70% {
    filter: blur(20px) brightness(100%);
  }
  80% {
    filter: blur(20px) brightness(95%);
  }
  95% {
    filter: blur(20px) brightness(100%);
  }
  100% {
    filter: blur(20px) brightness(95%);
  }
}

@keyframes blink-1 {
  0%,
  50%,
  100% {
    filter: none;
  }
  25%,
  75% {
    filter: grayscale(59%) brightness(25%) saturate(85%);
  }
}

/* I'm bad at this */
@keyframes slide-in-bottom {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}