header{
    background-color: #17a2b8;
    text-align: center;
    height: 1.5em;
    line-height: 1.5em;
    font-size: 280%;
}

h3{
    color: #17a2b8;
    padding: 2%;
    margin-left: 2%;
    width: 100%;
}

body{
    background-color: grey;
}

nav{
    background-color: ivory;
    margin-bottom: 3%;
    overflow: hidden;
}

.active{
    box-sizing: border-box;
    border: 2px solid #888;
    border-radius: 20%;
    margin: 2%;
    text-decoration: none;
    background-color: #17a2b8;
    color: ivory;
}

.indeximage{
    height: 1em;
}

footer {
    position: fixed;
    bottom: 20px;
    left: 0px;
    height: 20px;
    width: 100%;
    opacity: 0.6;
    text-align: center;
}

.project{
    /* box-sizing: border-box;
    border: 2px solid #000;
    border-radius: 2%; */
    width: 80%;
    height: 50%;
    margin: 5% auto 5% auto;
    padding: 1%;
   
}

.project_title{
    position: absolute;
    /* top: auto; */
    bottom: 10%;
    width: 97.5%;
    height: 5%;
    background-color: #17a2b8;
    text-align: center;
    
}

.project_title a{
    color: #fff;
    text-decoration: none;
    font-size: 80%;
    font-weight: bolder;
    font-variant: small-caps;
    line-height: 5%;
    
}

form{
    margin: 2%;
}

@media all and (min-width:640px){
    header{
        /* display: inline-block; */
        width: 20%;
        height: 9vh;
        line-height: 9vh;
        float: left;
        margin-left: 5%;
        font-size: 1.5em;
    }

    ul{
        margin-top: 1%;
        float: right;
    }

    .indexcard{
        padding: 2%;
    }

    .project_title{
        width: 95.5%;

    }

}