@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Rubik+Glitch&display=swap');

* {
	box-sizing:border-box;
}

html {
	font-size:62.5%;
	font-family:'Helvetica Neue',helvetica,arial,sans-serif;
}

body {
	margin:0;
	padding:1.4rem;
	color:#333;
	background:#fff;
}

/* small screens */

header {
	display:flex;
	justify-content:center;
}
.chefinderheader {
	width:200px;
	height:auto;
}
.menu {
	display:none;
}

h2.learn {
	font-family:Open Sans;
	font-size:59px;
	line-height:50pt;
	color:black;
	margin:45px 30px 25px;
	display:flex;
	justify-content:center;
}
p.explorerecipes {
	font-family:Open Sans;
	font-size:30px;
	line-height:40pt;
	font-weight:lighter;
	color:grey;
	margin:20px 30px 50px;
	display:flex;
	justify-content:center;
}
h3.button {
	font-family:Open Sans;
	font-size:20px;	
	color:white;
	display:flex;
	justify-content:center;
	border:25px solid #3a8f3c;
	border-radius:45px;
	background:#3a8f3c;
	width:70%;
	margin:auto;
	margin-top:40px;
	margin-bottom:125px;
}
h5.button {
	display:none;
}


.app {
	background:#f2f2f2;
	margin:-50px -15px -30px;
	padding:25px 0 40px;
}
.appimg {
	width:470px;
	height:auto;
	display:flex;
	justify-content:center;
	margin:0 -35px 0;
}


h2.best {
	font-family:Open Sans;
	font-size:50px;
	line-height:50px;
	color:white;
	display:flex;
	justify-content:center;
	text-align:center;
	margin:0 20px 25px;
}
p.newtocooking {
	font-family:Open Sans;
	font-size:30px;
	font-weight:lighter;
	line-height:50px;
	color:white;
	display:flex;
	justify-content:center;
	text-align:center;
	margin:0 87px 0;
}
p.newtocooking2 {
	display:none;
}
.greenborder {
	margin:-50px -15px -30px;
	padding:65px 0 65px;
	background: rgb(137,194,74);
	background: linear-gradient(90deg, rgba(137,194,74,1) 0%, rgba(58,143,60,1) 100%);
}


h2.thousands {
	font-family:Open Sans;
	font-size:50px;
	line-height:60px;
	color:black;
	display:flex;
	justify-content:center;
	text-align:center;
	margin:50px 0 0;
}
p.choosefrom {
	font-family:Open Sans;
	font-size:30px;
	font-weight:lighter;
	line-height:50px;
	color:grey;
	display:flex;
	justify-content:center;
	text-align:center;
	margin:20px 10px 0;
}
.screens {
	display:flex;
	justify-content:center;
	margin:30px 0 30px;
}
.screensimg {
	width:400px;
	height:auto;
}

div.copyright {
	background:#f2f2f2;
	font-family:Open Sans;
	font-size:15px;
	text-align:center;
	color:grey;
	font-weight:lighter;
	margin:0 -15px 0;
	padding:80px 20px 60px;
}
.chefinderfooter {
	width:200px;
	height:auto;
	display:flex;
	justify-content:center;
	margin:-20px auto 30px;
}
footer {
	font-family:Open Sans;
	font-size:20px;
	display:flex;
	justify-content:center;
	gap:65px;
	margin-top:20px;
}
h4 {
	font-weight:lighter;
}

#overlay {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(0,0,0,0.6);
	justify-content:center;
	align-items:center;
	display:none;
}
#overlay.active {
	display:flex;
}
.modal {
	position:relative;
	padding:40px;
	width:50vw;
	background:white;
	box-shadow:0px 0px 6px black;
	border-radius:10px;
	text-align:center;
}
.close {
	position:absolute;
	top:20px;
	right:20px;
	font-size:20px;
	text-decoration:none;
	font-weight:bold;
	color:#666;
}
.modal a {
	display:block;
}
h2.apps {
	font-size:22px;
}
.downloadapps {
	width:100%;
	height:auto;
}

