/* WORK PORTFOLIO STYLE SHEET */
/* for projects */


/* GREEN COLOR SIGE: https://coolors.co/c9e4ca-87bba2-55828b-3b6064-364958 */

/* Charcoal: #364958 */
/* Deep Space Sparkle: #3B6064 */
/* Steel Teal: #55828B */
/* Eton Blue: #87BBA2 */
/* Tea Green: #C9E4CA */


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



/* TOP NAVIGATION, ID */
    header, #nav-project {
    background-color: white;
    }

    #nav-project a {
    /* Redesigns links */
        color: black; /* text color */
        font-weight: bold;
    }

    #nav-project a:hover,
    #nav-primary-decoration a:hover {
        color: #87BBA2;
    }
/* end navigation */





div.wrapper {
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    /* background-color: pink; */
}

div.section {
    /* height: 100px; */
    background-color: #4b2e83;
}

img {
    width: 100%;
}
img#title {
    padding-top: 5%;
    width: 10%;
}
img.uw-pg {
    width: 90%;
}


div.two-project {
    /* background-color: orange; */
    /* height: 100px; */
    float: left;
    width: 49.5%;
    margin-right: 1%;
}
    div.two-project:last-child{
        margin-right: 0%;
        padding-bottom: 3%;
    }

div.third-project {
/* USED: UW */
    /* height: 100px; */
    /* background-color: orange; */
    float: left;
    width: 33%;

    padding: 0px 1% 2.5% 1%;
        /* INSIDE  top, right, bottom, left */
    /* TODO: bottom 2.5 changes to 1 once resized */
}





footer {
    /* border-top: none; */
    clear: both;
}



/* TEXT */
h1.project {
/* INSIDE: PROJECTS */
    color: #364958;
    font-family: 'Noto Sans', sans-serif;
    margin-bottom: 2%;
    padding-top: 5%;
}

h2.project,
h2.section {
    font-family: 'Noto Sans', sans-serif;
    margin-bottom: 1%;
    font-size: 26;
}

h3.project,
h3.section {
    font-family: 'Noto Sans', sans-serif;
    padding-top: 2.5%;
    margin-bottom: 2%;
    text-align: center;
}

p.project,
p.section {
    margin-bottom: 0.75%;
    /* font-size: 16px; */
}

a.project,
a.section {
    font-size: 16px;
    color: plum;
}

ul.project-background,
ul.project-background-section {
/* ^ for top description */
    font-family: 'Noto Sans', sans-serif;
    color: #364958;
    /* font-size: 16px; */

    padding: 0px 4% .5% 2%;
    /* top, right, bottom, left */
    list-style-type: circle;
}

ul.project-bullets-internal,
ul.project-bullets-internal-section {
/* ^ for the body of the page */
    font-family: 'Noto Sans', sans-serif;
    color: #364958;

    padding: 0px 2% 0px 2%;
    /* top, right, bottom, left */
    list-style-type: circle;
}

    ul.project-bullets-internal li,
    ul.project-bullets-internal-section li {
        padding-bottom: 0.75%;
    }

/* END TEXT */



/* ALTERNATE TEXT */

    h2.section {
        color: white;
    }

    h3.section {
        color: white;
    }

    p.section {
        color: white;
    }

    a.section {
        color: pink;
    }

    ul.project-background-section,
    ul.project-bullets-internal-section {
        color: white;
    }














/* 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: rgb(230, 230, 230);
    color: #3B6064;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
}
button#top:hover {
background-color: #3B6064;
color: white;
}