body {
  background-color:black;
}

.bubble {
    position: absolute;
    width:200px;
    height:200px;
    background-color: rgba(121, 189, 226, 0.25);
    border-radius: 50%;
    box-shadow: inset 0px 0px 25px #c3c3c330;
    overflow:hidden;
    z-index: 1;
    backdrop-filter: blur(5px);
}
.bubble:nth-child(1) {
    animation: bubbleUp1 5s normal linear infinite;
    left: 120px;
    top: 550px;
}

@keyframes bubbleUp1 {
    0%      {top:550px;} 
    50%     {transform: translateX(42px);}
    100%    {top:-200px; transform: translateX(-30px);}
}

.bubble:nth-child(2) {
    animation: bubbleUp1 11s normal 7s linear infinite;
    left: 200px;
    top: 550px;
    scale: 10%;
}

.bubble:nth-child(3) {
    animation: bubbleUp1 7s normal 4s linear infinite;
    left: 550px;
    top: 550px;
    scale: 50%;
}

.bubble:nth-child(4) {
    animation: bubbleUp1 8s normal 2s linear infinite;
    top: 548px;
    left: 270px;
    scale: 50%;
}

.bubble:nth-child(5) {
    animation: bubbleUp1 13s normal 9s linear infinite;
    left: 230px;
    top: 550px;
    scale: 70%;
}

.bubble:nth-child(6) {
    animation: bubbleUp1 11s normal 0s linear infinite;
    left: 450px;
    top: 550px;
    scale: 100%;
}

.bubble:nth-child(7) {
    animation: bubbleUp1 5s normal 3s linear infinite;
    left: 350px;
    top: 550px;
    scale: 70%;
}

.bubble::before {
    content: '';
    position: absolute;
    width: 45px;
    height: 30px;
    border-radius: 50%;
    background-color: aliceblue;
    top:50px;
    left:50px;
    filter:blur(9px);
    rotate: 135deg;
}

.bubble span {
    position: absolute;
    border-radius:50%;
}

.bubble span:nth-child(1) {
    inset:10px;
    border-left: 10px solid #af38be;
    filter: blur(7px);
    rotate: -10deg
}

.bubble span:nth-child(2) {
    inset:10px;
    border-right: 10px solid #be3875;
    filter: blur(7px);
    rotate: -50deg
}

.bubble span:nth-child(3) {
    inset:20px 30px;
    border-bottom: 10px solid #b3be38;
    filter: blur(7px);
    rotate: -20deg
}

.bubble span:nth-child(4) {
    inset:1px;
    border-bottom: 5px ridge #be2074;
    filter: blur(5px);
    rotate: 10deg
}

.bubble span:nth-child(5) {
    inset:16px;
    border-left: 50px solid rgba(47, 88, 182, 0.6);
    filter: blur(10px);
    rotate: -50deg
}

.bubble span:nth-child(6) {
    inset:16px;
    border-right: 30px solid rgba(60, 134, 191, 0.64);
    filter: blur(10px);
    rotate: -50deg
}

.bubblebox {
    position: absolute;
    max-width: 900px;
    width: 900px;
    height: 500px;
    overflow: hidden;
    justify-self: center;
    outline: solid 1px white;
    top: 105px;
    margin: 0 auto;
}
.transparencyt {
    position: absolute;
    font-size: 70pt;
    width: inherit;
    text-align: center;
    color: aliceblue;
    z-index: 5;
    mix-blend-mode: overlay;
    top: 100px;
}

.transparencyout {
    height: auto;
    width: 300px;
    position: absolute;
    justify-self: center;
    top: 15px;
    outline: 1px white solid;
    color: aliceblue;
    text-align: center;
    padding: 5px;
}

a.wwo:link {
  color: aliceblue;
  text-decoration: none;
  font-weight: bold;
  font-variant: petite-caps;
  font-size: 20pt;
  outline: none;
}

a.wwo:hover {
  color:#be2074;
}

a.pitzihome:link {
  text-decoration: none;
  color: aliceblue;
}

a.pitzihome:hover {
  text-decoration: none;
  color: #be2074;
}