@font-face {
	font-family: 'Manuka';
	src: url('../fonts/manuka-bold.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

html, body {
	height: 100%;
}

@media (min-width: 1025px) {

	html, body, .page-container {
		min-height: 768px;
	}

}

body {
	background: #293151;
	font-family: Sora;
}

.page-container {
	display: flex;
	max-width: 1100px;
	min-height: 100%;
	margin: 0 auto;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0 20px 30px;
}

.logo {
	margin: 49px 0 30px;
}

h1 {
	margin: auto 0 20px;
	color: #fff;
	line-height: 101px;
	font-family: Manuka;
	font-size: 116px;
	text-transform: uppercase;
}

p {
	max-width: 550px;
	margin-bottom: 98px;
	color: #f7ece2;
	line-height: 36px;
	font-size: 25px;
}

.btn {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 154px;
	height: 42px;
	padding-top: 2px;	/*whatever I tried, font doesn't align to center properly*/
	margin: 30px 0 auto;
	border-radius: 100px;
	background: #dd7845;
	color: #FFF;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.btn:hover{
	background: #F7ECE2;
	color: #293151;
}

.decoration {
	flex-shrink: 0;
	width: 36.55%;
	max-width: 402px;
	background: url("../img/pattern.svg") 0 -160px/397px repeat-y;
}

@media (min-width: 1200px) {
	.logo {
		margin-bottom: 50px;
	}
	.content{
		min-width: 698px;
	}	
	.content p{
		margin-bottom: 60px;
	}
	
}

@media (max-width: 1024.98px) {

	.content {
		padding-left: 9%;
	}

	.decoration {
		width: 32.3%;
	}

	h1 {
		margin-bottom: 40px;
	}

	p {
		max-width: 370px;
		margin-bottom: auto;
	}
}

@media (max-width: 771.98px) {

	h1 {
		line-height: 13.15vw;
		font-size: 15vw;
	}

	p {
		line-height: 4.7vw;
		font-size: 3.24vw;
	}

}

@media (max-width: 599.98px) {

	.page-container {
		flex-direction: column;
	}

	.content {
		padding-left: 7.5%;
	}

	.logo {
		width: 172px;
		margin-top: 26px;
	}

	h1 {
		margin-top: 67px;
		margin-bottom: 25px;
		line-height: 72px;
		font-size: 86px;
	}

	p {
		max-width: 290px;
		margin-bottom: 63px;
		line-height: 26px;
		font-size: 18px;
	}

	.btn {
		position: relative;
		z-index: 50;
		width: 160px;
		height: 48px;
	}

	.decoration {
		position: relative;
		z-index: 10;
		flex: 1;
		width: auto;
		min-height: 386px;
		margin: -86px 6% 0;
		background: url("data:image/svg+xml,%3Csvg width='343' height='460' viewBox='0 0 343 460' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4202 398.604C8.10375 389.267 2 376.075 2 361.256C2 315.226 34.5409 299.453 80.5998 299.453H162.738' stroke='%23F7ECE2' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M323.57 200.302C333.886 209.639 339.99 222.83 339.99 237.65C339.99 283.679 307.449 299.453 261.39 299.453H179.252' stroke='%23F7ECE2' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M18.5865 299.76C8.29609 290.362 2.20776 277.084 2.20776 262.168C2.20776 215.838 34.6664 199.961 80.6089 199.961H162.54' stroke='%235177C4' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M323.588 100.981C333.931 110.301 340.05 123.47 340.05 138.264C340.05 184.215 307.426 199.961 261.249 199.961H178.9' stroke='%235177C4' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M18.4202 200.302C8.10375 190.965 2 177.773 2 162.954C2 116.924 34.5409 101.151 80.5998 101.151H162.738' stroke='%235177C4' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M323.57 2C333.886 11.3369 339.99 24.5284 339.99 39.3477C339.99 85.3773 307.449 101.151 261.39 101.151H179.252' stroke='%235177C4' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M18.5865 497.721C8.29609 488.4 2.20776 475.231 2.20776 460.437C2.20776 414.487 34.6664 398.74 80.6089 398.74H162.54' stroke='%235177C4' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M323.588 299.76C333.931 309.08 340.05 322.249 340.05 337.043C340.05 382.994 307.426 398.74 261.249 398.74H178.9' stroke='%235177C4' stroke-width='4' stroke-miterlimit='10'/%3E%3Cpath d='M323.57 402.627C333.886 411.964 339.99 425.155 339.99 439.974C339.99 486.004 307.449 501.778 261.39 501.778H179.252' stroke='%235177C4' stroke-width='4' stroke-miterlimit='10'/%3E%3C/svg%3E%0A") 0 0/cover no-repeat;
	}
}

@media (max-width: 466.98px) {

	h1 {
		line-height: 18.4vw;
		font-size: 22vw;
	}

	p {
		line-height: 6.4vw;
		font-size: 4.6vw;
	}
}

@media (max-width: 325px) {

	.decoration {
		min-height: 100vw;
	}
}

@media (max-width: 299.98px) {

	.logo {
		max-width: 100%;
	}

	.content {
		padding-bottom: 0;
	}

	.btn {
		width: 60vw;
		height: 16vw;
		font-size: 5.7vw;
	}

	.decoration {
		margin-top: -19vw;
	}
}