#frame {
  display: none;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bubbled #frame {
  display: block;
}


/* Bubble styling */
.bubble {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  opacity: 0.6;
}
/* Inner "shadow" of bubble */
.bubble > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0.6;
}
/* Decorative highlights */
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0.6;
}
.bubble::before {
  width: 10%;
  height: 10%;
  top: 11%;
  left: 61%;
}
.bubble::after {
  width: 10%;
  height: 30%;
  top: 18%;
  left: 79%;
  transform: rotate(-33deg);
}