/* lobster-regular - latin */
@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';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lobster-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/lobster-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lobster-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lobster-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lobster-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lobster-v28-latin-regular.svg#Lobster') format('svg'); /* Legacy iOS */
}





html	{
	font-family: cambria, sans-serif;
	line-height: 1.5;
	color: ;
	font-size: 16px;
	font-style: italic;
	padding-top: 2rem;
	padding-bottom: 2rem;
		background-image: 
	linear-gradient(to bottom right, #ffe066, #408000);
}

body 	{
		max-width: 1500px;
			margin: 0 auto;
}



.hero-image	{
	background-image: url('images/alfredo-2.jpeg');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;	

	position: relative;
	background-position: center;

	border: 6px solid green;
	border-style: outset;


}

.hero-text	{
	text-align: center;

	/*font-family: Lobster; */
}


/*
.base	{					

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(4, 200px);	

	column-gap: 1rem;
	row-gap: 1rem;

	grid-template-areas: 'section' 'child-1' 'child-2'
	grid-row-start: 2;
	grid-row-end: 5;
}*/

section	{
	border: 6px solid green;
	border-radius: 60px 6px;
	border-style: outset;

	background-image: url('images/pasta.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;

	background-position: center;
}

.child-1	{
	grid-area: ;

	/*grid-column: 1/2;
	grid-row: ;*/
}

.child-2	{
	grid-area: ;
}

.child-3	{
	grid-area: ;
}

.child-4	{
	grid-area: ;
}



.pic	{
	align-items: center;
	justify-content: center;

	position: relative;
	left: 20px;
}

.logo	{
	width: 150px;
	border-radius: 10%;
	float: right;
	margin-right: 1rem;
}

.page 	{
	width: 300px;
	border-radius: 10%;
	float: left;
	margin-right: 1rem;
}

img 	{
	border: 6px solid gold;
	border-radius: 50%;
	border-style: double;
	width: 100%;

	display: block;
	margin: 0 auto;

	margin-top: 1rem;
	margin-left: 1rem;
	margin-bottom: 1rem;
}

.mp	{
	width: 400px;
}

.lp	{
	width: 200px;
	float: right;
	margin-right: 1rem;
	top: 20px;
}



h1	{
	font-size: 64px;
	text-align: center;
	color: #331a00;
	text-shadow: 0px 3px 10px #339933;
} 

p 	{
	width: 90%;
	padding-left: 1rem;
}

h3, h2, li	{
	padding-left: 1rem;
	text-shadow: 0px 2px 5px white;
}

li 	{
	padding-bottom: 1rem;
}



a:hover {
color: #444422;
text-shadow: 0px 2px #bbff99;
font-size: 105%;
transform: scale(1.5);
transition: border-color 0s, font-size 0.3s ease-out;
}

a {
text-decoration: none;
color: inherit;
transition: border-color 0s, font-size 0.3s ease-in;
}



@media (min-width: 300px)	{
	article p {
		column-count: 1;
		font-size: 16px;
	}

	h1 	{
		font-size: 39px;
	}
}

@media (min-width: 750px)	{
	article p {
		column-count: 2;
		font-size: 20px;
	}

	.container	{
		column-count: 2;
	}

	h1 	{
		font-size: 52px;
	}
}

@media (min-width: 900px)	{

	.base	{					

		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(5, 500px);	

		column-gap: 1rem;
		row-gap: 1rem;

		grid-template-areas: 'section' 'child-1' 'child-2'
		grid-row-start: 2;
		grid-row-end: 5;
	}

	.child-1	{
		grid-column: 1/2;
		grid-row: 1/4;
	}

	.child-3	{
		grid-column: 2/2;
		grid-row: 2/5;
	}

	.child-4	{
		grid-column: 1/2;
		grid-row: 4/6;
	}
/*
	.child-5	{
		grid-column: 1/2;
		grid-row: 1/4;
	}
*/
	article p {
		column-count: 3;
		font-size: 22px;
	}

	h1 	{
		font-size: 64px;
	}
}