:root {
	--color-3: #65549b;
	--color-3-aa: #65549bbb;
	--color-3-33: #65549b33;

	/* --color-3: #6934ad;
	--color-3-aa: #6934adbb;
	--color-3-33: #6934ad33; */

	--color-0: #5f33ef;
	--color-0-aa: #5f33efbb;
	--color-0-cc: #5f33efdd;
	--color-0-88: #5f33ef88;
	--color-0-33: #5f33ef33;
	--color-0-11: #5f33ef11;

	--color-1: #32f03c;
	--color-1-cc: #32f03ccc;
	--color-1-aa: #32f03caa;
	--color-1-88: #32f03c88;
	--color-1-33: #32f03c33;
	--color-1-11: #32f03c11;

	--color-2: #f08a32;
	--color-2-cc: #f08a32cc;
	--color-2-aa: #f08a32aa;
	--color-2-88: #f08a3288;
	--color-2-33: #f08a3233;
	--color-2-11: #f08a3211;

	--color-3: #65549b;
	--color-3-cc: #65549bcc;
	--color-3-aa: #65549baa;
	--color-3-88: #65549b88;
	--color-3-33: #65549b33;
	--color-3-22: #65549b22;
	--color-3-11: #65549b11;

	--color-4: #507051;
	--color-4-cc: #507051cc;
	--color-4-aa: #507051aa;
	--color-4-88: #50705188;
	--color-4-33: #50705133;
	--color-4-11: #50705111;

	--color-5: #705f50;
	--color-5-cc: #705f50cc;
	--color-5-aa: #705f50aa;
	--color-5-88: #705f5088;
	--color-5-33: #705f5033;
	--color-5-11: #705f5011;

	--color-black: #18191b;
	--color-black-cc: #18191bcc;
	--color-black-aa: #18191baa;
	--color-black-88: #18191b88;
	--color-black-33: #18191b33;
	--color-black-11: #18191b11;

	--color-black2: #252629;
	--color-black2-aa: #252629aa;
	--color-black2-cc: #252629cc;
	--color-black2-88: #25262988;
	--color-black2-33: #25262933;
	--color-black2-11: #25262911;

	--color-grey: #7a7b7f;
	--color-grey-cc: #7a7b7fcc;
	--color-grey-aa: #7a7b7faa;
	--color-grey-88: #7a7b7f88;
	--color-grey-33: #7a7b7f33;
	--color-grey-11: #7a7b7f11;

	--color-light-grey: #c2c3c7;
	--color-light-grey-cc: #c2c3c7cc;
	--color-light-grey-aa: #c2c3c7aa;
	--color-light-grey-88: #c2c3c788;
	--color-light-grey-33: #c2c3c733;
	--color-light-grey-11: #c2c3c711;

	--color-white: #fafbff;
	--color-white-cc: #f8f9ffcc;
	--color-white-aa: #f8f9ffaa;
	--color-white-88: #fafbff88;
	--color-white-33: #ffffff33;
	--color-white-11: #ffffff11;

	--color-lightray: var(--color-3-22);

	--page-width: 1000px;

	--font-size-h1: 54px;
	--font-size-h2: 42px;
	--font-size-h3: 28px;
	--font-size-h4: 24px;
	--font-size-h5: 20px;
	--font-size-h6: 19px;
	--font-size-p: 18px;
	--font-size-small: 12px;
	--font-size-huge: 120px;

	--line-height-p: 1.6;
	--line-height-small: 1.1;

	--text-shadow-size: 48px;

	--top-gap: 140px;

	--block-radius: 16px;
	--h-display: flex;
}

@media (max-width: 1100px) {
	:root {
		--page-width: 900px;
		--top-gap: 140px;
	}
}

@media (max-width: 1000px) {
	:root {
		--page-width: 800px;
		--top-gap: 140px;
	}
}

@media (max-width: 900px) {
	:root {
		--page-width: 700px;
		--top-gap: 120px;
	}
}

@media (max-width: 800px) {
	:root {
		--page-width: 600px;
		--top-gap: 100px;
	}
}

@media (max-width: 700px) {
	:root {
		--page-width: 500px;
		--top-gap: 80px;
	}
}

@media (max-width: 600px) {
	:root {
		--font-size-h1: 42px;
		--font-size-h2: 28px;
		--font-size-h3: 24px;
		--font-size-h4: 20px;
		--font-size-h5: 18px;
		--font-size-h6: 16px;
		--font-size-p: 14px;
		--font-size-small: 14px;
		--font-size-huge: 64px;
		--page-width: 100%;
		--top-gap: 60px;
		--h-display: block;
		--line-height-p: 1.35;
		--line-height-small: 1.1;
	}
}

/* ----------------------------
	BACKGROUNDSVGS
---------------------------- */
.lightrays {
	position: absolute;
	right: 0;
	width: 120%;
	height: 70%;
	pointer-events: none;
	z-index: 1000;
	display: none;
}

/* ----------------------------
	MOBILE & DESKTOP ONLY
---------------------------- */
.mobileOnly {
	display: none;
}
@media (max-width: 600px) {
	.mobileOnly {
		display: unset;
	}
	.desktopOnly {
		display: none !important;
	}
}

