@font-face {
	font-family: "Mark Pro";
	src: url('MarkPro.otf') format("opentype");
}

body {
	font-family: "Mark Pro", sans-serif;
}

@media only screen and (max-width: 768px) {
	h2 {
		letter-spacing: -1px;
	}
}

h2 {
	font-size: 2rem;
	font-style: normal;
	font-weight: 700;
	line-height: 2.5rem;
}

h3 {
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.875rem;
}

h4 {
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5625rem;
}

h5 {
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.375rem;
}

.p1 {
	font-size: 1.125rem;
	font-style: normal;
	line-height: 1.6875rem;
	color: var(--black);
}

.p2 {
	font-size: 1rem;
	font-style: normal;
	line-height: 1.5rem;
}

.btn-large {
	background-color: var(--primary);
	border: 0;
	border-radius: 50px;
	padding: 1rem 2rem 1rem 2rem;
	color: var(--white);
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
}

.btn-small {
	background-color: var(--primary);
	border: 0;
	border-radius: 50px;
	padding: 0.75rem 1.5rem;
	color: var(--white);
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
}

.btn-large:hover, .btn-small:hover {
	background-color: var(--primary-hover);
	color: var(--black);
	transition: 0.3s;
}

.btn-large:active, .btn-small:active {
	background-color: var(--primary-active);
	color: var(--black);
	transition: 0.3s;
}

.sec-btn-small {
	background-color: var(--white);
	border: 0;
	border-radius: 50px;
	padding: 0.75rem 1.5rem;
	color: var(--black);
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	box-shadow: 2px 4px 6px 0px rgba(0, 0, 0, 0.08), -2px -2px 6px 0px rgba(0, 0, 0, 0.08);
}

a {
	font-style: normal;
	text-decoration-line: underline;
	color: var(--links);
}

a:hover {
	background-color: var(--pink-tint-20);
}