/*
    Created by John Dummett - Founder of Hermicity

    Feel free to reuse this code in anyway you like, as long as you don't forget to...

    ~~ R E S P E C T ~~ V A P O R ~~
*/

/* Pulsating ebackground with vapor colour palette */
@-webkit-keyframes pulsation {
    0%{background-position:54% 0%}
    100%{background-position:47% 100%}
}
@-moz-keyframes pulsation {
    0%{background-position:54% 0%}
    100%{background-position:47% 100%}
}
@-o-keyframes pulsation {
    0%{background-position:54% 0%}
    100%{background-position:47% 100%}
}
@keyframes pulsation { 
    0%{background-position:54% 0%}
    50%{background-position:47% 100%}
    100%{background-position:54% 0%}
}

.hero {
    background: linear-gradient(-45deg, #c6acc9, #ecb4bf, #fdd6b5, #fdf3b8, #a7e4ae, #bfffe6, #8699d1, #dba9ce, #efe6eb, #aae7e8, #47d1d5, #e8d2ff, #c1d1fd, #d9e0fc, #ffe0f1);
    background-size: 3000% 3000%;
-webkit-animation: pulsation 25s linear infinite;
-moz-animation: pulsation 25s linear infinite;
-o-animation: pulsation 25s linear infinite;
animation: pulsation 25s linear infinite;
}

#submit {
    background: linear-gradient(45deg, #c6acc9, #ecb4bf, #fdd6b5, #fdf3b8, #a7e4ae, #bfffe6, #8699d1, #dba9ce, #efe6eb, #aae7e8, #47d1d5, #e8d2ff, #c1d1fd, #d9e0fc, #ffe0f1);
    background-size: 3000% 3000%;
-webkit-animation: pulsation 25s linear infinite;
-moz-animation: pulsation 25s linear infinite;
-o-animation: pulsation 25s linear infinite;
animation: pulsation 25s linear infinite;
}

.animated-break {
    background: linear-gradient(45deg, #c6acc9, #ecb4bf, #fdd6b5, #fdf3b8, #a7e4ae, #bfffe6, #8699d1, #dba9ce, #efe6eb, #aae7e8, #47d1d5, #e8d2ff, #c1d1fd, #d9e0fc, #ffe0f1);
    background-size: 3000% 3000%;
-webkit-animation: pulsation 25s linear infinite;
-moz-animation: pulsation 25s linear infinite;
-o-animation: pulsation 25s linear infinite;
animation: pulsation 25s linear infinite;
}

/* Rotation of the sun */
@keyframes sun-rotate {
  from {-ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);}
  to {-ms-transform: rotate(364deg);
    -webkit-transform: rotate(364deg);
    transform: rotate(364deg);}
}

@keyframes cloud {
    from {margin-left: 0;}
  to {margin-left: 110vw;}
}

@keyframes wisp {
    from {margin-left: 40vw;}
    to {margin-left: 110vw;}
}

.hero-sun {
    animation: vibration 18s linear infinite;
}

.hero-cloud {
    animation: cloud 120s linear infinite;
}

.hero-wisp {
    animation: wisp 300s linear infinite;
}

/* Move the drones and make them vibrate like real lyf */
.hero-drone {
    animation-name: drone-move, vibration;
    animation-duration: 10s, 0.1s;
    animation-timing-function: linear, linear;
    animation-iteration-count: infinite, infinite; 
}

.hero-drone-2 {
    animation-name: drone-move-2, vibration;
    animation-duration: 10s, 0.1s;
    animation-timing-function: linear, linear;
    animation-iteration-count: infinite, infinite;
}

@keyframes drone-move {
  0% {margin-left: -15%;}
  25% {margin-left: 20%;}
  50% {margin-left: 50%;}
  100% {margin-left: 110%;}
}
@keyframes drone-move-2 {
  0% {margin-left: 100%;}
  25% {margin-left: 75%;}
  50% {margin-left: 50%;}
  100% {margin-left: -20%;}
}

@keyframes vibration {
  from {-ms-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);}
  to {-ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);}
}

/* Soylent packet carry, drop and land */
.hero-soylent {
    animation: soylent-move 10s linear infinite;
}

.hero-soylent-2 {
    animation: soylent-move-2 10s linear infinite;
}

@keyframes soylent-move {
  0% {margin-left: -15%;}
  25% {margin-left: 20%;}
  50% {margin-left: 50%;margin-top:21vh;
  -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  100%{margin-left: 70%;margin-top: 65vh;
    -ms-transform: rotate(6000deg);
    -webkit-transform: rotate(6000deg);
    transform: rotate(6000deg);
  }
}

@keyframes soylent-move-2 {
  0% {margin-left: 100%;}
  25% {margin-left: 75%;}
  40% {margin-top:34vh;
  -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);}
  50% {margin-left: 50%;}
  100%{margin-left: 20%;margin-top: 65vh;
    -ms-transform: rotate(6000deg);
    -webkit-transform: rotate(6000deg);
    transform: rotate(6000deg);
  }
}

/*BUBBLES*/
.bubbles {
    position: absolute;
    animation: bubble linear 6s 1;
    opacity: 0;
}


.position-1 {
    margin: 2vh 0 5vh 10vw;
}

.position-2 {
    right: 0;
    margin: 2vh 15vw 5vh 0;
}

.position-3 {
    margin: 2vh 0 5vh 5vw;
}

.position-4 {
    margin: 2vh 0 5vh 35vw;
}

.position-5 {
    right: 0;
    margin: 2vh 15vw 15vh 0;
}


.animation-1 {
    /*all covered*/
}

.animation-2 {
    animation-delay: 6s;
}

.animation-3 {
    animation-delay: 12s;
}

.animation-4 {
    animation-delay: 18s;
}

.animation-5 {
    animation-delay: 24s;
}

.animation-6 {
    animation-delay: 30s;
}

.animation-7 {
    animation-delay: 36s;
}

.animation-8 {
    animation-delay: 42s;
}

.animation-9 {
    animation-delay: 48s;
}

.animation-10 {
    animation-delay: 54s;
}
.animation-11 {
    animation-delay: 60s;
}

.animation-12 {
    animation-delay: 66s;
}

.animation-13 {
    animation-delay: 72s;
}

.animation-14 {
    animation-delay: 78s;
}

.animation-15 {
    animation-delay: 84s;
}

.animation-16 {
    animation-delay: 90s;
}

.animation-17 {
    animation-delay: 96s;
}

.animation-18 {
    animation-delay: 102s;
}

.animation-19 {
    animation-delay: 108s;
}

.animation-20 {
    animation-delay: 114s;
}

.animation-21 {
    animation-delay: 120s;
}

.animation-22 {
    animation-delay: 126s;
}

.animation-23 {
    animation-delay: 132s;
}

.animation-24 {
    animation-delay: 138s;
}

.animation-25 {
    animation-delay: 144s;
}

.animation-26 {
    animation-delay: 150s;
}

.animation-27 {
    animation-delay: 156s;
}

@keyframes bubble {
    0% {opacity: 0;margin-top: 10vh;}
    1% {opacity: 1;margin-top: 4vh;}
    2% {margin-top: 5vh;}
    80%  {opacity: 1;}
    100% {opacity: 0;}
}