p {
  text-align: left;
  width: 100%;
  color: #333;
  padding: 0;
  margin: 0;
}
/* changed below from #logo to h1 */
h1 {
  width: 20%;
  color: magenta;
  }
/* You can't place img inside hi element
h1 img {
  max-width: 30%;
  min-width: 150px;
}*/
.identity img {
  width: 20%;
}
h2 {
  text-align: center;
  color: #333;
  width: 100%;
}
h3 {
  /*border: 1px solid black;*/
  margin: 1em 0 0 0;
  padding: 0;
  text-align: left;
  color: #333;
  width: 100%;
}
nav {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  /*height: auto;
  width: auto;
  padding: 1em;*/

}
ul {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    /*flex-wrap: wrap;
    background-color: gray;*/
    /*padding: 15px;*/
}
li {/* nav */
  font-family: "Helvetica Neue", arial, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  list-style-type: none;/* get rid of bullet */
  font-size: 1em;
  /*border: 1px solid black;*/
  /*background-color: yellow;*/
  padding: 15px;
  /*border: 1px solid black;*/
}
a {
  color: black;
  text-decoration: none;/* get rid of underline */
  /*background-color: purple;*/
}
a:hover{
  background-color: magenta;
}

img { /* responsive image scale with grid */
  max-width: 100%;
  height: auto;
}

body {
  /*background-color: yellow;*/
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
}
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #fff;
  border: 1px solid black;
  opacity: 0.8;
  padding: 50px 20px 0px 20px;
}
header.sticky {
  position: fixed;
  width: 100%;
  padding: 0 20px;
}
main {
  /*background-color: pink;*/
  display: flex;
  flex-direction: column;
  margin: auto; /*centering contents*/
  /* max-width: 1200px; /* this makes responsive within body */
  max-width: 80%; /* this makes responsive within body */
  height: auto;
}
footer {
  background-color: #eee;
}
footer nav {
  max-width: 100%;
  height: auto;
  margin: auto;/* place center in body
  background-color: red;*/
}
footer ul {/* place center in nav */
  max-width: 100%;
  margin: auto;
  /*background-color: pink;*/
}
footer ul li a:hover {/* place center in nav */
  border: 5px solid magenta;
}
section {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /*background-color: blue;*/
  width: 100%;
  margin: auto;
}
section.hero {
  width: 100%;
  margin: auto;
}
section h2 {
  font-size: 2.5em;
  color: magenta;
  padding-top: 3em;
  padding-bottom: 2em;
}

section p {
  display: block;
  width: 100%;
  /*padding: 20px;*/
  margin: auto;
  color: #aaa;
}
.page0 .hero { /* gave indes.html class="page0" */
  background-image: url("./images/splash.jpg");
  margin: auto;
      height: 500px;
  background-size: 1200px 700px;
  padding-bottom: 30px;
}
.page0 .hero h2 {
  width: 40%;
  font-size: 3em;
  color: white;
  text-align: left;
  margin: auto;
}
.page0 .hero p {
  display: block;
  width: 40%;
  font-size: 1.5em;
  color: white;
  text-align: left;
  margin: auto;
}
#works {
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#inspirations {
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  /*background-color: gray;*/
}
#about {
  width: 80%;
    height: auto;
  display: flex;
  flex-direction: column;
  /*height: 500px;*/
    margin: auto;
}

#contact {
  width: 80%;
  display: flex;
  flex-direction: column;
  height: auto;
  /*background-color: orange;*/
}

.item {
  /*flex-flow: row; word-wrap;*/
  the above same as
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 25%;  15em
  max-height: auto;
  display: flex;
  flex-direction: column;
  margin: auto;
  color: white;
  padding-bottom: 3em;
  /*border: 1px solid black;*/
}
.item .selected {
  border: 1px solid magenta;
}

.item img {
}



.selected {
  color: magenta;
}
#visual-index {
  width: 80%;
  padding-top: 3em;
  padding-bottom: 3em;
  height: auto;
  /*display: flex;
  flex-direction: row; works without these */
  justify-content: flex-start;
    flex-wrap: wrap;
}
/* Chrome breaks if this code is in
.vindex {
  display: flex;
  max-width: 31%;
  max-height: 33%;
}*/
.vindex img {
  max-width: 100px;
  height: auto;
  padding: 2px;
  border: 1px;
}
div.vindex a .selected {
  display: none;
}
/*
@@media only screen and (min-width: 150px) and (max-width: 600px){

}
*/

/*img {
  max-width: 1000px;
  max-height: 500px;
}
 Large screens
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars

  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}
/* Small screens
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column
  }
}*/
#page4 main {
  margin-top: 3.5em;
  margin-top: 2.5em;
}
#page4 main img {
  border: 1px solid black;
  margin-bottom: 8em;
}
#page4 section.hero {
  display: flex;
  flex-direction: row;
  color: #aaa;
  font-size: 1em;
  text-align: left;
  margin-bottom: 5em;
}
#page4 h2 {
  padding: 0;
  color: #aaa;
  font-size: 2.5em;
  text-align: right;
  width: 100%;
}
#page4 p {
  max-width: 30%;
  padding-left: 2em;
  color: #333;
  line-height: 1.5em;
  /*border: 1px solid black;*/
}