@import url('https://fonts.googleapis.com/css?family=Nunito:600');
@import url('https://fonts.googleapis.com/css?family=Nunito:700');

/*  Everything up to max browser width will look like this. */

body {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
}

h1 {/* font size is 32px*/
  font-family: 'Nunito', sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  padding-bottom: 1.5em;
}

h2 {/* font size is 16px*/
  font-family: 'Nunito', sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: bold;
  padding-bottom: .5em;
}

h3 {
  font-family: 'Nunito', sans-serif;
  font-size: .75em;
  text-transform: uppercase;
  padding-top: 2em;
  padding-bottom: .5em;
  font-weight: bold;
}

h4 {
  font-family: 'Nunito', sans-serif;
  font-size: .75em;
  padding-top: 2em;
  padding-right: 6em;
  padding-bottom: .5em;
  font-weight: bold;
}

p, ul, li {
  font-family: 'Nunito', serif;
  font-size: .75em;
}

a {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 1em;
  color: #00000;
}

header {
  padding-top: 1em;
  padding-left: 2em;
}

article {
  padding: 20em;
}

footer {
  padding: 1em;
  background-color: #C7C7CE;
}

section {
  padding: 1em;
}

figcaption {
  font-family: 'Nunito', sans-serif;
  font-size: .8em;
  text-transform: uppercase;
  font-weight: bold;
  padding-top: 1em;
}

img {
  max-width: 100%;
}

/*monitor classes*/

.description {
  font-family: 'Nunito', sans-serif;
  font-size: 1em;
  padding-top: .75em;
}

/* The sidebar menu */
.sidenav {
  width:250px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 16em; /* Stay at the top */
  right: 0;
  background-color: #c7c7ce; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
}

.sidenav-poems {
  width:300px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 12em; /* Stay at the top */
  right: 0;
  background-color: #C7C7CE; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
}

/* The navigation menu links */
.sidenav a {
  padding-left: 1em;
  padding-right: 1em;
  line-height: 2em;
  text-decoration: none;
  font-size: 1em;
  display: block;
  text-transform: uppercase;
}

/* The navigation menu links */
.sidenav-poems a {
  padding-left: 1em;
  padding-right: 1em;
  line-height: 2em;
  text-decoration: none;
  font-size: 1em;
  display: block;
  text-transform: uppercase;
}

.flex-cont {
  display: flex;
  justify-content: space-around;
  background-color: transparent;
  align-items: flex-end;
}

.flex-cont-photographs {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: transparent;
  padding-right: 10em;
}

.flex-cont-imagepage {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: transparent;
  padding-right: 10em;
  padding-left: 8em;
  padding-top: 1em;
  padding-bottom: 10em;
}

.pixelthumb {
  padding: 1em; /* Some padding */
  width: 27%; /* Set a small width */
}

.wrapper {
  padding: 1em 0 1em 0;
}

.bottompadding {
  padding-bottom: 1em;
}

.padding-home {
  padding-top: 2em;
  padding-bottom: 3.25em;
}

.wrapper-paintorpixel {
  padding: 2em;
}

.poem {
  display: block;
  font-size: 1em;
  line-height: 1.5em;
  width: 75%;
  margin-left: 15%;
}

.poemtitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
  padding-top: .3em;
  padding-bottom: .5em;
  margin-left: 15%;
}

.authorbio {
  display: block;
  font-size: 1em;
  line-height: 1.5em;
  padding-top: .3em;
  padding-bottom: .5em;
  width: 75%;
  margin-left: 15%;
}

.pixels {
  font-family: 'Nunito', sans-serif;
  font-size: 1.5em;
  padding-top: .3em;
  padding-bottom: .5em;
  margin-left: 5%;
}

.pixeltitle {
  font-family: 'Nunito', sans-serif;
  font-size: .75em;
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 1em;
  padding-bottom: .5em;
  padding-left: 1.5em;
}

.centerimage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1em;
  padding-bottom: 0;
  width: 2%;
}

.card {
  /* Add shadows to create the "card" effect */
  transition: 0.3s;
  padding-top: 5%;
  padding-bottom: 5%;
  }

.card:hover {
  /* On mouse-over, add a deeper shadow */
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

.cardimagesize {
  max-width: .75
  }

.colorchange {
  font-weight: bold;
  position: absolute;
  -webkit-animation: colorchange 18s infinite;
}

/*breadcrumb/
/* Style the list */
ul.breadcrumb {
  padding-top: 2em;
  padding-left: 2.75em;
  padding-bottom: 2em;
  list-style: none;
  background-color: #C7C7CE;
  color: #000000;
  font-weight: bolder;
  text-transform: uppercase;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 1.25em;
}

/* Add a pipe symbol (|) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 4px;
  color: black;
  content: "|\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: normal;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

/*monitor IDs*/

#creativecommons {
  text-align: center;
  font-family: 'Nunito', sans-serif;
  margin: 0 auto;photo
  display: block;
}

