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

section#bitcoin {
  background-image: linear-gradient(180deg, #f7931a 0%, #7b1af8 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;

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

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

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

  #grid-blend-bottom {
    width: 100vw;
    rect {
      fill: var(--c-bkg);
      stroke: var(--c-bkg);
      stroke-width: 2px;
    }
  }

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

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

  .subsection:first-of-type {
    display: flex;
    flex-direction: column;
    place-self: flex-start;
    margin-bottom: 6rem;
    margin-left: 8rem;
    align-items: flex-start;
  }
  .subsection:nth-of-type(2) {
    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 37px 50px rgb(0 0 0 / 20%);

    &.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-1);
      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;
  }
}