Fade in and fade out

www/style/styles.css

@@ -1,4 +1,4 @@
-body {
+html, body {
   margin: 0;
   height: 100vh;
   overflow: hidden;
@@ -11,20 +11,91 @@ body {
   font-family: Arial;
 }
 
-#waveCanvas {
+#problem {
   position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  font-size: 76px;
+  text-align: center;
+}
+
+#equation {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 32px;
+
+  font-family: "Comic Sans MS", cursive; /* surprisingly effective */
+  text-shadow: 
+    0 0 2px rgba(255,255,255,0.8),
+    0 0 6px rgba(255,255,255,0.4);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+#explanation {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 24px;
+  opacity: 0.8;
+} 28px;
+
+#steps {
+  position: absolute;
+  top: 27%;                 /* below the problem */
+  left: 50%;
+  transform: translateX(-50%);
+
+  width: 800px;
+  text-align: center;
+  font-size: 28px;
+}
+
+#waveCanvas {
+  position: fixed;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
   z-index: 0;
 }
 
 #particleCanvas {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
   z-index: 0;
 }
 
+.fade-out {
+  opacity: 0;
+  transform: translateX(-50%) scale(0.95);
+}
+
+.fade-in {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+.chalk-in {
+  opacity: 0;
+  transform: scale(1.05);
+  filter: blur(6px);
+}
+
+.chalk-in-active {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0px);
+  transition: all 0.4s ease;
+}
+
 @keyframes gradientShift {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }