/*main page loadout*/

        body {
    height: 100vh;

    width: 100vw;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #f1e3db;
    overflow: auto;
    overflow-x: hidden;
}
        main {
    width: 100%;
    height: 100%;
}

    /*banner baground/image*/

        body #banner-background {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: auto;
    display: flex;
    background-color: #ca5f59;
}
        #banner-background img {
    display: flex;
    position: relative;

    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 80px;
}

    /*main styles/Layout for nav and logo image*/

        body #foot,
        body #menu {
    background-color: #f1e3db;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: auto;

    left: 0;
}

    /*the top nav layout*/

        body #menu > #nav {
    margin-left: auto;

    text-align: right;
    height: auto;
    width: auto;
}
        #nav #top {
    display: flex;
    white-space: nowrap;
    width: auto;
    height: auto;
    padding-bottom: 7px;
}

    /*top nav text styling*/

        #top #home,
        #top #pricing,
        #top #how-its-made {
    padding: 0.2em;
    margin: 1px;
    /*used calc to have text at consist sized*/
    font-size: calc(120% + 1vw);
    text-decoration: none;
    border: solid 2px black;
    border-radius: 25px;
}

    /*the bottom nav layout for footer*/


        body #foot > #foot-nav {
    height: auto;
    flex-grow: 9;

    text-align: center;
    padding-bottom: 7px;
    padding-top: 7px;
}
        #foot-nav #bottom-nav {
    white-space: nowrap;
    width: auto;
    height: auto;
}

    /*bottom nav text styling*/

        #bottom-nav #Location,
        #bottom-nav #contact,
        #bottom-nav #Wholesale {
    padding: 0.2em;
    /*used calc to have text at consist sized*/
    font-size: calc(120% + 1vw);
    text-decoration: none;
    border: solid 2px black;
    border-radius: 25px;
}

    /*copyright styling for footer*/

        #foot #copyright {
    display: flex;
    color: #f1e3db;
    justify-content: center;
    background-color: #ca5f59;
    position: relative;
    text-align: center;
    width: 100%;
    height: auto;
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

        /*other formating*/



    /*page title formating*/

        #location-page-title,
        #contact-page-title,
        #Wholesale-page-title {
    text-indent: 5%;
    background-color: #ca5f59;
    color: #f1e3db;
    /*used calc to have text at consist sized*/
    font-size: calc(100% + 3vw);
}

    /*nav hover interaction and style*/

        a:hover {
    background-color: #f1e3db;
    color: #ca5f59;
}
        a {
    background-color: #ca5f59;
    color: #f1e3db;
}

    /*logo image layout and sizing*/

        #foot #logo-foot-image,
        #menu #logo-image {
    width: 8em;
    height: auto;

    position: relative;
}

    /*disabled list formating*/

        li {
    list-style: none;
}

    /*Universal styleing*/

        * {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
}

