body {
 	margin: 0 auto;
 	width: 65%;
    font-family: 'Josefin Slab', serif;
 }

 header {
   display: grid;
   grid-template-columns: 300px 1fr;
   background-color: #CCD9D7;
   padding-left: 10px;
 }

 .right-content{
 	float: left;
   width: 800px;
   height: 800px;
   padding: 10px;
   border-right: 1px solid #BF8578;
 }

 .right-content p {
   font-size: 25px;
   padding-bottom: 80px;
 }

 .right-content p::first-letter{
   font-size: 40px;
   color: #BF8578;
 }

 .right-content img {
   display: block;
  margin-left: auto;
  margin-right: auto
 }

 h1{
   font-family: 'Square Peg', cursive;
   font-size: 40px;
 }

 .right-content h2 {
   font-size: 30px;
   text-align: center;
   color: #70735C;
 }

.left-content h3{
   font-size: 30px;
   text-align: center;
   border-bottom: 1px solid black;
   color: #70735C;
}

h4{
   font-size: 20px;
}

h5{
   font-size: 20px;
}
h6{
   font-size: 20px;
}

 #intro img {
    width: 500px;
 }

 .left-content {
 	float: right;
   padding: 10px;
   
 }
 .left-content img {
   width: 180px;
 }

 .main-navigation {
 	overflow: hidden;
 	background-color: #CCD9D7;
   width: 100%;
 }

 .main-navigation a {
 	float: left;
 	font-size: 25px;
 	padding: 10px;
   padding-right: 80px;
 	border-bottom: 1px solid #595542;
 }

 .clearfix{
 	clear: both;
 }

 footer {
   padding: 10px;
   border-top: 1px solid #BF8578;
 }

 .bird img {
   width: 800px;
 }

 .recipe img {
   width: 800px;
 }

 .narrative img {
   width: 800px;
 }

.form img{
   width: 500px;
}

#capstone img {
   width: 500px;
}

.main-navigation a{
   color: #BF8578;
}

.left-content a{
   color: #BF4545;
}

.projects p {
   font-size: 25px;
}

.bird p:nth-child(4) {
   font-size: 25px;
   border-bottom: 1px solid #BF4545;
}
.page2 a {
   font-size: 25px;
} 

.bird h3 {
   font-size: 30px;
   font-style: italic;
}
.recipe p {
   font-size: 25px;
}
.recipe h4 {
   font-size: 30px;
   font-style: italic;
}
.recipe p:nth-child(4){
   border-bottom: 1px solid #BF4545;
}
.narrative p {
   font-size: 25px;
}
.narrative h5 {
   font-size: 30px;
   font-style: italic;
}

.projects h2 {
   font-size: 35px;
   text-align: center;
   color: #BF4545;
}

.fa-regularfa-envelope{
   width: 50px;
}

.open p {
   font-size: 25px;
}

.open a {
   color: #595542;
}

.open h2{
   font-size: 30px;
   text-align: center;
}

.open {
   height: 600px;
}

.left-items {
float: left;
   padding: 10px;
  width: 800px; 
}
.left-items h2 {
   font-size: 35px;
   text-align: center;
   color: #BF4545;
}
.left-items p {
   font-size: 25px;
}

.right-items {
float: right;
   padding: 10px;
   width: 350px;
   height: 950px;
   border-left: 1px solid #BF4545;
}
.right-items p{
   font-size: 25px;
}
.right-items h4 {
   text-align: center;
   font-size: 25px;
   color: #BF4545;
}

.email {
   transition: transform .5s;
   position: absolute;
   z-index: 0;
}

.email:hover{
   transform: scale(1.3);
}

.insta{
   transition: transform .5s;
   position: fixed;
}
.insta:hover{
   transform: scale(1.3);
}
.twitter{
   transition: transform .5s;
   position: fixed;
}
.twitter:hover{
   transform: scale(1.3);
}

 /*tablet styles*/
      @media only screen and (min-width: 600px) and (max-width: 800px) {
         .page2{
            display: grid;
            grid-template-columns: 1fr;
         }
         .page2 img {
            width: 100%;
         }
         .left-items{
            display: grid;
            grid-template-columns: 1fr;
            width: 100%;
            float: none;
         }
         .left-items img{
            width: 100%;
            float: none;
         }
         .right-items img {
            width: 100%;
            float: none;
         }
         .right-items{
            width: 100%;
            border: none;
         }
         #intro {
            display: grid;
            grid-template-columns: 1fr;
            float: none;
            width: 100%;
            border: none;
         }
         .left-content{
            display: grid;
            grid-template-columns: 1fr;
            float: none;
            width: 100%;
         }
         #intro p {
            padding: 10px;
         }
        
      }


/*desktop styles*/
      @media only screen and (min-width: 801px) 
      {

        
      }