/* ==========================================================================
    Base & Type
   ========================================================================== */

html {
    color: #222;
    font-size: 100%;
    line-height: 1.4;
}

body{
  background:rgb(244, 244, 244);
  color:rgb(48,48,48);
  font-family: mrs-eaves, serif;
    font-size:1.5rem;
    font-style: normal;
    font-weight: 400;
}

h1{
  font-family: mr-eaves-modern, sans-serif;
    font-size:3.5rem;
    font-style: normal;
    font-weight: 400;
    line-height:1;
  margin-bottom:0.25em;
}

a{
  color:rgb(48,48,48);
  text-decoration:none;
  border-bottom:2px solid rgb(0,121,196);
  -webkit-transition: color 0.35s ease;
  -moz-transition: color 0.35s ease;
  -ms-transition: color 0.35s ease;
  -o-transition: color 0.35s ease;
  transition: color 0.35s ease;
}

a:hover{
  color:rgb(0,121,196);
}

::-moz-selection {
    background: rgb(0,121,196);
    text-shadow: none;
}

::selection {
    background: rgb(0,121,196);
    text-shadow: none;
}

hr {
    display: block;
    width:4em;
    height: 2px;
    border: 0;
    border-top: 2px solid rgb(224,224,224);
    margin: 0.25em 0 1.5em 0;
    padding: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

main{
  min-height:92vh;
  padding:4vh 2vw;
  display:grid;
    grid-template-areas:
      "profile-pic content";
    grid-template-columns:repeat(2  ,50%);
}

.portrait{
  background:url(../img/prof-portraitold02.jpg) no-repeat center 0 rgb(224,224,224);
    background-size:cover;
  grid-area:profile-pic;
    grid-column: 1 / 2;
  height:92vh;
}

.content{
  position:relative;
  padding:20vh 4vw 0 4vw;
  grid-area:content;
    grid-column:2 / 2;
  height:72vh;
}

footer{
  position:absolute;
  bottom:0;
  width:40vw;
  display:grid;
    grid-template-areas:
      "footer-meta footer-social";
    grid-template-columns:repeat(2  ,50%);
  font-family: mr-eaves-modern, sans-serif;
    font-size:1.125rem;
}

footer a{
  color:rgb(50,50,50);
  text-decoration:none;
  border-bottom:0;
}

footer a:before{
  padding:0 0.25em 0 0.125em;
  content:"\002f";
}

footer .social li:first-of-type a:before{
  content:" ";
}

footer .meta{
  grid-area:footer-meta;
  margin:0;
}

footer .social{
  grid-area:footer-social;
  text-align:right;
  list-style:none;
  padding:0;
  margin:0;
}

footer .social li{
  display:inline;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
    Media Queries
   ========================================================================== */

/* 896px */
@media only screen and (max-width: 56em) {
  h1{
    line-height:normal;
    margin-top:0;
  }
  main{
    grid-template-columns: 100%;
    padding:2vw 6vw;
  }
  .content{
    padding:0;
  }
  .portrait{
    display:none;
  }
  .content{
    grid-column:1/2;
  }
  footer{
    width:auto;
    right:0;
    left:0;
  }
}
/*448px */
@media only screen and (max-width: 27em){
  main{
    padding:6vw 6vw;
  }
  .content{
    padding:0;
  }
  footer{
    left:0;
    right:0;
    display:block;
  }
  footer .social{
    text-align:left;
  }
}