start9-landing/src/assets/styles/bitcoin.scss

#bitcoin-to-be svg{
  max-height: 50vh;
}

section#bitcoin {
  background-image: linear-gradient(180deg, var(--c-bitcoin) 0%, var(--c-lightning) 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
  position: relative;
  z-index: -1;
  margin-bottom: -10rem;

  // gradient to fade away from bkg
  &::before {
    content: "";
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(#33333300, var(--c-bkg));
    position: absolute;
    top: -100vh;
  }

  // gradient to fade back to bkg
  &::after {
    content: "";
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(var(--c-bkg), #33333300);
    position: absolute;
    bottom: -100vh;
  }

  // grid of squares (svg)
  #grid-blend-top, #grid-blend-bottom {
    // mix-blend-mode: multiply;
    width: 100vw;
    rect {
      fill: var(--c-bkg);
      stroke: var(--c-bkg);
      stroke-width: 2px;
    }
  }

  p {
    max-width: min(35ch, 50vw);
    em {
      color: var(--c-text-primary);
      font-weight: 700;
    }
  }

  .subsection {
    padding: 0 6rem;
    gap: 3rem;
  }

  .subsection--bitcoin {
    display: flex;
    flex-direction: column;
    place-self: flex-start;
    margin-bottom: 6rem;
    margin-left: 8rem;
    align-items: flex-start;
  }
  .subsection--lightning {
    place-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 8rem;
    h1,
    p {
      text-align: right;
    }
  }

  #flying-icons{
    position: absolute;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .service-icon {
    border-radius: 100%;
    position: absolute;
    top:0;
    left:0;
    z-index: -2;
    backdrop-filter: blur(48px);
    mix-blend-mode: soft-light;
    box-shadow: 0 2rem 3rem var(--c-shadow-3);

    &.service-icon--balanceofsatoshis {
      width: 5rem;
      z-index: -8;
    }
    &.service-icon--bitcoind {
      width: 15rem;
    }
    &.service-icon--btc-rpc-proxy {
      width: 9rem;
      z-index: -4;
    }
    &.service-icon--btcpayserver {
      width: 6rem;
      z-index: -7;
    }
    &.service-icon--c-lightning {
      width: 15rem;
    }
    &.service-icon--electrs {
      width: 7rem;      
      background-color: var(--c-bkg-offset);
      padding: 1rem;
      z-index: -6;
    }
    &.service-icon--lightning-jet {
      width: 6rem;
      z-index: -7;
    }
    &.service-icon--lnd {
      width: 10rem;
      z-index: -3;
    }
    &.service-icon--lightning-terminal {
      width: 7rem;
      z-index: -6;
    }
    &.service-icon--lndg {
      width: 9rem;
      z-index: -4;
    }
    &.service-icon--mempool {
      width: 8rem;
      z-index: -5;
    }
    &.service-icon--ride-the-lightning {
      width: 8rem;
      z-index: -5;
    }
    &.service-icon--spark-wallet {
      width: 7rem;
      z-index: -6;
    }
    &.service-icon--specter {
      width: 5rem;
      z-index: -8;
    }
    &.service-icon--sphinx-relay {
      width: 6rem;
      z-index: -7;
    }
    &.service-icon--thunderhub {
      width: 5rem;
      z-index: -8;
    }
  }
}

@media only screen and (max-width: 500px) {
  .service-icon--bitcoind {
    width: 11rem !important;
  }
  .service-icon--c-lightning {
    width: 11rem !important;
  }
}