diff --git a/about.html b/about.html
index 55d7f9b..2ede06f 100644
--- a/about.html
+++ b/about.html
@@ -23,8 +23,8 @@
 		</div>
 		<div class="start">
 			<div class="title">
-				<h2 class="laut">/ˈd<em>aɪ</em>.ə.lekt/ <br>
-				<p>AI steckt nicht nur im Namen.</p></h2>
+				<h2 class="laut">/ˈd<em>aɪ</em>.ə.lekt/</h2>
+				<p>AI steckt nicht nur im Namen.</p>
 			</div>
 			<div id="blobs">
 				<div id="blue" class="blob"></div>
diff --git a/animations.js b/animations.js
index bbf8857..e3107b6 100644
--- a/animations.js
+++ b/animations.js
@@ -6,21 +6,20 @@ $(document).ready(function () {
         uplabel = document.getElementById("filelabel")
         upline = document.getElementById("formline")
         upbtn = document.getElementById("upload")
-        if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
-        var height1 = $("#eins").height ();
-        var height2 = $("#zwei").height ();
-        if (height1 < 300) {height1 += 550};
-        console.log (height1, height2);
         $("#fileselect").change(function() {
             uplabel.textContent = this.files[0].name + " (Klick zum Ändern)"
             changeFile ()
           });
+        if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
         $(window).scroll(function () {
+            var height1 = $("#eins").height ();
+            var height2 = $("#zwei").height ();
+            var screenheight = $("body").height();
             var pos = $(this).scrollTop ();
-            if (stage ==1 && pos-200 >= height2) { moveBlobs ("225vh", 600, 2)}
-            else if (stage == 2 && pos < height2 ) { moveBlobs ("95vh", 1000, 1)}
-            else if (stage == 0 && pos+600 >= height1){ moveBlobs ("95vh", 1000, 1)}
-            else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) }
+            if (stage == 1 && pos-(screenheight/4.5) >= height2) { moveBlobs ("225vh", "31vw", 2)}
+            else if (stage == 2 && pos-(screenheight/1.9) < height2 ) { moveBlobs ("95vh", "52vw", 1)}
+            else if (stage == 0 && pos+(screenheight/1.5) >= height1){ moveBlobs ("95vh", "52vw", 1)}
+            else if ((stage == 1 && pos < height1-(screenheight/2))) { moveBlobs (0,0,0) }
         })
     }
 )
