/*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;
margin-left: auto;
margin-right: auto;
max-width: 75em;
}
div.container { 
position: relative;
min-height: 100vh;
background-color:rgb(254,254,254);
}
/* >>> 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
background-color:rgb(255,18,18)
}
main { 
padding: 1.5rem 1.5rem 1.5rem;
}
img {
width: 100%; /*Please leave this line.*/
display: block;
}
header {
display: grid;
grid-template-columns: 50% auto;
background: rgb(205, 205, 205);
padding: 1.4rem 1.4rem;
}
h1 {
width: 15em;
text-align: left;  
}
h2, h3, h4 {
font-weight: bold;
}
h2 {
font-size: 2em;
margin: 0.5em 0 0.75em;
}
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;
}	
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;
margin-right: 0.5em;
margin-top: 1em;
}
nav ul li a {
color: rgb(255 253 84);
background-color: rgb(0, 35, 240);
padding: 0.3em;
text-decoration: none;
}
nav ul li.selected a{
background-color: rgb(255, 127, 0)
}
p.slogan {
font-size: 5em;
font-family: serif;
font-style: italic;
margin: 1em 0.5em 3em 0.5em;
color: rgb(0,0,0,);	
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 3rem; 
box-sizing: border-box;
padding: 1em 1em;
background: rgb(250 253 84);
text-align: left;
Font-size: 2em;
}
address {
color: rgb(255,127,0);
}
footer p {
margin: 0;
}
article {
background-color: rgb(0, 255, 255);
max-width: 40em;
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 60em) {
nav ul li{
display: inline;
font-size:1.5em;
}
body    {
background-color: rgb(245, 5, 5);
width: 80em; 
margin-left: auto; 
margin-right: auto; 
}
nav ul li.selected a {
color: rgb (255,255,255);
background-color: 240, 107, 30);