@mixin prefix($property, $value){
  @each $vendor in (-webkit-, -moz-, -ms-, -o-, ''){
    #{$vendor}#{$property}: $value;
  }
}

@mixin box-sizing($value){
  @each $vendor in (-moz-, ''){
    #{$vendor}box-sizing: $value;
  }
}

@mixin transition($property, $value){
  @each $vendor in (-webkit-, -moz-, -ms-, -o-, ''){
    #{$vendor}transition#{$property}: #{$vendor}#{$value};
  }
}


/* Params */
$aqua-width: 200;
$base: 4;
$item-number: 30;
$delay: 15;
$speed-min: 5;
$speed: 10;
$bg-color: rgba(193,246,233, 0.5);
$color: rgba(255,255,255,0.2);
$margin: 100%;

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: #3A3139;
}

/* Main wrapper */
.wrapper {
  max-width: 50em;
  margin: 0 auto;
  height: 100%;
  display: table;
  padding: 0 1em;
}

/* Text Wrapper */
.text-wrapper {
  font-family: 'Neuton', serif;
  display: table-cell;
  color: #F7F1D8;
  padding: 3.5em 2em 2em;
  line-height: 1.5;
  font-size: 1.25em;
  
  p {
     margin-bottom: 1.625em;
   }
}

.title {
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 0.625em;
  color: #C1F6E9;
  
  span {
    display: block;
    font-size: 2.125em;
    color: #8EDFE3;
  }
  
}

/* Aquarium */
.aqua-wrapper {
  display: table-cell;
  position: relative;
  width: $aqua-width+px;
  min-width: $aqua-width+px;
  overflow: hidden;
}

.aquarium {
  list-style-type: none;
  width: $aqua-width+px;
  position: absolute;
  bottom: 0;
  top: 4em;
  left: 0;
  background-color: rgba(255,255,255,0.1);
  box-shadow: -10px 0px 10px rgba(255,255,255,0.2) inset, -1px 0px 20px rgba(100,100,100,0.2); 
  border: 1px solid rgba(255,255,255,0.2);
  border-top: none;
  
  span {
    display: block;
    position: absolute;
    bottom: 0;
    background-color: $bg-color;
    border: 1px solid $color;
    box-shadow: -1px -5px 1px rgba(0,0,0,0.1) inset;
    border-radius: 50%;

    @include prefix(transition, opacity .4s);
    @include prefix(transition, margin .4s);

    @for $i from 0 to $item-number + 1 {
      
      &:nth-child(#{$i}){
        $num: $i;
        $size: $base*$num;
        
        @if $i > ($item-number/2 + 1) {
          $num: $item-number+1 - $i;
          $size: $base*$num;
        }
        
        $margin: random($aqua-width - $size);
        $anim-delay: random($delay);
        $anim-speed: $speed-min + random($speed);
        
        width: $size+px;
        height: $size+px;
        @include prefix(animation, move infinite linear $anim-speed+s $anim-delay+s);
        margin-bottom: -$size+px;
        margin-left: $margin+px;
      }
    
    }
 
  }
  
}

@-webkit-keyframes move {
  90% { opacity: 0.8; }
  95% { opacity: 0.5; }
  100% {  
    bottom: 108%;
    opacity: 0;
  }
}
@-o-keyframes move {
  90% { opacity: 0.8; }
  95% { opacity: 0.5; }
  100% {  
    bottom: 108%;
    opacity: 0;
  }
}
@-moz-keyframes move {
  90% { opacity: 0.8; }
  95% { opacity: 0.5; }
  100% {  
    bottom: 108%;
    opacity: 0;
  }
}
@keyframes move {
  90% { opacity: 0.8; }
  95% { opacity: 0.5; }
  100% {  
    bottom: 108%;
    opacity: 0;
  }
}