@import url('https://fonts.googleapis.com/css2?family=Lora&family=Poppins:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    font-family: Lora, sans-serif;
    font-weight: 300;
    color: #3a3a3a;
    background-color: white;
}

p {
    font-size: 1.25em;
}

/* headings and logo */

h1,
h2,
h3 {
    font-family: Poppins, sans-serif;
    color: #3a3a3a;

}

#logo {
    float: left;
    font-size: 150%;
    color: #5b8030;
    margin-left: 20px;
    text-transform: lowercase;

}

/* navigation links */

#menu {
    display: flex;
    font-size: 1.5vw;
    float: right;
    margin-left: 10px;
}

#menu,
#logo {
    line-height: 75px;

}

#menu li {
    display: inline;
    float: left;
    list-style-type: none;
    margin: 0 2vw;
}

#menu a {
    text-decoration: none;
    color: inherit;

}

/* style mouse hover and active menu link */

#menu a:hover {
    border-bottom: 1px solid #3a3a3a;
    background-color: #8bc34a;
}

.active {
    border-bottom: 1px solid #3a3a3a;

}

/* hero image and cover text*/

#hero-outer {
    height: 600px;
    width: 100%;
    overflow: hidden;
    position: relative;

}

#cover-text,
#sourdough-cover-text,
#about-us-cover-text,
#our-bakes-cover-text,
#contact-cover-text {
    font-size: 100%;
    font-family: Poppins, sans-serif;
    color: #252525;
    text-align: center;
    align-content: center;
    width: 300px;
    height: 100px;
    padding-top: 40px;
    padding-left: 10px;
    background-color: rgba(139, 195, 74, .7);
    bottom: 100px;
    right: 30px;
    position: absolute;

}

/* change headings over green in text boxes to black for contrast */

.covertext h2 {
    color: #252525;
}

/* hero image */

#hero-image {
    height: 600px;
    width: 100%;
    background: url(../images/hero-image1.jpg) no-repeat center center;

    /* animates zoom on loading page */

    animation-name: hero-zoom;
    animation-duration: 10s;
    animation-fill-mode: forwards;

}

/* creates level of zoom for hero animation */

@keyframes hero-zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* welcome section on home page */

#welcome-text {
    box-sizing: border-box;
    font-size: 100%;
    border: 2px solid #5b8030;
    border-radius: 20px;
    text-align: center;
    width: 90vw;
    height: 520px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    padding-top: 40px;
    padding-left: 10px;

}

#welcome-text h2 {
    padding-top: 20px;
    padding-bottom: 20px;

}

#review-text {
    box-sizing: border-box;
    border: 2px solid none;
    background-color: rgb(91, 128, 48, .5);
    border-radius: 20px;
    font-size: 100%;
    font-family: Poppins, sans-serif;
    text-align: center;
    width: 50vw;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    padding-left: 10px;
    position: relative;

}

#review-text h3 {
    font-style: italic;
}

#welcome-text h2 {
    padding-top: 40px;
    padding-bottom: 20px;
}

/* snapshot of products section */

#snapshot_section {
    display: flex;
    flex-direction: row;

    justify-content: center;

    text-align: center;
}

.snapshot {
    margin: 4%;
}

/* snapshot images */

.snapshot>img {
    border-radius: 20px;
    text-align: center;
    max-width: 100%;
    height: auto;
}

/* Link to Our Bakes page */

/* remove default underline */

#view_link a {
    text-decoration: none;
}

#view_link h3 {
    color: #5b8030;
    font-size: 100%;
    text-align: center;
}

/* back to top arrow */

.back-to-top a {
    color: #5b8030;
    font-size: 150%;
    text-decoration: none;
}

.back-to-top {
    text-align: right;
    margin-right: 10px;
    color: #5b8030;
}

/* footer */

footer {
    display: flex;
    flex-direction: row;
    height: 150px;
    padding-top: 15px;
    margin-top: 10px;
    border-top: solid 4px rgb(91, 128, 48, .5);
}

#address-block {
    width: 20%;
    padding-top: 15px;
    text-align: center;
    margin: auto;
    font-size: 75%;
}

#address-block>a {
    text-decoration: none;
}

#footer_logo h3 {
    color: #5b8030;
}

/*social media icons*/

.social-networks {
    width: 80%;
    text-align: center;
}

.social-networks>li {
    display: inline;
    padding-top: 5%;
}

.social-networks i {
    font-size: 160%;
    margin: 1%;
    padding: 3%;
    color: #3a3a3a;
}


/* About page*/

/* Main banner image with text overlay */