/*social media styling and image for footer and contact page*/

    /*footer social media box*/

        #social {
    background-color: #ca5f59;
    display: flex;
    position: relative;
    flex-direction: row;

    min-height: fit-content;
    align-items: center;
    color: #f1e3db;
    flex-grow: 1;
    justify-content: space-evenly;
    height: auto;
    min-width: 200px;
}

    /*image icon styling for social and nav*/

        #youtube-icon,
        .youtube-icon,
        #X-icon,
        .X-icon,
        #facebook-icon,
        .facebook-icon {
    width: 50px;

    height: auto;
}

    /*social link styling disabled*/

        #youtube,
        .youtube {
    background-color: transparent;

    text-decoration: none;
}
        #facebook,
        .facebook {
    background-color: transparent;

    text-decoration: none;
}
        #X,
        .X {
    background-color: transparent;

    text-decoration: none;
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

    /*webpage css styled and layout*/

        /*How its made page*/

    /*how its made page layout*/

        #how-its-made-page {
    background-color: #ca5f59;
    padding: 1.2em;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 29px;
    border: 5px dashed #f1e3db;
    width: 100%;
    height: 100%;
    min-height: fit-content;
    max-width: 75%;
    color: #f1e3db;
    align-self: center;
}

    /*how its made text formating/styling*/

        #how-its-made-page #text-howitsmade {
    max-width: 500px;
    min-width: 50%;
    width: auto;

    word-wrap: break-word;
    height: auto;
    text-align: left;
}
        #text-howitsmade ol > li {
    text-shadow: 1px 1px 2px black;
    font-size: large;
}
        #text-howitsmade ol {
    padding-bottom: 5px;
}

    /*how its made youtube video styling and layout*/

        #how-its-made-page #video-center {
    min-width: 50%;
    max-width: 500px;
    width: 100%;
    text-align-last: center;
    height: auto;
}
        #video-center #youtube-video {
    width: 100%;
    min-width: 50%;
    aspect-ratio: 8/5;
    height: 100%;
    border: none;
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

        /*home page*/

    /*home page layout and image*/

        #home-page {
    display: flex;
    background-image: url(images/home-hero.jpg);
    background-size: cover;
    height: 100%;
    width: auto;
    justify-content: center;
    align-items: center;
}

    /*home page text box styling and layout*/

        #home-page #text-box-home {
    background-color: rgba(202, 95, 89, 0.83);
    padding: 0.8em;
    border-radius: 29px;
    text-align: center;
    width: 70%;
    height: fit-content;
    margin: 10px;

    color: #f1e3db;

    border: 5px dashed #f1e3db;
    text-shadow: 1px 1px 2px black;
}
        #home-page #text-box-home > ol > li {
    font-size: 1em;
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

        /*pricing page*/

    /*pricing page layout*/

        #pricing-page {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    margin: auto;

    width: 90%;
    height: auto;

    padding: 15px;
}

    /*pricing card/text boxes layout and styling*/

        #pricing-1-box,
        #pricing-2-box {
    position: relative;
    width: 50%;
    max-width: 400px;
    height: 100%;

    padding: 0;
    background-color: #ca5f59;
    word-wrap: break-word;
    border: 5px dashed #f1e3db;
    color: #f1e3db;
    text-align: center;
}

    /* header text box for pricing cards*/

        .price-weight-box {
    background-color: #ca5f59;
    word-wrap: break-word;
    border: 5px solid#f1e3db;
    height: auto;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    text-align: center;
}

    /*pricing image for pricing cards*/

        .price-pic {
    background-image: url(images/home-hero.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 0;
    padding-bottom: 150px;
    width: 100%;
    height: auto;
    border-bottom: 5px solid;
    border-color: black;
    text-align: left;
}

    /*pricing text styles*/

        .price {
    /*used calc to have text at consist sized*/
    font-size: calc(100% + 1vw);
    text-align: center;
    margin-right: 2%;
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

        /*contact page*/

    /*contact page layout*/

        #contact-page {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
    height: auto;

    width: 100%;
}

    /*contact page table layout/sizing*/

        table {
    position: relative;
    width: 100%;
    height: 70vh;
}
        #table {
    width: 100%;
    height: fit-content;

    margin-left: auto;
    margin-right: auto;
}

    /*table heading/discription styling and sizing*/

        th {
    background-color: #ca5f59;
    color: #f1e3db;
    width: 30%;
    font-size: large;
    text-align: center;
    height: 30%;
}
        td {
    background-color: #ca5f59;
    color: #f1e3db;
    width: 70%;
    height: 30%;
    font-size: large;
    text-align: center;
    white-space: nowrap;
    padding-left: 2px;
    padding-right: 2px;
}

    /*table heading stylings*/

        .contact-page-heading {
    background-color: #ca5f59;
    color: #f1e3db;
    /*used calc to have text at consist sized*/
    font-size: calc(100% + 2vw);
    text-shadow: 1px 1px 2px black;
}

    /*table discription stylings off unless on mobile*/

        .subheading-mobile {
    display: none;
}

    /*table discription links off unless on mobile*/

        .subheading-mobile a {
    text-decoration: none;
}

    /*table discription stylings when on desktop/tablet*/

        .desktop {
    display: inline;
    /*used calc to have text at consist sized*/
    font-size: calc(100% + 1vw);
    text-shadow: 1px 1px 2px black;
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

        /*location page*/

    /*#location-page{placeholer id if needed}*/

    /*map container*/

        #location-map {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
}

    /*google map styling*/

        #map {
    height: 100%;
    width: 100%;
    max-width: 80%;
    min-height: 450px;
    border: none;
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

        /*wholesale page*/

    /*wholesale page styling*/

        #wholesale-page {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;

    width: 100%;
    height: auto;
}

    /*wholesale page sizing*/

        #wholesale-page-main {
    height: auto;
    background-color: #ca5f59;
}

    /*form styling*/

        form {
    background-color: #ca5f59;
}

    /*container for form to style and layout*/

        .form {
    position: relative;
    width: 60%;
    background-color: #ca5f59;
    padding: 20px;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
}

    /*form lable styling*/

        label {
    color: #f1e3db;
    text-shadow: 1px 1px 2px black;
}

    /*form input styling email*/

        input[type="email"] {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}

    /*email text box styling*/

        #email-text {
    height: 200px;
    font-size: larger;
}

    /*form input styling textbox*/

        input[type="text"],
        textarea {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
}

    /*form input styling for selected text box*/

        input[type="text"]:focus,
        textarea:focus {
    border: 4px solid #a2c7c4;
}

    /*submit hover styling*/

        input[type="submit"] {
    background-color: #f1e3db;
    color: #ca5f59;
    font-weight: bolder;
    /*used calc to have text at consist sized*/
    font-size: calc(100% + 1vw);
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-shadow: 1px 1px 2px #838383;
}
        input[type="submit"]:hover {
    background-color: #a2c7c4;
    color: #f1e3db;
    text-shadow: 1px 1px 2px black;
}

    /*wholesale image for text box*/

        #wholesale-information {
    height: auto;
    width: 100%;
    border: 10px solid #ca5f59;
    position: relative;
    background-image: url(images/home-hero.jpg);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    padding: 20px;
}

    /*wholesale spcific styling for text box list*/

        #wholesale-information ol > li > h4 {
    text-align: center;
    text-decoration: underline;
    text-decoration-color: black;
}

    /*wholesalet ext box styling*/

        .wholesale-text {
    height: auto;
    width: auto;
    background-color: rgba(202, 95, 89, 0.9);
    color: #f1e3db;
    padding: 1%;
    text-shadow: 1px 1px 2px black;
    text-align: left;
    /*used calc to have text at consist sized*/
    font-size: calc(100% + 1vw);
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

        /*media styling for widow size*/


    /*insures social nicer styling apperance on full screen*/

        @media only screen and (min-width: 676px) {
    #social {
        background-color: #ca5f59;
        display: flex;
        position: relative;
        flex-direction: row;

        min-height: fit-content;
        align-items: center;
        color: #f1e3db;
        flex-grow: 1;
        justify-content: space-evenly;
        height: 100%;
        min-width: 200px;
    }
}

    /*centers top nav for smalller screens*/
        @media only screen and (max-width: 472px) {
    body #menu > #nav {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        height: auto;
        width: auto;
    }
}

    /*styling for contact page on smaller screens to enable links for mobile*/
        @media only screen and (max-width: 450px) {
    /*enables mobile subheading for contact page*/
    .subheading-mobile {
        display: inline;
        /*used calc to have text at consist sized*/
        font-size: calc(100% + 1vw);
    }
    /*styles mobile subheading links*/
    .subheading-mobile a {
        border: 5px groove #9c4945;
        text-decoration: underline;
        text-decoration-color: #0009ff;
        padding: 3px;
        color: #f1e3db;
        text-shadow: 1px 1px 2px black;
    }
    /*styles mobile subheading links on hover*/
    .subheading-mobile a:hover {
        border: 5px groove black;
        text-decoration: underline;
        text-decoration-color: black;
        padding: 3px;
        color: black;
    }
    /*disables over effects on contact page social links/icons*/
    .youtube:hover,
    .X:hover,
    .facebook:hover {
        background-color: transparent;

        text-decoration: none;
    }
/*disables disktop stylings for mobile view*/
    .desktop {
        display: none;
    }
}


    /*styles all nav links to keep at constant size on tiny screens*/

        @media only screen and (max-width: 350px) {
    #top #home,
    #top #pricing,
    #top #how-its-made {
        padding: 0.2em;
        margin: 1px;
        /*used calc to have text at consist sized*/
        font-size: calc(100% + 2vw);
        text-decoration: none;
        border: solid 2px black;
        border-radius: 25px;
    }
    #bottom-nav #Location,
    #bottom-nav #contact,
    #bottom-nav #Wholesale {
        padding: 0.2em;
        font-size: calc(100% + 1vw);
        /*used calc to have text at consist sized*/
        text-decoration: none;
        border: solid 2px black;
        border-radius: 25px;
    }
}