/*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;} 


div.home-container { 
	background: url(home-background.jpeg) center center fixed;
	background-size: cover;
	position: relative;
	min-height: 100vh;
	width: 100%;
}

div.container { 
	position: relative;
	min-height: 100vh;
    background-color: rgb(222, 222, 222); 
	width: 100%;
}

body {
    font-family: sans-serif;
    background-color: rgb(0, 0, 0); 
}

/* >>> IMPORTANT: you have to change the wrap of 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. And you need a div with the class container and all the other pages.  */

main { 
	padding: 2em 2em 5em;
	}

img {
    width: 100%; /*Please leave this line.*/
     display: block;
}

header {
	display: grid;
	grid-template-columns: auto 1fr; 
	background: rgb(0, 0, 0);
	padding: 1em 1em;
    align-items: center;
	}

h1 {
	width: 17em; 
	}

h2 {
	font-family: veneer-three, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	font-size: 3em;
	color: rgb(130, 0, 0);
	}

h3 {	
	font-family: mr-darcy, sans-serif;
	font-weight: 600;
	font-size: 1.5em;
	
}

h4 {
	font-family: capellina-caps, serif;
    font-weight: 700;
    font-style: normal;
	font-style: normal;
	font-size: 1.5em;
}

a {
	text-decoration: none;
	}

nav ul  {
	text-align: right;
	}
	
ul li 	{
	list-style-type: none;
}

figure {
	margin-bottom: 2em;
}

.page {
	margin-left: 0em;
	margin-right: 0em;
}	

.pagetext {
	margin-top: 1em;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.image-container {
    width: 100%;
    aspect-ratio: 1.50/1;
    overflow: hidden; 
}

.image-container img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center; 
}

p {
	margin: 0em 0em 1em; 
	font-family: "filosofia-grand", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2em;
	}
	
p.description {
	grid-column: 1 / 3;
	margin: 0;
	}
	
p.price {
	grid-row: 1;
	grid-column: 2;
	color: rgb(0, 0, 0);
	font-family: wausau, sans-serif;
    font-weight: 400;
    font-style: normal;
	text-align: right;
	margin: 0;
	}

nav ul li {
    font-family: veneer-three, sans-serif;
    font-weight: 400;
    font-style: normal;
	text-transform: uppercase;
    font-size: 1em;
    padding: 0;
    margin: 0 0 0 0; 
}

nav ul li a {
    color: rgb(250, 250, 250);
    background-color: transparent;
    border: 2px solid rgb(130, 0, 0);
    padding: 0.5em 0.8em;
    display: inline-block;
    margin-top: 1em;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

nav ul li a:hover, nav ul li.selected a:hover {
    background-color: rgb(130, 0, 0);
    color: rgb(0, 0, 0);
    border-color: rgb(130, 0, 0);
    text-decoration: none;
    transform: translateY(-0.1em);
}

nav ul li.selected a { 
    background-color: rgb(130, 0, 0);
    color: rgb(0, 0, 0);
    border-color: rgb(130, 0, 0);
    text-decoration: none;
}

p.slogan {
	font-family: "kiln-serif", sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 3em;
	margin: 1em 0em 1em 0em;
	color: rgb(130, 0, 0);	
	text-shadow: 0.04em 0.04em 0.08em rgba(0, 0, 0, 0.8);
	}
	
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5rem; 
    box-sizing: border-box;
    padding: 1em 1em;
    background: rgb(0, 0, 0);
    color: rgb(250, 250, 250);
}

