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; } .subsection:first-of-type { place-self: flex-start; margin-bottom: 6rem; } .subsection:last-of-type { place-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; h1, p { text-align: right; } } a.btn { background-color: var(--c-1); color: var(--c-6); border-color: var(--c-6); font-size: 1.2rem; } #flying-icons{ position: absolute; top: 0; left:0; right: 0; bottom: 0; overflow: hidden; } .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--spectre { background-color: var(--c-1); } &.service-icon--electrs { background-color: var(--c-1); padding: 1rem; } &.service-icon--balanceofsatoshis { width: 5rem; } &.service-icon--bitcoind { width: auto; } &.service-icon--btc-rpc-proxy { width: 9rem; } &.service-icon--btcpay-server { width: 6rem; } &.service-icon--c-lightning { width: auto; } &.service-icon--electrs { width: 7rem; } &.service-icon--lightning-jet { width: 6rem; } &.service-icon--lnd { width: 10rem; } &.service-icon--lightning-terminal { width: 7rem; } &.service-icon--lndg { width: 9rem; } &.service-icon--mempool { width: 8rem; } &.service-icon--ride-the-lightning { width: 8rem; } &.service-icon--spark-wallet { width: 7rem; } &.service-icon--specter { width: 5rem; } &.service-icon--sphinx-relay { width: 6rem; } &.service-icon--thunderhub { width: 5rem; } } }