nav {
    font-size: large;
    background-color: #322e33;
    padding-right: 1%;
}
header {
    background: #e9f3f6;
    background-image: linear-gradient(to bottom, transparent, #090302),
        url(./images/backgrounds/raspberrySpoon.jpg);
    background-size: cover;
    height: 110vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    position: relative;
}
header h1 {
    font-size: 10rem;
    text-shadow: 10px 10px 10px black;
    font-family: "Lobster", cursive;
}
header h2 {
    text-shadow: 10px 10px 10px black;
    font-size: 3rem;
}
header img {
    filter: invert(100);
    position: absolute;
    bottom: 0;
    margin-bottom: 7%;
}
main {
    padding: 5% 1%;
    background-image: linear-gradient(to bottom, #090302, transparent),
        url(./images/backgrounds/pexels-photo-3705687.jpg);
    background-size: contain;
}
.about h1,
.products h1 {
    color: black;
    font-size: 6rem;
    font-family: "Fleur De Leah", cursive;
}
.gallery h1,
.contact h1 {
    text-align: center;
    color: #e9f3f6;
    font-size: 8rem;
    text-shadow: 10px 10px 10px black;
    font-family: "Lobster", cursive;
    font-family: "Fleur De Leah", cursive;
}
.about {
    text-align: center;
    background-image: url(./images/exterior/outdoorProduce_cropped.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    /* border-radius: 30px; */
    height: 90vh;
    display: flex;
    /* flex-direction: column;
    align-content: center; */
    justify-content: center;
    /* border: 5px solid #276275; */
    /* margin: 2%; */
    margin-bottom: 5vh;
}
.aboutMessage {
    text-align: center;
    align-self: center;
    font-size: large;
    margin: 6%;
    border-radius: 30px;
    padding: 2%;
    background: white;
    width: 80%;
    border: 5px solid #cf923a;
    box-shadow: 10px 10px 10px black;
}
.map {
    display: flex;
    justify-content: center;
    align-items: center;
}
iframe {
    border: 5px solid #cf923a;
    width: 90%;
    height: 500px;
    border-radius: 30px;
}
.contact {
    margin: 7vh 0vh 15vh 0vh;
}
.contact h3 {
    text-align: center;
}
.contactItems {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}
.contactSection {
    text-align: center;
    margin: 4%;
    padding: 2% 0% 2% 0%;
    border: 5px solid #cf923a;
    border-radius: 30px;
    background: #efefef;
}
label {
    font-size: 1.5rem;
    font-weight: bold;
}
.contactButton {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0% 20% 0% 20%;
}

.products {
    background-color: white;
    border: 5px solid #cf923a;
    margin: 0 10% 15vh 10%;
    padding: 5%;
    text-align: center;
    box-shadow: 10px 10px 10px black;
}
.products h2 {
    font-family: "Fleur De Leah", cursive;
    text-decoration: underline;
    font-size: 3rem;
}
.productHeader,
.productFooter {
    background: white;
    position: relative;
    border: 5px solid #276275;
    box-shadow: 10px 10px 10px black;
    margin: 20px;
    padding: 2%;
}
#productEnd {
    text-decoration: none;
}
.gallery img {
    filter: multiply;
}

/* open source button from https://uiverse.io/adamgiebl/new-bird-34 */
.cssbuttons-io-button {
    background: #276275;
    color: white;
    font-family: inherit;
    padding: 0.35em;
    padding-left: 1.2em;
    font-size: 17px;
    font-weight: 500;
    border-radius: 0.9em;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em #714da6;
    overflow: hidden;
    position: relative;
    height: 2.8em;
    padding-right: 3.3em;
    width: 18rem;
}
.cssbuttons-io-button .icon {
    background: white;
    margin-left: 1em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2em;
    width: 2.2em;
    border-radius: 0.7em;
    box-shadow: 0.1em 0.1em 0.6em 0.2em #276275;
    right: 0.3em;
    transition: all 0.3s;
}
.cssbuttons-io-button:hover .icon {
    width: calc(100% - 0.6em);
}
.cssbuttons-io-button .icon svg {
    width: 1.1em;
    transition: transform 0.3s;
    color: #276275;
}
.cssbuttons-io-button:hover .icon svg {
    transform: translateX(0.1em);
}
.cssbuttons-io-button:active .icon {
    transform: scale(0.95);
}

@media only screen and (max-width: 500px) {
    main {
        padding: 0%;
        margin: 0%;
    }
    .aboutMessage {
        width: 100%;
    }
    .contact {
        padding: 0%;
        margin: 0%;
    }
    header h1 {
        font-size: 5rem;
    }
    iframe {
        height: 40%;
    }
    .contactItems {
        display: block;
    }
    .about {
        margin-top: 0;
        height: 120%;
    }
    .contactButton {
        margin: 0;
        padding: 2%;
        flex-direction: column;
        align-items: center;
    }
    .contactButton button {
        margin: 2%;
        width: 20rem;
        font-size: 1.1rem;
    }
    .contactButton label {
    }
    .about h1,
    .products h1,
    .gallery h1,
    .contact h1 {
        font-size: 4rem;
    }
}

@media only screen and (max-width: 1200px) {
    .aboutMessage {
        width: 100%;
    }
    .contact {
        padding: 0%;
        margin: 0%;
    }
    header h1 {
        font-size: 5rem;
    }
    iframe,
    .map {
        height: 40vh;
        width: 90%;
        margin: 0% 3% 0% 3%;
    }
    .contactItems {
        display: block;
    }
    .about {
        margin-top: 0;
        padding: 5%;
        height: 120%;
    }
    .contactInfo {
        width: 100%;
    }
    .contactButton {
        margin: 0rem 5rem 0rem 5rem;
        padding: 2%;
    }
    .contactButton button {
        margin: 2%;
        width: 20rem;
        font-size: 1.1rem;
    }
    .contactButton label {
    }
    .about h1,
    .products h1,
    .gallery h1,
    .contact h1 {
        font-size: 4rem;
    }
}

@media only screen and (max-width: 1650px) {
    .about {
        margin-top: 0;
        padding: 5%;
        height: 120%;
    }
    .contactButton {
        margin: 0rem 3rem 0rem 3rem;
        padding: 2%;

        justify-content: space-between;
    }
    .contactButton button {
        margin: 2%;
        width: 20rem;
        font-size: 1.1rem;
    }
    .contactButton label {
    }
    .about h1,
    .products h1,
    .gallery h1,
    .contact h1 {
        font-size: 4rem;
    }
}