?* Color Palette */

.color-primary-0 { color: #021023 }	/* Main Primary color */
.color-primary-1 { color: #020D1B }
.color-primary-2 { color: #06172E }
.color-primary-3 { color: #03214C }
.color-primary-4 { color: #07336F }

.color-secondary-1-0 { color: #362A00 }	/* Main Secondary color (1) */
.color-secondary-1-1 { color: #2A2100 }
.color-secondary-1-2 { color: #463803 }
.color-secondary-1-3 { color: #735B00 }
.color-secondary-1-4 { color: #A88500 }

.color-secondary-2-0 { color: #361500 }	/* Main Secondary color (2) */
.color-secondary-2-1 { color: #2A1000 }
.color-secondary-2-2 { color: #461C03 }
.color-secondary-2-3 { color: #732C00 }
.color-secondary-2-4 { color: #A84000 }

body {
    background-color: #732C00;
}

header {
    background-color: #A88500;
    height: 100px;
    position: relative;
}

header h1 {
    padding: 20px;
}

nav {
    background-color : #03214C;
    position: absolute;
    top: 58px;
    left: 0px;
    width: 100%;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0px 0px 0px 200px;
}

nav ul li {
        float: left;
}

nav ul li a {
    display: inline-block; 
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    width: 100px; 
    
    }

nav::after {
    content: '';
    display: block;
    clear: both;
}
nav ul li:hover {
    background-color: #A84600;
}

#page {
    background-color: #362A00;
    max-width: 1200px;
    margin: 0 auto; /* centers layout */
    position: relative;
    font-family: candara, verdana, sans-serif;
    line-height: 1.4em;
}

.main {
    padding: 20px;
    background-color: #fff;
}

h1, h2,h3, h4, h5, h6, h7 {
    color: #461C03; 
}

p {
    color :  #463803;
    
}
ul {
    color : #2A2100;
}
/* Images */no-repeat
imp.portfolio {
    width:600px;
    height: 357px;
}
#demo {
    width: 600px;
    height: 315px;
    background-image: url(../images/bg.png);
    background-repeat: repeat-y
}