@import url("../../../design/common/index.css");
@import url("../../../design/common/elements.css");
@import url("../../../design/common/theme.css");

main {
	display: block;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	overflow: hidden;
	z-index: 0;
}

main > aside[data-id="slides"] {
	display: block;
	position: fixed;
	top: auto;
	right: 0px;
	bottom: 0px;
	left: auto;
	margin: 0px;
	padding: 16px;
	font-family: 'crystalline';
	font-size: 24px;
	line-height: 24px;
	text-align: center;
	text-transform: uppercase;
	user-select: none;
	z-index: 100;
}

main > aside[data-touch="left"] {
	display: block;
	position: fixed;
	top: 0px;
	right: calc(100vw - 10vw);
	bottom: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	line-height: 100vh;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	user-select: none;
	z-index: 200;
}

main > aside[data-touch="right"] {
	display: block;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: calc(100vw - 10vw);
	margin: 0px;
	padding: 0px;
	line-height: 100vh;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	user-select: none;
	z-index: 200;
}

main > aside[data-touch="fullscreen"] {
	display: block;
	position: fixed;
	top: auto;
	right: auto;
	bottom: 0px;
	left: 0px;
	margin: 0px;
	padding: 16px;
	line-height: auto;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	user-select: none;
	z-index: 201;
}

main > aside[data-touch="left"].hidden,
main > aside[data-touch="right"].hidden,
main > aside[data-touch="fullscreen"].hidden {
	display: none;
	pointer-events: none;
}

main > aside[data-touch] button {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 100%;
	color: var(--link-default-color);
	border: 2px solid var(--link-default-color);
	background: var(--link-default-background);
	font-family: 'vera-mono';
	font-size: 48px;
	line-height: 100%;
	opacity: 0.5;
	user-select: none;
}

main > aside[data-touch] button:hover,
main > aside[data-touch] button:focus {
	transition: 200ms all ease-out;
	color: var(--link-focus-color);
	border: 2px solid var(--link-focus-color);
	background: var(--link-focus-background);
}

main > aside[data-touch]:hover button {
	opacity: 1;
}

main > aside[data-touch="fullscreen"] button {
	font-size: 24px;
}

section {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	user-select: none;
	z-index: 1;
	transform: translate(0%, 0%);
	transition: 200ms all ease-out;
}

section.next {
	transform: translate(100%, 0%);
	transition: 200ms all ease-out;
	z-index: 0;
}

section.prev {
	transform: translate(-100%, 0%);
	transition: 200ms all ease-out;
	z-index: 0;
}

section > header {
	display: block;
	width: 1024px;
	height: auto;
	margin: 0px auto;
	padding: 0px;
	box-sizing: content-box;
}

section > header {
	position: absolute;
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	transform: translate(-50%, -50%);
}

section > header svg {
	display: block;
	width: 256px;
	height: 256px;
	margin: 0px auto 64px auto;
	padding: 0px;
	border: 0px solid transparent;
}

section > header h1 {
	display: block;
	position: relative;
	margin: 0px;
	margin-block: 0px 0px;
	margin-inline: 0px 0px;
	padding: 0px;
	font-family: 'crystalline';
	font-size: 96px;
	font-weight: 500;
	line-height: 64px;
	text-align: center;
	text-transform: uppercase;
}

section > header > div {
	text-align: center;
}

section > header > div > h2 {
	display: block;
	position: relative;
	margin: 16px 0px 0px 0px;
	margin-block: 0px 0px;
	margin-inline: 0px 0px;
	padding: 0px;
	font-family: 'crystalline';
	font-size: 48px;
	font-weight: 400;
	line-height: 48px;
	text-transform: uppercase;
}

section > article {
	display: block;
	width: 1024px;
	height: 600px;
	margin: 0px auto;
	padding: 0px;
	box-sizing: border-box;
}

section > article {
	position: absolute;
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	transform: translate(-50%, -50%);
}

