.bubble

body
  align-items center
  background #111
  display flex
  justify-content center
  min-height 100vh
  overflow hidden

.bubble
  --size 50
  --hue 195
  --bubble-outline 'hsl(%s, 100%, 50%)' % var(--hue)
  --bubble-spot 'hsl(%s, 100%, 75%)' % var(--hue)
  --bubble-shade 'hsl(%s, 100%, 70%)' % var(--hue)
  background radial-gradient(100% 115% at 25% 25%, #fff, transparent 33%), radial-gradient(15% 15% at 75% 75%, var(--bubble-spot), transparent), radial-gradient(100% 100% at 50% 25%, transparent, var(--bubble-shade) 98%)
  border 1px solid var(--bubble-outline)
  border-radius 100%
  height calc(var(--size) * 1px)
  width calc(var(--size) * 1px)