/* Cross Browser Compatability CSS */
/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }


/* Write your CSS styles here */



  html { 
  background: url('/images/sunset.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


h1 {
        font-family: 'Shadows Into Light Two', cursive;
        font-size: 60px;
        text-align: center;
      }

	

nav {
  background-color:rgba(101, 86, 136, 0.4);
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  color: #000;
  margin: 10px 0 10px 0;
  padding: 0px;
  z-index: +10;
  font-size: 20px;
 width: 100%;
}


nav ul {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    text-align: center;
    list-style: none;
    position: relative;
    padding: 0px;
    margin: 0px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  overflow: auto;

}

 nav ul li {
    display: block;
    position: relative;
    float: left;
  height: 25px;
  margin-right: 0px;
  padding: 0 20px;
  
  }


 * {
  margin: 0;
  padding: 0;
}
 


 
nav li:last-child {
  border-right: none;
}
 
nav li a {
  text-decoration: none;
   text-transform: lowercase;

 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
nav li a:hover {
  color: #000;
}
 
nav li.active a {
  color: #000;
 position: center;
}

* {
  margin: 0;
  padding: 0;
}
 
 

.container {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
  height: 50%;
  padding: 10px;
  text-align: center;
  border:3px dotted #34DDDD;
  background-color: white;
  opacity: 0.75;
}


  .container p {
        font-family: 'Roboto', sans-serif;
        font-size: 24px;
        text-align: center;
        z-index: +1;
        color: #000;}
.container img {float: left; 
  clear: both;}


.portfolio * {margin: 0; padding: 0;}
 
.portfolio div {
  margin: 10%;
}
 
.portfolio ul {
  list-style-type: none;
  width: auto;
}
 
.portfolio h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
  background-color: rgba(140,125,173,0.7);
  width: 75%;
}
 
.portfolio li img {
  float: left;
  margin: 0 15px 0 0;
}
 
.portfolio li p {
  font: 200 24px/1.5 Georgia, Times New Roman, serif;
  background-color: rgba(140,125,173,0.7);
  width: 75%;
}
 
.portfolio li {
  padding: 10px;
  overflow: auto;
}
 
.portfolio li:hover {
  background: #eee;
  cursor: pointer;
}