html,
body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: #1D1F20;
}

#box {
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-family: 'Raleway';
	font-size: 2.5rem;
}

.gradient-border {
	--borderWidth: 3px;
	background: #1D1F20;
	position: relative;
	border-radius: var(--borderWidth);
}

.gradient-border:after {
	content: '';
	position: absolute;
	top: calc(-1 * var(--borderWidth));
	left: calc(-1 * var(--borderWidth));
	height: calc(100% + var(--borderWidth) * 2);
	width: calc(100% + var(--borderWidth) * 2);
	background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
	border-radius: calc(2 * var(--borderWidth));
	z-index: -1;
	-webkit-animation: animatedgradient 3s ease alternate infinite;
	animation: animatedgradient 3s ease alternate infinite;
	background-size: 300% 300%;
}

/***************************************************/

@-webkit-keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

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

* {
	box-sizing: border-box;
	-webkit-animation: fadeIn 0.5s;
	animation: fadeIn 0.5s;
}

body {
	background-color: #111;
	color: #fafafa;
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
}

canvas {
	height: 100%;
	width: 100%;
	position: relative;
}

@media (max-width: 420px) {
	canvas {
		height: 45px;
		width: 320px;
	}
}

.controls {
	position: absolute;
	padding: 20px;
	top: 10px;
	right: 10px;
}

