html {
	background: white;
	color: white;
	font-family: 'Quicksand';
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.window {
	width: 96%;
	height: 96%;
	display: inline-block;
	position: relative;
}
.top {
	display: block;
	position: absolute;
	width: 100%;
	top: 0%;
}
.contentwindow {
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 70%;
	z-index: 3;
	top: 0;
	text-align: center;
	justify-content: center;
	font-size: 140%;
}
.bottom {
	display: block;
	position: absolute;
	width: 100%;
	bottom: 0%;
}
.center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	text-align: center;
	border-radius: 20px;
	align-items: center;
	justify-content: center;
	display: flex;
}
.orb {
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	bottom: 0%;
	content: '';
}
.orb_child {
	width: 25vw;
	height: 25vh;
}
.orb_child:after {
	content: '';
	display: grid;
	position: absolute;
	align-items: center;
	width: 26%;
	height: 4%;
	left: 37%;
	border-radius: 50%;
	background-color: #000000;
	opacity: 0.12;
	bottom: 11%;
}
.speechbubble {
	background-color: #26272b;
	line-height: 1.75;
	margin: 0 12% 3% 12%;
	padding: 0 2% 0 2%;
}
.dots {
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	bottom: 0%;
}

.dot {
	width: 5px;
	height: 12px;
	background: rgb(255, 255, 255);
	border-radius: 100%;
	font-size: 0;
	margin: 0.3rem;
	opacity: 0.3;
	border-color: transparent;
}

.dot.selected {
	opacity: 1;
}
.window {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	text-align: center;
	border-radius: 20px;
	align-items: center;
	justify-content: center;
	display: flex;
}
.contentpane {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	min-width: 600px;
	min-height: 700px;
	text-align: center;
	border-radius: 20px;
	z-index: 2;
}
@media screen and (max-width: 950px) {
	.contentpane {
		min-width: 90%;
		min-height: 90%;
	}
}
.box {
	background: #191c29;
	position: absolute;
	border-radius: 10px;
	height: 100%;
	width: 100%;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	display: flex;
	text-align: center;
	font-weight: bold;
	font-size: 145%;
	color: white;
}
sup {
	text-decoration: underline;
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: text-top;
}
a {
	color: white;
}
.controls {
	text-align: center;
	width: 100%;
	display: block;
	z-index: 3;
}
.controls button:first-child {
	position: absolute;
	left: 0;
	top: calc(50% - 1.2rem);
}

.controls button:last-child {
	position: absolute;
	right: 0;
	top: calc(50% - 1.2rem);
}
.controls button {
	background: transparent;
	color: #fff;
	border-color: transparent;
	width: 3.2rem;
	height: 3.2rem;
}

.controls button:hover,
.controls button:focus {
	background: rgba(0, 0, 0, 0.7);
	animation: none;
}
.box::after {
	position: absolute;
	content: '';
	top: 0%;
	left: 0%;
	z-index: -1;
	height: 100.2%;
	width: 100.2%;
	filter: blur(20px);
	background: linear-gradient(
		to left,
		#4102c2,
		#4701d3,
		#4701d4,
		#4d01dd,
		#5402e0,
		#5d05e4,
		#6307e7,
		#6809e9,
		#6a0aea,
		#6e0cec,
		#740fee,
		#7a11f1,
		#7e13f3,
		#8315f6,
		#861ef9,
		#802bfc,
		#753cff,
		#6e45ff,
		#5d55ff,
		#5859ff,
		#4e60ff,
		#3f6aff,
		#376fff,
		#2d75ff,
		#1f7dff,
		#1a81ff,
		#1385ff,
		#0889ff,
		#008dff,
		#0090ff,
		#0095ff,
		#0098ff,
		#009dff,
		#009fff,
		#08a3ff,
		#11a6ff,
		#08a3ff,
		#009fff,
		#009dff,
		#0098ff,
		#0095ff,
		#0090ff,
		#008dff,
		#0889ff,
		#1385ff,
		#1a81ff,
		#1f7dff,
		#2d75ff,
		#376fff,
		#3f6aff,
		#4e60ff,
		#5859ff,
		#5d55ff,
		#6e45ff,
		#753cff,
		#802bfc,
		#861ef9,
		#8315f6,
		#7e13f3,
		#7a11f1,
		#740fee,
		#6e0cec,
		#6a0aea,
		#6809e9,
		#6307e7,
		#5d05e4,
		#5402e0,
		#4d01dd,
		#4701d4,
		#4701d3,
		#4102c2,
		#3b03b0
	);
	background-size: 200% 200%;
	animation: animateGlow 4s linear infinite;
}

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

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

	0% {
		background-position: 200% 200%;
	}
}

/* vietnamese */
@font-face {
	font-family: "Quicksand";
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/quicksand/quicksand-vietnamese.woff2) format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
	  U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
	font-family: "Quicksand";
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/quicksandquicksand-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
	  U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: "Quicksand";
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/quicksand-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	  U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
	  U+FEFF, U+FFFD;
  }

/* cyrillic-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw0aXpsog.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw9aXpsog.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* vietnamese */
  @font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw2aXpsog.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw3aXpsog.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }