/******************************************
/* BASE STYLES
/*******************************************/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

*::-webkit-scrollbar {
    display: none;
}

html {
    font-size: 62.5%;
}

body {
    background-color: white;
    /* height: 100vh; */
}

i {
    border: none;
}

h1 {
    font: italic 300 3rem/2.5rem "Courgette", Tahoma, sans-serif;
}

h2 {
    font: italic 400 5rem/1rem "Courgette", Tahoma, sans-serif;
    height: 40px;
}



/******************************************
/* HEADER
/*******************************************/

header {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 200px;
    background-color: rgb(82,72,74);
    color: white;
}

header span {
    text-align: center;
    font: 500 1.6rem/1rem "Noto Serif Display", Tahoma, sans-serif;
}

.headerTop {
    display: flex;
    flex-flow: column wrap;
    place-content: center space-between;
    padding-top: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); 
}

.headerTop > * {
    margin: 4%;
}

.headerBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.socialBar div {
    display: flex;
    place-content: center;
    height: 100px;
}

.socialBar a {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    text-decoration: none;
    color: inherit;
    margin: 0 5%;
}

#headerLogo {
    width: 70%;
    align-self: center;
}

#mobileTitle, .mobileMenu {
    display: none;
    visibility: hidden;
}

.infoCard {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    text-align: center;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15); 
    height: 25px;
    padding: 5px 0 8px 0;
    margin-top: 10px;
    font: 300 1rem/1rem "Quicksand", Tahoma, sans-serif;
}


.infoCard a:visited, .infoCard a:link {
    color: white;
    text-decoration: none;
}

        /******************************************
        /* HEADER MOBILE RULES
        /*******************************************/


        @media all and (max-width:600px) {
            header {
                position: static;
                width: 100%; 
                height: 65px;
                display: flex;
                flex-flow: row wrap;
                place-content: flex-end space-between;
            }

            #mobileTitle {
                display: block;
                visibility: visible;
                font: 3rem/1rem "Courgette", Tahoma, sans-serif;
                width: 70%;
                padding: 0 0 20px 10px;
            }

            header button {
                margin: 0 5% 1% 5%;
            }

            .mobileMenu {
                display: flex;
                visibility: visible;
                background-color: transparent;
                border: none;
                color: white;
            }

            header .headerTop.mobileView, header .infoCard, header .socialBar {
                display: none;
                visibility: hidden;
            }
        }


/******************************************
/* TRUE BODY (STRUCTURE)
/*******************************************/


#trueBody {
    height: 100vh;
    margin-left: 200px;
    /* border: 1px solid rgb(6, 185, 42); */
    overflow: scroll;
    scrollbar-width: none;
}


#trueBody > section {
    box-shadow: inset 0 2px 3px 2px rgba(0, 0, 0, 0.15); 
}

#one {
    background-color: rgb(207,194,195);
}

#two {
    background-color: rgba(207,194,195,.8);
}


        /******************************************
        /* TRUE BODY MOBILE RULES
        /*******************************************/

        @media all and (max-width:600px) {
            #trueBody {
                margin-left: 0;
            }
        } 

        /* @media screen and (min-width:800px) and (max-height:1365) {
            #trueBody{
                height: auto;
            }
            #trueBody #one {
                height: 650px;
            }
            #trueBody #two {
                height: 650px;
            }
        } */




/******************************************
/* ABOUT US
/*******************************************/

.container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    height: 90%;
    padding: 2rem;
    overflow: hidden;
}

.aboutUs h2 {
    width: 90%;
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
}

.aboutUs p {
    width: 50%;
    padding: 1% 0;
    text-align: center;
    font: 400 2rem/1.5em "Quicksand", Tahoma, sans-serif;
}

.aboutUs strong {
    font: inherit;
}

.shopImg {
    width: 80%;
}

