*{
    margin:0;
    box-sizing: border-box;
}
/*the homepage and credits pages are a collaborative effort between estelle, zoe, and ziliang.
individual work will be given credit for. please ask if unclear who wrote a line of code.
*/

/* in this project, estelle developed the overall designs of the header, nav, and footer that maintain
consistency across each webpage. zoe and ziliang created their own designs but abided by the general theme
that estelle designed.
 */
/*estelles work begins*/
body {
    font-size: calc(2px + 1.5vw);
    margin: 0;
    padding: 0;
}

.page-wrapper{
    width: 90%;
    margin: 0 5vw;
}

div{
    margin: 0;
    background-color:#fdf4dc;
    text-align: center;
}
/*estelles work ends*/

/*estelle designed the look of the header to be the same on all pages*/
header{
    background-color:#573616;
    text-align: center;
    color:#EBE8DE;
    position: relative;
    padding: 1%;
    margin-bottom:1%;
    border: 1px solid #573616;
}

header h1{
    background-color: #a67442;
    padding: 1%;
    font: bold small-caps calc(2px + 6vw) "Georgia", serif;
}

header p{
    background-color: #a67442;
    padding-bottom: 1%;
    font-size: calc(2px + 3vw);
}

#motion{
    max-width:10%;
    position: absolute;
    left: 71%;
    top: 8%;
    z-index: 1;
}
/*estelles work ends*/

/*zoes work begins*/
.column-items {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin:0;
    padding:0;
}

/*zoes work ends*/

/* estelle coded the nav*/


nav{
    background-color: #e7d2ac;
    margin: 0;
    width: 30%;
    height: auto;
    display: inline;
    text-align: center;
    flex-direction: row;
    justify-content: space-evenly;
}
nav ul{
    padding: 5%;
    text-align:center;
 }
nav li{
    list-style-type: none;
    background-color: #a67442;
    color:#66411d;
    padding: 10% 15% 10% 10%;
    margin: 16%;
    width: 65%;
    height: 100%;
    border: none;
    font-size: calc(2px + 2.1vw);
    text-align: center;
}
nav a{
    text-decoration: none;
    color: #EBE8DE;
    text-align: center;
    margin:0;
    padding: 0;
    font-size: calc(2px + 2.1vw);
}
/*estelles work ends*/

/*ziliangs work begins*/
main{
    color:#573616;
    background-color:#fdf4dc;
    height:auto;
    width: 70%;
}


main p{
    padding:0;
    margin:2%;
}
/*ziliangs work ends*/

/*zoe worked on the divs in the main and footer*/

#about-us-text{
    font-size: calc(2px + 1.5vw);
    display: inline;
    text-align: center;
    color: #573616;
    background-color: #EBE8DE;
    text-decoration: none;
    margin: 0 10%;
}

/*estelle added a secret coffee cup for only small resolution*/
.secret-cup{
    display: none;
}

#cafe{
    max-width: 70%;
    margin: 0 0 10% 10%;


}
.column-content{
    display: flex;
    flex-direction: row;
    width:100%;
}
/*zoe's work begins, making the footer abide by the styles that estelle developed*/
footer{
    width:100%;
    background-color:#a67442;
    padding: 1%;
    margin-top: 1%;
    border: 2px solid #a67442;
}
/*zoe's work ends*/
/*estelles work begins*/
@media screen and (max-width: 750px) {
    header{
        text-align:center;
    }
    .column-items {
        flex-direction: column;
        width: 100%;
    }
    /*estelle did the coding for all the navs*/
    nav {
        text-align:center;
        width: 100%;
        height: 8%;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    nav ul{
        margin: 0;
        height: 3%;
        padding: 2%;
    }
    nav li{
        display: inline;
        padding: 2% 2% 1% 2%;
        margin: 2%;
        text-align: center;
        font-size: calc(2px + 0.5vw);
        border-right: 2px solid #a67442;
    }
    .first-content{
        font-size: calc(2px + 3vw);
        margin: 5%;
    }
    .function{
        font-size: calc(2px + 3vw);
        font-weight: bold;
        margin: 5%;
    }
    #about-us-text{
        font-size: calc(2px + 3vw);
        margin: 5%;
    }
    main {
        width: 100%;
    }

    .secret-cup{
        display: inline;
        max-width: 40%;
    }
}

/*estelles work ends.*/