#copyright {
  text-align: center;
  font-family: 'Nunito', sans-serif;
  margin: 0 auto;
  display: block;
}

#creativecommonslink {
  margin: 0 auto;
  display: block;
  max-width: 7.5%;
}

#work {
  background-color: #c7c7ce;
  text-align: center;
  font-weight: bold;
  font-size: 1.25em;
}

#left  {
  background-color: #FFFFFF;
  padding: 2%;
  width: 28%;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
}

#center  {
  background-color: #FFFFFF;
  padding: 2%;
  width: 28%;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
}

#right {
  background-color: #FFFFFF;
  padding: 2%;
  width: 28%;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
}

/*page title color change code*/

@-webkit-keyframes colorchange {
  /*black*/
  0% {

    color: #000;
  }

  /*red*/
  33% {

    color: #fa260f;
  }

  /*gray*/
  66% {

    color: #c7c7ce;
  }

  /*black*/
  100% {

    color: #000;
  }
}

/*tablet form factor code* At 1786 and beyond, you get three across. Everything up to 1600px will look like this. */

@media only screen and (max-width: 1600px)
{

  /* The sidebar menu */
  .sidenav {
    width: 250px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 16em; /* Stay at the top */
    right: 0;
    background-color: #c7c7ce; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
  }

  .sidenav-poems {
    width: 225px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 12em; /* Stay at the top */
    right: 0;
    background-color: #C7C7CE; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
  }

  /* The navigation menu links */
  .sidenav a {
    padding-left: 1em;
    padding-right: 1em;
    line-height: 2em;
    text-decoration: none;
    font-size: 13px;
    display: block;
    text-transform: uppercase;
  }

  /* The navigation menu links */
  .sidenav-poems a {
    padding-left: 1em;
    padding-right: 1em;
    line-height: 2em;
    text-decoration: none;
    font-size: 13px;
    display: block;
    text-transform: uppercase;
  }


/* .flex-cont-imagepage {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: transparent;
  padding-right: 5em;
  padding-left: 5em;
  padding-top: 1em;
  padding-bottom: 5em;
} */

.wrapper-paintorpixel {
  padding-top: 2em;
  padding-right: 0;
  padding-bottom: 2em;
  padding-left: 2em;
 }

.flex-cont-imagepage {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: transparent;
  padding-right: 10em;
  padding-left: 4em;
  padding-top: 1em;
  padding-bottom: 10em;
}

.pixelthumb {
  padding: 1em; /* Some padding */
  width: 30%;
}

.centerimage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1em;
  padding-bottom: 0;
  width: 2%;
  }

  img {
  max-width: 100%;
  }
}

@media only screen and (max-width: 1200px){

  h2 {
    font-family: 'Nunito', sans-serif;
    font-size: .80em;
    text-transform: uppercase;
  }
  .description {
    font-family: 'Nunito', sans-serif;
    font-size: .75em;
    padding-top: .75em;
  }
  .flex-cont-imagepage {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: transparent;
    padding-right: 2em;
    padding-left: 0em;
    padding-top: 1em;
    padding-bottom: 2em;
  }
}


/*smaller tablet form factor code*. Beyond this is where it breaks into three.*/

@media only screen and (max-width: 768px) {

  body {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
  }

  h1 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
  }

  h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 1em;
    text-transform: uppercase;
  }

  .description {
    font-family: 'Nunito', sans-serif;
    font-size: .75em;
    padding-top: .75em;
  }

  figcaption {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 1.5em;
  }

  img {
    max-width: 100%;
  }

  p, ul, li {
    font-family: 'Nunito', serif;
    font-size: 1em;
  }

  a {
    font-family: 'Nunito', Arial, sans-serif;
    font-size: 1em;
    color: #000000;
  }

