/* WORK PORTFOLIO STYLE SHEET */
* {
    padding:0;
    margin:0;
    box-sizing: border-box;
    border-collapse: collapse;  /* for tables */
}



body#decoration {
    background-image: linear-gradient(#364958, #C9E4CA);
    background-repeat: no-repeat;
    height: 100%;

    /* so background isn't white */
    background-color: #364958;
}





header {
    height: 50px;
    position: fixed;
    overflow: hidden;
    z-index: 6;

    width: 100%;

    /* header color for primary */
    background-color: #364958;
}



/* TOP NAVIGATION - set up */
#nav-primary,
#nav-project {
    height: 50px;
    line-height: 50px;
    /* clear: both; */
    /* background-color: #364958; */
}
#nav-primary ul,
#nav-project ul {
    float: right;
}
#nav-primary li,
#nav-project li {
    font-family: 'Noto Sans', sans-serif;
/* Reformats list & does spacing */
    list-style: none;
    /* float: left; */
    font-size: 1.1em;
    /* width: 20%; */
    /* text-align: center; */
    margin-right: 30px;

/* puts list next to eachother */
    display: inline-block;
}

/* TOP NAVIGATION - text */
#nav-primary a,
#nav-project a {
/* Redesigns links */
    text-decoration: none; /* for underline */
    color: black; /* text color */
    display: block;  /* for hovering */
    /* text-transform: uppercase; */
    font-weight: bold;
    
    z-index: 8;
}
#nav-primary a{
    color: white;
}

#nav-primary a:hover,
#nav-project a:hover {
    /* color: aqua !important; */
    /* font-weight: bold; */
    /* color: #55828B; */
    color: #87BBA2;
}



img.needle {
    /* NeedleWhisk with words */
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;

    max-width: 1500px;
    display: block;
}




div.section {
/* empty boarder */
    max-width: 100%;
    /* background: orange; */

    clear: both;
}


div.wrapper {
    /* height: 1000px; */
    /* background: blueviolet; */
    max-width: 1100px;
    margin: 0px auto 0px auto;
        /* OUTSIDE  top, right, bottom, left */
    /* display: block; */
    padding: 0px 2% 0px 2%;
        /* INSIDE  top, right, bottom, left */
}
div#projects {
/* USED: jump to projects on home page */
    padding-top: 55px;
}



div.about,
div.project-square {
/* USED: Pastry & About */
/* USED: pastry information on left */
    /* height: 100px; */
    /* background: beige; */
    clear: both;
    overflow: hidden;
    /* padding: 1%; */
    padding: 2% 2% 2% 2%;
        /* INSIDE  top, right, bottom, left */

    background-color: rgb(230, 230, 230);
    border: 2px solid #3B6064;
    border-radius: 10px;
    margin-bottom: 4%;
}





div.two {
/* USED: projects */
    /* height: 100px; */
    /* background: beige; */
    width: 49%;
    /* margin-bottom: 2%; */
    float: left;
    margin-right: 1%;
    margin-bottom: 2%;

/* NOTE:  to make overlay work */
    position: relative;
}
div.two:last-child {
    margin-right: 0%;
}

img.tile {
/* USED: Projects  */
    display: block;
    margin: auto;
    width: 90%;
}

div.overlay {
    clear: both;
    overflow: hidden;
    padding: 1%;
    border: 2px solid #3B6064;
    background-color: rgb(230, 230, 230);
    border-radius: 10px;

    padding: 2% 2% 2% 2%;
}

div.two:hover div.overlay {
    opacity: 1;
}








div.third {
/* USED: pastry */
    /* background-color: chocolate; */
    /* height: 100px; */
    /* border: 1px solid white; */

    width: 33%;
    float: left;
    margin-right: .5%;
}
div.third:last-child{
    margin-right: 0%;
    margin-bottom: 2%;
}

img.food {
    width: 100%;
    border-radius: 2%;
}





/* PROJECTS: UW */
/* USED: NY cookies */
    aside.left {
        /* background: blue; */
        /* height: 300px; */
        width: 36.17%;
        float: left;
    }
        img.cookie {
            width: 100%;
        }


    main.right {
        /* background: purple; */
        /* height: 400px; */
        width: 61.70%;
        float: right;
    }
/* END PROJECTS */





/* BACK TO TOP BUTTON */
    button#top {
        display: none;
        position: fixed;
        /* space outside of button */
            bottom: 50px;
            right: 20px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: white;
        color: #3B6064;
        cursor: pointer;
        padding: 10px;
        border-radius: 4px;
    }
button#top:hover {
    background-color: #3B6064;
    color: white;
}







footer {
    height: 50px;
    line-height: 50px;
    /* background-color: #C9E4CA; */
    /* background-color: bisque; */
    /* opacity: 20%; */

    /* overflow: hidden; */
    /* position: absolute; */

    /* z-index: 5; */
    border-top: 1px solid rgb(230, 230, 230);
}



footer ul {
    float: right;
}
footer li {
    font-family: 'Noto Sans', sans-serif;
    float: left;
    list-style-type: none;  /* remove bullets */
/*    to give it more space between the items*/
    margin-right: 20px;
}
footer a {
    color: black;
}





/* TEXT */
h1.welcome {
    color: white;
    font-family: 'Noto Sans', sans-serif;
    font-size: 45px;

    padding-top: 10%;
    text-align: center;
}
    br.responsive {
        display: inline;
    }
    @media (min-width: 745px) {
        br.responsive {
            display: none;
        }
    }


h2.big{
/* USED: index */
    font-family: 'Noto Sans', sans-serif;
    font-size: 42px;
}
h2.middle {
/* USED: pastry */
    font-family: 'Noto Sans', sans-serif;
    text-align: center;
}
h2.left {
/* USED: about */
    font-family: 'Noto Sans', sans-serif;
}


h3.middle {
    font-family: 'Noto Sans', sans-serif;
    text-align: center;
    font-size: 30px;
}


p,
p.middle,
p.food,

p.section{
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
}
p.middle {
    /* USED: projects & pastry end */
        text-align: center;
}
p.food {
/* USED: pastry descriptions */
    padding-left: 4%;
    padding-bottom: 2%;
    font-size: 16px;
}



a.more-project {
/* resize view */
    font-family: 'Noto Sans', sans-serif;
    padding: 1% 8% 1% 8%;
            /* INSIDE  top, right, bottom, left */
    margin-top: 4%;

    text-decoration: none;
    background-color: #364958;
    border-radius: 5px;
    color: white;

    /* keeps display paddings */
    display: inline-block;
}
    a.more-project:hover {
        background-color: #87BBA2;
        color: black;
        box-shadow: 0 0 10px #888888;
    }

a.more-pastry {
    font-family: 'Noto Sans', sans-serif;
    font-weight: bold;
    text-decoration: underline;
    color: #3B6064;

    float: right;
    padding-right: 4%;
}
    a.more-pastry:hover {
        color: #87BBA2;
    }


a.link {
    color: #55828B;
    text-decoration: none;
}
    a.link:hover {
        color: #87BBA2;
        text-decoration: underline;
    }


ul.bullets-about li,

ul.project-bullets,
ul.project-bullets-section {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    margin-left: 2%;
}