@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

body {
    background-color: #D0E5F7;
    font-family: 'Open Sans', sans-serif;
    margin: 0px;

}

h1 {
    place-content: center;
    font-size:6vw;
}
h2 {
    font-size:4vw;
}

.intro {
    justify-content: center;
    padding-left: 20%;
    padding-right: 20%;
    font-size: 1.5vw;
    display: grid;
    grid-template-columns: 1fr;
    padding-bottom: 6em;
    padding-top: 6em;
}

.intro h2 {
    font-size: 3vw;
}

/* .QA {
    max-width: 100%;
} */

.QA h1 {
    font-size: 2vw;
} 

.QA h2 {
    font-size: 1.5vw;
}


header {
    background-color: #F8D6D4;
    padding: 0%;
    margin: 0%;   
/*     align-items: center;
    height: 15vw;
    width: 100vw;
    justify-content: center; */
}

header nav {
    display: flex;
    justify-content: space-between;
    /* padding-right: 2em; */
}

header ul {
    list-style: none;
    display: flex;
    /* flex-wrap: wrap; */
    width: 40%;

}
header img {
    max-width: 100%;
}
.logo {
    padding: 20px;
    width: 140px;
}

.marble-image {
    background-image: url("../images/scaled_augustine-wong-li0iC0rjvvg-unsplash.png");
    /* background-color: #cccccc; */
    height: 425px;
    /* background-position: center; */
    background-repeat: no-repeat;
    background-size: cover;
    /* position: relative; */
    padding: 0 10%;
  }

  .marble-image h2, .marble-image h1 {
      font-family: 'Sacramento', cursive;
      text-align: center;
  }

.text {
    align-self: center;
}



ul {
    gap: 1em;
    padding: 0;
}
li {
    display: grid;
    align-content: center;
}

.split {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2em;
}



.split img {
    max-width: 100%;
}

.split1 {
    display: grid;
    grid-template-columns: 20% auto;
    gap: 2em;

}
.split1 img {
    max-width: 100%;
}

.contact {
    font-family: 'Open Sans', sans-serif;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

footer {
    background-color: #F8D6D4;
    padding: 20px;
}

.contact h2 {
    font-size: 1.5vw;
}
.contact p {
    font-size: 1vw;
}

div.bottom {
    display: grid;
    align-content: end;
}


p a {
    color:black;
}



.photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7em;
}
.photos img {
    max-width: 100%;
}

.photos h1 {
    font-size: 2.5vw;
    grid-column: span 2;
    justify-self: center;
}

figcaption {
    font-size: 1.5vw;
}



@media screen and (max-width: 900px) {
    .split {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .QA h1 {
        font-size: 18px;
    }

    .QA h2 {
        font-size: 13.5px;
    }

    img.marblefaq {
        display: none;
    }

    .split1 {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 3em 0;
    }

    .split img {
        width: 300px;
        justify-self: center;
    }
    .marble-image {
        height: 550px;
    }
    header ul {
        width: 60%;
    }
    .intro q {
        font-size: 13px;
    }
    
    .contact {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contact h2 {
        font-size: 12px;
    }

    .contact p {
        font-size: 9px;
    }

    .photos {
        display: grid;
        grid-template-columns: 1fr;
    }
    .photos h1 {
        grid-column: span 1;
        font-size: 23px;
    }
    figcaption {
        font-size: 14px;
    }

}


@media screen and (max-width: 700px) {
    header ul {
        width: 100%;
    }
    nav {
        flex-direction: column;
        align-items: center;
    }
    .logo {
        display: grid;
        justify-self: center;
        align-items: center;
    }
    .split h1 {
        font-size: 40px;
    }
    .split h2 {
        font-size: 27px;
    }

    .intro h2 {
        font-size: 21px;
    }

    .intro {
        padding-top: 13em;
    }

}