/* External Style Sheet for HappyBlueBalls.html Now in PhilomathCovid.info folder */
@media (orientation: portrait) {
/* css rules */
.balls0P225s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 65%;
animation-name: jump0;
animation-duration: 2.25s;
animation-iteration-count: infinite;
}
.balls0P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump0a;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
#dodgerblue0 {background-color: greenyellow;
left: 0%;
animation-timing-function: linear;
}
#darkblue0 {background: green;
left: 0%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump0a {
65% {
top: 25%;
}
}
@keyframes jump0 {
85% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls5P325s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump5a;
animation-duration: 3.25s;
animation-iteration-count: infinite;
}
.balls5P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 80%;
animation-name: jump5;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
#dodgerblue5 {background-color: greenyellow;
left: 5%;
animation-timing-function: linear;
}
#darkblue5 {background: green;
left: 5%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump5a {
90% {
top: 15%;
}
}
@keyframes jump5 {
65% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls10P175s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump10a;
animation-duration: 1.75s;
animation-iteration-count: infinite;
}
.balls10P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump10;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
#dodgerblue10 {background-color: greenyellow;
left: 10%;
animation-timing-function: linear;
}
#darkblue10 {background: green;
left: 10%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump10a {
95% {
top: 25%;
}
}
@keyframes jump10 {
75% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls15P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump15a;
animation-duration: 2.75s;
animation-iteration-count: infinite;
}
.balls15P325s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump15;
animation-duration: 3.25s;
animation-iteration-count: infinite;
}
#dodgerblue15 {background-color: greenyellow;
left: 15%;
animation-timing-function: linear;
}
#darkblue15 {background: green;
left: 15%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump15a {
80% {
top: 30%;
}
}
@keyframes jump15 {
85% {
top: 5%;
}
}
/*---------------------------------------------------- */
.balls20P475s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 70%;
animation-name: jump20a;
animation-duration: 4.75s;
animation-iteration-count: infinite;
}
.balls20P225s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump20;
animation-duration: 2.25s;
animation-iteration-count: infinite;
}
#dodgerblue20 {background-color: greenyellow;
left: 20%;
animation-timing-function: linear;
}
#darkblue20 {background: green;
left: 20%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump20a {
70% {
top: 5%;
}
}
@keyframes jump20 {
75% {
top: 30%;
}
}
/*---------------------------------------------------- */
.balls25P075s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump25a;
animation-duration: .75s;
animation-iteration-count: infinite;
}
.balls25P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 65%;
animation-name: jump25;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
#dodgerblue25 {background-color: greenyellow;
left: 25%;
animation-timing-function: linear;
}
#darkblue25 {background: green;
left: 25%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump25 {
85% {
top: 20%;
}
}
@keyframes jump25a {
90% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls30P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump30a;
animation-duration: 2.75s;
animation-iteration-count: infinite;
}
.balls30P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump30;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
#dodgerblue30 {background-color: greenyellow;
left: 30%;
animation-timing-function: linear;
}
#darkblue30 {background: green;
left: 30%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump30 {
75% {
top: 30%;
}
}
@keyframes jump30a {
85% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls35P325s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 70%;
animation-name: jump35a;
animation-duration: 3.25s;
animation-iteration-count: infinite;
}
.balls35P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump35;
animation-duration: 2.75s;
animation-iteration-count: infinite;
}
#dodgerblue35 {background-color: greenyellow;
left: 35%;
animation-timing-function: linear;
}
#darkblue35 {background: green;
left: 35%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump35 {
90% {
top: 30%;
}
}
@keyframes jump35a {
65% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls40P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump40a;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
.balls40P175s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 80%;
animation-name: jump40;
animation-duration: 1.75s;
animation-iteration-count: infinite;
}
#dodgerblue40 {background-color: greenyellow;
left: 40%;
animation-timing-function: linear;
}
#darkblue40 {background: green;
left: 40%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump40a {
90% {
top: 30%;
}
}
@keyframes jump40 {
65% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls45P35s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 80%;
animation-name: jump45a;
animation-duration: 3.5s;
animation-iteration-count: infinite;
}
.balls45P30s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump45;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#dodgerblue45 {background-color: greenyellow;
left: 45%;
animation-timing-function: linear;
}
#darkblue45 {background: green;
left: 45%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump45a {
80% {
top: 10%;
}
}
@keyframes jump45 {
70% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls50P25s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 60%;
animation-name: jump50a;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
.balls50P20s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump50;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#dodgerblue50 {background-color: greenyellow;
left: 50%;
animation-timing-function: linear;
}
#darkblue50 {background: green;
left: 50%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump50a {
90% {
top: 5%;
}
}
@keyframes jump50 {
60% {
top: 30%;
}
}
/*---------------------------------------------------- */
.balls55P15s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 70%;
animation-name: jump55;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
.balls55P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump55a;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#dodgerblue55 {background-color: greenyellow;
left: 55%;
animation-timing-function: linear;
}
#darkblue55 {background: green;
left: 55%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump55 {
80% {
top: 10%;
}
}
@keyframes jump55a {
70% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls60P35s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump60;
animation-duration: 3.5s;
animation-iteration-count: infinite;
}
.balls60P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump60a;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#dodgerblue60 {background-color: greenyellow;
left: 60%;
animation-timing-function: linear;
}
#darkblue60 {background: green;
left: 60%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump60a {
90% {
top: 20%;
}
}
@keyframes jump60 {
80% {
top: 15%;
}
}
/*---------------------------------------------------- */
.balls65P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump65;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
.balls65P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump65a;
animation-duration: 2.75s;
animation-iteration-count: infinite;
}
#dodgerblue65 {background-color: greenyellow;
left: 65%;
animation-timing-function: linear;
}
#darkblue65 {background: green;
left: 65%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump65a {
95% {
top: 15%;
}
}
@keyframes jump65 {
75% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls70P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump70;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
.balls70P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump70a;
animation-duration: 1.75s;
animation-iteration-count: infinite;
}
#dodgerblue70 {background-color: greenyellow;
left: 70%;
animation-timing-function: linear;
}
#darkblue70 {background: green;
left: 70%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump70a {
85% {
top: 15%;
}
}
@keyframes jump70 {
95% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls75P20s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 80%;
animation-name: jump75;
animation-duration: 2.0s;
animation-iteration-count: infinite;
}
.balls75P175s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump75a;
animation-duration: 1.75s;
animation-iteration-count: infinite;
}
#dodgerblue75 {background-color: greenyellow;
left: 75%;
animation-timing-function: linear;
}
#darkblue75 {background: green;
left: 75%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump75a {
95% {
top: 15%;
}
}
@keyframes jump75 {
65% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls80P075s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump80a;
animation-duration: .75s;
animation-iteration-count: infinite;
}
.balls80P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump80;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
#dodgerblue80 {background-color: greenyellow;
left: 80%;
animation-timing-function: linear;
}
#darkblue80 {background: green;
left: 80%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump80a {
90% {
top: 5%;
}
}
@keyframes jump80 {
70% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls85P325s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump85a;
animation-duration: 3.25s;
animation-iteration-count: infinite;
}
.balls85P40s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump85;
animation-duration: 4.0s;
animation-iteration-count: infinite;
}
#dodgerblue85 {background-color: greenyellow;
left: 85%;
animation-timing-function: linear;
}
#darkblue85 {background: green;
left: 85%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump85a {
85% {
top: 10%;
}
}
@keyframes jump85 {
75% {
top: 5%;
}
}
/*---------------------------------------------------- */
.balls90P225s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump90a;
animation-duration: 2.25s;
animation-iteration-count: infinite;
}
.balls90P20s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump90;
animation-duration: 2.0s;
animation-iteration-count: infinite;
}
#dodgerblue90 {background-color: greenyellow;
left: 90%;
animation-timing-function: linear;
}
#darkblue90 {background: green;
left: 90%;
animation-timing-function: cubic-bezier(0.411, 0.641, 0.644, 1.949);
}
@keyframes jump90a {
85% {
top: 10%;
}
}
@keyframes jump90 {
75% {
top: 5%;
}
}
/*---------------------------------------------------- */
.balls95P225s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump95;
animation-duration: 2.25s;
animation-iteration-count: infinite;
}
.balls95P20s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump95a;
animation-duration: 2.0s;
animation-iteration-count: infinite;
}
#dodgerblue95 {background-color: green;
left: 95%;
animation-timing-function: linear;
}
#darkblue95 {background: greenyellow;
left: 95%;
animation-timing-function: cubic-bezier(0.411, 0.641, 0.644, 1.949);
}
@keyframes jump95a {
65% {
top: 10%;
}
}
@keyframes jump95 {
85% {
top: 15%;
}
}
#grad1 {
/* background: linear-gradient(white,darkgrey);
background-color: lightgrey; */
height: 1400px;
background-color: yellow;
background: radial-gradient(yellow, green);
}
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*//* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*//* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*//* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*//* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* --------------------------------------------------------*/
@media (orientation: landscape) {
/* css rules */
.balls0P225s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 65%;
animation-name: jump0;
animation-duration: 2.25s;
animation-iteration-count: infinite;
}
.balls0P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump0a;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
#dodgerblue0 {background-color: dodgerblue;
left: 0%;
animation-timing-function: linear;
}
#darkblue0 {background: darkblue;
left: 0%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump0a {
65% {
top: 25%;
}
}
@keyframes jump0 {
85% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls5P325s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump5a;
animation-duration: 3.25s;
animation-iteration-count: infinite;
}
.balls5P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 80%;
animation-name: jump5;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
#dodgerblue5 {background-color: dodgerblue;
left: 5%;
animation-timing-function: linear;
}
#darkblue5 {background: darkblue;
left: 5%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump5a {
90% {
top: 15%;
}
}
@keyframes jump5 {
65% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls10P175s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump10a;
animation-duration: 1.75s;
animation-iteration-count: infinite;
}
.balls10P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump10;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
#dodgerblue10 {background-color: dodgerblue;
left: 10%;
animation-timing-function: linear;
}
#darkblue10 {background: darkblue;
left: 10%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump10a {
95% {
top: 25%;
}
}
@keyframes jump10 {
75% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls15P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump15a;
animation-duration: 2.75s;
animation-iteration-count: infinite;
}
.balls15P325s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump15;
animation-duration: 3.25s;
animation-iteration-count: infinite;
}
#dodgerblue15 {background-color: dodgerblue;
left: 15%;
animation-timing-function: linear;
}
#darkblue15 {background: darkblue;
left: 15%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump15a {
80% {
top: 30%;
}
}
@keyframes jump15 {
85% {
top: 5%;
}
}
/*---------------------------------------------------- */
.balls20P475s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 70%;
animation-name: jump20a;
animation-duration: 4.75s;
animation-iteration-count: infinite;
}
.balls20P225s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump20;
animation-duration: 2.25s;
animation-iteration-count: infinite;
}
#dodgerblue20 {background-color: dodgerblue;
left: 20%;
animation-timing-function: linear;
}
#darkblue20 {background: darkblue;
left: 20%;
animation-timing-function: cubic-bezier(0.211, 0.541, 0.544, 1.849);
}
@keyframes jump20a {
70% {
top: 5%;
}
}
@keyframes jump20 {
75% {
top: 30%;
}
}
/*---------------------------------------------------- */
.balls25P075s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump25a;
animation-duration: .75s;
animation-iteration-count: infinite;
}
.balls25P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 65%;
animation-name: jump25;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
#dodgerblue25 {background-color: dodgerblue;
left: 25%;
animation-timing-function: linear;
}
#darkblue25 {background: darkblue;
left: 25%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump25 {
85% {
top: 20%;
}
}
@keyframes jump25a {
90% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls30P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump30a;
animation-duration: 2.75s;
animation-iteration-count: infinite;
}
.balls30P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump30;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
#dodgerblue30 {background-color: dodgerblue;
left: 30%;
animation-timing-function: linear;
}
#darkblue30 {background: darkblue;
left: 30%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump30 {
75% {
top: 30%;
}
}
@keyframes jump30a {
85% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls35P325s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 70%;
animation-name: jump35a;
animation-duration: 3.25s;
animation-iteration-count: infinite;
}
.balls35P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump35;
animation-duration: 2.75s;
animation-iteration-count: infinite;
}
#dodgerblue35 {background-color: dodgerblue;
left: 35%;
animation-timing-function: linear;
}
#darkblue35 {background: darkblue;
left: 35%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump35 {
90% {
top: 30%;
}
}
@keyframes jump35a {
65% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls40P125s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump40a;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
.balls40P175s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 80%;
animation-name: jump40;
animation-duration: 1.75s;
animation-iteration-count: infinite;
}
#dodgerblue40 {background-color: dodgerblue;
left: 40%;
animation-timing-function: linear;
}
#darkblue40 {background: darkblue;
left: 40%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump40a {
90% {
top: 30%;
}
}
@keyframes jump40 {
65% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls45P35s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 80%;
animation-name: jump45a;
animation-duration: 3.5s;
animation-iteration-count: infinite;
}
.balls45P30s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump45;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#dodgerblue45 {background-color: dodgerblue;
left: 45%;
animation-timing-function: linear;
}
#darkblue45 {background: darkblue;
left: 45%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump45a {
80% {
top: 10%;
}
}
@keyframes jump45 {
70% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls50P25s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 60%;
animation-name: jump50a;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
.balls50P20s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump50;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#dodgerblue50 {background-color: dodgerblue;
left: 50%;
animation-timing-function: linear;
}
#darkblue50 {background: darkblue;
left: 50%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump50a {
90% {
top: 5%;
}
}
@keyframes jump50 {
60% {
top: 30%;
}
}
/*---------------------------------------------------- */
.balls55P15s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 70%;
animation-name: jump55;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
.balls55P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump55a;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#dodgerblue55 {background-color: dodgerblue;
left: 55%;
animation-timing-function: linear;
}
#darkblue55 {background: darkblue;
left: 55%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump55 {
80% {
top: 10%;
}
}
@keyframes jump55a {
70% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls60P35s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump60;
animation-duration: 3.5s;
animation-iteration-count: infinite;
}
.balls60P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump60a;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#dodgerblue60 {background-color: dodgerblue;
left: 60%;
animation-timing-function: linear;
}
#darkblue60 {background: darkblue;
left: 60%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump60a {
90% {
top: 20%;
}
}
@keyframes jump60 {
80% {
top: 15%;
}
}
/*---------------------------------------------------- */
.balls65P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump65;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
.balls65P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump65a;
animation-duration: 2.75s;
animation-iteration-count: infinite;
}
#dodgerblue65 {background-color: dodgerblue;
left: 65%;
animation-timing-function: linear;
}
#darkblue65 {background: darkblue;
left: 65%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump65a {
95% {
top: 15%;
}
}
@keyframes jump65 {
75% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls70P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump70;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
.balls70P275s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump70a;
animation-duration: 1.75s;
animation-iteration-count: infinite;
}
#dodgerblue70 {background-color: dodgerblue;
left: 70%;
animation-timing-function: linear;
}
#darkblue70 {background: darkblue;
left: 70%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump70a {
85% {
top: 15%;
}
}
@keyframes jump70 {
95% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls75P20s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 80%;
animation-name: jump75;
animation-duration: 2.0s;
animation-iteration-count: infinite;
}
.balls75P175s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump75a;
animation-duration: 1.75s;
animation-iteration-count: infinite;
}
#dodgerblue75 {background-color: dodgerblue;
left: 75%;
animation-timing-function: linear;
}
#darkblue75 {background: darkblue;
left: 75%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump75a {
95% {
top: 15%;
}
}
@keyframes jump75 {
65% {
top: 20%;
}
}
/*---------------------------------------------------- */
.balls80P075s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump80a;
animation-duration: .75s;
animation-iteration-count: infinite;
}
.balls80P10s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump80;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
#dodgerblue80 {background-color: dodgerblue;
left: 80%;
animation-timing-function: linear;
}
#darkblue80 {background: darkblue;
left: 80%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump80a {
90% {
top: 5%;
}
}
@keyframes jump80 {
70% {
top: 10%;
}
}
/*---------------------------------------------------- */
.balls85P325s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump85a;
animation-duration: 3.25s;
animation-iteration-count: infinite;
}
.balls85P40s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump85;
animation-duration: 4.0s;
animation-iteration-count: infinite;
}
#dodgerblue85 {background-color: dodgerblue;
left: 85%;
animation-timing-function: linear;
}
#darkblue85 {background: darkblue;
left: 85%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump85a {
85% {
top: 10%;
}
}
@keyframes jump85 {
75% {
top: 5%;
}
}
/*---------------------------------------------------- */
.balls90P225s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 95%;
animation-name: jump90a;
animation-duration: 2.25s;
animation-iteration-count: infinite;
}
.balls90P20s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 90%;
animation-name: jump90;
animation-duration: 2.0s;
animation-iteration-count: infinite;
}
#dodgerblue90 {background-color: dodgerblue;
left: 90%;
animation-timing-function: linear;
}
#darkblue90 {background: darkblue;
left: 90%;
animation-timing-function: cubic-bezier(0.411, 0.641, 0.644, 1.949);
}
@keyframes jump90a {
85% {
top: 10%;
}
}
@keyframes jump90 {
75% {
top: 5%;
}
}
/*---------------------------------------------------- */
.balls95P225s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 85%;
animation-name: jump95;
animation-duration: 2.25s;
animation-iteration-count: infinite;
}
.balls95P20s {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 75%;
animation-name: jump95a;
animation-duration: 2.0s;
animation-iteration-count: infinite;
}
#dodgerblue95 {background-color: dodgerblue;
left: 95%;
animation-timing-function: linear;
}
#darkblue95 {background: darkblue;
left: 95%;
animation-timing-function: cubic-bezier(0.411, 0.641, 0.644, 1.949);
}
@keyframes jump95a {
65% {
top: 10%;
}
}
@keyframes jump95 {
85% {
top: 15%;
}
}
#grad1 {
height: 700px;
background-color: #f8f8f8; /* For browsers that do not support gradients */
background-image: linear-gradient(#f8f8f8, #949494); /* Standard syntax (must be last) */
}
}