*{
    margin: 0;
    box-sizing: border-box;
}
#page-wrapper{
    width: 80vw;
    margin: auto;
    text-align: center;
}
header{
    padding: 2%;
    position: relative;
}
#logo{
    max-width: 90%;
    max-height: 100%;
    position: absolute;
    top: 30%;
    left: 2%;
}
#title{
    display: flex;
    flex-direction: row;
    justify-content: left;
}
#logo-title{
    display: flex;
    flex-direction: row;
    justify-content: left;
    padding-left: 13%;
}
header h1{
    text-align: left;
    font: bold calc(2px + 4vw) "Roboto Condensed", sans-serif;
}
header p{
    font: normal 400 calc(2px + 1.5vw) "Roboto Condensed", sans-serif;
    text-align: center;
    padding-top: 8%;
}#search{
     display: flex;
     align-items: center;
     padding: 1.5% 20% 1% 4%;
 }
nav input{
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
    height: 4vh;
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid #babfb2;
}
nav button{
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
    color: rgba(255, 255, 255, 0);
}
#search-button{
    height: 4vh;
    width: 3vw;
    border: 2px solid #627346;
    border-radius: 10%;
    background-image: url("src/wide-search.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #a8bd86;
}
nav{
    border-top: 1px solid #718a4e;
    border-bottom: 1px solid #718a4e;
}
nav ul{
    list-style-type: none;
    padding: 0;
    display: flex;
    align-items: center;
}
nav ul li{
    display: inline-block;
    padding: 1% 2% 1%;
    border-left: 1px solid #718a4e;
}

#first-button{
    margin-left: 20%;
}
nav a{
    text-decoration: none;
    color: rgba(255, 255, 255, 0);
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
}
#home, #date, #convo, #student, #drive, #friend{
    width: 3vw;
    height: 5vh;
    text-align: center;
    background-color: transparent;
    transition: height 0.2s 0s linear;
}
#home{
    background-image: url("src/home-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#date{
    background-image: url("src/heart-button.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#convo {
    background-image: url("src/convo-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#student {
    background-image: url("src/school-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#drive {
    background-image: url("src/car-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#friend {
    background-image: url("src/friend-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
nav p{
    opacity: 0;
}
main{
    height: 440vh;
}
main h1{
    font: bold calc(2px + 2vw) "Roboto Condensed", sans-serif;
    padding: 2%;
}
main h3{
    font: bold calc(2px + 1.5vw) "Roboto Condensed", sans-serif;
    padding: 1%;
}
main p, main h4{
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
    padding-bottom: 2%;
    text-align: left;
}
main a{
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
    padding-bottom: 2%;
    text-align: left;
}
footer{
    padding: 2%;
    font: normal 400 calc(2px + 1vw) "Roboto Condensed", sans-serif;
}
footer a{
    color: black;
}
header, footer{
    background-color: #A0C878;
}
nav{
    background-color: #DDEB9D;
}
main{
    background-image: linear-gradient(#ecf5e4, #88dbc9);
    /*learned from here: https://www.w3schools.com/css/css3_gradients.asp*/
}
#home-pg, #date-pg, #convo-pg, #student-pg, #drive-pg, #friend-pg{
    background-color: rgba(255, 255, 255, 0.5);
    height: 50vh;
    width: 70vw;
    margin: 5%;
    padding: 0 3%;
}
#convo-pg{
    height: 30vh;
}

#misc{
    background-color: rgba(255, 255, 255, 0.5);
    height: 65vh;
    width: 70vw;
    margin: 5%;
    padding: 0 3%;
}
#search-button:hover{
    background-color: #68784e;
    background-image: url(src/search-white.png);
}
nav input:hover{
    background-color: white;
}
#home:hover, #date:hover, #convo:hover, #student:hover, #drive:hover, #friend:hover{
    height: 6vh;
    width: 4vw;
}
#home:active, #date:active, #convo:active, #student:active, #drive:active, #friend:active{
    height: 6vh;
    width: 4vw;
}
nav ul li:hover{
    background-color: #a8bd86;
}
nav ul li:active{
    background-color: #a8bd86;
}
#search:hover{
    background-color: transparent;
}
@media screen and (max-width: 750px) {
    header h1{
        font-size: calc(2px + 6vw);
        padding-left: 30%;
    }

    #logo {
        max-width: 50%;
        top: 5%;
    }

    #title {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #logo-title {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 3% 25% 2% 0;
    }

    header p {
        font-size: calc(2px + 2vw);
        padding: 1% 0;
    }

    #home, #date, #convo, #student, #drive, #friend {
        width: 4vw;
        height: 3vh;
    }

    #search-button {
        height: 4vh;
        width: 5vw;
    }

    #search {
        padding-right: 5%;
    }

    #first-button {
        margin-left: 5%;
    }

    nav input {
        padding: 2% 0;
        width: 15vw;
        font-size: calc(2px + 1.5vw);
    }
    main h1{
        font-size: calc(2px + 4vw);
    }
    main h3 {
        font-size: calc(2px + 3vw);
    }
    main p{
        font-size: calc(2px + 2vw);
    }
    main a{
        font-size: calc(2px + 2vw);
        padding-bottom: 1%;
    }
}