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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Georgia, serif;
    color:#2d2d2d;
    background:white;
    line-height:1.6;

}

header{

    position:absolute;
    inset:0;
    height:100vh;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    color:white;

    z-index:2;

}

h1{

    font-size:clamp(54px,8vw,96px);

    font-weight:400;

    letter-spacing:2px;

    text-shadow:
    0 4px 18px rgba(0,0,0,.45);

}

.subtitle{

    margin-top:18px;

    font-size:18px;

    font-style:italic;

    opacity:.95;

    text-shadow:
    0 2px 8px rgba(0,0,0,.5);

}

.hero{

    height:100vh;

    background-image:
        linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),
        url("hero-image.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.about{

    max-width:760px;

    margin:auto;

    padding:90px 30px;

}

.about h2{

    font-size:34px;

    margin-bottom:24px;

    font-weight:400;

}

.about p{

    font-size:20px;

}

.contact{

    background:#f7f7f7;

    text-align:center;

    padding:80px 30px;

}

.contact h2{

    font-size:32px;

    font-weight:400;

    margin-bottom:24px;

}

.contact p{

    font-size:20px;

}

footer{

    padding:50px 30px;

    text-align:center;

    color:#666;

    font-size:14px;

    max-width:900px;

    margin:auto;

}

footer p:first-child{

    margin-bottom:18px;

}