.container {
display:flex;
background:#fcfcfc;
width:100vw;
height:100vh;
align-items:center;
justify-content:center}

.footer{
position:fixed;
background:#000;
left:0;
right:0;
bottom:0;
padding:.83vw .83vw;
color:#fff;
font-size:90%;
-webkit-text-transform:uppercase;
-moz-text-transform:uppercase;
-ms-text-transform:uppercase;
-o-text-transform:uppercase;
text-transform:uppercase}

.circle:nth-child(1),.circle:nth-child(2),.circle:nth-child(3),.circle:nth-child(4),.circle:nth-child(5){
background:linear-gradient(#3669f9,#35e4b4);
width:10vw;
height:10vw;
max-width:11.6vw;
max-height:11.6vw;
min-height:6.6vw;
min-width:6.6vw;
margin:1.6vw;
border-radius:50%;
box-shadow:0 0 1.6vw rgba(0,0,0,.1);
-webkit-transition:transform 1s;
-moz-transition:transform 1s;
-o-transition:transform 1s;
transition:transform 1s}

.animate{
-webkit-transform:translateY(2.5vw);
-moz-transform:translateY(2.5vw);
-ms-transform:translateY(2.5vw);
-o-transform:translateY(2.5vw);
transform:translateY(2.5vw);
-webkit-transition:transform 1s;
-moz-transition:transform 1s;
-o-transition:transform 1s;
transition:transform 1s}