@@ -58,7 +57,7 @@ function moveBlobs (t, r, to) {
     setTimeout (function () {
         $("#blobs").css ({
             'top': t,
-            'right': r + 'px',
+            'right': r,
             'animation': '',});
         $("#green").css ({ 'animation': 'appear 0.4s -0.075s ease-in' })
         $("#blue").css ({ 'animation': 'appear 0.4s 0s ease-in' })
@@ -88,17 +87,20 @@ function changeFile (){
 
 function ButtonPress () {
     upbtn.setAttribute ('disabled', 'disabled')
-    uplabel.setAttribute('hidden', 'hidden')
-    upline.setAttribute('hidden', 'hidden')
     document.body.style.cursor = "progress"
     $("#fileupload").css ({
         'cursor': 'not-allowed',
         'animation': 'text-in-out 1s'
     })    
+    $("#formline").css ({
+        'animation': 'border-out 1s'
+    })
     $("#upload").css ({
         'cursor': 'not-allowed',
     })
     setTimeout (function () {
+        uplabel.setAttribute('hidden', 'hidden')
+        upline.setAttribute('hidden', 'hidden')
         upbtn.value = "Verarbeite..."
         $('#upload').css ({'padding-top': '3vw'})
     }, 500)
diff --git a/index.html b/index.html
index 04454a2..49124a8 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,8 @@
 		</div>
 		<div class="start">
 			<div class="title">
-				<h1>D<em>AI</em>A<br>LECT</h1>
+				<h1>D<em>AI</em>A<br>
+					LECT</h1>
 			</div>
 			<div id="blobs">
 				<div id="blue" class="blob"></div>
@@ -42,7 +43,9 @@
 		</div>
 		<div id="zwei">
 			<div class = "text-mittig">
-				<h2> MIT HILFE VON <br> KI ALLE <br></h2> <h3>MENSCHEN VERSTEHEN</h3> 
+				<h2> MIT HILFE VON <br> 
+					KI ALLE <br></h2> 
+				<h3>MENSCHEN VERSTEHEN</h3> 
 			</div>
 		</div>
 		<div id="navbar-bottom">
diff --git a/style.css b/style.css
index 54ddff9..0c51548 100644
--- a/style.css
+++ b/style.css
@@ -33,7 +33,7 @@ body
   z-index: 55;
   border-radius: 2cqmin;
   opacity: 90%;
-  height: 6vh;
+  height: 3vw;
 }
 
 ul {
@@ -54,7 +54,7 @@ li {
   padding: 0.6vw;
   text-decoration: none;
   font-weight: bold;
-  font-size: 1.7vw;
+  font-size: 1.6vw;
 }
 
 li a {
@@ -151,7 +151,8 @@ p {
   font-size: 7.5vw;
   text-align: right;
   text-align-last: right;
-  padding-right: 10vw;
+  padding: 0 10vw 0 0;
+  margin: 0;
   font-family: "League Spartan";
 }
 
@@ -182,6 +183,7 @@ h1 em {
   font-size: 3.5vw;
   font-family: "League Spartan";
   font-style: normal;
+  padding-right: 10vw;
 }
 
 .button-rechts {
@@ -255,12 +257,12 @@ hr {
 
 
 .blob {
-  border-radius: 5px;
-  filter: blur(1.5px);
-  width: 10px;
-  height: 10px;
+  border-radius: 7.5vw;
+  filter: blur(1.6vw);
+  width: 15vw;
+  height: 15vw;
   top: 25vh;
-  scale: 45;
+  scale: 1.4;
 }
 
 #blue {
@@ -297,6 +299,12 @@ hr {
   100% {color: inherit}
 }
 
+@keyframes border-out {
+  0% {opacity: 1;}
+  40% {opacity: 0;}
+  100% {opacity: 0;}
+}
+
 @keyframes border-in-out {
   0% {border-radius: 1.5vw}
   10%{border-radius: 1.5vw}
@@ -315,80 +323,80 @@ hr {
 @keyframes idle-blue {
   0% {transform: scale(1); z-index: 0;}
   20% {transform: scale(1.4); z-index: 1;}
-  40% {transform: scale(1.1); z-index: 0; transform: translateY(2px);}
-  60% {transform: scale(0.8);  transform: translateX(2.5px)}
+  40% {transform: scale(1.1); z-index: 0; transform: translateY(2vw);}
+  60% {transform: scale(0.8);  transform: translateX(2.5vw)}
   80% {transform: scale(0.9);}
-  95% {transform: scale(1); transform: translateY(-2px); transform: translateX(-2.5px);}
+  95% {transform: scale(1); transform: translateY(-2vw); transform: translateX(-2.5vw);}
 }
 
 @keyframes idle-green {
   0% {transform: scale(1); }
   20% {transform: scale(0.8); }
-  40% {transform: scale(1.1);  transform: translateY(3.5px);}
-  60% {transform: scale(0.9);  transform: translateX(-1px)}
+  40% {transform: scale(1.1);  transform: translateY(3.5vw);}
+  60% {transform: scale(0.9);  transform: translateX(-1vw)}
   80% {transform: scale(1.3); }
-  95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
+  95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
 }
 
 @keyframes idle-red {
   0% {transform: scale(1); ;}
   20% {transform: scale(1.3); z-index: 3;}
-  40% {transform: scale(1.2); z-index: 2; transform: translateY(-3px);}
-  60% {transform: scale(0.7); z-index: 0; transform: translateX(-2px)}
+  40% {transform: scale(1.2); z-index: 2; transform: translateY(-3vw);}
+  60% {transform: scale(0.7); z-index: 0; transform: translateX(-2vw)}
   80% {transform: scale(0.9); z-index: 0;}
-  95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
+  95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
 }
 
 @keyframes move-down-1 {
   0% {top: 0; right: 0}
-  100% {top: 0; right: 1000px}
+  100% {top: 0; right: 52vw}
 }
 
 @keyframes green-move-down-1 {
   0% {top: 0; right: 0 }
-  50% {right: 400px}
-  90% {top: 75vh; opacity: 100%; right: 190px; transform: scale(1);}
-  100% {top: 100vh; right: 200px; opacity: 10%; transform: scale(0.2);}
+  50% {right: 21vw}
+  90% {top: 75vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
+  100% {top: 100vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
 }
 
 @keyframes red-move-down-1 {
-  0% {top: 0; right: 0 }
+  0% {top: 0;} 
   90% {top: 85vh; opacity: 100%; transform: scale(1);}
-  100% {top: 100vh; right: 0; opacity: 10%; transform: scale(0.2);}
+  100% {top: 100vh; opacity: 10%; transform: scale(0.2);}
 }
 
 @keyframes blue-move-down-1 {
   0% {top: 0; right: 0 }
-  40% {right: 400px}
-  75% {right: 300px}
+  40% {right: 21vw}
+  75% {right: 17vw}
   90% {opacity: 100%; transform: scale(1);}
-  100% {top: 110vh; right: 0px; opacity: 10%; transform: scale(0.2);}
+  100% {top: 110vh; right: 0; opacity: 10%; transform: scale(0.2);}
 }
 
 @keyframes move-down-2 {
-  0% {top: 0; right: 1000px}
-  100% {top: 0; right: 600px}
+  0% {top: 0; right: 52vw}
+  100% {top: 0; right: 31vw}
 }
 
 @keyframes green-move-down-2 {
-  0% {top: 100vh; right: 0px }
-  50% {right: 400px}
-  90% {top: 175vh; opacity: 100%; right: 190px; transform: scale(1);}
+  0% {top: 100vh; right: 0 }
+  50% {right: 21vw}
+  90% {top: 175vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
   100% {top: 205vh; right: 0; opacity: 10%; transform: scale(0.2);}
 }
 
 @keyframes red-move-down-2 {
-  0% {top: 100vh; right: 0px }
+  0% {top: 100vh;}
   90% {top: 185vh; opacity: 100%; transform: scale(1);}
-  100% {top: 205vh; right: 0px; opacity: 10%; transform: scale(0.2);}
+  100% {top: 205vw; opacity: 10%; transform: scale(0.2);}
 }
 
 @keyframes blue-move-down-2 {
-  0% {top: 110vh; right: 200px }
-  40% {right: 500px}
-  75% {right: 400px}
+  0% {top: 110vh; right: 10.4vw }
+  40% {right: 26vw}
+  75% {right: 21vw}
   90% {opacity: 100%; transform: scale(1);}
-  100% {top: 215vh; right: 200px; opacity: 10%; transform: scale(0.2);}
+  100% {top: 215vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
 }