*, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: sans-serif;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

body{
	padding: 1rem;
}

div.container{
	width: 100%;
	padding: 1rem;
	background-color: #f6f9fe;
}

header{
	display: flex;
	justify-content: space-between;
	margin: 2rem 0;
}

div.ilu{
	display: none;
}

main{
}

nav.links{
	display: none;
}

main p.notice{
	padding: 0.9rem 1.2rem;
	background-color: #372865;
	color: white;
	margin: 1rem 0;
	border-radius: 5rem;
	text-align: center;
}

main p.notice a{
	color: white;
}

main h1{
	color: #372865;
	margin: 1rem 0;
	text-align: center;
	line-height: 1.5;
	font-size: 2.5rem;
}

main p.subtext{
	color: #372865;
	line-height: 1.8;
	text-align: center;
	margin-bottom: 2rem;
}

main input#address{
	border-color: gray;
	display: block;
	width: 100%;
	padding: 0.9rem;
	border: none;
}

main input#address + button{
	width: 100%;
	margin-top: 0.5rem;
	padding: 1rem 0;
	background-color: #372865;
	color: white;
	font-weight: 900; 
	margin-bottom: 2rem;
}

main div.used-by-section{
	font-weight: 900;
	color: #372865;
}

main div.used-by-section div.used-imgs{
	display: flex;
	justify-content: space-between;
}


main div.used-by-section div.used-imgs img{
	flex-basis: 1;
}

@media only screen and (min-width: 650px){
	div.container{
		padding: 2rem 4rem;
		min-height: calc(100vh - 2rem);
	}
	main p.notice{
		font-size: 1.2rem;
	}

	main h1{
		font-size:3.7rem;
		margin-bottom: 0;
	}

	main form{
		display: flex;
		justify-content: space-between;
		margin: 3rem 0 5rem;
	}
	main form input#address{
		width: 67%;
		display: inline

	}

	main input#address + button{
		width: 30%;
		margin-bottom: 0;
	}
	form button
}

@media only screen and (min-width: 950px){
	div.container{
		padding: 2rem 6.5rem;
		max-width: 1150px;
		margin: 0 auto;
	}

	div.section{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}

	div.ilu{
		display: block;
		
	}

	main h1{
		text-align: left;
	}

	p.notice, h1, p.subtext, form{
		grid-column: 1/3;
	}

	main p.notice{
		width: fit-content;
		padding-left: 3rem;
		padding-right: 3rem;
	}

	div.ilu{
		grid-column: 3/-1;
		grid-row: 1/5;
	    overflow: hidden;
	    display: flex;
	    justify-content: center;
	    align-items: flex-start;
	    padding: 1rem;
	}

	div.ilu img{
		width: 100%;
		height: auto;
	}

	.hamburger{
		display: none;
	}

	nav.links{
		display: block;
	}

	nav.links ul{
		display: flex;
		align-items: center;
	}

	nav.links ul li{
		margin-left: 1.5rem;
		display: contents;
	}

	nav.links ul li a{
		margin-left: 1rem;
		text-decoration: none;
		font-weight: 600;
	}

	nav.links ul li a.cta{
		background-color: #372865;
		padding: 1rem;
		color: white;
		border-radius: 7px;
	}
}