/* Color Palette */
.color-primary-0 { color: #CB0077 }	/* Main Primary color */
.color-primary-1 { color: #D854A1 }
.color-primary-2 { color: #CE2E8C }
.color-primary-3 { color: #9D005C }
.color-primary-4 { color: #7B0048 }

.color-secondary-1-0 { color: #FF9C00 }	/* Main Secondary color (1) */
.color-secondary-1-1 { color: #FFC363 }
.color-secondary-1-2 { color: #FFB239 }
.color-secondary-1-3 { color: #C57900 }
.color-secondary-1-4 { color: #9B5F00 }

.color-secondary-2-0 { color: #0E53A7 }	/* Main Secondary color (2) */
.color-secondary-2-1 { color: #5383BD }
.color-secondary-2-2 { color: #3169AC }
.color-secondary-2-3 { color: #0A4081 }
.color-secondary-2-4 { color: #063165 }

.color-complement-0 { color: #A2EF00 }	/* Main Complement color */
.color-complement-1 { color: #C3F35F }
.color-complement-2 { color: #B4F036 }
.color-complement-3 { color: #7DB800 }
.color-complement-4 { color: #629100 }

body {
    background-color:azure;
}

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

header h1 {
    padding: 20px;
}

nav {
   background-color: #FFC363; 
    position: absolute;
    top; 56px;
    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: #9B5F00;
}

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

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

h1, h2, h3, h4, h5, h6, h7 {
    color: #0A4081 
    
}

p {
    color: #0A4081
}

ul {
    color: cornflowerblue  
}

/*  Images */
img.portfolio{
width: 300px;
height: 157px
}