@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap');

@font-face {
	font-family: 'Colus';
	src: url('../fonts/Colus.otf') format('opentype');
	font-style: normal;
}

@font-face {
	font-family: 'Evolventa';
	src: url('../fonts/Evolventa.ttf') format('truetype');
	font-style: normal;
}

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

@font-face {
	font-family: 'Jost';
	src: url('../fonts/Jost.ttf') format('truetype');
	font-style: normal;
}

:root {
	--grey-10: #F5F5F5;
	--grey-20: #EDEDED;
	--grey-30: #e7e7e7;
	--grey-40: #dedede;
	--grey-50: #d6d6d6;
	--grey-base: #cecece;
	--grey-60: #acacac;
	--grey-70: #898989;
	--grey-80: #676767;
	--grey-90: #454545;
	--grey-100: #292929;

	--red-10: #ffcfcf;
	--red-20: #ffaeae;
	--red-30: #ff8686;
	--red-40: #ff5e5e;
	--red-50: #ff3535;
	--red-base: #ff0d0d;
	--red-60: #d50b0b;
	--red-70: #aa0909;
	--red-80: #800707;
	--red-90: #550404;
	--red-100: #330303;

	--primary-black: #080808;
	--primary-white: #FFFFFF;
	--spacing-1: 1px;
	--spacing-2: 2px;
	--spacing-xxs: 4px;
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 32px;
	--spacing-lg: 40px;
	--spacing-xl: 64px;
	--spacing-xxl: 112px;
}

ul {
	padding: 0;
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
}

body {
	font-family: Evolventa;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	text-align: left;
	color: var(--primary-black);
	background-image: url(../images/bg_fix.jpg);
}

body.dark {
	color: #E7E7E7;
	background-image: url(../images/back_dark.jpg);
}

.nice_divider {
	background: url(../images/nice_divider.png);
	width: 100%;
	height: 56px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

body.dark .nice_divider {
	opacity: 0.2;
}

.butstyle {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	font-family: Colus;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	text-align: center;
	background-color: inherit;
	cursor: pointer;
	min-height: 52px;
	height: 60px;
	position: relative;
	transform-style: flat;
	transition: all 250ms ease-out;
	filter: drop-shadow(0px 2px 2px #0000004D);
	background-image: url(../images/redmain.png);
	width: 350px;
	color: var(--grey-20);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	z-index: 4;
}

.content {
	max-width: 880px;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 47px;
}

.title_block {
	text-align: center;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.30), 0px 1px 3px rgba(0, 0, 0, 0.15);
	font-family: Colus;
	font-size: 48px;
	font-style: normal;
	font-weight: 400;
	line-height: 52px;
	letter-spacing: -0.48px;
	padding: 80px 0 32px;
	max-width: 615px;
	margin: 0 auto;
}

.title_block span {
	color: var(--red-70);
}

body.dark .title_block span {
	background: linear-gradient(180deg, #FFE5A3 0%, #CBA74C 63.5%, #EECE7F 79%, #8C7845 98.5%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	text-shadow: none;
}

.content_row {
	display: flex;
	flex-direction: column;
	padding: 18px 24px;
	margin-bottom: 54px;
	justify-content: center;
	gap: 10px;
	align-self: stretch;
	border-radius: 12px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 100%);
	box-shadow: 0px -1.25px 0.833px 0px rgba(255, 255, 255, 0.12) inset, 0px -2.508px 0.502px 0px rgba(255, 255, 255, 0.12) inset, 0px 1.254px 2.508px 0px rgba(0, 0, 0, 0.24) inset, 0px 0.833px 0px 0px #FFF, 0px -0.833px 0px 0px rgba(0, 0, 0, 0.12);
}

body.dark .content_row {
	box-shadow: -2px -2px 4px 0px rgba(255, 255, 255, 0.25) inset, 2px 2px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

.flex_box {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 32px 0;
}

.flex_box_text span {
	font-family: Evolventa Bold;
	color: var(--red-70);
}

body.dark .flex_box_text span {
	background: linear-gradient(180deg, #FFE5A3 0%, #CBA74C 63.5%, #EECE7F 79%, #8C7845 98.5%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	text-shadow: none;
}

.flex_box img {
	border-radius: 12px;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
	max-width: 880px !important;
}

.flex_box_text a {
	text-decoration: underline !important;
	color: inherit;
}

#signup {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 64px;
	position: relative;

}

#up_button {
	position: fixed;
	width: 80px !important;
	height: 80px !important;
	background-image: url(../images/arrowback.png);
	filter: drop-shadow(0px 2px 6px #00000026);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	bottom: 80px;
	right: 32px;
	opacity: 0.5;
}

body.dark #up_button {
	background-image: url(../images/arrow_b.png);
	filter: drop-shadow(0px 2px 6px #8C7845);
}

body.dark #up_button img {
	filter: brightness(0) saturate(100%) invert(100%) sepia(33%) saturate(79%) hue-rotate(256deg) brightness(115%) contrast(92%);
}

#up_button:hover {
	opacity: 1;
}

#up_button img {
	transform: rotate(90deg);
}

body.dark .arrow_patch {
	background-image: url(../images/arrow_b.png);
}

.nav_row {
	font-family: Evolventa Bold;
	font-size: 18px;
	font-style: normal;
	line-height: 24px;
	position: relative;
	cursor: pointer;
}

.nav_row::before {
	content: "";
	position: absolute;
	top: 7px;
	width: 6px;
	left: -14px;
	height: 6px;
	pointer-events: none;
	background: #080808;
	transform: rotate(45deg);
}

body.dark .nav_row::before {
	background: #f5f5f5;
}

.nav_row.highlight::before {
	background: #AA0909;
	width: 8px;
	height: 8px;
	left: -15px;
}

body.dark .nav_row.highlight::before {
	background: #BD9C49;
}

#navigation {
	flex-direction: column;
	gap: 8px;
	position: fixed;
	bottom: 50%;
}

.nav_row.highlight {
	color: #AA0909;
}

body.dark .nav_row.highlight {
	color: #BD9C49;
}

@media (max-width: 1510px) {
	#navigation {
		max-width: 180px;
	}
}

@media (max-width: 1380px) {
	#navigation {
		display: none !important;
	}
}

@media (max-width: 640px) {
	#signup {
		padding: 0 16px 123px;
	}

	.title_block {
		font-size: 24px;
		line-height: 28px;
		letter-spacing: -0.192px;
		padding: 28px 0 15px;
	}

	body {
		font-size: 18px;
		line-height: 24px;
	}

	.content_row {
		padding: 12px 16px 12px;
		margin-bottom: 9px;
	}

	.flex_box {
		padding: 20px 0;
	}

	.content {
		padding-bottom: 0px;
	}

	#up_button {
		bottom: 40px;
		right: 16px;
	}
}