/* ----------------------------
	BODY
---------------------------- */
body {
	background: var(--color-black);
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
	position: relative;
}

* {
	font-family: 'TASA Explorer', sans-serif;
	box-sizing: border-box;
	color: var(--color-white);
}

#body_outer {
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

#body_inner {
	background: radial-gradient(
		circle,
		var(--color-3),
		var(--color-black) 320px,
		var(--color-black)
	);
	background-size: 780px 620px;
	background-repeat: no-repeat;
	background-position: center top;
	height: 100%;
	overflow: auto;
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction: column;
}

#body_content {
	position: absolute;
	width: 100%;
	min-height: calc(100vh - var(--top-gap));
	padding-top: var(--top-gap);
	display: flex;
	flex-direction: column;
}

#body_content_inner {
	zoom: 0.8;
	margin-bottom: 32px;
	min-height: calc(100vh - var(--top-gap));
	display: flex;
	flex-direction: column;
	align-items: center;
	&.center {
		justify-content: center;
	}
	> p,
	> div,
	> span,
	> h1,
	> h2,
	> h3,
	> h4,
	> h5,
	> h6 {
		margin-left: auto;
		margin-right: auto;
		min-width: var(--page-width);
		max-width: var(--page-width);
	}
}

@media (max-width: 600px) {
	#body_inner {
		background: radial-gradient(
			circle,
			var(--color-3),
			var(--color-black) 250px,
			var(--color-black)
		);
		background-size: 500px 500px;
		background-repeat: no-repeat;
		background-position: center top;
	}
	#body_content_inner {
		zoom: 0.9;
	}

	li {
		margin-left: 16px !important;
	}
}

/* ----------------------------
	TEXT SIZES
---------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	display: var(--h-display);
	align-items: center;
	&.center {
		justify-content: center;
	}
}

h1,
h1 * {
	font-size: var(--font-size-h1);
}
h2,
h2 * {
	font-size: var(--font-size-h2);
}

h3,
h3 * {
	font-size: var(--font-size-h3);
}

h4,
h4 * {
	font-size: var(--font-size-h4);
}

h5,
h5 * {
	font-size: var(--font-size-h5);
	font-weight: 500;
}

h6,
h6 * {
	font-size: var(--font-size-h6);
	font-weight: 500;
}

h1.fancy,
h1.fancy * {
	font-family: 'TASA Explorer', sans-serif;
}
h2.fancy,
h2.fancy * {
	font-family: 'TASA Explorer', sans-serif;
}

h3.fancy,
h3.fancy * {
	font-family: 'TASA Explorer', sans-serif;
}

h4.fancy,
h4.fancy * {
	font-family: 'TASA Explorer', sans-serif;
}

h5.fancy,
h5.fancy * {
	font-family: 'TASA Explorer', sans-serif;
}

h6.fancy,
h6.fancy * {
	font-family: 'TASA Explorer', sans-serif;
}

p,
li {
	margin: 0;
	font-size: var(--font-size-p);
	line-height: var(--line-height-p);
}

.small_text {
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

.zoom_text {
	zoom: 1.4;
}

.hidden {
	display: none !important;
}

/* ----------------------------
	MARGIN & PADDING
---------------------------- */
.mb8 {
	margin-bottom: 8px !important;
}

.mb16 {
	margin-bottom: 16px !important;
}

.mb24 {
	margin-bottom: 24px !important;
}

.mb32 {
	margin-bottom: 32px !important;
}

.mb64 {
	margin-bottom: 64px !important;
}

.mb128 {
	margin-bottom: 128px !important;
}

.p8 {
	padding: 8px !important;
}

.p16 {
	padding: 16px !important;
}

.p32 {
	padding: 32px !important;
}

.p64 {
	padding: 64px !important;
}

.p128 {
	padding: 128px !important;
}

.plr64 {
	padding-left: 64px !important;
	padding-right: 64px !important;
}

.plr128 {
	padding-left: 128px !important;
	padding-right: 128px !important;
}