.controls label {
	display: block;
	margin-bottom: 5px;
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/***************************************************/

:root {
	--color-text: #fff;
	--color-bg: #000;
	--color-link: #f9d77e;
	--color-link-hover: #fff;
	--color-info: #efc453;
	--glitch-width: 100vw;
	--glitch-height: 100vh;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
	--time-anim: 4s;
	--delay-anim: 2s;
	--blend-mode-1: none;
	--blend-mode-2: none;
	--blend-mode-3: none;
	--blend-mode-4: none;
	--blend-mode-5: overlay;
	--blend-color-1: transparent;
	--blend-color-2: transparent;
	--blend-color-3: transparent;
	--blend-color-4: transparent;
	--blend-color-5: #af4949;
}

.glitch {
	width: 100%;
	height: 440px;
	max-width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	clear: both;
}

.glitch .glitch__item {
	background: url("../img/logo.png") no-repeat 50% 50%/cover;
	height: 380px;
	width: 270px;
	position: absolute;
}

.glitch .glitch__item:nth-child(n+2) {
	opacity: 0;
	animation-duration: var(--time-anim);
	animation-delay: var(--delay-anim);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.glitch .glitch__item:nth-child(2) {
	background-color: var(--blend-color-2);
	background-blend-mode: var(--blend-mode-2);
	animation-name: glitch-anim-2;
}

.glitch .glitch__item:nth-child(2) {
	background-color: var(--blend-color-3);
	background-blend-mode: var(--blend-mode-3);
	animation-name: glitch-anim-3;
}

.glitch .glitch__item:nth-child(4) {
	background-color: var(--blend-color-4);
	background-blend-mode: var(--blend-mode-4);
	animation-name: glitch-anim-4;
}

.glitch .glitch__item:nth-child(5) {
	background-color: var(--blend-color-5);
	background-blend-mode: var(--blend-mode-5);
	animation-name: glitch-anim-flash;
}

@keyframes glitch-anim-flash {
	0%,
	5% {
		opacity: 0.2;
		transform: translate3d(var(--glitch-horizontal), var(--glitch-height), 0);
	}
	5.5%,
	100% {
		opacity: 0;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes glitch-anim {
	0% {
		clip: rect(29px, 9999px, 115px, 0);
	}
	5% {
		clip: rect(109px, 9999px, 114px, 0);
	}
	10% {
		clip: rect(15px, 9999px, 160px, 0);
	}
	15% {
		clip: rect(150px, 9999px, 21px, 0);
	}
	20% {
		clip: rect(29px, 9999px, 1px, 0);
	}
	25% {
		clip: rect(50px, 9999px, 50px, 0);
	}
	30% {
		clip: rect(138px, 9999px, 127px, 0);
	}
	35% {
		clip: rect(96px, 9999px, 12px, 0);
	}
	40% {
		clip: rect(72px, 9999px, 103px, 0);
	}
	45% {
		clip: rect(78px, 9999px, 30px, 0);
	}
	50% {
		clip: rect(79px, 9999px, 20px, 0);
	}
	55% {
		clip: rect(2px, 9999px, 138px, 0);
	}
	60% {
		clip: rect(61px, 9999px, 2px, 0);
	}
	65% {
		clip: rect(149px, 9999px, 28px, 0);
	}
	70% {
		clip: rect(154px, 9999px, 74px, 0);
	}
	75% {
		clip: rect(11px, 9999px, 78px, 0);
	}
	80% {
		clip: rect(53px, 9999px, 33px, 0);
	}
	85% {
		clip: rect(5px, 9999px, 25px, 0);
	}
	90% {
		clip: rect(76px, 9999px, 144px, 0);
	}
	95% {
		clip: rect(66px, 9999px, 70px, 0);
	}
	100% {
		clip: rect(112px, 9999px, 83px, 0);
	}
}

@keyframes glitch-anim-2 {
	0% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal), 0, 0);
		-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
	}
	2% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	4% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	6% {
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	8% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	10% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	12% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	14% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	16% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	18% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	20% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
	21.9% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal), 0, 0);
	}
	22%,
	100% {
		opacity: 0;
		transform: translate3d(0, 0, 0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}

@keyframes glitch-anim-3 {
	0% {
		opacity: 1;
		transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
		-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
	}
	3% {
		-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	5% {
		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
		clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
	}
	7% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	9% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
	}
	11% {
		-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
	}
	13% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	15% {
		-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
	}
	17% {
		-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
	}
	19% {
		-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
	}
	20% {
		-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
	}
	21.9% {
		opacity: 1;
		transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
	}
	22%,
	100% {
		opacity: 0;
		transform: translate3d(0, 0, 0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}

@keyframes glitch-anim-4 {
	0% {
		opacity: 1;
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
	}
	1.5% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
	}
	2% {
		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
	}
	2.5% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	3% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
	}
	5% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
	}
	5.5% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
	}
	7% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
	}
	8% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	9% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
	}
	10.5% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
	}
	11% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
	}
	13% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
	}
	14% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
	}
	14.5% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
	}
	15% {
		-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
	}
	16% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	18% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
	}
	20% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
	}
	21.9% {
		opacity: 1;
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
	}
	22%,
	100% {
		opacity: 0;
		transform: translate3d(0, 0, 0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}

/***************************************************/

.container {
	font-family: PasseroOne;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container p {
	font-size: 3rem;
	padding: 0.5rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	text-align: center;
	overflow: hidden;
}

.container p span.typed-text {
	font-weight: normal;
	color: #dd7732;
}

.container p span.cursor {
	display: inline-block;
	background-color: #ccc;
	margin-left: 0.1rem;
	width: 3px;
	animation: blink 1s infinite;
}

.container p span.cursor.typing {
	animation: none;
}

@keyframes blink {
	0% {
		background-color: #ccc;
	}
	49% {
		background-color: #ccc;
	}
	50% {
		background-color: transparent;
	}
	99% {
		background-color: transparent;
	}
	100% {
		background-color: #ccc;
	}
}

@font-face {
	font-family: PasseroOne;
	src: url('../font/PasseroOne.ttf') format('truetype');
}

@font-face {
	font-family: ZenLoop;
	src: url('../font/Righteous.ttf') format('truetype');
}


/***************************************************/

.footer {
	width: 100%;
	height: auto;
}

.copyright {
	font-family: ZenLoop;
	font-size: 19px;
	position: fixed;
	padding: 5px;
	bottom: 0;
	width: 100%;
	color: #C6C3C2;
	text-align: center;
}

span a {
	color: #000000;
	text-decoration: none;
}

span .fa {
	color: #9f1717;
	margin: 0 3px;
	font-size: 18px;
	animation: pound 0.35s infinite alternate;
	-webkit-animation: pound 0.35s infinite alternate;
}

@-webkit-keyframes pound {
	to {
		transform: scale(1.1);
	}
}

@keyframes pound {
	to {
		transform: scale(1.1);
	}
}

/***************************************************/

.wrng_img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

.prh_wrng {
	font-family: PasseroOne;
	font-size: 23px;
	text-align: center;
	margin-right: 25px;
	margin-left: 25px;
}