@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
			margin: 0;
			padding: 0;
			outline: 0;
			border: 0;
			box-sizing: border-box;
			font-family: 'Poppins', sans-serif;
}

html{
--red: hsl(0, 100%, 74%) ;
--green: hsl(154, 59%, 51%);
--blue: hsl(248, 32%, 49%);
--dark-blue: hsl(249, 10%, 26%) ;
--grayish-blue: hsl(246, 25%, 77%);
font-size: 16px;
}

body{
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: url("images/bg-intro-mobile.png") var(--red);
color: #fff;
text-align: center;
font-size: 1rem;
}

main{
display: flex;
height: 100%;
max-width: 1200px;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
}

#text-container h1{
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}

#text-container p{
font-size: 0.75rem;
font-weight: 500;
line-height: 1.25rem;
}

#form-container{
				margin: 4rem 0 0 0;
}

#form-container>div{
background:var(--blue) ;
padding: 1.5rem 2.5rem;
font-size: 0.75rem;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 0.5rem rgba(0,0,0,0.2);
}

#form-container>div span{
font-weight: 600;
}

#form{
				background: #fff;
				padding: 1.5rem;
				border-radius: 0.5rem;
				width: 100%;
				box-shadow: 0 0.5rem rgba(0,0,0,0.2);
}

#form .inputBox{
margin: 1rem 0;
position: relative;
}

.inputBox input {
width: 100%;
padding:1rem 1.5rem;
border:2px solid rgba(185,182,211,0.3);
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
caret-color: var(--blue);
}

input:focus{
border-color: var(--blue);
}

.error input{
				border:2px solid var(--red);
				
}

.inputBox small{
display: block;
color: var(--red);
text-align: right;
}

.inputBox img{
position:absolute;
top:1rem;
right: 2rem;
display: none;
}

.error img{
display: inline;
}


#form button {
background: var(--green);
color: #fff;
padding:1.5rem 0;
width: 100%;
border-radius: 0.25rem;
font-weight: 500;
box-shadow: 0 0.25rem hsla(154, 59%, 51%,0.6), 0 0.25rem rgba(0,0,0,0.2);
margin-bottom: 1rem;
transition: 0.3s;
cursor: pointer;
}

#form button:active{
opacity: 0.75;

}

#form p{
color: var(--grayish-blue);
width: 90%;
display: block;
margin:0 auto;
font-size: 0.75rem;
}

p span{
color: var(--red);
font-weight: 600;
}


@media(min-width:1000px){
body {
background-image: url('images/bg-intro-desktop.png');
}

	main{
	flex-direction: row;
	text-align: left;
	padding: 0;
	}	
	#text-container,#form-container{
			   width: 50%;
			   margin: 0 2rem;
	}
	
	#text-container h1{
					font-size: 2.5rem;
	}
	#form-container>div,#form button{
	text-align: center;
	}
	
}











 .attribution {display: none;position: absolute;
 bottom: 0; left: 0;font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }