:root
{
	--direction: 1;
	--primary-font:"Montserrat", sans-serif;
	--secondary-font:"X Typewriter";
	--font-size: 19px;
	--indent: 30px;
	--gap: 10px;
	--vu:25px;
	--header-height:calc(3 * var(--vu));
	--footer-height:calc(4 * var(--vu));
	--radius:10px;
	--black: #000000;
	--blue: #00B7D7;
	--white: #FFFFFF;
	--background-color:#080519;
	--transition-time:.3s;
	--transition-ease:cubic-bezier(0.22, 1, 0.36, 1);
	--transition-ease:ease-in-out;
	--transition:all var(--transition-time) var(--transition-ease);
}

@media (min-width: 990px)
{
	:root
	{
		--indent: 60px;
		--gap: 20px;
		--header-height:calc(4 * var(--vu));
		--footer-height:calc(6 * var(--vu));
	}
}

html
{
	overflow-x: hidden;
	width: 100vw;
	scroll-behavior: smooth;
	scroll-padding-top:calc(var(--header-height) + var(--vu));
}

body
{
	font-family:var(--primary-font);
	font-size:var(--font-size);
	font-weight: 500;
	font-optical-sizing: auto;
	letter-spacing: -0.1px;
	color:var(--white);
	display: flex;
	flex-direction: column;
	background-color:var(--background-color);
	overflow-x: hidden;
	scrollbar-gutter: stable;
}

main
{
	flex: 1 0 auto;
}

footer
{
	flex-shrink: 0;
}

a
{
	color:var(--white);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4
{
	text-transform: uppercase;
	line-height: 1.3;
	margin-bottom: calc(1 * var(--vu));
	font-weight: 500;
	text-wrap: balance;
}

b
{
	font-weight: 700;
}

textarea
{
	resize: none;
}

picture source
{
	display: none;
}

*,
*:focus,
*:hover
{
	outline: none;
}

@media (max-width: 340px)
{
	h2,
	.h2
	{
		font-size: 14.5px;
	}
}

@media (min-width: 990px)
{
	h1,
	.h1
	{
		font-size: 25px;
	}
	
	h2,
	.h2
	{
		font-size: 25px;
	}
}

/*Скрыть / Отобразить в зависимости от устройства*/
@media (max-width: 340px)
{
	.xsmobile-hide
	{
		display: none !important;
	}
}

@media (max-width: 990px)
{
	.mobile-hide
	{
		display: none !important;
	}
	
	.mobile-full-width
	{
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(var(--indent) * -1);
		margin-right: calc(var(--indent) * -1);
	}
}

@media (min-width: 990px)
{
	.desktop-hide
	{
		display: none !important;
	}
}

/*Разное*/
*
{
	-webkit-tap-highlight-color: transparent;
}

.absolute
{
	position: absolute;
}

.relative
{
	position: relative;
}

.text-center
{
	text-align: center;
}

.text-right
{
	text-align: right;
}

.uppercase
{
	text-transform: uppercase;
}

.italic
{
	font-style: italic;
}

.text-box
{
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.overflow-hidden
{
	overflow: hidden;
}

.absolute-center
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.btn
{
	position: relative;
	display: inline-grid;
	align-content: center;
	justify-content: center;
	height: 50px;
	line-height: 1;
	font-size: 14px;
	font-weight: 600;
	color:var(--white);
	transition:var(--transition);
	border-radius:var(--radius);
	border: none;
	padding: 0 20px;
	background-color:var(--blue);
	cursor: pointer;
	will-change:transform;
}

.btn:hover
{
	background-color: #0D2B4D;
	transform: scale(0.99);
}

.btn.white
{
	border:2px solid var(--white);
	color:var(--white);
}

.btn.black
{
	border:1px solid var(--black);
	color:var(--white);
	background:var(--black);
}

::placeholder
{
	color:var(--black);
	opacity: 0.3;
}

input[type="checkbox"]
{
	accent-color:var(--peach);
	/* Sets the color for all checkboxes */
}

.enhance-img
{
	image-rendering: auto;
	/*image-rendering: crisp-edges;
	image-rendering: pixelated;*/
	image-rendering: -webkit-optimize-contrast;
}

.no-scroll
{
	overflow: hidden;
}

.fit-cover
{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.overflow-hidden
{
	overflow: hidden;
}

*:disabled
{
	opacity: 0.7;
	filter: saturate(50%);
}

@media (min-width: 990px)
{
	*
	{
		/*cursor: none;*/
	}
	
	.btn
	{
		width: auto;
		font-size: 19px;
		height: 70px;
	}
}

/* Подчёркнутые ссылки*/
.hover-underline
{
	position: relative;
}

.hover-underline:before
{
	position: absolute;
	content: '';
	height: 1px;
	width: 100%;
	background-color:var(--white);
	bottom: -3px;
	left: 0;
	transform: scaleX(0);
	transform-origin: bottom left;
	transition:transform var(--transition-time) ease;
}

.hover-underline:hover:before,
.hover-underline.active:before
{
	transform: scaleX(1);
}

/*Кастомный 
Скроллбар*/
.custom-scroll::-webkit-scrollbar
{
	width: 5px;
}

.custom-scroll::-webkit-scrollbar-track
{
	background:var(--lightgray);
}

.custom-scroll::-webkit-scrollbar-thumb
{
	background:var(--gray);
}

/*header*/
.header
{
	position: fixed;
	z-index: 11;
	top: 0;
	left: 0;
	width: 100vw;
	height:var(--header-height);
}

.header__container
{
	display: grid;
	height: 100%;
}

.header__logo
{
	display: grid;
	align-content: center;
}

@media (max-width: 990px)
{
}

@media (min-width: 990px)
{
	.header
	{
		transition:var(--transition);
		background-color: rgba(8, 5, 25, 0.4);
		backdrop-filter:blur(30px);
	}
	
	.header.scrolled
	{
		-webkit-box-shadow: 0px 10px 19px 0px rgba(34, 60, 80, 0.08);
		-moz-box-shadow: 0px 10px 19px 0px rgba(34, 60, 80, 0.08);
		box-shadow: 0px 10px 19px 0px rgba(34, 60, 80, 0.08);
		height: calc(3 * var(--vu));
		background-color:var(--white);
	}
	
	.header__container
	{
		height: 100%;
		align-content: center;
	}
	
	.header__logo-image
	{
		width: 175px;
	}
	
	.desktop-menu
	{
		align-items: center;
		font-weight: 400;
		padding-left: 50px;
		padding-right: 50px;
	}
	
	.desktop-menu__link:last-child
	{
		display: none;
	}
	
	.header__button
	{
		text-align: right;
	}
	
	.header__button .btn
	{
		height: 50px;
		font-size: 19px;
		font-weight: 500;
		width: 170px;
	}
	
	.desktop-menu
	{
		display: flex;
		justify-content: space-between;
	}
}

/*Футер*/
.footer
{
	position: relative;
	display: grid;
	align-content: center;
	margin-top: 25px;
	height:var(--footer-height);
	font-size: 10px;
	font-weight: 400;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.footer__logo-image
{
	width: 175px;
}

@media (min-width: 990px)
{
	.footer
	{
		font-size: 15px;
		margin-top: 75px;
	}
	
	.footer__copyright
	{
		text-align: right;
	}
}

/*Анимации*/
@keyframes fade-in
{
	from
	{
		opacity: 0;
	}
	
	to
	{
		opacity: 1;
	}
}

@keyframes fade-out
{
	from
	{
		opacity: 1;
	}
	
	to
	{
		opacity: 0;
	}
}