* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  line-height: 1.25;
}

a {
  color: #fff;
}

.frame {
  padding: 1.25rem 3rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.frame a {
  text-decoration: none;
  margin: 0 1.5rem 0.5rem 0;
  word-spacing: -0.15rem;
  color: #000;
  font-weight: 400;
}

.frame a:hover,
.frame a:focus,
a.frame__nav-link--current {
  text-decoration: underline;
}

.frame__nav {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}

.site {
  background: radial-gradient(50% 50% at 50% 50%, rgba(123, 131, 126, 0.9) 0%, rgba(54, 75, 73, 0.9) 100%), #364b49;
  background-repeat: no-repeat;
  color: #FFF;
  min-height: 120vh; /* allows room for scrolling to see parallax */
  height: 100%;
}

.site__header,
.site__nav-list {
  display: flex;
}

.site__header {
  position: fixed;
  top: 0;
  right: 1.25rem;
  writing-mode: vertical-rl;
  height: 100%;
  padding: 1.25rem 0;
  z-index: 20; /* to overlap the grid component */
}

.site__header > * {
  flex: 1 1 auto;
  padding-bottom: .625rem;
}

.site__nav-list {
  justify-content: space-between;
  list-style-type: none;
}

.site__nav {
  padding-bottom: 0;
}

.site__nav-link {
  display: block;
  text-decoration: none;
  color: #FFF;
  padding-bottom: .625rem;
}

.site__nav-list li:last-child .site__nav-link {
  padding-bottom: 0;
}

.block {
  display: block;
}

.main {
  padding: 5rem 0;
  display: flex;
  justify-content: center; /* center content horizontally */
  align-items: center; /* center content vertically */
  min-height: 100vh; /* make content as tall as the viewport */
  width: 100%;
}

.container {
  position: relative;
}

.heading {
  font-size: 1.5rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

@media screen and (min-width: 40rem) {
    .heading {
        font-size: 2rem;
        text-decoration: none;
        position: absolute;
        left: 0;
        top: 6rem;
        z-index: 10; /* to be on top of grid */

    }
    .frame {
      height: 100%;
      position: fixed;
      pointer-events: none;
      z-index: 100;
    }
    .frame__nav {
      margin-top: auto;
    }
    .frame a {
      pointer-events: auto;
    }
}

mark {
  color: #FFF;
  background-color: #000;
  line-height: 1.35;
  padding: 6px;

}

img {
  display: block;
  width: 100%;
}

.grid-container {
  margin: 0 auto;
  padding: 0 10%;
  max-width: 65rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  position: relative;
  grid-template-rows: repeat(12, 1fr);
}

.grid__item--bg {
  grid-column: 2 / span 9;
  z-index: 0;
  grid-row: 1 / -1;
}

.grid__item--portrait-half {
  grid-column: 6 / span 6;
  z-index: 2;
  grid-row: 1 / -1;
  -webkit-clip-path: polygon(5% 10%, 27% 3%, 94% 25%, 84% 98%, 39% 98%, 11% 98%, 4% 66%, 4% 34%);
  clip-path: polygon(5% 10%, 27% 3%, 94% 25%, 84% 98%, 39% 98%, 11% 98%, 4% 66%, 4% 34%);
}

.grid__item--portrait-neck {
  -webkit-clip-path: polygon(5% 3%, 96% 4%, 95% 95%, 6% 95%, 20% 30%);
  clip-path: polygon(5% 3%, 96% 4%, 95% 95%, 6% 95%, 20% 30%);
  grid-column: 5 / span 4;
  grid-row: 6 / 11;
  z-index: 3;
}

.grid__item--portrait-left {
  -webkit-clip-path: polygon(10% 19%, 93% 15%, 90% 88%, 13% 92%);
  clip-path: polygon(10% 19%, 93% 15%, 90% 88%, 13% 92%);
  grid-column: 2 / span 4;
  grid-row: 6 / 12;
  z-index: 4;
}

.grid__item--portrait-eye {
  -webkit-clip-path: polygon(4% 13%, 84% 12%, 86% 34%, 80% 45%, 80% 76%, 10% 90%);
  clip-path: polygon(4% 13%, 84% 12%, 86% 34%, 80% 45%, 80% 76%, 10% 90%);
  grid-column: 4 / span 2;
  grid-row: 3 / 5;
  z-index: 5;
  width: 70%;
  margin-top: 20%;
  justify-self: center;
}

.grid__item--portrait-shirt {
  -webkit-clip-path: polygon(3% 2%, 50% 25%, 97% 8%, 97% 97%, 3% 98%);
  clip-path: polygon(3% 2%, 50% 25%, 97% 8%, 97% 97%, 3% 98%);
  grid-column: 1 / span 2;
  grid-row: 11 / -1;
  z-index: 6;
}

.grid__item--portrait-bg-1 {
  -webkit-clip-path: polygon(14% 13%, 84% 12%, 86% 34%, 90% 66%, 30% 76%, 10% 79%);
  clip-path: polygon(14% 13%, 84% 12%, 86% 34%, 90% 66%, 30% 76%, 10% 79%);
  grid-column: 1 / span 2;
  grid-row: 1 / 4;
  z-index: 8;
}

.grid__item--portrait-bg-2 {
  -webkit-clip-path: polygon(9% 4%, 80% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(9% 4%, 80% 0%, 100% 100%, 0% 100%);
  grid-column: 11 / -1;
  grid-row: 2 / 7;
  z-index: 8;
}

.grid__item--portrait-bg-3 {
  -webkit-clip-path: polygon(9% 4%, 80% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(9% 4%, 80% 0%, 100% 100%, 0% 100%);
  grid-column: 1 / span 3;
  grid-row: 4 / 7;
  z-index: 4;
}

.grid__item--portrait-bg-4 {
  -webkit-clip-path: polygon(5% 4%, 94% 3%, 97% 96%, 13% 96%);
  clip-path: polygon(5% 4%, 94% 3%, 97% 96%, 13% 96%);
  grid-column: 10 / 12;
  grid-row: 1 / 6;
  z-index: 1;
}

/* Demo 3 */

.demo-3 .grid__item {
  transition: clip-path .45s ease-in-out;
}

.demo-3 .grid:hover .grid__item--portrait-half {
  -webkit-clip-path: polygon(25% 10%, 27% 3%, 84% 25%, 84% 98%, 45% 98%, 11% 98%, 4% 66%, 4% 34%);
  clip-path: polygon(25% 10%, 27% 3%, 84% 25%, 84% 98%, 45% 98%, 11% 98%, 4% 66%, 4% 34%);
} 

.demo-3 .grid:hover .grid__item--portrait-neck {
  transition-delay: 0.05s;
  -webkit-clip-path: polygon(5% 3%, 76.05% 16.67%, 75.05% 83.99%, 6% 95%, 20% 30%);
  clip-path: polygon(5% 3%, 76.05% 16.67%, 75.05% 83.99%, 6% 95%, 20% 30%);
}

.demo-3 .grid:hover .grid__item--portrait-left {
  transition-delay: 0.1s;
  -webkit-clip-path: polygon(44.91% 31.51%, 93% 15%, 90% 88%, 33.94% 75.88%);
  clip-path: polygon(44.91% 31.51%, 93% 15%, 90% 88%, 33.94% 75.88%);
}

.demo-3 .grid:hover .grid__item--portrait-bg-1 {
  transition-delay: 0.15s;
  -webkit-clip-path: polygon(34% 13%, 84% 12%, 79% 34%, 90% 66%, 30% 76%, 10% 79%);
  clip-path: polygon(34% 13%, 84% 12%, 79% 34%, 90% 66%, 30% 76%, 10% 79%);
}

.demo-3 .grid:hover .grid__item--portrait-bg-2 {
  transition-delay: 0.2s;
  -webkit-clip-path: polygon(25.95% 12.00%, 78.01% 0.67%, 100% 100%, 0% 100%);
  clip-path: polygon(25.95% 12.00%, 78.01% 0.67%, 100% 100%, 0% 100%);
}

.demo-3 .grid:hover .grid__item--portrait-bg-4 {
  transition-delay: 0.25s;
  -webkit-clip-path: polygon(5% 4%, 66.07% 13.01%, 97% 96%, 13% 96%);
  clip-path: polygon(5% 4%, 66.07% 13.01%, 97% 96%, 13% 96%);
}