section > article h3 {
	display: block;
	position: relative;
	margin: 0px;
	margin-block: 0px 0px;
	margin-inline: 0px 0px;
	padding: 0px 0px 24px 0px;
	font-family: 'crystalline';
	font-size: 64px;
	font-weight: 500;
	line-height: 64px;
	text-transform: uppercase;
	border-bottom: 1px solid var(--surface-default-color);
}

section > article ul {
	display: block;
	position: static;
	margin: 0px;
	padding: 0px;
	font-family: 'crystalline';
	font-size: 48px;
	font-weight: 300;
	line-height: 48px;
	list-style-type: disc;
	list-style-position: outside;
}

section > article h3 + ul,
section > article h3 + p {
	margin: 24px 0px 0px 0px;
}

section > article p {
	display: block;
	position: static;
	margin: 0px;
	padding: 0px;
	font-family: 'crystalline';
	font-size: 48px;
	font-weight: 300;
	line-height: 48px;
}

section > article pre {
	display: block;
	position: static;
	margin: 0px;
	padding: 8px;
	border: 1px solid var(--surface-default-color);
	border-radius: 8px 8px 8px 8px;
	font-family: 'vera-mono';
	font-size: 32px;
	font-weight: 300;
	line-height: 48px;
}

section > article img {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 0px auto;
}



@supports(display: grid) {

	section > header > h1:before,
	section > header > div > h2:before,
	section > article > h3:before {
		position: absolute;
		top: 0px;
		left: 50%;
		width: 100%;
		color: #ffffff;
		transform: translate(-50%, 0px);
		animation: glitch 10s infinite alternate-reverse;
		animation-timing-function: step-start;
		text-shadow: 0px 0px transparent;
		text-overflow: hidden;
		overflow: hidden;
		transition: unset;
	}

	section > header > h1:before {
		height: 96px;
	}

	section > header > div > h2:before {
		height: 48px;
		animation-delay: 50ms;
	}

	section > article > h3:before {
		height: 64px;
		animation-delay: 50ms;
	}

	@keyframes glitch {
		  0% { transform: translate(calc(-50% + 0px),  0px); text-shadow:  0px 0px transparent; }
		  1% { transform: translate(calc(-50% + 0px),  2px); text-shadow: -2px 0px #ff00c1; }
		  2% { transform: translate(calc(-50% + 4px),  2px); text-shadow:  2px 0px #ff00c1; }
		  3% { transform: translate(calc(-50% - 4px), -2px); text-shadow:  0px 0px transparent; }
		 50% { transform: translate(calc(-50% + 0px),  0px); text-shadow:  0px 0px transparent; }
		 51% { transform: translate(calc(-50% + 0px),  2px); text-shadow:  2px 0px #00ffc1; }
		 52% { transform: translate(calc(-50% + 4px),  2px); text-shadow: -2px 1px #00ffc1; }
		 53% { transform: translate(calc(-50% - 4px), -2px); text-shadow:  0px 0px transparent; }
		 54% { transform: translate(calc(-50% + 0px),  0px); text-shadow:  0px 0px transparent; }
		 97% { transform: translate(calc(-50% + 0px),  0px); text-shadow:  0px 0px transparent; }
		 98% { transform: translate(calc(-50% + 0px),  2px); text-shadow: -1px 2px #c100ff; }
		 99% { transform: translate(calc(-50% + 4px),  2px); text-shadow:  0px 0px transparent; }
		100% { transform: translate(calc(-50% - 4px), -2px); text-shadow:  0px 0px transparent; }
	}

}



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

	section > header {
		width: 800px;
	}

	section > article {
		width: 800px;
	}

}

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

	section > header {
		width: auto;
	}

	section > article {
		width: auto;
	}

}

@media screen and (max-height: 800px) {

	section > header {
		padding: 64px 0px;
	}

	section > article {
		padding: 64px 0px;
	}

}

@media screen and (max-height: 400px) {

	main > aside[data-touch] button {
		font-size: 24px;
	}

	main > aside[data-touch="fullscreen"] button {
		font-size: 12px;
	}

}