@keyframes floatfrom100 {
    0%   {margin-top: 100%; }
    10%  {margin-top: 80%;  }
    20%  {margin-top: 60%;  }
    30%  {margin-top: 40%;  }
    40%  {margin-top: 20%;  }
    50%  {margin-top: 0%;   }
    60%  {margin-top: -20%; }
    70%  {margin-top: -40%; }
    80%  {margin-top: -60%; }
    90%  {margin-top: -80%; }
    100% {margin-top: -100%;}
}

@keyframes floattobrainspot {
    0%   {margin-top: 100%; }
    10%  {margin-top: 80%;  }
    20%  {margin-top: 60%;  }
    30%  {margin-top: 40%;  }
    40%  {margin-top: 30%;  }
    50%  {margin-top: 25%;}
    60%  {margin-top: 22%;  }
    70%  {margin-top: 20%;}
    80%  {margin-top: 18.5%;  }
    90%  {margin-top: 17%;}
    100% {margin-top: 16%;  }
}


@keyframes bobandfloat {
    0%   {margin-top: 16%;  }
    10%  {margin-top: 16.5%;  }
    20%  {margin-top: 17%;  }
    30%  {margin-top: 17.5%;  }
    40%  {margin-top: 18%;  }
    50%  {margin-top: 18%;  }
    60%  {margin-top: 18%;  }
    70%  {margin-top: 17.5%;  }
    80%  {margin-top: 17%;  }
    90%  {margin-top: 16.5%;  }
    100% {margin-top: 16%;  }
}


#bubbles {
    user-select: none;
    margin-top: -300%;
    position: absolute;
    animation-name: floatfrom100;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width: 100vw;
    height: 100vh;
    transform: scale(2, 2);
    margin-left: 0%;
    z-index: -50;
}

#bubblesLower {
    user-select: none;
    margin-top: -300%;
    position: absolute;
    animation-name: floatfrom100;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width: 100vw;
    height: 100vh;
    transform: scale(2, 2);
    animation-delay: 2.5s;
    margin-left: 0%;
    z-index: -50;
}

#bubblesLowerer {
    user-select: none;
    margin-top: -300%;
    position: absolute;
    animation-name: floatfrom100;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width: 100vw;
    height: 100vh;
    transform: scale(2, 2);
    animation-delay: 5s;
    margin-left: 0%;
    z-index: -50;
}

#bubblesFinal {
    user-select: none;
    margin-top: -300%;
    position: absolute;
    animation-name: floatfrom100;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width: 100vw;
    height: 100vh;
    transform: scale(2, 2);
    animation-delay: 7.5s;
    margin-left: 0%;
    z-index: -50;
}


#initialBubbles {
    user-select: none;
    margin-top: -300%;
    position: absolute;
    animation-name: floatfrom100;
    animation-duration: 5s;
    animation-timing-function: linear;
    width: 100vw;
    height: 100vh;
    transform: scale(2, 2);
    animation-delay: 2s;
    margin-left: 0%;
    z-index: -34;
}

#bigBubbles {
    user-select: none;
    margin-top: -300%;
    position: absolute;
    animation-name: floatfrom100;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 100vw;
    height: 100vh;
    transform: scale(2, 2);
    animation-delay: 6s;
    margin-left: 0%;
    z-index: -50;
}

#brain {
    user-select: none;
    margin-top: 30%;
    position: fixed;
    animation: floattobrainspot 6s linear 6s 1, bobandfloat 6s linear 12s infinite;
    width: 24vw;
    height: 24vw;
    transform: scale(2, 2);
    margin-left: -11%;
    z-index: -36;
}