#about-us-outer {
    height: 600px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#bakery-image {
    height: 600px;
    width: 100%;
    background: url(../images/bakery.jpg) no-repeat center center;
}

/* About Sourdough section image */

#sourdough-image {
    height: 600px;
    width: 100%;
    background: url(../images/sourdough.jpg) no-repeat center center;
}

#about-sourdough-outer {
    height: 600px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* remove default underline from link to products page */

article a {
    text-decoration: none;
}

.about-text {
    width: 75%;
    font-size: 100%;
    margin: auto;
    padding-top: 40px;
    padding-left: 10px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.about-text p {
    margin-top: 1em;
    padding: 1em;
}

.about-text h2,
h3 {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Our Bakes page */

.our_bakes h3 {
    color: #5b8030;
}

/* main image */

#our-bakes-outer {
    height: 600px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#loaves-image {
    height: 600px;
    width: 100%;
    background: url(../images/loaves.jpg) no-repeat center center;
}



/* images of produce gallery and text */

#our_bread_text,
#our_sweet_text {
    text-align: center;
    margin: 2em;
    padding: 1em;
    line-height: 1.25em;
}

.our-bread-text p {
    padding: 1em;
    line-height: 1.25em;
}

.our_bakes1>img {
    border-radius: 20px;
    text-align: center;
    width: 100%;
    height: auto;
}

.our_products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-evenly;
}

.our_bakes1 {
    align-items: center;
    text-align: center;
    padding: 2%;
    width: 25%;
}


.our_sweet_bakes>img {
    border-radius: 20px;
    text-align: center;
    width: 100%;
    height: auto;
}

.our_sweet_bakes {
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    padding: 2%;
    width: 25%;
}

/* link to contact us form page */

#contact_us_link {
    text-align: center;
}

#contact_us_link a {
    color: #5b8030;
    text-decoration: none;
}

/*Contact Us page*/

/* main image */

#contact-us-outer {
    height: 600px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#dough-image {
    height: 600px;
    width: 100%;
    background: url(../images/dough.jpg) no-repeat center center;
}

/* Form adapted from w3 schools contact form*/

.text-input,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical
}

.submit-button {
    background-color: gray;
    color: whitesmoke;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
}

.submit-button:hover {
    background-color: #45a049;
}


.contact_us_form {
    border-radius: 5px;
    background-color: rgba(139, 195, 74, .8);
    padding: 20px;
    width: 50%;
    margin: 10% auto;
}

/* Media Queries */

/* For large to medium size screens */

@media screen and (max-width: 1200px) {
    #menu {
        font-size: 18px;
    }
}

/* For medium screen sizes from 950px wide and down */
@media screen and (max-width: 950px) {

    .our_bakes1,
    .our_sweet_bakes {
        width: 33%;
    }

    footer {
        flex-direction: column;
    }

    #address-block {
        width: 100%;
    }

    .social-networks {
        width: 80%;
        text-align: center;
        font-size: x-small;
        justify-content: center;
        margin: auto;
    }

    #address-block {
        font-size: 50%;
    }

    .contact_us_form {
        width: 75%;
    }
}

/* For small screen sizes from 576px wide and down */

@media screen and (max-width: 576px) {

    #menu {
        font-size: 16px;
        margin-left: 0;
        margin-right: 30px;
        line-height: 45px;
    }

    #logo {
        margin-left: 30px;
    }

    #snapshot_section {
        display: flex;
        flex-direction: column;
    }

    .snapshot>img {
        width: 50vw;
        height: 50%;
    }

    .our_products {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .our_bakes1,
    .our_sweet_bakes {
        width: 50%;
        font-size: 3vw;
    }

    #address-block {
        font-size: 50%;
    }

    .about-text p {
        text-align: justify;
        width: 90%;

    }

    #contact_us_link {
        text-align: center;
    }

    /* recentre banner images on all pages for better image on small screens*/

    #hero-image {
        height: 600px;
        width: 100%;
        background: url(../images/hero-image1.jpg) no-repeat center bottom;
    }

    #bakery-image {
        height: 600px;
        width: 100%;
        background: url(../images/bakery.jpg) no-repeat center bottom;
    }

    #loaves-image {
        height: 600px;
        width: 100%;
        background: url(../images/loaves.jpg) no-repeat center bottom;
    }

    #dough-image {
        height: 600px;
        width: 100%;
        background: url(../images/dough.jpg) no-repeat center bottom;
    }

}

/* For small screen sizes from 576px wide and down */

@media screen and (max-width: 350px) {
    #menu {
        font-size: 15px;
    }

}