@media (max-width: 600px) {
	.mb8 {
		margin-bottom: 4px !important;
	}
	.mb16 {
		margin-bottom: 8px !important;
	}
	.mb24 {
		margin-bottom: 12px !important;
	}
	.mb32 {
		margin-bottom: 20px !important;
	}
	.mb64 {
		margin-bottom: 28px !important;
	}
	.mb128 {
		margin-bottom: 64px !important;
	}
	.p16 {
		padding: 8px !important;
	}
	.p32 {
		padding: 16px !important;
	}
	.p64 {
		padding: 32px !important;
	}
	.p128 {
		padding: 64px !important;
	}
	.plr64 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.plr128 {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

/* ----------------------------
	ROW, COL, CENTER, JUSTIFY
---------------------------- */
.row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	> * {
		flex: 1;
	}
}

.col {
	display: flex;
	flex-direction: column;
	> * {
		flex: 1;
	}
}

.col.center {
	align-items: center;
}

.row.center {
	align-items: center;
}

.center {
	text-align: center;
}

.left_align {
	text-align: left;
}

.justify {
	text-align: justify;
}

.flex0 {
	flex: 0;
}

@media (max-width: 600px) {
	.row {
		gap: 16px;
	}
	.row.mobCol {
		flex-direction: column;
		gap: 64px;
	}
}

/* ----------------------------
	BG IMAGE
---------------------------- */
.bg_image_right {
	padding-right: 240px !important;
	background-size: 360px !important;
	background-position: right center !important;
	background-repeat: no-repeat !important;
}

.bg_image_left {
	padding-left: 240px !important;
	background-size: 360px !important;
	background-position: left center !important;
	background-repeat: no-repeat !important;
}

@media (max-width: 900px) {
	.bg_image_right {
		padding-right: 140px !important;
		background-size: 300px !important;
	}

	.bg_image_left {
		padding-left: 100px !important;
		background-size: 300px !important;
	}
}

@media (max-width: 600px) {
	.bg_image_right,
	.bg_image_left {
		padding: 0 !important;
		padding-top: 220px !important;
		background-size: 280px !important;
		background-position: top center !important;
	}

	.bg_image_right.hide_on_mobile,
	.bg_image_left.hide_on_mobile {
		padding: 0 !important;
		background: unset !important;
	}
}

/* ----------------------------
	COLOR TEXT
---------------------------- */
.color_0_text {
	color: var(--color-0);
}
.color_0_text_shadow {
	text-shadow: 0 0 var(--text-shadow-size) var(--color-0);
}

.color_1_text {
	color: var(--color-1);
}
.color_1_text_shadow {
	text-shadow: 0 0 var(--text-shadow-size) var(--color-1);
}

.color_2_text {
	color: var(--color-2);
}
.color_2_text_shadow {
	text-shadow: 0 0 var(--text-shadow-size) var(--color-2);
}

.color_3_text {
	color: var(--color-3);
}
.color_3_text_shadow {
	text-shadow: 0 0 var(--text-shadow-size) var(--color-3);
}

.color_4_text {
	color: var(--color-4);
}
.color_4_text_shadow {
	text-shadow: 0 0 var(--text-shadow-size) var(--color-4);
}

.color_5_text {
	color: var(--color-5);
}
.color_5_text_shadow {
	text-shadow: 0 0 var(--text-shadow-size) var(--color-5);
}

.white_text {
	color: var(--color-white);
}
.white_33_text {
	color: var(--color-white-33);
}
.white_88_text {
	color: var(--color-white-88);
}
.white_dd_text {
	color: var(--color-white-cc);
}
.grey_text {
	color: var(--color-grey);
}
.light_grey_text {
	color: var(--color-light-grey);
}

/* ----------------------------
	BLOCKS
---------------------------- */
.color_0_block {
	border-radius: var(--block-radius);
	background: var(--color-black-aa);
	border: 4px solid var(--color-0-aa);
	z-index: 500;
}

.color_1_block {
	border-radius: var(--block-radius);
	background: var(--color-black-aa);
	border: 4px solid var(--color-1-aa);
	z-index: 500;
}

.color_2_block {
	border-radius: var(--block-radius);
	background: var(--color-black-aa);
	border: 4px solid var(--color-2-aa);
	z-index: 500;
}

.color_3_block {
	border-radius: var(--block-radius);
	background: var(--color-black-33);
	border: 4px solid var(--color-3-aa);
	z-index: 500;
}

.color_4_block {
	border-radius: var(--block-radius);
	background: var(--color-black-aa);
	border: 4px solid var(--color-4-aa);
	z-index: 500;
}

.color_5_block {
	border-radius: var(--block-radius);
	background: var(--color-black-aa);
	border: 4px solid var(--color-5-aa);
	z-index: 500;
}

.white_block {
	border-radius: var(--block-radius);
	background: var(--color-black-33);
	border: 4px solid var(--color-white-cc);
	z-index: 500;
}

.grey_block {
	border-radius: var(--block-radius);
	background: var(--color-black-33);
	border: 4px solid var(--color-grey-88);
	z-index: 500;
}

/* ----------------------------
	TEXT BLOCK
---------------------------- */
.text_block {
	border-radius: var(--block-radius);
	background: linear-gradient(180deg, var(--color-0-33), var(--color-black2) 30%);
	border: 1px solid var(--color-grey-88);
	z-index: 500;
}

.text_block.solid {
	background: var(--color-black2) !important;
}

@media (max-width: 600px) {
	.text_block {
		margin: 0 16px;
		background: var(--color-black2-aa) !important;
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}
}

/* ----------------------------
	BUTTONS
---------------------------- */
.cta_button {
	font-family: 'TASA Explorer', sans-serif;
	background: var(--color-0);
	color: var(--color-white);
	padding: 16px 32px;
	border-radius: 16px;
	text-decoration: none;
	font-size: var(--font-size-h4) !important;
	transition: all 0.3s ease;
	&:hover {
		background: var(--color-2) !important;
	}
}

.bullet {
	border-radius: 50%;
	min-width: 34px;
	max-width: 34px;
	height: 34px;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	background: var(--color-0-cc);
	color: var(--color-white);
}

.bullet.color_3 {
	background: var(--color-3);
}