@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lobster Two';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/lobster-two-v18-latin-regular.eot); /* IE9 Compat Modes */
  src: url(fonts/lobster-two-v18-latin-regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fonts/lobster-two-v18-latin-regular.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/lobster-two-v18-latin-regular.woff) format('woff'), /* Modern Browsers */
       url(fonts/lobster-two-v18-latin-regular.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fonts/lobster-two-v18-latin-regular.svg#LobsterTwo) format('svg'); /* Legacy iOS */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lobster Two';
  font-style: italic;
  font-weight: 400;
  src: url(fonts/lobster-two-v18-latin-italic.eot); /* IE9 Compat Modes */
  src: url(fonts/lobster-two-v18-latin-italic.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fonts/lobster-two-v18-latin-italic.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/lobster-two-v18-latin-italic.woff) format('woff'), /* Modern Browsers */
       url(fonts/lobster-two-v18-latin-italic.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fonts/lobster-two-v18-latin-italic.svg#LobsterTwo) format('svg'); /* Legacy iOS */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lobster Two';
  font-style: normal;
  font-weight: 700;
  src: url(fonts/lobster-two-v18-latin-700.eot); /* IE9 Compat Modes */
  src: url(fonts/lobster-two-v18-latin-700.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fonts/lobster-two-v18-latin-700.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/lobster-two-v18-latin-700.woff) format('woff'), /* Modern Browsers */
       url(fonts/lobster-two-v18-latin-700.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fonts/lobster-two-v18-latin-700.svg#LobsterTwo) format('svg'); /* Legacy iOS */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lobster Two';
  font-style: italic;
  font-weight: 700;
  src: url(fonts/lobster-two-v18-latin-700italic.eot); /* IE9 Compat Modes */
  src: url(fonts/lobster-two-v18-latin-700italic.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fonts/lobster-two-v18-latin-700italic.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/lobster-two-v18-latin-700italic.woff) format('woff'), /* Modern Browsers */
       url(fonts/lobster-two-v18-latin-700italic.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fonts/lobster-two-v18-latin-700italic.svg#LobsterTwo) format('svg'); /* Legacy iOS */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/quicksand-v30-latin-regular.eot); /* IE9 Compat Modes */
  src: url(fonts/quicksand-v30-latin-regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fonts/quicksand-v30-latin-regular.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/quicksand-v30-latin-regular.woff) format('woff'), /* Modern Browsers */
       url(fonts/quicksand-v30-latin-regular.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fonts/quicksand-v30-latin-regular.svg#Quicksand) format('svg'); /* Legacy iOS */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url(fonts/quicksand-v30-latin-700.eot); /* IE9 Compat Modes */
  src: url(fonts/quicksand-v30-latin-700.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fonts/quicksand-v30-latin-700.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/quicksand-v30-latin-700.woff) format('woff'), /* Modern Browsers */
       url(fonts/quicksand-v30-latin-700.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fonts/quicksand-v30-latin-700.svg#Quicksand) format('svg'); /* Legacy iOS */
}

html {
	font-size: 16px;
	font-family: Verdana, sans-serif;
	line-height: 1.7;
	color: brown;
	scroll-behavior: smooth;
}

body {
	background-color: #ffe7d6;
	max-width: 1200px;
	margin: 0 auto;
}

header {
	text-align: center;
	background-color: #ebd5ce;
	padding: 0 2rem;
	background-image: url(images/lumpia-1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

h1 {
	text-align: center;
	font-size: 4rem;
  	font-family: 'Lobster Two', sans-serif;
  	font-style: italic;
 	 font-weight: 700;
	text-shadow: 3px 3px white;
	-webkit-text-stroke: 1px #f5ece6;
}

h2 {
	text-align: center;
  	font-family: 'Quicksand', sans-serif;
 	font-style: normal;
 	font-weight: 700;
}

h3 {
  	font-family: 'Quicksand', sans-serif;
 	font-style: normal;
 	font-weight: 700;
}

p, ul, ol{
  	font-family: 'Quicksand', sans-serif;
  	font-style: normal;
  	font-weight: 400;
}

section {
	border: 1px solid #853414;
	padding: 1rem;
	background-color: #fcf2eb;
	border-radius: 2px;
}

img {
	display: block;
	margin: 1rem auto;
}

footer {
	text-align: center;
}

img {
		width: 90%;
	}

.decor-1, .decor-2, .decor-3 {
	display: none;
}

.lumpia-2 {
	display: none;
}

.wrapper {
	width: 80%;
	display: flex;
}

.button {
	display: block;
	background-color: white;
	border: 1px solid black;
	position: absolute;
	justify-content: center;
	bottom: .4rem;
	font-size: 12px;
	text-decoration: none;
	padding: .5rem;
	margin: 0 auto;

}

.grid-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
	padding: 1rem;
}

.indent {
	text-indent: 25px;
}

@media (min-width: 480px) {
	.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.child-1, .child-2, .child-5, .child-6, .child-7, .child-8 {
		grid-column-start: 1;
		grid-column-end: 3;
	}
}

@media (min-width: 565px) {
	p {
		padding: 0 1rem;
	}
}

@media (min-width: 590px) {
	section {
		padding: 0 2rem;
	}
}

@media (min-width: 600px) {
	.child-5 {
		grid-row-start: 3;
		grid-row-end: 5;
		grid-column-start: 1;
		grid-column-end: 2;
	}
	.child-3 {
		grid-row-start: 3;
		grid-row-end: 4;
		grid-column-start: 2;
		grid-column-end: 3;
	}
}

@media (min-width: 700px) {
	.child-1 {
		grid-row-start: 1;
		grid-row-end: 2;
		grid-column-start: 1;
		grid-column-end: 2;
	}
	.child-2 {
		grid-row-start: 1;
		grid-row-end: 2;
		grid-column-start: 2;
		grid-column-end: 3;
	}
	.child-3 {
		grid-row-start: 2;
		grid-row-end: 3;
		grid-column-start: 2;
		grid-column-end: 3;	
	}
	.child-5 {
		grid-row-start: 3;
		grid-row-end: 4;
		grid-column-start: 1;
		grid-column-end: 2;	
	}
	.child-6 {
		grid-row-start: 3;
		grid-row-end: 5;
		grid-column-start: 2;
		grid-column-end: 3;	
	}
	.lumpia-2 {
		display: block;
		object-fit: cover;
		grid-row-start: 4;
		grid-row-end: 5;
		grid-column-start: 1;
		grid-column-end: 2;	
		border: 1px solid #853414;
		padding: 1rem;
		background-color: #fcf2eb;
		border-radius: 4px;
	}
}

@media (min-width: 760px) {
	.grid-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(51, 2rem);
	}
	.child-1 {
		grid-row-start: 1;
		grid-row-end: 13;
		grid-column-start: 1;
		grid-column-end: 3;
	}
	.child-2 {
		grid-row-start: 13;
		grid-row-end: 27;
		grid-column-start: 1;
		grid-column-end: 3;
	}
	.child-3 {
		grid-row-start: 1;
		grid-row-end: 7;
		grid-column-start: 3;
		grid-column-end: 4;	
	}
	.child-4 {
		grid-row-start: 1;
		grid-row-end: 7;
		grid-column-start: 4;
		grid-column-end: 5;		
	}
	.child-5 {
		grid-row-start: 7;
		grid-row-end: 15;
		grid-column-start: 3;
		grid-column-end: 5;	
	}
	.child-6 {
		grid-row-start: 27;
		grid-row-end: 42;
		grid-column-start: 1;
		grid-column-end: 3;
	}
	.child-7 {
		grid-row-start: 26;
		grid-row-end: 44;
		grid-column-start: 3;
		grid-column-end: 5;
	}
	.child-8 {
		grid-row-start: 44;
		grid-row-end: 52;
		grid-column-start: 1;
		grid-column-end: 5;
	}
	.lumpia-2 {
		grid-row-start: 15;
		grid-row-end: 23;
		grid-column-start: 3;
		grid-column-end: 5;	
	}
	.decor-1 {
		display: block;
		object-fit: cover;
		grid-row-start: 42;
		grid-row-end: 44;
		grid-column-start: 1;
		grid-column-end: 3;	
		height: 5rem;
		margin: auto;
	}
}

@media (min-width: 778px) {
.hero {
	height: 400px;
	}
h1 {
	font-size: 5rem;
	}
}

@media (min-width: 804px) {
	.child-1 {
		grid-row-start: 1;
		grid-row-end: 12;
		grid-column-start: 1;
		grid-column-end: 3;	
	}
	.child-2 {
		grid-row-start: 12;
		grid-row-end: 26;
		grid-column-start: 1;
		grid-column-end: 3;
	}
	.child-3 {
		grid-row-start: 1;
		grid-row-end: 6;
		grid-column-start: 3;
		grid-column-end: 4;
	}
	.child-4 {
		grid-row-start: 1;
		grid-row-end: 6;
		grid-column-start: 4;
		grid-column-end: 5;
	}
	.child-5 {
		grid-row-start: 6;
		grid-row-end: 13;
		grid-column-start: 3;
		grid-column-end: 5;
	}
	.child-6 {
		grid-row-start: 26;
		grid-row-end: 41;
		grid-column-start: 1;
		grid-column-end: 3;
	}
	.child-7 {
		grid-row-start: 25;
		grid-row-end: 43;
		grid-column-start: 3;
		grid-column-end: 5;
	}
	.child-8 {
		grid-row-start: 43;
		grid-row-end: 50;
		grid-column-start: 1;
		grid-column-end: 5;
	}
	.lumpia-2 {
		object-fit: cover;
		grid-row-start: 13;
		grid-row-end: 24;
		grid-column-start: 3;
		grid-column-end: 5;	
	}
	.decor-1 {
		grid-row-start: 41;
		grid-row-end: 43;
		grid-column-start: 1;
		grid-column-end: 3;	
		height: 5rem;
		margin: auto;
	}
}

@media (min-width: 838px) {
	.child-8 {
		grid-row-start: 43;
		grid-row-end: 50;
		grid-column-start: 1;
		grid-column-end: 5;
	}
	.lumpia-2 {
		max-height: 500px;
	}
}

@media (min-width: 875px) {
	.grid-container {
		grid-template-rows: repeat(40, 2rem);
	}
	.child-7 {
		grid-row-start: 25;
		grid-row-end: 41;
		grid-column-start: 3;
		grid-column-end: 5;
	}
	.child-8 {
		grid-row-start: 41;
		grid-row-end: 48;
		grid-column-start: 1;
		grid-column-end: 5;
	}
}

@media (min-width: 905px) {
	.lumpia-2 {
		max-height: 509px;
	}
}

@media (min-width: 957px) {
	h1 {
		font-size: 6rem;
	}
	.child-7 {
		grid-row-start: 26;
		grid-row-end: 41;
		grid-column-start: 3;
		grid-column-end: 5;
	}
	.child-8 {
		grid-row-start: 41;
		grid-row-end: 48;
		grid-column-start: 1;
		grid-column-end: 5;
	}
}

@media (min-width: 975px) {
	.child-6 {
		grid-row-start: 26;
		grid-row-end: 40;
		grid-column-start: 1;
		grid-column-end: 3;
	}
	.child-7 {
		grid-row-start: 26;
		grid-row-end: 40;
		grid-column-start: 3;
		grid-column-end: 5;
	}
	.child-8 {
		grid-row-start: 40;
		grid-row-end: 47;
		grid-column-start: 1;
		grid-column-end: 5;
	}
}

@media (min-width:990px) {
	.child-1 {
		grid-row-start: 1;
		grid-row-end: 10;
		grid-column-start: 1;
		grid-column-end: 3;
	}
	.decor-2 {
		display: block;
		object-fit: cover;
		grid-row-start: 10;
		grid-row-end: 12;
		grid-column-start: 1;
		grid-column-end: 3;	
		height: 5rem;
		margin: auto;
	}
}

@media (min-width: 1090px) {
	.child-8 {
		grid-row-start: 40;
		grid-row-end: 46;
		grid-column-start: 1;
		grid-column-end: 5;
	}
}