<main class="container">
  <div class="container__left venn" role="img" aria-label="404 Venn Diagram">
    <div class="venn__bubble venn__bubble--left" aria-hidden="true"></div>
    <div class="venn__bubble venn__bubble--right" aria-hidden="true"></div>
    <p class="venn__text venn__text--left" aria-describedby="venn-left">We broke Something</p>
    <p class="venn__text venn__text--center" aria-describedby="venn-center">404</p>
    <p class="venn__text venn__text--right" aria-describedby="venn-right">You cannot type</p>
    <span id="venn-left" class="sr-only">Left side of venn diagram</span>
    <span id="venn-center" class="sr-only">Intersect side of venn diagram</span>
    <span id="venn-right" class="sr-only">Right side of venn diagram</span>
  </div>
  <div class="container__right desc">
    <h1 class="desc__head">Error: 404 - Page Not Found</h1>
    <div class="desc__body">
      <p>You might be here because:</p>
      <ul>
        <li>The page has moved</li>
        <li>The page no longer exists</li>
        <li>You were looking for your kittens and got lost</li>
        <li>You like 404 pages</li>
      </ul>
    </div>
  </div>
</main>

:root {
  --venn-base-size: #{rem(200)};
}

* {
  box-sizing: border-box;
}

::selection {
  color: white;
  background-color: black;
}

ul {
  list-style-type: disc;
  list-style-position: inside;
  padding: rem(8) rem(8) 0;
  li:not(:last-child) {
    padding-bottom: rem(4);
  }
}

.sr-only {
  position: absolute;
  width: rem(1);
  height: rem(1);
  margin: rem(-1);
  padding: 0;
  clip: rect(rem(1), rem(1), rem(1), rem(1));
  clip-path: inset(50%);
  overflow: hidden;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  &__left {
    margin-top: rem(48);
  }
  &__right {
    margin-top: rem(48);
  }
}

.venn {
  display: grid;
  grid-template-columns: repeat(3, var(--venn-base-size));
  grid-template-areas: 'left center right';
  &__bubble {
    grid-row: 1;
    display: flex;
    align-items: center;
    height: calc(var(--venn-base-size) * 2);
    border-radius: rem(200);
    &--left {
      grid-column-start: left;
      grid-column-end: center;
      background-color: var(--secondary);
      border: 2px solid rgba(0, 0, 0, 0.2);
      box-shadow: inset var(--venn-base-size) 0 var(--secondary);
    }
    &--right {
      grid-column-start: center;
      grid-column-end: right;
      justify-content: flex-end;
      background:
        var(--tertiary)
        repeating-linear-gradient(
          45deg,
          rgba(black, 0.2) rem(0),
          rgba(black, 0) rem(1),
          rgba(black, 0) rem(8),
          rgba(black, 0.2) rem(9)
        );
      border: 2px solid rgba(0, 0, 0, 0.2);
      box-shadow: inset calc(var(--venn-base-size) * -1) 0 var(--tertiary);
      mix-blend-mode: hard-light;
    }
  }
  &__text {
    position: relative;
    grid-row: 1;
    display: flex;
    align-items: center;
    padding: rem(16);
    height: calc(var(--venn-base-size) * 2);
    font-size: rem(24);
    line-height: 1.5;
    font-weight: lighter;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.84);
    z-index: +1;
    &--left {
      grid-column-start: left;
      grid-column-end: left;
      justify-content: flex-start;
      color: var(--primary-text-on-secondary);
    }
    &--center {
      grid-column-start: center;
      grid-column-end: center;
      justify-content: center;
      font-size: rem(48);
      color: var(--primary-text-on-primary);
    }
    &--right {
      grid-column-start: right;
      grid-column-end: right;
      justify-content: flex-end;
      text-align: right;
      color: var(--primary-text-on-tertiary);
    }
  }
}

.desc {
  width: 100%;
  max-width: calc(var(--venn-base-size) * 2);
  &__head {
    padding-bottom: rem(8);
    margin-bottom: rem(16);
    font-size: rem(20);
    text-align: center;
    border-bottom: var(--border-on-light);
  }
  &__body {
    color: var(--disabled-text-on-light);
  }
}

@media (max-width: rem(700)) {
  :root {
    --venn-base-size: #{rem(100)};
  }
  
  .venn {
    &__text {
      font-size: rem(14);
      font-weight: normal;
    }
  }
  
  .desc {
    max-width: calc(var(--venn-base-size) * 3);
  }
}

console.clear();