@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

body{
    font-family:'Source Sans Pro',sans-serif;
    line-height:1.6;
    color:#333;
    background:#faf9f7;
}

.hero{
    position:relative;
    height:60vh;
    background:url('../images/img8.jpg') center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
}

.hero .overlay{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.45);
}

.hero-content{
    position:relative;
    z-index:1;
}

.hero h1{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    margin-bottom:.5rem;
    letter-spacing:1px;
}

.hero p{
    font-size:1.2rem;
    font-weight:300;
}

#navbar{
    background:#333;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

#navbar a{
    color:#eee;
    padding:.8rem 1rem;
    text-decoration:none;
    font-size:1rem;
    transition:background .3s;
}

#navbar a:hover{background:#555}

.section{
    padding:4rem 8%;
}

.section h2{
    font-family:'Playfair Display',serif;
    font-size:2rem;
    margin-bottom:1.2rem;
    color:#222;
}

.bio p{
    margin-bottom:1rem;
}

blockquote{
    margin:2rem 0;
    padding-left:1rem;
    border-left:4px solid #c9a66b;
    font-style:italic;
    color:#555;
}

.gallery .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:15px;
}

.gallery img{
    width:100%;
    border-radius:6px;
}

.projects ul{
    margin-left:1.2rem;
}

.projects li{
    margin-bottom:.6rem;
}

.contact address{
    font-style:normal;
    line-height:1.4;
}

.note{
    margin-top:1rem;
    font-size:.9rem;
    color:#666;
}

footer{
    text-align:center;
    padding:2rem 1rem;
    background:#272727;
    color:#bbb;
    font-size:.85rem;
}