@font-face {
	font-display: swap;
	font-family: 'Argentum Sans';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/argentum-sans-medium.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Argentum Sans';
	font-style: italic;
	font-weight: 500;
	src: url('../fonts/argentum-sans-medium-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Argentum Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/argentum-sans-bold.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'B612 Mono';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/b612-mono-regular.woff2') format('woff2');
}

body {
	background-color: #506EB4;
	max-width: 100%;
	overflow-x: hidden;
}

#main-container {
	width: 100%;
	display: flex;
	justify-content: center;
}

main {
	width: 100%;
	max-width: 850px;
}

#title {
	width: 100%;
	text-align: center;
	font-family: 'Argentum Sans';
	font-size: 22px;
	line-height: 1.4;
	color: #ffffff;
	container-type: inline-size;
}

#title-logo {
	width: 100%;
	filter: drop-shadow(0px 0px 10px #ffffff);
}

#intro {
	position: relative;
	width: 100%;
	text-align: center;
	container-type: inline-size;
}

#intro-text {
	position: relative;
	width: 59%;
	max-width: 59%;
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 2.35cqw;
	line-height: 1.25;
	filter: drop-shadow(0px 3px 1px #000000);
}

#intro-text a {
	color: #ffffff;
	font-style: italic;
}

#intro-box-art {
	position: absolute;
	width: 34%;
	top: -5%;
	left: 60%;
	transform: rotate(4.6deg);
	filter: drop-shadow(6px 10px 16px #000000A3);
	z-index: 2;
}

#content-id {
	position: relative;
	width: 100%;
	text-align: center;
	container-type: inline-size;
}

#content-id-screenshot {
	width: 95%;
	margin-top: 3%;
	filter: drop-shadow(6px 10px 16px #000000A3);
	z-index: 1;
}

#content-id-text {
	width: 42%;
	margin-top: 3%;
	margin-left: 3%;
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 2.35cqw;
	line-height: 1.25;
	filter: drop-shadow(0px 3px 1px #000000);
}

#content-id-pikachu {
	position: absolute;
	width: 60%;
	left: -13%;
	top: 94%;
	transform: rotate(-8.5deg);
	z-index: 3;
}

#content-id-tv {
	position: absolute;
	width: 70%;
	top: 78%;
	left: 34%;
	z-index: 2;
}

#content-id-pichu-bros {
	position: absolute;
	width: 54%;
	top: 117.8%;
	left: 42%;
	z-index: 1;
}

#download {
	margin-top: 66%;
	position: relative;
	width: 100%;
	text-align: center;
	container-type: inline-size;
}

.download-text {
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 2.35cqw;
	line-height: 1.25;
	filter: drop-shadow(0px 3px 1px #000000);
}

.download-text a {
	color: #ffffff;
	font-style: italic;
}

#download-button {
	width: 95%;
	transition: transform 0.2s ease-out;
}

#download-button:hover {
	transform: scale(1.1);
}

#download hr {
	margin-top: 3.5%;
	width: 95%;
	border: 2px solid white;
}

#faq {
	position: relative;
	width: 100%;
	text-align: center;
	container-type: inline-size;
}

#faq-title {
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 11cqw;
	line-height: 1.3;
	filter: drop-shadow(0px 3px 1px #000000);
}

#faq-subtitle {
	margin-top: -2%;
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 4cqw;
	filter: drop-shadow(0px 3px 1px #000000);
}

#faq a {
	color: #ffffff;
	font-style: italic;
}

.faq-title {
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: bold;
	font-size: 3.5cqw;
	line-height: 1.25;
	filter: drop-shadow(0px 3px 1px #000000);
	padding: 3% 0;
}

.faq-text {
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 2.35cqw;
	line-height: 1.3;
	filter: drop-shadow(0px 3px 1px #000000);
}

#faq-progress {
	position: relative;
	margin-top: 2%;
}

#faq-progress-background {
	position: absolute;
	display: block;
	top: -0.5%;
	left: 3%;
	width: 95%;
	aspect-ratio: 1.18 / 1;
	background-color: #2f4299;
	transform: rotate(-2.65deg);
	border-radius: 6%/7.14%;
	z-index: -1;
}

