@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Poppins:600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:300,600,700&display=swap');

/* General Styles */
* {
	box-sizing: border-box;
}
body {
    background-image: url('background.svg');
    background-size: cover; 
	background-position: center center;
	background-repeat: no-repeat;
	padding: 40px 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.15em;
	margin: 0;
}

h1 {
	font-family: 'Poppins', sans-serif;
}

p {
	opacity: 0.6;
	margin-top: 20px;
}

img {
	max-width: 100%;
}

.btn {
	border-radius: 50px;
	border: none;
	box-shadow: 0 0 10px grey;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	padding: 20px 0;
	margin-left: 20px;
	flex: 0.4;
}

.container {
	padding: 0 20px;
	margin: 0 auto;
	max-width: 100%;
	width: 1000px;
}

.center {
	text-align: center;
}

.flex {
	display: flex;
	align-items: center;
}

.flex > div {
	flex: 1;
}

nav {
	align-items: center;
	justify-content: space-between;
	margin-bottom: 60px;
}

nav span {
	font-family: 'Poppins', sans-serif;
	font-size: 25px;
	color: black
}

.header-img {
    margin-top: 10%;
	margin-left: 25%;
	width: 55%;
}

form {
	display: flex;
	align-items: flex-start;
	text-align: left;
	margin-top: 50px;

}

.form-left {
	flex: 0.8;
}

input {
	border: 1px solid grey;
	border-radius: 50px;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 16px;
	padding: 20px 25px;
	margin-bottom: 15px;
	width: 100%;
}

input::placeholder {
	color: black;
}

input.error {
	border-color: hsl(354, 100%, 66%);
}

input.error::placeholder {
	color: hsl(354, 100%, 66%);
}

form small {
	color: hsl(354, 100%, 66%);
	display: none;
	font-style: italic;
	z-index: 100;
	margin: 0 20px 40px;
}

/* Media Query */
@media screen and (max-width: 768px) {
	body {
		text-align: center;
	}

	nav .navbar {
		flex-direction: column;
	}

	.header-img {
		margin-top: 60px;
		margin-left: 0;
		width: 50%;
	}

	.flex {
		flex-direction: column;
	}

	form {
		flex-direction: column;
		text-align: center;
	}

	.form-left {
		width: 100%;
	}

	.btn {
		margin-left: 0;
		width: 100%;
	}
}