:root {
	--hover-brightness: 115%;
	--hover-contrast: 85%;
}

body {
	font-family: "Chakra Petch", serif;
	background-color: #0e1a26;
	background-image: url("../img/background.png");
	background-size: contain;
	background-repeat: no-repeat;
}

h1 {
	display: block;
	color: #f0f2ff;
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
}

h1.text-red {
	color: #ff002a;
	text-shadow: 9px 10px 20px rgba(255, 33, 33, 0.48);
}

h1 span {
	display: block;
	text-shadow: none;
	font-size: 58px;
	font-weight: 300;
}

h1 + p {
	font-size: 16px;
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: 1.76px;
	color: #f0f2ff;
}

.cta-button {
	font-size: 14px;
	font-weight: bold;
	color: #f0f2ff !important;
	padding: 6px 24px 6px 22px;
	border-radius: 1px;
	box-shadow: 3px 3px 15px 0 rgba(255, 33, 33, 0.48);
	background-color: #ff002a;
	text-decoration: none;
	text-transform: uppercase;
}

a:hover {
	filter: brightness(var(--hover-brightness)) contrast(var(--hover-contrast));
}

.offer-content {
	margin: 150px auto;
}

.offer-content p {
	max-width: 350px;
}

.white-bar {
	background-color: #f8f9fa;
	border: 100px solid #f8f9fa;
	border-radius: 25px;
}

@media only screen and (min-width: 1400px) {
	.white-bar {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}