mystyle.css

body {
  background: url("http://i.imgur.com/wWSsSWD.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  display: inline-flex;
  box-sizing: border-box;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 15px;
  width: 95%;
  height: 100vh;
}

.greeter {
  color: white;
  text-shadow:
    2px 2px 0 rgba(70, 70, 70, 0.3),
    -2px -2px 0 rgba(70, 70, 70, 0.3),
    -2px 2px 0 rgba(70, 70, 70, 0.3),
    2px -2px 0 rgba(70, 70, 70, 0.3);
  padding-top: 6em;
  text-align: center;
  width: 25%;
}

.greeter h1 {
  padding-top: .2rem;
  font-size: 3rem;
}

.greeter img {
  border: 10px solid 	#ffcc33;
  border-radius: 30px;
}

.main {
  margin-top: 6.5em;
  width: 55%;
}

.about-me, .contact-info, .portfolio {
  font-size: 1.2rem;
  background: rgba(100, 100, 100, 0.6);
  border: 2px solid rgba(100, 100, 100, 0.7);
  color: white;
  padding: 1.5em;
  width: 80%;
  margin: 0px auto;
}

.main a {
  color: white;
  font-weight: bold;
}

.nav {
  width: 20%;
  list-style-type: none;
  margin-top: 5em;
  color: #ffcc33;
}

.nav li {
  width: 100%;
  padding: .6em .25em .25em .25em;
  height: 2rem;
  margin: 1em 0px;
  border: .3em solid rgba(255, 204, 51, 0.5);
  border-radius: 1em;
  background-color: rgba(255, 204, 51, 0.2);
  text-align: center;
}

.nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}

.nav li~li{
  padding-bottom: 1.7em;
}

@media (max-width: 800px) {
  body {
    display: block;
    width: 95%;
    height: auto;
  }

  .nav {
    width: 95%;
  }

  .greeter {
    width: 95%;
  }

  .main {
    width: 95%;
    margin: 10px auto;
  }

  .nav li {
    width: 90%;
  }
}


/*below: setup for portfolio*/

.portfolio {
   height: 450px;
 }

 .container {
   text-align: center;
 }

 .image {
   width: 20%;
   height: 300px;
   display: inline-block;
   background-color: rgba(100, 100, 100, 0.6);
   position: relative;
   -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -o-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   transition: width .5s ease-in-out, background-color .5s ease-in-out;
 }

 .image:hover {
   background-color: rgba(100, 100, 100, 0.6);
   width: 40%;
   -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   -o-transition: width .5s ease-in-out, background-color .5s ease-in-out;
   transition: width .5s ease-in-out, background-color .5s ease-in-out;
 }

 .name {
   position: absolute;
   font-size: 1.5rem;
   opacity: 0;
   color: #009bce;
   text-align: left;
   bottom: 0;
   text-shadow:
      1px -1px 0 #334444,
      -1px 1px 0 #334444,
       1px 1px 0 #334444;
 }

 .image:hover .name {
   opacity: 1;
   -webkit-transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -ms-transition: opacity .5s ease-in-out;
   -o-transition: opacity .5s ease-in-out;
   transition: opacity .5s ease-in-out;
 }

 .layer {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   background-color: black;
   width: 100%;
   height: 100%;
   opacity: .75;
   -webkit-transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -ms-transition: opacity .5s ease-in-out;
   -o-transition: opacity .5s ease-in-out;
   transition: opacity .5s ease-in-out;
 }

 .image:hover .layer {
   opacity: 0;
   -webkit-transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -ms-transition: opacity .5s ease-in-out;
   -o-transition: opacity .5s ease-in-out;
   transition: opacity .5s ease-in-out;
 }

 .image {
   background-size: cover;
   background-position: center center;
 }

 .image.one {
   background-image: url(http://i.imgur.com/UikNQ4c.png);
 }

 .image.two {
   background-image: url(http://i.imgur.com/iZwX0cD.jpg);
 }

 .image.three {
   background-image: url(http://i.imgur.com/ddcXAXX.jpg);
 }

 .image.four {
   background-image: url(http://i.imgur.com/NeLciK4.jpg);
 }