:root {
	--custom-color-1: rgb(75, 79, 88);
	--custom-color-2: #faf6f6;
	--custom-color-3: #232323;
	;

	--purple-color: #9068b2;
	--green-color: #8bb268;
	--grey-color: #999999;
	--grey-dark-color: #666666;
	--green-second-color: #9dc777;
	--brown-color: #ccaca6;

	--background-blur: blur(15px);
	--background-blur2: blur(10px);
	--background-blur-color: rgba(144, 104, 178, 0.8);
	--background-blur-color2: rgba(144, 104, 178, 0.5);
	--gradient-left: #c14198;
	--gradient-right: #6a8dc4;
	--bg-gradient: linear-gradient(to right, var(--gradient-left), var(--gradient-right));


	--title-font: "Poppins", serif;
	--body-font: 'Poppins', sans-serif;
}


body {
	font-family: var(--body-font);
	background-color: var(--custom-color-2);
	color: var(--custom-color-1)
}

body main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.header-top {
	height: 300px;
	background-color: var(--custom-color-1);
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.header-top>.container {
	padding: 60px 20px 0;
}

.header-top .logo {
	height: 210px;
	width: 210px;
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
	display: block;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--title-font);
	font-weight: bold;
	margin-bottom: 1em;
}


h1,
h2,
h3 {
	color: var(--purple-color)
}


.auth-page>main #main-content {
	display: flex;
	height: 100%;
	flex-grow: 1;
}

.auth-page .form-holder {
	--width: min(600px, 100%);
	min-width: calc(max(calc((100vw - 1320px) / 2), 0px) + var(--width));
}

.auth-page>main #main-content {
	gap: 50px
}

#auth-form {
	--width: min(var(--width), 100%);
	width: var(--width);
	min-width: var(--width);
	max-width: var(--width);
	margin-left: max(calc((100vw - 1320px) / 2), 0px);
	padding: 50px;
	flex: 0
}


footer {
	background-color: var(--custom-color-3);
	color: #fff;
	padding: 40px 20px;
	margin-top: auto;
}

footer>.container {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.footer-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: -px;
	margin: 10px;
	color: #fff;
	text-decoration: none;
}

.footer-logo span {
	display: block;
}

.footer-logo i {
	color: var(--purple-color);
	font-size: 3.5em;
}

.footer-logo .footer-logo_title {
	font-weight: bold;
	font-size: 28px;
	font-weight: 700;
	line-height: 50px;
	margin-top: 5px;
}

.footer-logo .footer-logo_desc {

	font-size: 14px;
	line-height: 22px;
	font-weight: 300;

}


body.page-404 #main-content .container {
	padding: 80px 20px;
	text-align: center;
}


/* Sign in */
.sign-in>main #main-content .form-holder+div {
	background-color: #232323;
	background: var(--bg-gradient);
	width: 100%;
	flex-grow: 1;
}

.sign-in .btn-primary {
	background-color: var(--purple-color);
	border-color: var(--purple-color);
}


@media screen and (max-width: 767px) {
	.sign-in>main #main-content .form-holder+div {
		display: none;
	}

}