Responsive center of animated background

app/elements/buddy-finder/buddy-finder.html

@@ -36,12 +36,7 @@
             cursor: pointer;
         }
         
-        .me {
-            position: absolute;
-            bottom: 24px;
-            left: 50%;
-            margin-left: -180px;
-        }
+
         
         .explanation {
             @apply(--paper-font-headline);

app/elements/buddy-finder/personal-avatar.html

@@ -7,6 +7,10 @@
             @apply(--layout-vertical);
             @apply(--layout-center);
             width: 360px;
+            position: absolute;
+            bottom: 24px;
+            left: 50%;
+            margin-left: -180px;
         }
         
         iron-icon {
@@ -23,12 +27,16 @@
         .discover {
             color: #4285f4;
         }
-
-         @media all and (max-height: 370px) {
-            iron-icon{
+        
+        @media all and (max-height: 370px) {
+            :host {
+                bottom: 8px;
+            }
+            iron-icon {
                 width: 32px;
                 height: 32px;
-            }   
+                margin-bottom: 2px;
+            }
         }
         </style>
         <iron-icon icon="chat:wifi-tethering"></iron-icon>

app/scripts/animated-bg.js

@@ -19,8 +19,9 @@
         h = window.innerHeight;
         c.width = w;
         c.height = h;
+        var offset = h > 370 ? 103 : 65;
         x0 = w / 2;
-        y0 = h - 103;
+        y0 = h - offset;
         dw = Math.max(w, h, 1000) / 13;
         drawCircles();
     }
@@ -28,7 +29,7 @@
 
     function drawCicrle(radius) {
         ctx.beginPath();
-        var color = Math.round(255 * (1- radius / Math.max(w, h)));
+        var color = Math.round(255 * (1 - radius / Math.max(w, h)));
         ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();