* {margin:0 auto;}
html{overflow-x:hidden;}

:root{
    --contactColour:#fcfaba;
    --navColour:#e3fcba;
    --headerColour:#cff3fc;
    --aboutColour:#f9edf6;

    font-family: "Poppins", sans-serif;
    line-height: 1.8;
    font-size:1.2em;
}

#contact{background-color: var(--contactColour);}
#about{background-color:var(--headerColour);}
nav{background-color: var(--navColour);}
header{background-color:var(--headerColour)}

h1, h2,h3{font-family: "Merriweather", serif;}
h2,h3{text-align: center; font-weight:700;}

section, header, nav{padding:15px;}
section{min-height:40vh;}

.innerSection{
    max-width:700px;
    margin:auto;
}

/* Navigation */
#pageNav{
    background-color: #2c7fa7;
    padding:10px auto;
    display: flex;
    justify-content: space-around;
    width:100%;
    position: fixed;
}

#pageNav a{
    color:white;
    text-decoration: none;
}

@media screen and (max-width:800px){
    #pageNav{
        flex-direction:column;
        position:relative;
    }
}

/* Header */
header{
    min-height:45vh;
    align-content: flex-end;
    padding:20px;
    font-size:120%;
}

/* Project section (nav) */
.projectDisplay{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
}

.project{
    min-height:50vh;
    width:450px;
    max-width:90%;
    background-color: white;
    margin:10px;
    border:2px solid #003;
    border-radius:20px;
}

.project img{
    max-width: 100%;
}

.project a{
    background-color: #2c7fa7;
    color: white;
    padding: 6px;
    border-radius: 20px;
    text-decoration: none;
    display: block;
}