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





@media only screen and (max-width: 985px) {
/* ALL TEXT */

/* USED PASTRY */
    div.third:first-child {
        margin-right: 0%;
        /* background-color: pink; */
        width: 100%;
        /* margin-bottom: 5%; */
    }
        div.third:nth-child(2) {
            width: 49.5%;
            margin-right: 0.5%;
            margin-left: 0.25%;
        }
        div.third:nth-child(3){
            width: 49.5%;
            margin-right: 0%;
            margin-bottom: 3%;
        }
    div.project-square {
        margin-bottom: 0%;
    }



/* PROJECTS: bakery */
    div.two-project {
        width: 100%;
        padding-bottom: 3%;
    }

    

/* PROJECTS: UW */
    div.third-project {
        width: 100%;
        padding-bottom: 1%;
    }
        div.third-project:last-child {
            padding-bottom: 3%;
        }




/* USED COOKIES */
    aside.left {
        width: 100%;
        /* background-color: pink; */
    }
        img.cookie {
            width: 33%;
            float: left;
            margin-right: 0.33%;
        }

        img.cookie:last-child {
            width: 50%;
            margin-bottom: 5%;
            margin-left: 25%;
        }
    
    main.right {
        width: 100%;
        margin-bottom: 5%;
    }







/* TEXT */
        h1.welcome {
            padding-top: 15%;
        }
        h1.project {
        /* IN PROJECTS */
            padding-top: 12%;
        }
        
        h2.middle,
        
        h2.project, h3.project,
        h2.section, h3.section{
            font-size: 30px;
        }
        

        
        p,
        p.middle,
        p.food,
        
        p.project, p.section,
        a.project, a.section {
            font-size: 18px;
        }
        p.food {
        /* USED: pastry descriptions */
            padding-left: 4%;
            padding-bottom: 0.5%;
        }
            p.food:last-child {
                padding-bottom: 0%;
            }
        
        /* a, */
            /* ^ DON'T ADD, will mess with header */
        a.link,
            /* ^ for any links */
        a.more-project,
            /* ^ for index project */
        a.more-pastry,
            /* ^ for index project */
        a.project, a.section 
            /* ^ for projects */
        {
            font-size: 18px;
        }
            a.more-project:hover {
                font-size: 18px;
            }
        
        ul.bullets-about li,
        
        ul.project-background,
        ul.project-background-section,
            /* ^ top section of project pages */
        ul.project-bullets-internal,
        ul.project-bullets-internal-section {
            font-size: 18px;
            margin-left: 4%;
            margin-right: 4%;
        }

}





@media only screen and (max-width: 1000px) {
/* USED ALL HEADER */
    header {
        height: 60px;
        position: fixed;
        overflow: hidden;
        z-index: 6;

        width: 100%;
    }

    /* TOP NAVIGATION - set up */
    #nav-primary,
    #nav-project {
        height: 60px;
        line-height: 60px;
        /* clear: both; */
        /* background-color: #364958; */
    }
    #nav-primary li,
    #nav-project li {
        font-family: 'Noto Sans', sans-serif;

    /* Reformats list & does spacing */
        list-style: none;
        /* float: left; */
        font-size: 1.5em;
        /* width: 20%;*/
        margin-right: 50px;

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


/* USED INDEX PROJECTS - all images down 1 line */
    div.two {
        width: 100%;
        margin-bottom: 5%;
    }
}





@media only screen and (min-width: 985px) {
/* MAIN VIEW */
/* for index's projects */
    div.overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        height: 100%;
        width: 100%;

        opacity: 0;
        transition: .8s ease;

        /* NOTE: visuals */
        border: 2px dashed #3B6064;
        background-color: rgb(230, 230, 230);
        border-radius: 10px;
        padding-top: 20%;

        margin-bottom: 4%;
    }
        div.two:hover div.overlay {
            opacity: 1;
        }

    a.more-project{
        padding: 2% 8% 2% 8%;
            /* INSIDE  top, right, bottom, left */
    }
}