- var bubbles = 59;

form(id="bw",class="bw")
  .bw__bubbles
    - for (let b = 1;b <= bubbles;++b) {
      .bw__bubble
        input(class="bw__input",id="b"+b,type="checkbox",name="b"+b,value=b)
        label(class="bw__label",for="b"+b)="Bubble "+b
        span(class="bw__cover")
    - }
  button(class="bw__btn",type="reset")="New Sheet"

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
}
body, button, input {
  font: 1em/1.5 "DM Sans", -apple-system, sans-serif;
}
body, .bw, .bw__bubbles {
  display: flex;
}
body {
  background-color: hsl(223,90%,20%);
  height: 100vh;
}
.bw, .bw__bubbles {
  justify-content: center;
}
.bw {
  flex-direction: column;
  align-items: center;
  margin: auto;
  padding-top: 1.5em;
}
.bw__bubbles {
  background-color: hsl(223,10%,58%);
  border-radius: 0.25em;
  box-shadow:
    0.1em 0 0 hsl(223,10%,75%) inset,
    -0.1em 0 0 hsl(223,10%,75%) inset;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-bottom: 1.5em;
  mix-blend-mode: hard-light;
  width: 14em;
}
.bw__bubble {
  position: relative;
  width: 2em;
  height: 1.8em;
}
.bw__bubble:nth-child(13n) {
  margin-right: 1em;
}
.bw__bubble:nth-child(13n + 8) {
  margin-left: 1em;
}
.bw__btn, .bw__input {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.bw__btn {
  background-color: hsl(223,90%,90%);
  border-radius: 0.25em;
  color: hsl(223,90%,20%);
  margin-bottom: 1.5em;
  padding: 0.75em 1.5em;
  transition: background-color 0.15s linear;
}
.bw__btn:focus, .bw__btn:hover {
  background-color: hsl(223,90%,50%);
}
.bw__btn:active {
  transform: translateY(0.1em);
}
.bw__cover, .bw__cover:before, .bw__input, .bw__label {
  position: absolute;
}
.bw__cover, .bw__cover:before, .bw__input {
  border-radius: 50%;
}
.bw__cover, .bw__input {
  background-color: hsl(0,0%,70%);
  top: 0;
  left: 0.1em;
  width: 1.8em;
  height: 1.8em;
  transition: box-shadow 0.15s ease-in-out;
}
.bw__cover {
  display: block;
}
.bw__cover:before {
  background:
    linear-gradient(-50deg,hsla(0,0%,80%,0) 68%,hsl(0,0%,100%),hsla(0,0%,80%,0) 72%) 100% 0 / 75% 40%,
    linear-gradient(-20deg,hsla(0,0%,80%,0) 67%,hsl(0,0%,100%),hsla(0,0%,80%,0) 73%) 100% 0 / 75% 100%,
    linear-gradient(-80deg,hsla(0,0%,80%,0) 90%,hsl(0,0%,100%),hsla(0,0%,80%,0) 96%) 100% 100% / 80% 50%,
    linear-gradient(10deg,hsla(0,0%,80%,0) 44%,hsl(0,0%,100%),hsla(0,0%,80%,0) 50%) 100% 0 / 50% 100%,
    linear-gradient(-30deg,hsla(0,0%,80%,0) 21%,hsl(0,0%,100%),hsla(0,0%,80%,0) 27%) 20% 0 / 40% 100%,
    linear-gradient(110deg,hsla(0,0%,80%,0) 47%,hsl(0,0%,100%),hsla(0,0%,80%,0) 53%) 0 100% / 100% 30%,
    linear-gradient(-5deg,hsla(0,0%,70%,0) 55%,hsl(0,0%,70%),hsla(0,0%,70%,0) 62%) 100% 0 / 35% 100%,
    linear-gradient(25deg,hsla(0,0%,70%,0) 32%,hsl(0,0%,70%),hsla(0,0%,70%,0) 39%) 100% 0 / 50% 100%,
    linear-gradient(20deg,hsla(0,0%,70%,0) 22%,hsl(0,0%,70%),hsla(0,0%,70%,0) 29%) 100% 0 / 40% 100%;
  background-repeat: no-repeat;
  content: "";
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.1s ease-in-out;
  width: 100%;
  height: 100%;
}
.bw__input {
  box-shadow:
    0 0 0 0.05em hsl(0,0%,85%) inset,
    0 0 0 hsl(223,10%,85%) inset,
    0.2em 0 0.1em hsl(223,10%,55%) inset,
    0 0.2em 0.1em hsl(223,10%,55%) inset,
    0.25em 0.25em 0.1em hsl(0,0%,100%) inset,
    0.6em 0.6em 0.4em 0.5em hsl(223,10%,55%) inset,
    0 0 0.25em hsl(223,10%,65%);
}
.bw__cover, .bw__input:checked, .bw__input:checked + .bw__label {
  visibility: hidden;
}
.bw__cover, .bw__input:focus, .bw__input:hover {
  box-shadow:
    0 0 0 0.05em hsl(0,0%,70%) inset,
    0 0 0 hsl(223,10%,85%) inset,
    0.1em 0 0.1em hsl(223,10%,55%) inset,
    0 0.1em 0.1em hsl(223,10%,55%) inset,
    0.15em 0.15em 0.1em hsl(0,0%,100%) inset,
    0.7em 0.7em 0.4em 0.5em hsl(223,10%,55%) inset,
    0 0 0.25em hsl(223,10%,65%);
}
.bw__input:focus {
  outline: transparent;
}
.bw__input:checked ~ .bw__cover {
  box-shadow:
    0 0 0 0.05em hsl(0,0%,70%) inset,
    -0.2em -0.2em 0.2em hsl(223,10%,65%) inset,
    0 0 0 hsl(223,10%,55%) inset,
    0 0 0 hsl(223,10%,55%) inset,
    0.1em 0.1em 0.1em hsl(0,0%,90%) inset,
    0.7em 0.7em 0.4em 0.5em hsl(223,10%,60%) inset,
    0 0 0.25em hsl(223,10%,65%);
  visibility: visible;
}
.bw__input:checked ~ .bw__cover:before {
  clip-path: circle(50% at 50% 50%);
}
.bw__label {
  clip: rect(1px,1px,1px,1px);
  overflow: hidden;
  width: 1px;
  height: 1px;
}

// for the pop sounds
document.addEventListener("DOMContentLoaded",() => {
  let bubbleWrap = document.getElementById("bw"),
    popSound = new Howl({
      src: [
        "https://assets.codepen.io/416221/bubble_wrap.mp3",
        "https://assets.codepen.io/416221/bubble_wrap.ogg"
      ],
      autoplay: false,
      loop: false,
      volume: 1.0
    });
  bubbleWrap.addEventListener("change",() => {
    popSound.play();
  });
});