#shopPhoto {
    width: 100%;
    object-fit: cover;
    /* overflow: none; */
}


        /******************************************
        /* ABOUT US MOBILE RULES
        /*******************************************/

        @media all and (max-width:960px) {
            .aboutUs h1 {
                font-size: 2.3rem;
            }

            .aboutUs.container p {
                font-size: 1.6rem;
            }
        }


        @media all and (max-width:737px) {
            .aboutUs h1 {
                font-size: 2.3rem;
            }

            .aboutUs.container p {
                font-size: 1.6rem;
                width: 80%;
            }
        }

        @media all and (max-width:600px) {
            .aboutUs.container {
                height: auto;
            }
            
            .aboutUs.container p {
                font-size: 1.3rem;
                width: 80%;
                margin-bottom: 15px;
            }

            .shopImg {
                display: none;
                visibility: hidden;
            }

        }

        @media all and (max-width:490px) {
            .aboutUs h2 {
                font-size: 3rem;
                width: 95%;
                margin: 10px 0;
            }

            .aboutUs.container {
                height: 140px;
            }
        }



/******************************************
/* GALLERY
/*******************************************/


.gallery.container {
    height: 95%;
    padding: 2rem;
}

.gallery.container h2 {
    font-size: 5rem;
    margin-top: 1.5%;
    margin-bottom: 2.1%;
}

.gallery.container p {
    width: 75%;
    padding: 1% 0;
    text-align: center;
    font: 400 2rem/1.5em "Quicksand", Tahoma, sans-serif;
    position: relative;
    bottom: 15px;
}

.stickyParent {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    width: 95%;
    height: 550px;
    padding: 1rem .5rem 0rem;
    background-color: white;
    box-shadow: inset 0 3px 3px 3px rgba(0,0,0,.2);
}

.sticky {
    /* border: 1px solid purple; */
    /* box-shadow: -2px 2px 10px 2px rgba(0, 0, 0, 0.15);  */
    width: 35%;
    overflow: scroll;
    height: 100%;
    /* scrollbar-width: none; */
}

.scrollSection {
    /* overflow: scroll; */
    /* scrollbar-width: none; */
    height: 100%;
}

.gallPhoto {
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin: 0;
    /* scrollbar-width: none; */
}

.mobileView.gallPhoto {
    display: none;
    visibility: hidden;
}

.floatingSocial.mobileView {
    display: none;
    visibility: hidden;
}


        /******************************************
        /* GALLERY MOBILE RULES
        /*******************************************/


        @media all and (max-width:960px) {

            .mobileView.gallPhoto {
                display: block;
                visibility: visible;
            }

            .wideView {
                display: none;
                visibility: hidden;
            }

            .stickyParent {
                width: 65%;
            }

            .sticky {
                width: 100%;
            }

            .gallery.container p {
                font-size: 1.4rem;
                margin-top: 15px;
            }

        }


        @media all and (max-width:737px) {
            .gallery.container p {
                font-size: 1.7rem;
            }

            .gallery.container h2 {
                margin-bottom: 5%;
            }
        }

        @media all and (max-width:600px) {
            .gallery.container {
                padding: 1rem;
            }

            .gallery.container p {
                font-size: 1.3rem;
            }

            .gallery.container h2 {
                font-size: 3.1rem;
            }

            .stickyParent {
                width: 100%;
            }


            .scrollSection {
                display: flex;
                flex-wrap: nowrap;
            }

            .gallPhoto {
                width: 100%;
                padding: 0 .5%;
                flex-basis: 345px;
            }

            .floatingSocial.mobileView {
                display: flex;
                place-content: center;
                visibility: visible;
                width: 50%;
                height: 100px;
                position: relative;
                bottom: 200px;
            }

            .floatingSocial.mobileView div {
                display: flex;
                place-content: center;
                width: 50%;
                height: 100%;
            }

            .floatingSocial.mobileView a {
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                text-decoration: none;
                color: white;
                margin: 0 12%;
            }
        }

        @media all and (max-width:490px) {
            .gallery.container h2 {
                font-size: 3.4rem;
                margin-bottom: 10px;
                margin-top: 20px;
            }

            .gallery.container p {
                margin-top: 20px;
                font-size: 1.3rem;
            }
        }





/******************************************
/* FOOTER
/*******************************************/

footer {
    position: relative;
    bottom: 0;
    /* left: 0; */
    height: 70px;
    background-color: rgba(126, 117, 118, 0.6)
}

footer {
    box-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
}



        /******************************************
        /* FOOTER
        /*******************************************/

        @media all and (max-width:600px) {
            footer {
                display: none;
                visibility: hidden;
            }
        }