address.home, address.number, .home {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: 1em;
    padding: 0.5em 1em;
    margin-bottom: 1em;
    background: rgba(0, 0, 0, 0.7); 
    color: rgb(222, 222, 222);
    border-radius: 0.5em;
    border: none;
    box-shadow: 0 3em 4em rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

address.home a, address.number a, .home a {
    color: inherit;
    text-decoration: none;
}

address.home, .home{
    width: 20em;
}

address.number {
    width: 7em;
}

address.home:hover, address.number:hover, .home {
    background: rgba(0, 0, 0, 0.85); 
    transform: translateY(-0.5em);
    box-shadow: 0 2em 4em rgba(0, 0, 0, 0.9);
}

a {
	color: rgb(255, 255, 255);
}

footer p {
	margin: 0;
	text-align: left;
}

main.menu ul li {
	margin: 1em 0em 1.5em;
	padding: 1em; 
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid rgb(0, 0, 0); 
    border-radius: 10px; 
    cursor: pointer;
}	

main.menu ul li h4, 
main.menu ul li .price {
    transition: transform 0.3s ease, color 0.3s ease; 
	color: rgb(130, 0, 0); 
}

main.menu ul li .description {
    transition: transform 0.3s ease, color 0.3s ease; 
	color: rgb(0, 0, 0); 
}

main.menu ul li:hover {
    background-color: rgba(130, 0, 0); 
    box-shadow: 0 1em 2em rgba(0, 0, 0, 0.9); 
}

main.menu ul li:hover h4, 
main.menu ul li:hover .description, 
main.menu ul li:hover .price {
	color: rgb(255, 255, 255); 
}

.home-actions {
    display: flex;
    flex-direction: column;
	flex-wrap: wrap; 
    align-items: center;
    gap: 1em;
    margin-left: 0em;
    margin-top: 2em;
	margin-bottom: 6em;
    width: fit-content;
}

.cta-btn {
    display: inline-block;
    padding: 0.8em 1.5em;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgb(130, 0, 0);
    color: rgb(250, 250, 250);
    text-decoration: none;
    font-family: "veneer-three", sans-serif; 
    text-transform: uppercase;
    font-size: 1.2em;
    transition: all 0.3s ease;
    border-radius: 4px;
    box-shadow: 0 2em 4em rgba(0,0,0,0.9);
    text-align: center;
}

.cta-btn:hover {
    background-color: rgb(130, 0, 0);
    color: rgb(0, 0, 0);
    transform: translateY(-0.2em);
    box-shadow: 0 5em 4em rgba(0, 0, 0, 0.8);
    text-decoration: none;
}

.contact-actions {
    margin-left: auto; 
    margin-right: auto;
    padding: 0em;
    gap: 1.5em;
    margin-bottom: 2em;
}

.map-btn, .phone-btn, .email-btn {
    display: block; 
    padding: 1.5em;
    background-color: rgb(222, 222, 222);
    border: 3px solid rgb(0, 0, 0);
    border-radius: 8px;
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
	padding: 2em;
    flex: 1 1 0; 
}

.map-btn a, .phone-btn a, .email-btn a {
    color: rgb(0, 0, 0);
    display: block;
}

.map-btn h4, .phone-btn h4, .email-btn h4 {
    font-family: veneer-three, sans-serif;
    text-transform: uppercase;
    font-size: 1.1em;
    color: rgb(130, 0, 0);
    margin-bottom: 0.2em;
}

.map-btn p, .phone-btn p, .email-btn p {
    font-family: wausau, sans-serif;
    font-size: 1.1em;
    margin: 0;
    color: rgb(0, 0, 0);
}

.map-btn:hover, .phone-btn:hover, .email-btn:hover {
    background-color: rgb(130, 0, 0);
    border-color: rgb(0, 0, 0);
    transform: translateY(-0.2em);
    box-shadow: 0 0.8em 1.5em rgba(0, 0, 0, 0.5);
}

.map-btn:hover a, .phone-btn:hover a, .email-btn:hover a,
.map-btn:hover h4, .phone-btn:hover h4, .email-btn:hover h4,
.map-btn:hover p, .phone-btn:hover p, .email-btn:hover p {
    color: rgb(255, 255, 255); 
}

.hours-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em 1em;
    margin-top: 1em;
	margin-bottom: 5em;
}

.hours-list dt {
    grid-column: 1 / 2;
    font-family: capellina-caps, serif;
    font-weight: 700;
    font-size: 1.5em;
    color: rgb(130, 0, 0);
}

.hours-list dd {
    grid-column: 2 / 3;
    text-align: right;
    font-family: "filosofia-grand", serif;
    font-size: 1.2em;
    color: rgb(0, 0, 0);
}

.social-links {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5em; 
    margin-top: 1em;
	margin-bottom: 2em;
    justify-content: flex-start; 
}

.social-links a {
    font-size: 2.5em; 
    color: rgb(130, 0, 0); 
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 0; 
    background: transparent; 
    border: none; 
    box-shadow: none; 
    text-align: center;
}

.social-links a:hover {
    color: rgb(0, 0, 0); 
    transform: scale(1.1) translateY(-0.1em); 
    background: transparent;
    box-shadow: none;
}

.social-links-home {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2em; 
    margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
    justify-content: flex-start; 
}

.social-links-home a {
    font-size: 2.5em; 
    color: rgb(130, 0, 0); 
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 0; 
    background: transparent; 
    border: none; 
    box-shadow: none; 
    text-align: center;
}

.social-links-home a:hover {
    color: rgb(255, 255, 255); 
    transform: scale(1.1) translateY(-0.1em); 
    background: transparent;
    box-shadow: none;
}

.socials-block h3 {
    margin-bottom: 0.5em; 
}


@media screen and (min-width: 60em) {
    
	div.home-container { 
	    background: url(home-background.jpeg) left top fixed;
	    background-size: cover;
	}

    div.container, div.home-container {
        margin: 0 auto; 
    }

    nav ul li {
        display: inline;
        margin-left: 1em;
		font-size: 1.5em;
    }

	.page {
		margin-left: 4em;
		margin-right: 4em;
	}	

    main.menu ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2em; 
    }

	h1 {
		width: 15em; 
	}

	.pagetext {
		width: 50%;
	}

	footer {
		height: 3rem;
	}
	p.slogan {
		margin: 1em 0.65em 1em 0.65em;
		font-size: 4.5em;
	}

	.home-actions {
        flex-direction: row; 
		margin-left: 3em;
    }

	.social-links-home {
		margin-left: 0em;
		margin-right: 1em;
	}
    
    .cta-btn {
        font-size: 1.4em; 
    }

	main { 
	    padding: 2em 10em 5em;
	}

	.map-btn h4, .phone-btn h4, .email-btn h4 {
		font-size: 1.5em;
	}

    .image-container {
        aspect-ratio: 2.35/1;
}

}