diff --git a/out/index.html b/out/index.html
index b013bcf..7cc07ca 100644
--- a/out/index.html
+++ b/out/index.html
@@ -12,6 +12,7 @@
 				<div class="textbox__text">
 					Welcome to <span class="textbox__span textbox__span--red">webring.umbreon.online</span>!
 				</div>
+				<div class="textbox__advance"></div>
 			</div>
 
 			<p>
diff --git a/out/style.css b/out/style.css
index 790a871..386a8ef 100644
--- a/out/style.css
+++ b/out/style.css
@@ -130,6 +130,40 @@ main {
   color: var(--textbox-text-color);
   text-shadow: 1rem 0 var(--textbox-text-shadow), 1rem 1rem var(--textbox-text-shadow), 0 1rem var(--textbox-text-shadow);
 }
+.textbox__advance {
+  --background: #FFF;
+  --border: #000;
+  --shadow: #42424A;
+  position: absolute;
+  bottom: 8rem;
+  right: -6rem;
+  width: 2rem;
+  height: 2rem;
+  background: var(--background);
+  box-shadow: -1rem 0 var(--background), -2rem -2rem var(--background), -1rem -2rem var(--background), 1rem -2rem var(--background), -0.5rem 1.5rem 0 -0.5rem var(--background), -0.5rem 2.5rem 0 -0.5rem var(--background), -2.5rem -2.5rem 0 0.5rem var(--border), 1.5rem -2.5rem 0 0.5rem var(--border), 0 -3rem 0 0 var(--border), -2rem 0 var(--border), 1rem 0 var(--border), -1rem 2rem var(--border), 0 2rem var(--border), -0.5rem 3.5rem 0 -0.5rem var(--border), -1.5rem -1.5rem 0 0.5rem var(--shadow), 2.5rem -1.5rem 0 0.5rem var(--shadow), 1rem -2rem 0 0 var(--shadow), -1rem 1rem var(--shadow), 2rem 1rem var(--shadow), 0 3rem var(--shadow), 1rem 3rem var(--shadow), 0.5rem 4.5rem 0 -0.5rem var(--shadow);
+}
+@keyframes bounce {
+  from {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(-1rem);
+  }
+  50% {
+    transform: translateY(-2rem);
+  }
+  75% {
+    transform: translateY(-1rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@media not (prefers-reduced-motion) {
+  .textbox__advance {
+    animation: 0.6666666667s steps(1) bounce infinite;
+  }
+}
 
 .textbox__span--red {
   --textbox-text-color: #C54700;
diff --git a/out/style.css.map b/out/style.css.map
index e6280aa..cb85354 100644
--- a/out/style.css.map
+++ b/out/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":"AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;;AAIA;EAEC;EACA;EACA;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAKD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAQA;EACC;EACA,aACC;;;AASH;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":"AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;;AAIA;EAEC;EACA;EACA;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAKD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAQA;EACC;EACA,aACC;;AAMA;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AAOF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/style.scss b/style.scss
index 93d75f4..7cb980d 100644
--- a/style.scss
+++ b/style.scss
@@ -229,6 +229,76 @@ main {
 				0    1rem var(--textbox-text-shadow);
 		}
 	}
+
+    &__advance {
+		--background: #FFF;
+        --border: #000;
+        --shadow: #42424A;
+
+		position: absolute;
+        bottom: 8rem;
+        right: -6rem;
+        width: 2rem;
+        height: 2rem;
+        background: var(--background);
+        box-shadow:
+            // background
+			// top and middle
+            -1rem 0     var(--background),
+            -2rem -2rem var(--background),
+            -1rem -2rem var(--background),
+             1rem -2rem var(--background),
+            // tip of triangle
+            -0.5rem 1.5rem 0 -0.5rem var(--background),
+            -0.5rem 2.5rem 0 -0.5rem var(--background),
+
+            // borders
+            // top segments
+            -2.5rem -2.5rem 0 0.5rem var(--border),
+             1.5rem -2.5rem 0 0.5rem var(--border),
+             0      -3rem   0 0      var(--border),
+            // middle segments
+            -2rem 0    var(--border),
+             1rem 0    var(--border),
+            -1rem 2rem var(--border),
+             0    2rem var(--border),
+            // tip
+            -0.5rem 3.5rem 0 -0.5rem var(--border),
+
+            // shadow
+            // top segments
+            -1.5rem -1.5rem 0 0.5rem var(--shadow),
+             2.5rem -1.5rem 0 0.5rem var(--shadow),
+             1rem   -2rem   0 0      var(--shadow),
+            // middle segments
+            -1rem 1rem var(--shadow),
+             2rem 1rem var(--shadow),
+             0    3rem var(--shadow),
+             1rem 3rem var(--shadow),
+            // tip
+            0.5rem 4.5rem 0 -0.5rem var(--shadow);
+
+		@keyframes bounce {
+			from {
+				transform: translateY(0);
+			}
+			25% {
+				transform: translateY(-1rem);
+			}
+			50% {
+				transform: translateY(-2rem);
+			}
+			75% {
+				transform: translateY(-1rem);
+			}
+			to {
+				transform: translateY(0);
+			}
+		}
+		@media not (prefers-reduced-motion) {
+			animation: calc(2 / 3 * 1s) steps(1) bounce infinite;
+		}
+    }
 }
 
 // custom text colors in text boxes