/*comment out*
  img {
    max-width: 30%;
    height: auto;
  }/

  /*smaller tablet classes*/

  .wrapper {
    padding: 0 0 1em 0;
  }

  .flex-cont {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: stretch;
    background-color: transparent;
  }

  .flex-cont-photographs {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    background-color: transparent;
    padding-left: 2em;
    padding-right: 2em;
  }

  .flex-cont-imagepage {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: transparent;
    padding-right: 2em;
    padding-left: 0em;
    padding-top: 1em;
    padding-bottom: 2em;
  }

  .pixels {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5em;
    padding-top: .3em;
    padding-bottom: .5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .pixeltitle {
    font-family: 'Nunito', sans-serif;
    font-size: .75em;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 1em;
    padding-bottom: .5em;
    padding-left: 4em;
  }

  .pixelthumb {
    padding: 1em; /* Some padding */
    width: 120%;
  }

  .centerimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
    padding-bottom: 0;
    width: 3%;
  }

  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  }

  /* The sidebar menu */
  .sidenav {
    width: 150px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 15em; /* Stay at the top */
    right: 0;
    background-color: #c7c7ce; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    display: none;
  }

  .sidenav-poems {
    width: 150px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 12em; /* Stay at the top */
    right: 0;
    background-color: #C7C7CE; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    display: none;
  }

  /* The navigation menu links */
  .sidenav a {
    padding-left: 1em;
    padding-right: 1em;
    line-height: 2em;
    text-decoration: none;
    font-size: 10px;
    display: block;
    text-transform: uppercase;
  }

  /* The navigation menu links */
  .sidenav-poems a {
    padding-left: 1em;
    padding-right: 1em;
    line-height: 2em;
    text-decoration: none;
    font-size: 10px;
    display: block;
    text-transform: uppercase;
  }

  #work {
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
  }

  #left  {
    width: auto;
    height: auto;
    margin-bottom: 2.5%
  }

  #center  {
    width: auto;
    height: auto;
    margin-bottom: 2.5%;
  }

  #right {
    width: auto;
    height: auto;
  }

  #creativecommonslink {
    margin: 0 auto;
    display: block;
    max-width: 12.5%;
  }

  #creativecommons {
    text-align: center;
    font-family: 'Nunito', sans-serif;
    margin: 0 auto;
    display: block;
    line-height: 1.5;
  }
}

/*iphone 6, 7, 8 form factor code* super tiny can't see this on monitor*. Everything up to 375 pixel width will look like this.*/

@media only screen and (max-width: 375px) {

  body {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
  }

  h1 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.75em;
    text-transform: uppercase;
  }

  h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 1em;
    text-transform: uppercase;
  }

  figcaption {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    padding-top: .5em;
    padding-bottom: 1em;
  }

  p, ul, li {
    font-family: 'Nunito', serif;
    font-size: 1em;
  }

  a {
    font-family: 'Nunito', Arial, sans-serif;
    font-size: 1em;
    color: #000000;
  }

/*comment out*
  img {
    max-width: 30%;
    height: auto;
  }/

  /*smaller tablet classes*/

  .wrapper {
    padding: 0 0 1em 0;
  }

  .card {
    /* Add shadows to create the "card" effect */
    transition: 0.3s;
    padding-top: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-left: 4%;
    }

  .flex-cont {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: stretch;
    background-color: transparent;
  }

  .flex-cont-photographs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: transparent;
  }

  .pixelthumb {
    padding: 1em; /* Some padding */
    width: 75%;
  }

  .pixeltitle {
    font-family: 'Nunito', sans-serif;
    font-size: .75em;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 1em;
    padding-bottom: .5em;
    padding-left: 4em;
  }

  .centerimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
    padding-bottom: 0;
    width: 4%;
  }

  /* The sidebar menu */
  .sidenav {
    width: 150px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 15em; /* Stay at the top */
    right: 0;
    background-color: #c7c7ce; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    display: none;
  }

  .sidenav-poems {
    width: 150px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 12em; /* Stay at the top */
    right: 0;
    background-color: #C7C7CE; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    display: none;
  }

  /* The navigation menu links */
  .sidenav a {
    padding-left: 1em;
    padding-right: 1em;
    line-height: 2em;
    text-decoration: none;
    font-size: 10px;
    display: block;
    text-transform: uppercase;
  }

  /* The navigation menu links */
  .sidenav-poems a {
    padding-left: 1em;
    padding-right: 1em;
    line-height: 2em;
    text-decoration: none;
    font-size: 10px;
    display: block;
    text-transform: uppercase;
  }

  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  }

  #work {
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
  }

  #left  {
    width: auto;
    height: auto;
    margin-bottom: 2.5%
  }

  #center  {
    width: auto;
    height: auto;
    margin-bottom: 2.5%;
  }

  #right {
    width: auto;
    height: auto;
  }

  #creativecommonslink {
    margin: 0 auto;
    display: block;
    max-width: 12.5%;
  }

  #creativecommons {
    text-align: center;
    font-family: 'Nunito', sans-serif;
    margin: 0 auto;
    display: block;
    line-height: 1.5;
  }
}
}