body {
  margin: 24px;
  font-family: sans-serif;
  font-size: 16px;
}

a {
  color: black;
  border-bottom: 2px solid black;
  text-decoration: none;
  -webkit-transition: 0.15s;
  -moz-transition: 0.15s;
  -ms-transition: 0.15s;
  -o-transition: 0.15s;
  transition: 0.15s;
}

a:hover {
  border-bottom: 2px solid transparent;
}

img {
  width: 100%;
  border-radius: 24px;
}

hr {
  background: black;
  box-shadow: none;
  height: 1px;
}

.home-image {
  height: 100vh;
  width: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -100;
}

header {
  font-size: 24px;
}

header ul {
  margin: 24px;
  list-style-type: none;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}

header ul li {
  display: inline-block;
}

header ul li::after {
  content: ",";
  padding: 0 0 0 2px;
}

header ul li:last-of-type::after {
  content: "";
}

.projects-index {
  margin: 96px 0 0 0;
  grid-gap: 24px;
  grid-template-rows: auto;
}

.projects-grid {
  display: grid;
  grid-template-columns: fit-content(20%) fit-content(20%) fit-content(20%) fit-content(20%) fit-content(20%);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 32px;
}
.projects-grid img {
  border-radius: 12px;
  margin-bottom: 16px;
}
.projects-grid a {
  border-bottom: none;
}
.projects-grid a:hover > img {
  opacity: 80%;
}

.featured-projects {
  margin: 88px 24px 0 0;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-gap: 32px;
}
.featured-projects a {
  border-bottom: none;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.15s;
  -moz-transition: 0.15s;
  -ms-transition: 0.15s;
  -o-transition: 0.15s;
  transition: 0.15s;
}
.featured-projects a:hover {
  opacity: 80%;
}
.featured-projects img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

.tag {
  font-size: 12px;
  border: 2px solid blue;
  background: blue;
  color: white;
  border-radius: 4px;
  vertical-align: middle;
  padding: 2px 4px;
  display: inline-block;
  letter-spacing: 0.03rem;
}
.project-client {
  display: block;
}

table {
  font-size: 24px;
  text-align: left;
  width: 100%;
  border-collapse: collapse;
}
table thead tr {
  cursor: default;
}
table thead tr:hover {
  color: black;
}
table thead tr th {
  font-weight: 500;
  border-bottom: 2px solid black;
  padding: 0 0 16px 0;
}
table tr td {
  vertical-align: top;
  padding: 16px 0;
}
table tr {
  border-bottom: 2px solid black;
  cursor: pointer;
  -webkit-transition: 0.15s;
  -moz-transition: 0.15s;
  -ms-transition: 0.15s;
  -o-transition: 0.15s;
  transition: 0.15s;
}
table tr:last-of-type {
  border-bottom: none;
}
table tr:hover {
  color: blue;
}
table tr:hover .project-tag {
  color: blue;
  border: 2px solid blue;
  background: white;
}
table img {
  border-radius: 12px;
  width: 125px;
}

#thumb-24, #thumb-23, #thumb-22, #thumb-21, #thumb-20, #thumb-19, #thumb-18, #thumb-17, #thumb-16, #thumb-15, #thumb-14, #thumb-13, #thumb-12, #thumb-11, #thumb-10, #thumb-9, #thumb-8, #thumb-7, #thumb-6, #thumb-5, #thumb-4, #thumb-3, #thumb-2, #thumb-1, #thumb-0 {
  width: 750px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: none;
}

#thumb-24 img, #thumb-23 img, #thumb-22 img, #thumb-21 img, #thumb-20 img, #thumb-19 img, #thumb-18 img, #thumb-17 img, #thumb-16 img, #thumb-15 img, #thumb-14 img, #thumb-13 img, #thumb-12 img, #thumb-11 img, #thumb-10 img, #thumb-9 img, #thumb-8 img, #thumb-7 img, #thumb-6 img, #thumb-5 img, #thumb-4 img, #thumb-3 img, #thumb-2 img, #thumb-1 img, #thumb-0 img {
  width: 100%;
}

#project-24:hover #thumb-24 {
  display: block;
}

#project-23:hover #thumb-23 {
  display: block;
}

#project-22:hover #thumb-22 {
  display: block;
}

#project-21:hover #thumb-21 {
  display: block;
}

#project-20:hover #thumb-20 {
  display: block;
}

#project-19:hover #thumb-19 {
  display: block;
}

#project-18:hover #thumb-18 {
  display: block;
}

#project-17:hover #thumb-17 {
  display: block;
}

#project-16:hover #thumb-16 {
  display: block;
}

#project-15:hover #thumb-15 {
  display: block;
}

#project-14:hover #thumb-14 {
  display: block;
}

#project-13:hover #thumb-13 {
  display: block;
}

#project-12:hover #thumb-12 {
  display: block;
}

#project-11:hover #thumb-11 {
  display: block;
}

#project-10:hover #thumb-10 {
  display: block;
}

#project-9:hover #thumb-9 {
  display: block;
}

#project-8:hover #thumb-8 {
  display: block;
}

#project-7:hover #thumb-7 {
  display: block;
}

#project-6:hover #thumb-6 {
  display: block;
}

#project-5:hover #thumb-5 {
  display: block;
}

#project-4:hover #thumb-4 {
  display: block;
}

#project-3:hover #thumb-3 {
  display: block;
}

#project-2:hover #thumb-2 {
  display: block;
}

#project-1:hover #thumb-1 {
  display: block;
}

#project-0:hover #thumb-0 {
  display: block;
}

.project-meta {
  display: grid;
  grid-template-columns: 33% fit-content(80%);
  grid-template-rows: auto;
  grid-gap: 24px;
  border: 2px solid black;
  border-radius: 24px;
  padding: 32px;
  margin: 88px 0 32px 0;
  line-height: 1.4em;
  font-size: 24px;
}

.project-meta p:last-of-type {
  margin-bottom: 0;
}

.project-meta p:first-of-type {
  margin-top: 0;
}

.project-images img {
  margin-bottom: 32px;
}
.project-images img:last-of-type {
  margin-bottom: 0;
}

.project-description {
  column-count: 2;
}

.about-content {
  font-size: 24px;
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-rows: auto;
  grid-gap: 24px;
  margin: 88px 24px 0 0;
}

.about-content .left-rail {
  margin-top: 48px;
}

.about-content .left-rail div {
  margin-bottom: 24px;
}

.about-content .left-rail:first-child {
  margin-top: 0;
}

.about-content .bio p {
  margin-top: 0;
  margin-right: 24px;
}

@media screen and (max-width: 800px) {
  .project-index {
    margin: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-gap: 16px;
  }
  .project-description {
    column-count: 1;
    border-top: 2px solid black;
    margin-top: 16px;
    padding-top: 16px;
  }
  .project-meta {
    display: block;
  }
}

/*# sourceMappingURL=styles.css.map */