* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
    color: white;
    /* border: solid lime 1px; */
}

body { 
    height: 100vh; width: 100vw;
    font-family: "Open Sans";
}

h1, h2, h3 {font-family: 'Bricolage Grotesque'; text-align: center;}

header {
    background: 
        linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(33,31,36,0.8) 30%, rgba(33,31,36,0.8) 70%, rgba(0,0,0,0) 100%),
        url(/xeriscaping/images/succulents.webp);
    height: calc(30vh + 100px);
    padding-top: calc(15vh);
    background-size:cover;  
    text-align: center;
        
    /* & p, h1 {filter: drop-shadow(-2px 2px 2px hsl(157, 76%, 3%));} */
}
header p {font-size: clamp(1rem, 2vw, 3rem);}
header h1 {font-size: clamp(3rem, 5vw, 8rem);}
h2 {
    padding: 1rem 0;
    color: #211f24;
    font-size: clamp(1.5rem, 3vw, 6rem);}

.nav {
    list-style-type:none ;
    background-color: hsl(352, 31%, 35%);
    color: white;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.nav li {
    flex: 1 1 auto;
    text-align: center;
    padding: 1rem;
        @media (max-width: 768px) {
            text-align: left;
            flex-basis: 170px;}
}
.nav li:hover {background-color: #829689;}
.nav a {text-decoration: none;}

.card-container {
    margin: 0 1rem;
    display: flex;
    flex-flow: row wrap;
    gap: .5rem;
    justify-content: center;
}
.card {
    box-shadow: 0px 0px 26px 0px rgb(215, 212, 212, 0.35);
    padding: 0 1rem; margin: 1rem 0;
        & p {padding: .5rem 0; color: black;}
}
.card.services {
    background-color:white;
    text-align: center;
    width: clamp(250px, 30vw, 350px);
}

.card.services:hover{
    box-shadow: 0px 0px 26px 0px hsla(0, 4%, 24%, 0.35);
    transform: scale(1.02);}

#services-header {
    height: 40%;
        & h2 {font-size: clamp(18px, 24px, 48px);}
}
.card.review {
    width: clamp(250px, 30vw, 350px);
    flex-shrink: 0;flex-grow: 1;
}

.gallery {
    display: flex;
    flex-flow: row wrap;
    gap: .5rem;
    align-content: center; justify-content: center;
}
#galleryitem {
    width: clamp(200px, 30vw, 350px);
    overflow: hidden;
}
#galleryitem img {
    width: 100%; 
    aspect-ratio: 1/1;
    object-fit: cover;
}

#review-header {
    display: flex;
    flex-direction: row;
    padding: 1rem 0;
    align-items: center;
}
#img-mask {
    clip-path: circle(40% at 50% 50%);
}
#img-mask img {
    object-fit: cover;
    width: 100px; 
    aspect-ratio: 1/1;
    top: 10px;
}

#name {
    padding-left: 1rem;
    color: black;
    font-size:clamp(1.5rem, 2vw, 3rem);
}
#quote {
    padding-bottom: 1rem;
}