:root {
	--black: #121212;
	--light-black:#1f1f1f;
	--white: #FFFFFF;
	--light-gray: #D9D9D9;
	--gray: #9C9C9C;
	--green: #42A258;
	--juicy-green: #48D33B;
	--ultramarine: #533FD7;
	--blue: #0295FF;
	--azure: #22E4FF;
	--turquoise: #21EBC7;
	--pink: #FF027C;
	--font-family: Nunito Sans, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	--font-size: 18px;
	--line-height: 1.4em;
	--font-weight: 400;
	--bounce-transition: .45s cubic-bezier(.17,.67,.3,1.33);
	--slow-bounce-transition: 1.5s cubic-bezier(.17,.67,.3,1.33);
	--default-transition: .3s ease-in-out;
	--border-radius: 20px;
	--box-shadow: 0px 2px 30px rgba(115, 134, 152, 0.2);
	--xxl: 60px;
	--xl: 48px;
	--l: 36px;
	--m: 24px;
	--s: 12px;
}


::selection {
	background-color: var(--ultramarine);
	color: var(--white);
}

* {
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size);
	line-height: var(--line-height);
	font-weight: var(--font-weight);
	color: var(--black);
	background-color: var(--white);
	position: relative;
	overflow-x: hidden;
	z-index: 1;
	animation: pageTransition 0.5s ease-in-out;
}

@keyframes pageTransition {
  0% {
    transform: scale(0.94);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0;
}

a {
	color: var(--green);
	text-decoration: none;
}

a:hover {
	color: var(--ultramarine);
	text-decoration: none;
}

.main {
	flex: 1 1 auto;
}

.wrapper {
	position: relative;
	z-index: 1;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

.wrapper__bg {
	background-image: url('../images/bg.jpg');
	background-repeat: repeat;
}

.effect {
	transition: all .75s cubic-bezier(.2, .6, 0, 1);
}

.effect_scale {
	transform: scale(.94);
}


.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ultramarine);
	text-decoration: none;
	font-weight: 600;
	line-height: 100%;
	padding: 10px 56px 10px 0px;
	border-radius: 30px;
	z-index: 2;
	transition: all var(--bounce-transition);
}

.btn::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 30px;
	background: var(--ultramarine);
	transition: all var(--bounce-transition);
	z-index: -1;
}

.btn::before {
	content: '';
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	right: 17px;
	transform: translate(0, -50%);
	background: url("../images/btn-arrow-right-white.svg") no-repeat center / contain;
}

.btn:hover {
	color: var(--white);
	padding: 10px 46px 10px 17px;
}

.btn:hover::after {
	width: 100%;
	height: 60px;
}