/*Error Messages*/
.error {
  color: #F44336;
  margin: 16px auto 0;
  text-align: center;
  width: 90%;
}

/*The Background Part - Each svg element will act as a column that rises. Within each svg column will be a rect element that rotates. Due to an error FF regarding the transform-origin of objects in an svg, the transform-orgin must be explicitly given without percents*/

.bg-boxes {
  /*Set the container for the svg elements to take up the whole window and hide objects outside of the window*/
  position: absolute;
  overflow: hidden;
  width: 100%;
  max-width: 1920px;
  z-index: 1;
  height: 100vh;
}

#col1, #col2, #col3, #col4, #col5, #col6, #col7, #col8, #col9, #col10, #col11   {
  /*Set defaults for svg columns. Opacity set to 0 so the elements are invisible before the animation begins and will not show up on browsers without animation*/
  -webkit-animation: riser 20s infinite;
  animation: riser 20s infinite;
  opacity: 0;
  overflow: visible;
  position: absolute;
}

.imaaaaaaaa {
  display: block;
  background-color: #000;
}

.bubble {
  /*Set the defaults for the "bubbles". transform-origin should always be the center-point of the object including blank-space within the svg. Since the object should be centered, this is equal to the width of the object. The default bubble is 100px by 100px in an svg object with a width of 200px*/
  -webkit-animation: rotator 20s linear infinite;
  animation: rotator 20s linear infinite;
  fill: #FFF;
  -webkit-transform-origin: 100px 100px;
  transform-origin: 100px 100px;
}
#col1 {
  /*Since this element is larger than the set default, I want it to rise a little faster to give a subtle sense of depth*/
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
}
#bub1 {
  /*The transform-origin has to be redefined because this bubble is not the set default size*/
  -webkit-transform-origin: 150px 150px;
  transform-origin: 150px 150px;
}

#col2 {
  /*To offset the columns, adjust their left attribute and add an animation-delay*/
  left: 15%;
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}

#col3 {
  left: 30%;
  -webkit-animation-delay: 14s;
  animation-delay: 14s;
  -webkit-animation-duration: 17s;
  animation-duration: 17s;
}

#bub3 {
  -webkit-animation-delay: 14s;
  animation-delay: 14s;
  -webkit-transform-origin: 130px 130px;
  transform-origin: 130px 130px;
}

#col4 {
  left: 45%;
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
  -webkit-animation-duration: 22s;
  animation-duration: 22s;
}

#bub4 {
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
  -webkit-transform-origin: 80px 80px;
  transform-origin: 80px 80px;
}

#col5 {
  left: 60%;
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
  -webkit-animation-duration: 18s;
  animation-duration: 18s;
}

#bub5 {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
  -webkit-transform-origin: 120px 120px;
  transform-origin: 120px 120px;
}

#col6 {
  left: 75%;
  -webkit-animation-delay: 19s;
  animation-delay: 19s;
}

#bub6 {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
  -webkit-transform-origin: 120px 120px;
  transform-origin: 120px 120px;
}

#col7 {
  left: 90%;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

#col8 {
  left: -5%;
  -webkit-animation-delay: 11s;
  animation-delay: 11s;
}

#col9 {
  left: 25%;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

#col10 {
  left: 50%;
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

#col11 {
  left: 67%;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-duration: 25s;
  animation-duration: 25s;
}

#bub11 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
}

/*Rotation Animation - Should be set to a factor of 360 to prevent jumpiness*/
@-webkit-keyframes rotator {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotator {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes riser {
  0% {
    opacity: 0.4;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    opacity: 0.4;
    -webkit-transform: translateY(-250px);
    transform: translateY(-250px);
  }
}

@keyframes riser {
  0% {
    opacity: 0.4;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    opacity: 0.4;
    -webkit-transform: translateY(-250px);
    transform: translateY(-250px);
  }
}