body {
  font-family: monospace, 'Karla', sans-serif;
  font-size: 1rem;
  color: #555;
}

h1, h2, h3 {
  font-family: 'Nunito Sans', serif;
  font-weight: 900;
  line-height: 1.2;
}

.projects a {color: #09B2F1;}
.projects a:hover {
  color: #09B2F1;
  text-decoration: none;
  box-shadow: 0 -0.65em 0 #fdf255 inset;

}

.personal {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 300;
    text-transform: uppercase;
    padding-top: 40px;
    padding-bottom: 20px;
    margin-bottom: 60px;
    background: #F3D53E;
    color: #fff;
}
.personal .row {padding-bottom: 0; margin-bottom: 0; border-bottom: none; margin-left: 0px;}
.personal a {
  color: #fff;
}
.project-title {
  color: #09B2F1; }
  /*
.row:nth-of-type(4n+3) .project-title {
  color: #F3D53E; }
.row:nth-of-type(4n+2) .project-title {
  color: #E83F97; }
.row:nth-of-type(4n) .project-title {
  color: #99C445; }
*/
.project-link {margin-top: 2em; margin-bottom: 2em;}
.project-link a {text-transform: uppercase; border: 2px solid #09b2F1; padding: .5em 1em;}
.project-link a:hover {background: #fdf255; box-shadow: none;}

h3.sub {font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #999; padding: 0px 0 20px 0}

.header {
  background-color:pink;
  height: 120px;
}
.sticky {
  position: sticky;
  top: 20px;
}
.content {
  min-height: 1000px;
}
.menu {
  background-color: red;
  color: white;
  padding: 40px 20px;
}
.related {
  background-color: grey;
  height: 100px;
}
.footer {
  background-color: blue;
}
.tall {
  height: 100vh;
}
.row {border-bottom: 1px solid #ccc; padding-bottom: 40px; margin-bottom: 40px;}

@media (max-width: 767px) {
  .sticky {position: static;}
  .content, .tall{height: auto; min-height: 0;}
}


body {
  font-family: 'Karla', sans-serif;
  font-size: 1.1rem;
  color: #555;
}

h1, h2, h3 {
  font-family: 'Nunito Sans', serif;
  font-weight: 900;
  line-height: 1.2;
}

.projects a {color: #09B2F1;}
.projects a:hover {
  color: #09B2F1;
  text-decoration: none;
  box-shadow: 0 -0.65em 0 #fdf255 inset;

}

.work {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 300;
    text-transform: uppercase;
    padding-top: 40px;
    padding-bottom: 20px;
    margin-bottom: 60px;
    background: #2DC3DF;
    color: #fff;
}
.work .row {padding-bottom: 0; margin-bottom: 0; border-bottom: none; margin-left: 0px;}
.work a {
  color: #fff;
}
.project-title {
  color: #09B2F1; }
  /*
.row:nth-of-type(4n+3) .project-title {
  color: #F3D53E; }
.row:nth-of-type(4n+2) .project-title {
  color: #E83F97; }
.row:nth-of-type(4n) .project-title {
  color: #99C445; }
*/
.project-link, .back {margin-top: 2em; margin-bottom: 2em;}
.project-link a, .back a {text-transform: uppercase; border: 2px solid #09b2F1; padding: .5em 1em;}
.project-link a:hover, .back a:hover {background: #fdf255; box-shadow: none;}

.project-link a.secret::before {  content: "🤞"}
.project-link a.secret::after {  content: "🤞"}
.project-link a.dead::before {  content: "💀 "}
.project-link a.dead::after {  content: " 💀"}
.project-link a.secret:hover, .project-link a.dead:hover {text-decoration: line-through; cursor:not-allowed; }

h3.sub {font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #999; padding: 0px 0 20px 0}

.header {
  background-color:pink;
  height: 120px;
}
.sticky {
  position: sticky;
  top: 20px;
}
.content {
  min-height: 1000px;
}
.menu {
  background-color: red;
  color: white;
  padding: 40px 20px;
}
.related {
  background-color: grey;
  height: 100px;
}
.footer {
  background-color: blue;
}
.tall {
  height: 100vh;
}
.row {border-bottom: 1px solid #ccc; padding-bottom: 40px; margin-bottom: 40px;}

.back {text-transform: uppercase; }

.press.table {font-size: 0.9em;}
.press.table td {padding-left: 0; border-bottom: 1px solid #efefef; border-top: none;}
.press.table td:first-child { font-size: 1em; font-weight: 900; line-height: 1.3; padding-top: 1em}
.press.table td:nth-child(2) {color: #ccc;}

@media (max-width: 767px) {
  .sticky {position: static;}
  .content, .tall{height: auto; min-height: 0;}
}