@media only screen and (min-width:769px) {
	/* medium screens and larger */

header {
	display:flex;
	justify-content:left;
}
.chefinderheader {
	width:150px;
	height:auto;
	margin-left:200px;
	margin-top:40px;
}
h4.menu {
	font-family:Open Sans;
	font-size:14px;
	display:flex;
	justify-content:left;
	margin:45px -5px 0;
	padding-left:45px;
	font-weight:lighter;
}
footer {
	display:none;
}

h2.learn {
	font-family:Open Sans;
	font-size:30px;
	line-height:40pt;
	font-weight:lighter;
	color:black;
	margin:180px 200px 25px;
	margin-right:901px;
	display:flex;
	justify-content:left;
}
p.explorerecipes {
	font-family:Open Sans;
	font-size:18px;
	line-height:25pt;
	font-weight:lighter;
	color:grey;
	margin:20px 200px 50px;
	margin-right:800px;
	display:flex;
	justify-content:left;
}
h3.button {
	font-family:Open Sans;
	font-size:14px;	
	color:white;
	display:flex;
	justify-content:center;
	border:15px solid #3a8f3c;
	border-radius:35px;
	background:#3a8f3c;
	width:15%;
	margin-top:-10px;
	margin-bottom:250px;
	margin-left:200px;
}


.app {
	background:#f2f2f2;
	display:flex;
	justify-content:right;
	margin-left:700px;
	margin-top:-850px;
}
.appimg {
	width:470px;
	height:auto;
	display:flex;
	justify-content:right;
	margin-right:230px;
	margin-top:150px;
}
h5.button {
	font-family:Open Sans;
	font-size:14px;	
	color:white;
	display:flex;
	justify-content:center;
	border:15px solid #3a8f3c;
	border-radius:35px;
	background:#3a8f3c;
	width:15%;
	margin-top:-750px;
	margin-bottom:250px;
	margin-right:220px;
	float:right;
}


h2.best {
	font-family:Open Sans;
	font-size:38px;
	line-height:50px;
	font-weight:lighter;
	color:white;
	display:flex;
	justify-content:center;
	text-align:center;
	margin:50px 20px 25px;
}
p.newtocooking {
	display:none;
}
p.newtocooking2 {
	font-family:Open Sans;
	font-size:18px;
	font-weight:lighter;
	line-height:30px;
	color:white;
	display:flex;
	justify-content:center;
	text-align:center;
	margin:-7px 380px 50px;
}
.greenborder {
	margin:-50px -15px -30px;
	padding:65px 0 65px;
	background: rgb(137,194,74);
	background: linear-gradient(90deg, rgba(137,194,74,1) 0%, rgba(58,143,60,1) 100%);
}


h2.thousands {
	font-family:Open Sans;
	font-size:38px;
	line-height:60px;
	font-weight:lighter;
	color:black;
	display:flex;
	justify-content:center;
	text-align:center;
	margin:80px 0 -10px;
}
p.choosefrom {
	font-family:Open Sans;
	font-size:18px;
	font-weight:lighter;
	line-height:35px;
	color:grey;
	display:flex;
	justify-content:center;
	text-align:center;
	margin:20px 350px 0;
}
.screens {
	display:flex;
	justify-content:center;
	margin:30px 0 30px;
}
.screensimg {
	width:1200px;
	height:auto;
}

div.copyright {
	background:#f2f2f2;
	margin:0 -15px 0;
	padding:80px 20px 70px;
}
.copyright {
	font-family:Open Sans;
	font-size:15px;
	color:grey;
	text-align:left;
	font-weight:lighter;
	margin-left:250px;
}
.chefinderfooter {
	width:150px;
	height:auto;
	margin:0 1000px -40px;
	display:flex;
}

.downloadapps {
	width:30%;
	height:auto;
}