@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400");
@import url("https://fonts.googleapis.com/css?family=Lato:300");
html {
  box-sizing: border-box; }

body {
  background-color: #222327;
  color: #ccc;
  font-family: "Source Sans Pro", sans-serif;
  font-display: swap;
  padding: 4vh 2rem;
  min-height: 100vh; }

a {
  color: #ccc; }
  a:focus, a:hover {
    color: #da9f68; }

header {
  text-align: right; }
  @media screen and (min-width: 900px) {
    header {
      position: fixed;
      width: calc(50% - 150px - 3rem);
      top: 0;
      left: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: right; } }
  @media screen and (min-width: 1280px) {
    header {
      width: calc(50% - 150px - 5rem); } }
h1 {
  color: #eee;
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 0em;
  margin-right: -0.2em;
  font-family: "Lato", sans-serif; }
  @media screen and (min-width: 900px) {
    h1 {
      font-size: 2.8em; } }
  @media screen and (min-width: 1280px) {
    h1 {
      letter-spacing: 2px;
      font-size: 4em; } }
#subheading {
  font-size: 1.9em;
  color: #da9f68;
  margin: 0;
  letter-spacing: 1px;
  font-weight: 300;
  font-size: 2em; }
  @media screen and (min-width: 1280px) {
    #subheading {
      margin-top: 0.5em; } }
#contact {
  margin-top: 0.8em; }
  #contact a:first-child::before {
    content: "";
    background: url("/images/mail.svg") 50% 50% no-repeat;
    width: 1em;
    height: 1em;
    background-size: contain;
    margin-right: 0.3em;
    display: inline-block;
    position: relative;
    top: 0.2em; }
  #contact a {
    display: inline-block;
    padding: 0.25em;
    margin-top: 0.15em; }

@media screen and (min-width: 900px) {
  main {
    margin-left: calc(50% - 150px); } }

#previous-work {
  margin-bottom: 3vh;
  color: #888;
  font-size: 1.1em;
  font-style: italic;
  font-weight: 300; }

.portfolio-item {
  margin-bottom: 3em; }
  @media screen and (min-width: 900px) {
    .portfolio-item {
      display: flex;
      flex-direction: row-reverse;
      justify-content: left;
      align-items: center;
      margin-bottom: 4.3em; } }
  .portfolio-item > a {
    display: block;
    text-align: center; }
  .portfolio-item h3 {
    margin-top: 0em;
    margin-bottom: 0.3em; }
  .portfolio-item h4 {
    display: inline-block;
    font-size: 0.8rem;
    margin: 0; }
    .portfolio-item h4 a {
      text-decoration: none;
      color: #92af5a; }
  .portfolio-item aside {
    display: inline-block;
    font-style: italic;
    font-size: 0.8em; }
    .portfolio-item aside::before {
      content: "/";
      margin-left: 0.2em;
      margin-right: 0.5em; }
  .portfolio-item p {
    margin-bottom: 0; }
  .portfolio-item img {
    display: block; }
    @media screen and (max-width: 899px) {
      .portfolio-item img {
        width: 100%;
        max-width: 300px;
        display: inline-block;
        margin-top: 1.5em; } }
    @media screen and (min-width: 900px) {
      .portfolio-item img {
        width: 240px;
        opacity: 0.8;
        filter: grayscale(10%); } }
    @media screen and (min-width: 1280px) {
      .portfolio-item img {
        width: 300px; } }
  .portfolio-item a:hover img {
    opacity: 1;
    filter: grayscale(0%); }
  .portfolio-item a p {
    font-size: 0.8em;
    margin: 0.4em 0 0;
    color: #888;
    text-decoration: underline; }
    @media screen and (min-width: 900px) {
      .portfolio-item a p {
        position: absolute; } }
  .portfolio-item a:focus p, .portfolio-item a:hover p {
    color: #da9f68; }
  .portfolio-item .description {
    line-height: 1.6em; }
    @media screen and (min-width: 900px) {
      .portfolio-item .description {
        margin-left: 2em; } }
  .portfolio-item .technologies {
    padding-left: 0; }
    .portfolio-item .technologies .icon {
      display: inline-block;
      margin-right: 0.6em; }
      .portfolio-item .technologies .icon::before {
        content: "";
        margin-right: 0.3em;
        display: inline-block;
        width: 1em;
        height: 1em;
        position: relative;
        top: 0.15em; }
      .portfolio-item .technologies .icon.rails::before {
        background: url("/images/rails.svg") 50% 50% no-repeat; }
      .portfolio-item .technologies .icon.postgres::before {
        background: url("/images/postgres.svg") 50% 50% no-repeat; }
      .portfolio-item .technologies .icon.js::before {
        background: url("/images/js.svg") 50% 50% no-repeat; }
      .portfolio-item .technologies .icon.vue::before {
        background: url("/images/vue.svg") 50% 50% no-repeat; }
      .portfolio-item .technologies .icon.threejs::before {
        background: url("/images/threejs.svg") 50% 50% no-repeat; }
      .portfolio-item .technologies .icon.d3::before {
        background: url("/images/d3.svg") 50% 50% no-repeat; }
      .portfolio-item .technologies .icon.middleman::before {
        background: url("/images/middleman.svg") 50% 50% no-repeat; }