* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}

html {
	font-size: 62.5%;
}

a,
h1,
h2,
p {
	text-decoration: none;
	color: #181925;
	font-family: 'Roboto', sans-serif;
}

nav {
	display: flex;
}

/* header area */
.logo-container {
	margin: 3vh 0 3vh 2vw;
	display: flex;
	flex-wrap: nowrap;
}

.logo-container h2 {
	font-size: 3rem;
	color: #fff;
	font-family: 'Assistant', sans-serif;
}

.nav-links {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 70%;
	margin: 3vh 0 3vh 0;
}

.nav-links a,
.interactions a {
	font-size: 2rem;
	padding: 1.5rem;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	display: flex;
}

.nav-links a:hover {
	color: #ff9633;
}

.interactions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: auto;
}

.signup-link {
	border: #ff9633 solid 2px;
	border-radius: 10px;
	margin-right: 2rem;
}

.signup-link:hover {
	background: #ff9633;
	color: #fff;
}

.signin-link {
	background: #ff9633;
	border: #fff solid 2px;
	border-radius: 10px;
	color: #fff;
	margin-right: 2rem;
}

/* hero area */
.main-cta {
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-bottom: #B85156 solid 10px;
}

.main-cta h1 {
	color: #fff;
	font-size: 6.5rem;
	font-family: 'Assistant', sans-serif;
	text-align: center;
}

.main-cta p {
	color: #fff;
	font-size: 2.5rem;
}

.main-cta a {
	color: #fff;
}

.cta-btn {
	border: #fff solid 2px;
	padding: 1.5rem;
	border-radius: 10px;
	font-size: 2.5rem;
	margin-top: 5vh;
}

.cta-btn:hover {
	background: #ff9633;
}
.hero-background {
	background: url(/img/katie-smith-uQs1802D0CQ-unsplash.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

.darken {
	background: #18192557;
}

/* Features Area */

.features {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(248, 233, 214);
}

.feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 33%;
	margin: 12rem;
	
}

.img-container {
	width: auto;
	height: 400px;
	box-shadow: 5px 10px 8px #18192583;
	
}

.feature img {
	width: auto;
	height: 400px;
	overflow: auto;
	border-bottom: #B85156 solid 5px;
}

.feature h2 {
	margin-top: 5vh;
	font-size: 3rem;
	font-family: 'Assistant', sans-serif;
	/* color: #fff; */
}

.feature p {
	margin-top: 2vh;
	font-size: 2rem;
	text-align: center;
	/* color: #fff; */
}

/* footer */
.nav-links-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2vh 0 2vh 0;
	width: 100%;
}

.nav-links-footer li {
	padding: 1rem;
}

.nav-links-footer a {
	color: #fff;
	font-size: 1.5rem;
}

footer {
	display: flex;
	flex-direction: column;
	background-color: #B85156;
}
.copy-div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-bottom: 2vh;
}

.copy-div p {
	color: #fff;
	font-size: 1.2rem;
}

@media only screen and (max-width: 1024px) {
	
	.features {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		
	}

	.feature{
		text-align: center;
		width: 25%;
		margin-top: 5%;
		
	}
}

@media only screen and (max-width: 800px) {
	nav {
		flex-direction: column;
	}
	.logo-container {
		width: 100%;
		justify-content: center;
		margin: 0;
	}

	.logo-container h2{
		margin: 2vh 0 2vh 0;
		font-size: 4rem;
	}

	.nav-links {
		width: 100%;
		justify-content: center;
		flex-direction: column;
		margin: 1vh 0;
	}



	.interactions {
		width: 100%;
		justify-content: center;
	}

	.interactions a {
		margin: 2rem;
		
	}

	.main-cta {
		width: 100%;
		height: 40vh;
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.main-cta h1 {
		width: 90%;
		font-size: 3.5rem;
		
	}

	.features {
		flex-direction: column;
	}

	.feature {
		margin: 2vh;
	}

}

@media only screen and (max-width: 500px){
	.feature {
		width: 90%;
	}
}