/* code block */
    ${(function style_custom2() {
      const h1 = document.querySelector('h1.main-header');
      const {fontSize} = getComputedStyle(h1);
      v.h1FontSize = parseFloat(fontSize);
      v.headerScale = 69.7851;
      v.headerHeight = Math.min(v.h1FontSize*8,v.headerScale*Math.max(window.innerWidth, window.innerHeight)/100);
      v.headerTop = v.h1FontSize*3;
    }()) || ''}

  /* more */
    :root {
      --rot: 10deg;
      ${(v.grad = () => `linear-gradient(-30deg, ${v.gradClr})`, '')}
      ${(v.gradClr = 'orange, yellow', '')}
      --content-width: calc(min(900px, 100vw) - 4em);
    }

    /* not sure why these overflow hacks are necessary to keep it scrolling */
    :root, body {
      max-width: 100vw;
      max-height: 100vh;
      overflow: hidden;
    }

    body {
      margin: 0;
      overflow-y: unset;
    }


    main {
      overflow: visible;
      max-width: 800px;
      margin: 0 auto;
      height: auto;
      display: flex;
      flex-direction: column;
      padding-left: 1em;
    }

    .color-bg {
      background: linear-gradient(30deg, red, orange, aquamarine, blue, violet);
    }

    .dark-bg {
      ${(v.gradClr = 'turquoise 40vw, navy 160vw', '')}
      background: ${v.grad()};
      color: white;
    }

    .light-bg {
      ${(v.gradClr = 'gainsboro 50vw, gainsboro, whitesmoke, aliceblue, white 150vw', '')}
      background: ${v.grad()};
    }

    .grey-bg {
      background: silver;
    }

    .rotate-counter {
      overflow: visible;
      transform-origin: center;
      width: 200vw;
      position: relative;
      transform: translate(-50vw, 0) rotate(calc(-1 * var(--rot)));
    }

    .rotate-clock {
      overflow: visible;
      transform-origin: center;
      left: 25vw;
      transform: rotate(var(--rot)) translate(25vw, 0);
    }

    .content {
      margin-left: -1vw;
      position: relative;
      width: var(--content-width);
      top: 0vw;
      min-height: max(400px, 61.8vh);
      padding: 0.5em 0;
    }

    header.abg {
      margin-top: -${v.headerHeight/2}px;
      margin-left: -10vw;
      height: ${v.headerHeight}px;
      min-height: 400px;
    }

    header .content {
      max-height: unset;
      min-height: auto;
      position: relative;
      height: 38vh;
      margin-left: calc(-1vw - -10vw);
      padding: 5vw 0;
      mix-blend-mode: color-burn;
    }

    header + section {
      margin-top: -5vw;
    }

    header .reiki {
      margin-top: ${v.h1FontSize*4}px;
      pointer-events: none;
    }

    h1 {
      user-select: none;
      pointer-events: none;
    }

    .light-bg h1 {
      color: navy;
    }

    footer h1 {
      color: indigo;
    }

    footer h2 {
      color: white;
    }

    .light-bg h2 {
      color: turquoise;
    }

    header + section .content {
      margin-top: ${v.h1FontSize*2}px;
    }

    main > nav {
      position: relative;
      top: 0;
      max-width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0.5em 1em;
      margin-left: -1em;
    }

    @media screen and (max-width: 600px) {
      header .content, 
      .content {
      }
      nav a {
        display: none;
      }
      h1 {
        letter-spacing: -0.618px;
        font-size: min(7.51vmin, 2.141em);
      }
    }

    @media screen and (max-height: 500px) {
      h1 {
        letter-spacing: -0.618px;
      }
    }

    @media screen and (max-width: 420px) {
      header .reiki {
        margin-top: ${v.h1FontSize*1.618*Math.PI}px;
      }
    }

    @media screen and (max-width: 360px) {
      header .reiki {
        margin-top: ${v.h1FontSize*2*Math.PI}px;
      }
    }

  /* even more */
    .content.flex-guy {
      display: flex;
      margin-left: -5%;
      margin-top: ${v.h1FontSize}px;
      padding-bottom: 3.141rem;
    }

    .content.flex-guy.bottom-heavy {
      padding-bottom: 8.141rem;
    }

    .flex-guy .video {
      width: 50%;
      padding-left: 1em;
    }

    .video.centered {
      text-align: center;
      padding: 1rem 0 5rem;
    }

    .dark-bg a:link, .dark-bg a:visited {
      color: white;
    }

    .dark-bg .flex-guy .video {
      width: auto;
      padding-left: 0;
      padding-right: 1em;
      margin-left: -1em;
    }

    .flex-guy .video iframe {
      margin-top: 4rem;
      filter: contrast(1.35) saturate(1.5); 
    }

    @media screen and (max-width:800px) {
      .flex-guy {
        flex-direction: column;
      }

      .flex-guy.content {
        margin-left: 0;
      }

      .flex-guy .video {
        padding: 0;
      }

      .flex-guy .video iframe {
        max-width: var(--content-width);
        margin-top: 2rem;
      }
    }

    @media screen and (min-width:800px) and (max-width:1020px) {
      .flex-guy.content {
        margin-left: 0;
      }
    }

    @media screen and (min-width:520px) and (max-width:920px) {
      header .reiki {
        margin-top: ${v.h1FontSize*3}px;
      }
    }

    .flex-guy.not-wide.content {
      flex-direction: row;
    }

    @media screen and (max-width:600px) {
      .flex-guy.not-wide.content {
        flex-direction: column;
      }
    }

  /* images */
    .co-browsing img {
      width: 400px;
      max-width: 80vw;
    }

    .rpa-intelligence img {
      width: 400px;
      max-width: 80vw;
    }

    .rbi img {
      transform: rotateY(180deg);
      width: 400px;
      max-width: 80vw;
    }

    .devs img {
      transform: rotateY(180deg);
      width: 400px;
      max-width: 80vw;
    }

    .mail img {
      transform: rotateY(180deg);
      width: 400px;
      max-width: 80vw;
    }

    .pride img {
      transform: rotateY(180deg);
      width: 400px;
      max-width: 80vw;
    }

    .tech img {
      transform: rotateY(180deg);
      width: 400px;
      max-width: 80vw;
    }

    .mobile img {
      width: 400px;
      max-width: 80vw;
    }

    .mobile h2 {
      color: #ff6740;
    }

  /* questions */
    dl dt {
      font-weight: bold;
    }

    dl dd {
    }

  /* footer */
    footer {
      position: relative;
      z-index: -1;
      padding: 8vmax 0 1rem;
    }

    footer .content {
      column-count: 3;
      word-wrap: break-word;
      min-height: 0;
    }

    footer .content li {
      font-size: smaller;
    }

    footer a:link, footer a:visited {
      color: blue;
    }

    footer address {
      display: inline-block;
      background-color: turquoise;
    }

    footer ul {
      list-style-type: circle;
    }

    @media screen and (max-width: 725px) {
      footer .content {
        column-count: 2;
      }
    }

    @media screen and (max-width: 450px) {
      footer .content {
        column-count: 1;
        max-width: 80vw;
      }
    }