#faq-progress-custom-rtc {
	width: 91%;
	margin-top: 1%;
	filter: drop-shadow(6px 7px 16px #000000DB);
	margin-bottom: 3%;
}

#faq-widescreen {
	position: relative;
	margin-top: 8%;
}

#faq-widescreen-background {
	position: absolute;
	display: block;
	left: 4%;
	width: 95%;
	aspect-ratio: 1 / 2.33;
	background-color: #4e2f99;
	transform: rotate(-1deg);
	border-radius: 7.095%/3%;
	z-index: -1;
}

#faq-widescreen-config-paths {
	width: 91%;
	margin-top: 2%;
	filter: drop-shadow(6px 7px 16px #000000DB);
	margin-bottom: 3%;
}

#faq-widescreen-code-editor {
	width: 56%;
	margin-top: 1.5%;
	filter: drop-shadow(6px 7px 16px #000000DB);
	margin-bottom: 2%;
}

#faq-widescreen-code-name {
	position: absolute;
	font-family: "B612 Mono";
	top: 38.15%;
	left: 33.3%;
	color: #ffffff;
	font-size: 2.35cqw;
	filter: drop-shadow(0px 3px 1px #000000);
}

#faq-widescreen-code {
	position: absolute;
	font-family: "B612 Mono";
	top: 49.8%;
	left: 33.3%;
	color: #ffffff;
	font-size: 2.35cqw;
	filter: drop-shadow(0px 3px 1px #000000);
}

#faq-widescreen-checkbox-text {
	margin-left: 4%;
}

#faq-widescreen-checkbox {
	position: relative;
	width: 86%;
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: 5%;
	filter: drop-shadow(6px 7px 16px #000000DB);
}

#faq-widescreen-graphics-text {
	margin-left: 6%;
}

#faq-widescreen-graphics {
	position: relative;
	width: 89%;
	margin-top: 2%;
	margin-bottom: 1.5%;
	margin-left: 5%;
	filter: drop-shadow(6px 7px 16px #000000DB);
}

#faq-widescreen-final-text {
	margin-left: 6%;
}

#faq-hardware {
	position: relative;
	margin-top: 5%;
}

#faq-hardware .faq-title {
	padding-bottom: 1.5%;
}

#faq-hardware-background {
	position: absolute;
	display: block;
	left: 4%;
	width: 95%;
	aspect-ratio: 6.06 / 1;
	background-color: #792f99;
	transform: rotate(-2.6deg);
	border-radius: 6%/36%;
	z-index: -1;
}

#faq-intl {
	position: relative;
	margin-top: 6%;
}

#faq-intl .faq-title {
	padding-bottom: 1.4%;
}

#faq-intl-background {
	position: absolute;
	display: block;
	left: 4%;
	width: 95%;
	aspect-ratio: 3.6 / 1;
	background-color: #992f5e;
	transform: rotate(-2.6deg);
	border-radius: 6%/23%;
	z-index: -1;
}

#special-thanks {
	position: relative;
	width: 100%;
	margin-top: 6%;
	text-align: center;
	container-type: inline-size;
}

#special-thanks-title {
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 3.8cqw;
	line-height: 1.3;
	filter: drop-shadow(0px 3px 1px #000000);
}

#special-thanks-text {
	margin-top: 1%;
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 2.35cqw;
	line-height: 1.3;
	filter: drop-shadow(0px 3px 1px #000000);
}

#contact {
	margin-top: 5%;
	margin-bottom: 4%;
	position: relative;
	width: 100%;
	text-align: center;
	container-type: inline-size;
}

#contact a {
	color: #ffffff;
}

#contact-title {
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 3.8cqw;
	line-height: 1.3;
	filter: drop-shadow(0px 3px 1px #000000);
}

#contact-text {
	margin-top: 1%;
	font-family: 'Argentum Sans';
	color: #ffffff;
	font-weight: 500;
	font-size: 2.35cqw;
	line-height: 1.3;
	filter: drop-shadow(0px 3px 1px #000000);
}