/*Mobile first*/

* {
	margin: 0;
	padding: 0;
}

body {
	min-width: 375px;
	min-height: auto; 
	font-family: 'Josefin Sans', sans-serif;
	font-size: 16px;
	overflow-x: hidden;
}

main {
	display: flex;
	flex-direction: column;
	width: 100vw;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

.header__content {
	display: none;
}

.header__logo {
	width: 90vw;
	height: auto;
	margin: 2rem 0 2rem 2rem;
}

.header__logo img {
	width: 40%;
}

.section__content {
	width: 100vw;
	height: auto;
	text-align: center;
}

.section__title {
	min-height: 5rem;
	font-size: 2.3rem;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	line-height: 2.5rem;
	margin-top: 3rem;
}

.section__title span {
	color: hsl(0, 36%, 70%);
	font-weight: 300;
}

.section__paragraph {
	color: hsl(0, 36%, 70%);
	font-size: 0.9rem;
	line-height: 1.3rem;
	margin: 2rem;
}

.form {
	width: 95vw;
	height: 8vh;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0 0.5rem;
	position: relative;
}

.form__error {
	display: none;
	width: 7%;
	position: absolute;
	left: 14rem;
}

.form__val p {
	font-size: 0.8rem;
	text-align: left;
	color: hsl(0, 93%, 68%);
	margin: 0.5rem 3.5rem;
}

#form__email {
	display: flex;
	width: 80vw;
	height: 8vh;
	border: 1px solid hsl(0, 36%, 70%);
	border-radius: 1.5rem;
}

 input::placeholder {
	color: hsl(0, 36%, 70%);
	padding-left: 1rem;
}

.form__button {
	width: auto;
	height: 8.5vh;
	border: none;
	border-radius: 1.5rem;
	background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%) );
	position: absolute;
	right: 1.5rem;
	padding: 0 8vw;
	box-shadow: 0 0 1em hsl(0, 80%, 86%);
}

.attribution { 
	font-size: 0.8rem; 
	text-align: center; 
	margin-top: 1.2rem;
}

.attribution a { 
	color: hsl(228, 45%, 44%);
}

/*Desktop*/

@media screen and (min-width: 768px){
	.form__error {
		width: 5%;
		left: 32rem;
	}
	
	.form__val p {
		font-size: 0.8rem;
		margin: 0.7rem 5rem;
	}
}

@media screen and (min-width: 1280px){
	body {
		min-width: 1280px;		
	}

	main {
		flex-direction: row;
		background: url(images/bg-pattern-desktop.svg) no-repeat;
		background-size: cover;
	}

	.header__main {
		display: none;
	}

	.header__content {
		display: inherit;
		width: 50vw;
		height: auto;
		margin-left: 6rem;	
	}
	
	.header__content img {
		width: 20%;
	}

	.section__img {
		width: 50vw;
		height: auto;
		order: 1;
	}

	.section__content {
		width: 50vw;
		height: auto;
		text-align: justify;
		order: 0;
	}
	
	.section__title {
		min-height: 7rem;
		font-size: 4rem;
		line-height: 4.5rem;
		margin: 5rem 0 0 6rem;
	}
		
	.section__paragraph {
		width: 30vw;
		height: auto;
		font-size: 0.9rem;	
		line-height: 1.6rem;
		margin: 2rem 0 2.5rem 6rem;
	}

	.form {
		width: 30vw;
		height: 7vh;
		margin: 0 6rem;
		align-items: left;
	}

	.form__error {
		left: 16rem;
	}
	
	.form__val p {
		font-size: 0.9rem;
		margin: 0.8rem 7.2rem;
	}
	
	.form__button {
		right: 0;
		padding: 0 3vw;
	}

	.form__button:hover {
		background: linear-gradient(135deg, hsl(0, 100%, 98%), hsl(0, 80%, 86%) );
		cursor: pointer;
		transition: 0.2s;
	}

	.attribution { 
		font-size: 1.1rem; 
		margin-top: 1.5rem;
	}

}

@media screen and (min-width: 1440px){
	body {
		min-width: 1440px;		
	}

	.header__content {
		margin-top: 4rem;
	}
	
	.header__content img {
		width: 25%;
	}

	.section__title {
		font-size: 5rem;
		line-height: 6rem;
		margin: 8rem 0 0 6rem;
	}
		
	.section__paragraph {
		font-size: 1rem;	
		line-height: 1.7rem;
		margin: 2rem 0 4rem 6rem;
	}

	.form {
		width: 31vw;
	}
	
	.form__error {
		left: 19rem;
	}

	.attribution { 
		font-size: 1.2rem; 
	}
}

@media screen and (min-width: 1920px){
	body {
		min-width: 1920px;
	}

	.header__content img {
		width: 30%;
	}

	.section__title {
		font-size: 7rem;
		line-height: 8rem;
		margin: 8rem 0 0 6rem;
	}
		
	.section__paragraph {
		font-size: 1.4rem;	
		line-height: 2rem;
		width: 32vw;
		margin: 4rem 0 5rem 6rem;
	}

	.form {
		width: 33vw;
	}

	.form__error {
		left: 28rem;
	}
	
	.form__val p {
		font-size: 1.2rem;
		margin-top: 0.9rem;
	}

	input::placeholder {
		font-size: 1.2rem;
	}

	.attribution { 
		font-size: 1.5rem; 
	}
}