fixed broken elements due to api changes

src/components/FlashChart.vue

@@ -1,6 +1,6 @@
 <template>
   <h3 class="text-center col-12 mt-3">Flash-Duration <small class="text-muted">(in s)</small></h3>
-  <div class="player-dmg d-xxl-flex">
+  <div class="player-flash">
     <div class="team-1 mx-5">
       <h4 class="text-center mt-3 mb-3">Team 1</h4>
       <div id="flash-chart-1"></div>
@@ -120,4 +120,57 @@ export default {
     color: cornflowerblue;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .player-dmg {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transform: scale(.7);
+    margin-top: -100px;
+
+    .team-1 {
+      margin-top: -50px;
+    }
+
+    .team-2 {
+      margin-bottom: -100px;
+      margin-left: -60px;
+    }
+  }
+}
+
+@media screen and (max-width: 991px) and (min-width: 678px) {
+  .player-dmg {
+    flex-wrap: nowrap;
+    transform: scale(.8);
+    margin-top: -50px;
+    margin-left: -60px;
+
+    .team-1 {
+      margin-left: 0;
+    }
+
+    .team-2 {
+      margin-bottom: -100px;
+    }
+  }
+}
+
+@media screen and (max-width: 1261px) and (min-width: 991px) {
+  .player-dmg {
+    flex-wrap: nowrap;
+    transform: scale(.9);
+    margin-top: -30px;
+    margin-left: -60px;
+
+    .team-1 {
+      margin-left: 0;
+    }
+
+    .team-2 {
+      margin-bottom: -100px;
+    }
+  }
+}
 </style>