Before Big refactor

www/style/styles.css

@@ -16,8 +16,8 @@ html, body {
   position: absolute;
   top: 20px;
   right: 20px;
-  width: 60px;
-  height: 60px;
+  width: 72px;
+  height: 72px;
   z-index: 10;
 }
 
@@ -59,38 +59,25 @@ html, body {
   text-align: center;
 }
 
-#equation-main, #equation-next {
+#equation-main, #explanation,  #equation-next{
   position: absolute;
-  top: 30%;
+  top: 31.5%;
   left: 50%;
   transform: translateX(-50%);
   font-size: 48px;
-  transition: all 0.5s ease;
-}
-
-#equation-next {
-  opacity: 0;
-  transform: translate(-50%, 40px); /* start slightly below */
+  transition: all 1.5s ease;
 }
 
 #explanation {
-  position: absolute;
-  top: 45%;
-  left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, 80px);
   font-size: 24px;
   opacity: 0.8;
 }
 
-#steps {
-  position: absolute;
-  top: 27%;                 /* below the problem */
-  left: 50%;
-  transform: translateX(-50%);
-
-  width: 800px;
-  text-align: center;
-  font-size: 28px;
+#equation-next {
+  font-size: 48px;
+  transform: translate(-50%, 160px); /* start slightly below */
+  opacity: 0;
 }
 
 #waveCanvas {
@@ -115,17 +102,7 @@ html, body {
   animation: pulse 1s infinite;
 }
 
-.fade-out {
-  opacity: 0;
-  transform: translateX(-50%) scale(0.95);
-}
-
-.fade-in {
-  opacity: 1;
-  transform: translateX(-50%) scale(1);
-}
-
-.move-up {
+#equation-next.move-up {
   transform: translate(-50%, 0);
 }