/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

* {
   box-sizing: border-box;
   background-color: gainsboro;
}

img, video {
   display: block;
}

i {
   background-color: rgba(0, 0, 0, 0);
}

/*div {
   border: 1px solid red;
}*/

header {
   background-image: url("../img/header.jpeg");
   background-position: center; 
   background-repeat: no-repeat; 
   background-size: cover;
   padding: 7%;
   margin-bottom: 3%;
}

.profilepic {
   margin-bottom: 3%;
   margin-top: 3%;
}

.profilepic img {
   width: 40%;
   margin-left: auto;
   margin-right: auto;
   border: 2px solid black;
}

.name {
   border: 2px solid black;
   margin: auto;
   width: 300px;
   height: 100px;
   font-family: 'Slabo 27px', serif;
   font-size: 2em;
   text-align: center;
   padding-top: 30px;
}

nav {
   text-align: center;
   width: 50%;
   margin: 20px auto;
   border: 2px solid black;
}

nav ul {
   list-style: none;
   padding-left: 0;
}

nav li {
   list-style: none;
   display: inline-block;
   margin-top: 20px;
   margin-bottom: 20px;
}

nav li a {
   text-decoration: none;
   color: black;
   padding: 20px;
   font-family: 'Slabo 27px', serif;
   font-size: 1.5em;
}

nav li a:hover {
   color: rosybrown;
}

.current a {
   color: rosybrown;
}

.bio {
   width: 65%;
   border: 2px solid black;
   padding: 1%;
   margin: auto;
   font-family: 'Slabo 27px', serif;
   margin-bottom: 3%;
   font-size: 1.2em;
}

.footer {
   text-align: right;
   font-family: 'Slabo 27px', serif;
   padding-right: 2%;
   width: 100%;
}

/*writing*/

.work {
   padding-top: 3%;
   overflow: hidden;
}

.item {
   width: 25%;
   display: inline-block;
   margin-left: 4%;
   margin-right: 4%;
   margin-bottom: 6%;
   position: relative;
 /*  border: 3px solid black;*/
}

.item img {
   width: 100%;
}

.link {
  font-family: 'Slabo 27px', serif;
  font-size: 1.15em;
  color: white;
  text-align: center;
  margin-top: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  height: 100%;
  width: 100%;
  padding: 10%;
  background-color: rgba(0, 0, 0, 0.6);
}

.link a {
   text-decoration: none;
}

.homestead {
   padding: 6%;
}

.photographer {
   font-size: 1em;
}

/*contact*/

.bigbox {
   overflow: hidden;
}

.content {
   width: 45%;
   float: left;
   margin: 2.5%;
   text-align: center;
   font-size: 1.7em;
   position: relative; 
   border: 3px solid black; 
}

.content img {
   width: 100%;
}

.content a {
   font-family: 'Slabo 27px', serif;
   text-decoration: none;
   color: gainsboro;
}

.content a:hover {
   color: rosybrown;
}

.social {
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   padding-top: 42%;
}

.footer {
   text-align: right;
   font-family: 'Slabo 27px', serif;
   padding-right: 2%;
   width: 100%;
}

/*mid-range media query*/

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

/*portfolio*/

   .item {
      width: 41.5%;
   }

   .link {
      display: block;
      font-size: 1.3em;
   }

/*contact*/

   .social {
      font-size: .7em;
   }

}

/*mobile media query*/

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

/*about */

   .profilepic img{
      width: 80%;
   }

   .bio {
      width: 80%;
   }

/*portfolio*/

   .item {
      width: 80%;
      margin-left: 10%;
   }

   .link{
      font-size: 1.5em;
      display: block;
      background-color: rgba(0, 0, 0, 0.4);
   }

/*contact*/

   .content {
      width: 90%;
      margin-left: 5%;
   }

   .social {
      padding-top: 42%;
      font-size: 1em;
   }

}