body {
	background-color: black;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: white;
	font-family: "Exo 2", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

p {
	font-size: 1.5em;
}

/*.exo-2-headline {
	font-family: "Exo 2", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 2em;
}*/

.wrapper,
.content {
	position: relative;
	width: 100%;
	z-index: 1;
}

.content {
	overflow-x: hidden;
}

.image-container {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	perspective: 500px;
	overflow: hidden;
}

	.image-container img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

.content .section {
	width: 100%;
	height: 100vh;
}

	.content .section.hero {
		background-image: url('../img/2122_657998905.webp');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		/*background-size: auto 100%;*/
	}

	.content .section.crackthecode {
		background-image: url('../img/2110_1774460585.webp');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		/*background-size: auto 100%;*/
	}

/*.content .section.crackthecode img {
			width: 10%;
			height: 10%;
			object-fit: cover;
			object-position: center center;
		}*/

.grid-dots {
	background-image: radial-gradient(circle at center, white 1px, transparent 0 ), radial-gradient(circle at center, white 1px, transparent 0);
	background-size: 1.35rem 1.35rem;
	background-position: 0 0, calc(1.35rem / 2) calc(1.35rem / 2);
}

.gradient-nion-purple {
	/*animation: gradient 15s ease infinite;*/
	background-color: rgba(20, 0, 20, 1);
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0.05rem, transparent 0 ), radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0.05rem, transparent 0 ), linear-gradient(45deg,rgba(20, 0, 20, 1) 0%, rgba(86, 0, 80, 1) 100%);
	background-size: 20px 20px, 1.35rem,1.35rem, 400% 400%;
	background-position: 0 0, calc(1.35rem / 2) calc(1.35rem / 2);
}

.gradient-nion {
	/* FC7427 */
	/* FBEFE8 */
	background: linear-gradient(0deg, rgba(252,116,39,1) 0%, rgba(251,239,232,1) 100%), radial-gradient( circle at center, white 1px, transparent 0 ), radial-gradient(circle at center, black 0.25rem, transparent 0);
}

.gradient-nion-blue {
	/* FBEFE8*/
	background: linear-gradient(0deg, rgba(46,55,254,1) 0%, rgba(251,239,231,1) 100%);
}

.gradient-blue {
	background: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
}

.gradient-gray {
	background: radial-gradient(circle at 10% 20%, rgb(0, 0, 0) 0%, rgb(64, 64, 64) 90.2%);
}

.gradient-gray2 {
	background: linear-gradient(109.6deg, rgb(43, 1, 91) 13.4%, rgb(122, 2, 54) 100.2%);
}

.gradient-gray3 {
	background: linear-gradient(69.9deg, rgb(76, 79, 106) 3.2%, rgb(118, 124, 163) 97.6%);
}

.gradient-green {
	background: radial-gradient(circle at 10% 20%, rgb(98, 114, 128) 0%, rgb(52, 63, 51) 90.1%);
}

.gradient-red {
	background: linear-gradient(109.6deg, rgb(14, 11, 56) 11.2%, rgb(239, 37, 37) 91.1%);
}

.gradient-purple {
	background: radial-gradient(circle at 52.1% -29.6%, rgb(144, 17, 105) 0%, rgb(51, 0, 131) 100.2%);
}

.text-shadow {
	text-shadow: 1px 1px 0px rgba(0,0,0,0.75), 1px -1px 0px rgba(0,0,0,0.75), -1px 1px 0px rgba(0,0,0,0.75), -1px -1px 0px rgba(0,0,0,0.75), 2px 2px 16px rgba(127,0,127,0.25), 2px -2px 16px rgba(127,0,127,0.25), -2px 2px 16px rgba(127,0,127,0.25), 2px -2px 16px rgba(127,0,127,0.25), 2px 2px 2px rgba(0,0,0,0);
}

.text-shadow2 {
	text-shadow: 2px 2px 32px rgba(0,0,127,0.5), 2px -2px 32px rgba(0,0,127,0.5), -2px 2px 32px rgba(0,0,127,0.5), -2px -2px 32px rgba(0,0,127,0.5), 2px 0px 0px rgba(255,255,0,1.0), 0px 2px 0px rgba(255,255,0,1.0), -2px 0px 0px rgba(255,255,0,1.0), 0px -2px 0px rgba(255,255,0,1.0), 2px 2px 16px rgba(0,0,127,1.0), 2px -2px 16px rgba(0,0,127,1.0), -2px 2px 16px rgba(0,0,127,1.0), 2px -2px 16px rgba(0,0,127,1.0), 2px 2px 2px rgba(0,0,0,0);
}

.orb {
	z-index: 100;
	position: absolute;
	top: calc(50% - 300px);
	left: calc(50% - 300px);
	width: 300px;
	height: 300px;
	border-radius: 50%;
	box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
}

.start {
	animation: fadeInAnimation ease 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.arrow {
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 95%;
	transform-origin: 50% 50%;
	transform: translate3d(-50%, -50%, 0);
}

.arrow-first {
	-webkit-animation: arrow-movement 2s ease-in-out infinite;
	animation: arrow-movement 2s ease-in-out infinite;
}

.arrow-second {
	-webkit-animation: arrow-movement 2s 1s ease-in-out infinite;
	animation: arrow-movement 2s 1s ease-in-out infinite;
}

.arrow:before,
.arrow:after {
	background: #fff;
	content: "";
	display: block;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
	width: 25px;
}

.arrow:before {
	transform: rotate(45deg) translateX(-13%);
	transform-origin: top left;
}

.arrow:after {
	transform: rotate(-45deg) translateX(13%);
	transform-origin: top right;
}

@-webkit-keyframes arrow-movement {
	0% {
		opacity: 0;
		top: 90%;
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes arrow-movement {
	0% {
		opacity: 0;
		top: 90%;
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}



.gradient-animated {
	background: linear-gradient(-45deg, rgb(239, 37, 37),rgb(51, 0, 131), #23a6d5, #23d5ab);
	background-size: 200% 200%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}