/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126
License: none (public domain)*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

/*don't touch the reset above*/

/* default styles */

body{
  font-size: 23px;
  background-image: url('img/background.jpg');
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
}

#wrapper{
  width: auto;
  max-width: 900px;
  margin: 0 auto;
  margin-bottom: 10px;
  padding: 1%;
  background: rgb(255,250,250, 0.8);
  border: 5px solid hotpink;
}

#ham-icon {
  display: block;
  font-size: 2.5em;
  width: auto;
  margin: 5px 5px 5px auto;
  text-decoration: none;
}

#close-icon {
  display: block;
  font-size: 1em;
  margin: 0 auto;
  padding-bottom: 50px;
}

a.menu-icon:link, a.menu-icon:visited {
  color: cyan;
  text-decoration: none;
}

a.menu-icon:hover, a.menu-icon:focus {
     color: darkgreen;
}

a {
  text-decoration: none;
  color: cyan;
  text-shadow: 2px 2px 2px black;
}

a:hover {
  color: darkgreen;
  text-shadow: 0 0 3px white;
}

header{
  background-color: grey;
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0 auto;
  padding: 1%;
}

nav {
  display: none;
  font-size: 23px;
  grid-column-start: 2;
  grid-column-end: 4;
  }

nav ul{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5%;
  text-align: center;
  padding-top: 1.5%;
}

header h1{
  font-family: 'Updock', Helvetica, cursive;
  font-size: 2.8em;
  color: pink !important;
  text-shadow: 2px 2px 2px black;
}

h2 {
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  padding-bottom: 2%;
}

h3 {
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
  padding-bottom: 2%;
}


#about{
  display: grid;
}

.about {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2%;
  margin: auto;
}

.about img {
  width: 95%;
  margin: 2.5%;
  border-radius: 6px;
  align-items: center;
  grid-column-start: 1;
  grid-column-end: 4;
}

.bio {
  padding: 2%;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px black;
  background-color: rgb(199,186,177, 0.7);
}

.bio h2 {
  margin-bottom: 1%;
  grid-column-start: 1;
  grid-column-end: 4;
}

.bio p {
  padding: 1%;
  grid-column-start: 2;
  grid-column-end: 4;
  font-size: 22px;
  line-height: 1.5em;
}

br {
  display: block; 
  content: "";
  margin-top: 5%;
}

footer {
  padding: 1%;
  text-align: center;
  font-style: italic;
  font-size: 20px;
}

.proj img {
  width: 95%;
  margin: 2.5%;
  border-radius: 6px;
  align-items: center;
}

#planets {
  padding: 2%;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px black;
  background-color: rgb(199,186,177, 0.7);
  margin-bottom: 2%;
  grid-gap: 1%;
}

#animals {
  padding: 2%;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px black;
  background-color: rgb(199,186,177, 0.7);
  margin-bottom: 2%;
  grid-gap: 1%;
}

#video {
  padding: 2%;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px black;
  background-color: rgb(199,186,177, 0.7);
  display: block;
  margin-left: auto;
  margin-right: auto;
  grid-column-start: 1;
  grid-column-end: 4;
  margin-top: 1%;
}

.proj p {
  padding: 2%;
  grid-column-start: 1;
  grid-column-end: 4;
  font-size: 22px;
  line-height: 1.5em;
}

.web img {
  width: 70%;
  border-radius: 6px;
  margin: auto;
  display: block;
  text-align: center;
}

.textweb {
  padding: 2%;
  font-size: 22px;
  line-height: 1.5em;
}

#blackbird {
  padding: 2%;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px black;
  background-color: rgb(199,186,177, 0.7);
  margin-bottom: 2%;
  grid-gap: 1%;
}

#blini {
  padding: 2%;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px black;
  background-color: rgb(199,186,177, 0.7);
  margin-bottom: 2%;
  grid-gap: 1%;
}

#nar {
  padding: 2%;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px black;
  background-color: rgb(199,186,177, 0.7);
  margin-bottom: 2%;
  grid-gap: 1%;
}

.webtext {
  padding: 5%;
}

.recipe {
  margin-bottom: 7%;
}

/* desktop styles */

@media only screen and (min-width: 801px) {

nav {
  display: block !important;
}

nav ul {
  grid-template-columns: auto auto auto auto;
}

#ham-icon  {
  display: none !important;
}

#close-icon  {
  display: none;
}

.about img {
  width: 90%;
  margin: 2.5%;
  border-radius: 6px;
  grid-column-start: 1;
  grid-column-end: 2;
}

.bio {
  grid-column-start: 3;
  grid-column-end: 4;
}

.bio h1 {
  grid-column-start: 3;
  grid-column-end: 4;
}

.bio p {
  grid-column-start: 3;
  grid-column-end: 4;
}

.proj {
  display: grid;
}

#planets {
  grid-column-start: 1; 
  grid-column-end: 2;
  width: 93%;
}

#animals {
  grid-column-start: 3;
  grid-column-end: 4;
  width: 93%;
}

.web {
  display: grid;
  grid-gap: 2%;
  margin-right: 1.5%;
}

#blackbird {
  grid-column-start: 1; 
  grid-column-end: 1;
  width: 100%;
}

#blini {
  grid-column-start: 2;
  grid-column-end: 2;
  width: 100%;
}

#nar {
  grid-column-start: 3;
  grid-column-end: 3;
  width: 100%;  
}

}