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 {
@@ -25,9 +29,13 @@
         }
         
         @media all and (max-height: 370px) {
+            :host {
+                bottom: 8px;
+            }
             iron-icon {
                 width: 32px;
                 height: 32px;
+                margin-bottom: 2px;
             }
         }
         </style>

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();
     }