/* CSS Styles */
*{font-family: 'Merriweather', serif;box-sizing: border-box;}
body{background-color: lavenderblush;
background-image: url(images/moroccan-flower\ copy.png) ; margin: 0;}
h1{font-size: 2.25rem;
    color: indigo;}
h2{font-size: 2.25rem;
    color: indigo;}
h3{font-size: 2.25rem;
    color: indigo;}
h4{font-size: 2.25rem;
    color: indigo;}
    h1{font-size: 2.5rem;
    color: indigo;}
p,ul,ol{font-size: 1.25rem; color: indigo;}

a:link{color:indigo; text-decoration:none ;}
a:hover, a:visited{text-decoration: underline;}

.Button a:link, .Button a:visited {
    color: indigo;
    border: indigo thin solid;
    padding: 10px 0;
    display: block;
    text-align: center;
    text-decoration: none;
}
.Button a:hover{border:#000 thin ; color:white; background-color: #000;}

header{background-color: #000; display:grid; grid-template-columns: repeat(12, 1fr); gap:10px; padding: 0 5% ; text-transform:uppercase; height:90px}

header h1 {grid-column: 1 / span 6; margin-top: 15px}

header h1 a:link,
header h1 a:hover,
header h1 a:visited
{color: lavenderblush; text-decoration: none;}

header nav {grid-column:7 / span 6}

header nav ul{text-decoration:none; display:flex; justify-content:flex-end; list-style-type:none ; padding:0; margin-top: 30px}
header nav li a:link, 
header nav li a:hover,
header nav li a:visited
{color: lavenderblush; text-decoration: none;font-size:1.5rem; padding:0 2rem}

.container {background-color: whitesmoke;width:90%; max-width:1000px; margin: 0 auto; padding: 35px 5% 0 5%}

.home{display:grid;grid-template-columns:repeat(12, 1fr);gap:10px}

.about{grid-column:1 / span 8; padding: 0 5% 2rem 0}

.photo{grid-column: 9 / span 4}

.work{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}



footer{text-align:center;padding:1.5rem;margin: .5rem 3.5rem;border-top:#000 solid thin;}
footer ul {display:flex;justify-content:center;list-style-type:none;margin:0;padding:0}

footer ul a {display:block;padding: 0 .5rem}