*{
  box-sizing: border-box;
}

body{
  background: url(../images/houndstooth-pattern.png)repeat;
  font-family: Arial, Helvetica, sans-serif;
  overflow:auto;
  color: #777777;
}

h1, h2, h3, h4, h5, h6{
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #4aaaa5;
  font-weight: bold;
}

header{
background-color: white;
box-shadow: 1px 1px 10px rgb(204,200,200);
margin-bottom: 30px;
width: 100%;
height: 70px;
padding: 0 15%;
}

#mynav{
  display: inline;
}



#name {
background: #4aaaa5;
color: white;
display: inline-block;
padding:13px;
font-size: 30px;
font-weight: bolder;
}

.links {
margin: 15px 0;
color: #777777;
font-size: 18px;
font-weight: bold;
float: right;
padding: 5px 15px;
}

#mynav a {
  border-left: 1px solid #777777;
}

#mynav a:last-child {
  border: 0;
}


a:hover { 
  background-color:lightgray;
  color: #4aaaa5;
}

#biobox {
  padding: 25px;
  border: 2px solid #ccc;
  background: white;
  width: 960px;
  margin: 0 auto 100px;
}

.inline-img{
  margin-right: 20px;
  height: 200px; 
  width: 200px;
  float: left;
}

.portfolio-item {
  position: relative;
  margin-bottom: 20px;
  width: 45%;
  float: left;
  height: 250px;
}
.portfolio-item:nth-of-type(even){
  float: right;
}

.portfolio-item h4 {
  background: #4aaaa5;
  color: white;
  text-align: center;
  padding: 15px 0;
  width: 100%;
  position: absolute;
  bottom: 15px;
}

img{
  width: 100%;
  height: 100%;
}

.long{
  width: 580px;
}

.message{
  height: 238px;
  width: 580px;
}

footer {
  background-color: #666;
  border-top: 5px solid #4aaaa5;
  color: #ccc;
  text-align: center;
  padding: 10px;
  margin-top: 8px;
  position: fixed;
  bottom: 0;
  width: 100%;
}


.clearfix::after {
  content: "";
  display: block;
  clear: all;
}


  @media only screen and (max-width: 980px) { 
  
  body{
    background: url(../images/houndstooth-pattern.png)repeat;
    font-family: 'Lora', serif;
    overflow:auto;
    color: #777777;
  }
  
  
  #biobox {
    padding: 25px;
    border: 2px solid #ccc;
    background: white;
    width: 745px;
    margin: 0 auto 100px;
    margin-left: 4%;
  }

  header{
    background-color: white;
    box-shadow: 1px 1px 10px rgb(204,200,200);
    margin-bottom: 30px;
    width: 105%;
    height: 70px;
    padding: 0 4%;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: all;
    } 

}


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

  body{
    background: url(../images/houndstooth-pattern.png)repeat;
    font-family: 'Black And White Picture', sans-serif;
    overflow:auto;
    color: #777777;
  }

  header{
    background-color: white;
    box-shadow: 1px 1px 10px rgb(204,200,200);
    margin-bottom: 30px;
    width: 100%;
    height: 70px;
    padding: 0 7%;
    }
    

    #biobox {
      padding: 2%;
      border: 2px solid #ccc;
      background: white;
      width: 87%;
      margin: 0 auto 100px;
    }

    .no-gutters {
      padding-right: 0;
      padding-left: 0;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: all;
    } 
  
}

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

  body{
    background: url(../images/houndstooth-pattern.png)repeat;
    font-family: Arial, Helvetica, sans-serif;
    overflow:auto;
    color: #777777;
  }

  header{
    background-color: white;
    box-shadow: 1px 1px 10px rgb(204,200,200);
    padding: 0;
    margin-bottom: 30px;
    width: 641px;
    height: 145px;
    }

    #name {
      background: #4aaaa5;
      color: white;
      padding:13px;
      font-size: 30px;
      font-weight: bolder;
      text-align: center;
      display: block;
      }

    #biobox {
      padding: 25px;
      border: 2px solid #ccc;
      background: white;
      width: 619px;
      margin: 0 auto 100px;
    }

    .links {
      margin: 15px 0;
      color: #777777;
      font-size: 18px;
      font-weight: bold;
      padding: 5px 15px;
      }

      .inline-img{
        width: 500px;
        height: 500px;
        margin-left: 20px;
        margin-bottom: 20px;
        margin-right: 20px;
        float: none;
      }

    .clearfix::after {
      content: "";
      display: block;
      clear: all;
    }  

}