/*CSS DOCUMENT*/
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;} /*My edited version of the Eric Meyer’s reset tool. You may want to include this in all of your future CSS files. */
div.home-container { 
background: url(home-background.jpg) center center fixed;
background-size: cover;
position: relative;
min-height: 100vh;
}
div.container { 
position: relative;
min-height: 100vh;
}
/* >>> IMPORTANT: you have to change the wrap the content of your home page (index) in a div with a class home-container to make it work. If you used a div with the class container on your home, you’ll only need to change the name of the class.  */
body {
font-family: sans-serif
}
main { 
padding: 1.5em;
}
img {
width: 100%; /*Please leave this line.*/
display: block;
}
header {
display: grid;
grid-template-columns: 60% auto;
background: color rgb(205, 205, 205);
padding: 1.4rem 1.4rem;
}
h1 {
width: 40%;
padding: 3rem 100% 0;
background-color: grey;
text-align: left;  
}
h2, h3, h4 {
font-weight: bold;
font-family: serif;
}
h2 {
font-size: 2em;
margin: 1em 0 1em;
}
h3 {
font-size: 1.2em;
margin: 1em 0em 1em;
}
a {
text-decoration: none;
}
nav ul  {
text-align: right;
margin: 0.5em .2em;
text-transform: uppercase;
}
ul li 	{
list-style-type: none;
}
figure {
margin-bottom: 1.2em;
}
main.menu ul {
margin: 1em 0em;
display: grid;
}	
main.menu ul li {
margin: 0.75em 0.75em 0.75;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}	
p {
margin: 1em 0 0;
}
p.description {
grid-column: 1/3;
margin: 0em 0em 0.1em 0;
}
p.price {
grid-row: 1/2;
grid-column: 2/3;
color: rgb(233 55 40);
text-align: right;
margin: 0em;
}
nav ul li {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 1.5em;
text-decoration: none;
font-family: serif;
}
nav ul li a {
color: rgb(255 253 84);
background-color: rgb(0, 35, 240);
padding: 0.3em;
text-decoration: none;
}
p.slogan {
font-size: 5em;
font-family: serif;
font-style: italic;
margin: 1em 0.5em 3em 0.5em;
color: whitesmoke;	
}
footer {
position: bottom;
bottom: 0;
width: 100%;
height: 3rem; 
box-sizing: border-box;
padding: 1em 2em;
background: rgb(250 253 84);
text-align: left;
Font-size: 2em;
}
address {
color: orange;
}
footer p {
margin: 0.2em;
}