From f857f96a903c59d4db4cd5b4b984ac44899b8bd7 Mon Sep 17 00:00:00 2001
From: drew_ <developerdrew2@gmail.com>
Date: Tue, 23 Sep 2025 22:05:04 -0400
Subject: [PATCH 1/3] finished parts

---
 css/fancy-robot.css | 133 ++++++++++++++++++++++++++++++++++++++++++++
 css/legal-page.css  |  22 ++++++++
 2 files changed, 155 insertions(+)

diff --git a/css/fancy-robot.css b/css/fancy-robot.css
index 83555f1..18b0a59 100644
--- a/css/fancy-robot.css
+++ b/css/fancy-robot.css
@@ -1,38 +1,171 @@
+* {
+  box-sizing: border-box;
+}
+
 .robot-container {
+  position: relative;
+  width: 300px;
+  height: 300px;
+  border: 5px solid;
+  margin: 120px auto;
+  background-color: whitesmoke;
 }
 
 .robot-face-shape {
+  position: relative;
+  height: 300px;
+  width: 150px;
+  border: 2px solid #2f10a2;
+  border-radius: 75px;
+  background: solid 2px grey;
 }
 
 .robot-eye-left {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  border: solid 1px;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, #aaa, #ebf8e1, #f3e);
 }
 
 .robot-eye-right {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  border: solid 1px;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, #aaa, #ebf8e1, #f3e);
 }
 
 .robot-ear-left {
+  position: absolute;
+  width: 50px;
+  height: 25px;
+  border: solid 1px black;
+  background: radial-gradient(
+    circle at 05%,
+    #333333,
+    #333333 50%,
+    #eeeeee 75%,
+    #333333 75%
+  );
+  top: 50px;
+  left: -25px;
+  border-radius: 50%;
 }
 
 .robot-ear-right {
+  position: absolute;
+  width: 40px;
+  height: 20px;
+  border: solid 1px black;
+  background: radial-gradient(
+    circle at 95%,
+    #333333,
+    #333333 50%,
+    #eeeeee 75%,
+    #333333 75%
+  );
+  top: 50px;
+  right: -20px;
+  border-radius: 50%;
 }
 
 .robot-nose {
+  position: relative;
+  left: 50px;
+  top: 30px;
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  border: solid 1px black;
+  background: linear-gradient(
+    to top(180deg, #e1a0ee 0%, #a0e1f1 50%, #fa10ee 100%)
+  );
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 }
 
 .robot-teeth {
+  position: relative;
+  left: 50px;
+  top: 10px;
+  display: flex;
+  gap: 5px;
+  height: 40px;
+  width: 50px;
+  border: solid 1px black;
+  background-color: red;
+  border-radius: 5px;
 }
 
 .robot-tooth {
+  height: 30px;
+  width: 10px;
+  border: solid 1px black;
+  background-color: white;
 }
 
 .robot-hair-style {
+  position: absolute;
+  width: 300px;
+  height: 150px;
+  border-left: 25px solid transparent;
+  border-right: 25px solid transparent;
+  border-bottom: 20px solid black;
+  top: -20px;
+  left: 30px;
+  transform: rotate(-20deg);
+  z-index: 1;
+  background: conic-gradient(
+    from 90deg at 50% 50%,
+    #fff,
+    #cf01cf,
+    #201d,
+    #201d20
+  );
 }
 
 .robot-hair-one {
+  position: absolute;
+  top: -30px;
+  left: 20px;
+  transform: rotate(-20deg);
+  width: 2px;
+  height: 100px;
+  background-color: black;
+  transform: rotate(-20deg);
 }
 
 .robot-hair-two {
+  position: absolute;
+  top: -40px;
+  left: 30px;
+  width: 2px;
+  height: 100px;
+  background-color: black;
+  transform: rotate(10deg);
 }
 
 .robot-hair-three {
+  position: absolute;
+  top: -30px;
+  left: 40px;
+  width: 2px;
+  height: 100px;
+  background-color: black;
+  transform: rotate(25deg);
+}
+
+.robot-beard {
+  position: absolute;
+  bottom: -20px;
+  left: 25px;
+  background: url(https://picsum.photos/200/100) no-repeat center;
+  background-size: cover;
+  border-top: 100px solid #372d2d;
+  border-left: 50px solid transparent;
+  border-right: 50px solid transparent;
+  height: 30px;
+  width: 100px;
 }
diff --git a/css/legal-page.css b/css/legal-page.css
index a563c2a..4873289 100644
--- a/css/legal-page.css
+++ b/css/legal-page.css
@@ -1,17 +1,32 @@
 .legal-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background-color: #e2e2e2;
   padding: 30px;
   margin-top: 60px;
   width: 100%;
+  z-index:1;
 }
 
 .legal-header h1 {
+  position: fixed;
   width: 100%;
   max-width: 900px;
   margin: 0 auto;
 }
 
 main {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  padding: 30px 0;
+  width: 100%;
+  background-color: #3b3d4e;
+  margin-top: 100px;
 }
 
 section {
@@ -26,6 +41,9 @@ section {
 }
 
 .section-label {
+  position: sticky;
+  top: 100px;
+  align-self: flex-start;
   width: 100%;
   background-color: #2b2d3b;
   height: max-content;
@@ -53,8 +71,12 @@ section {
 }
 
 footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
   display: flex;
   align-items: center;
+  gap: 30px;
   width: 100%;
   background-color: #e2e2e2;
   padding: 0 30px;

From e6f67e657d1eaab8159ad8facb7774d5e75d5e17 Mon Sep 17 00:00:00 2001
From: drew_ <developerdrew2@gmail.com>
Date: Fri, 26 Sep 2025 12:31:48 -0400
Subject: [PATCH 2/3] better parts

---
 css/fancy-robot.css | 177 ++++++++++++++++++--------------------------
 css/legal-page.css  |  10 ++-
 2 files changed, 79 insertions(+), 108 deletions(-)

diff --git a/css/fancy-robot.css b/css/fancy-robot.css
index 18b0a59..6c3c727 100644
--- a/css/fancy-robot.css
+++ b/css/fancy-robot.css
@@ -1,11 +1,10 @@
-* {
-  box-sizing: border-box;
-}
-
 .robot-container {
   position: relative;
-  width: 300px;
-  height: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 500px;
+  height: 500px;
   border: 5px solid;
   margin: 120px auto;
   background-color: whitesmoke;
@@ -13,17 +12,21 @@
 
 .robot-face-shape {
   position: relative;
-  height: 300px;
+  height: 250px;
   width: 150px;
+  top: 0px;
+  margin: 0 auto;
   border: 2px solid #2f10a2;
   border-radius: 75px;
-  background: solid 2px grey;
+  background: linear-gradient(135deg, #6b6b6b, #3a3a3a);
 }
 
 .robot-eye-left {
   position: relative;
-  width: 50px;
+  width: 3rem;
   height: 50px;
+  top: 50px;
+  left: 80px;
   border: solid 1px;
   border-radius: 50%;
   background: radial-gradient(closest-side, #aaa, #ebf8e1, #f3e);
@@ -31,141 +34,107 @@
 
 .robot-eye-right {
   position: relative;
-  width: 50px;
-  height: 50px;
-  border: solid 1px;
+  width: 60px;
+  height: 60px;
+  left: 10px;
+  border: solid 1px black;
   border-radius: 50%;
   background: radial-gradient(closest-side, #aaa, #ebf8e1, #f3e);
 }
 
 .robot-ear-left {
   position: absolute;
-  width: 50px;
-  height: 25px;
-  border: solid 1px black;
+  width: 75px;
+  height: 70px;
+  border: solid 1px green;
   background: radial-gradient(
-    circle at 05%,
-    #333333,
-    #333333 50%,
-    #eeeeee 75%,
-    #333333 75%
+    circle at 100%,
+    #aaa 25%,
+    #6b6b6b 50%,
+    #3a3a3a 75%
   );
-  top: 50px;
-  left: -25px;
-  border-radius: 50%;
+  top: 60px;
+  left: 95px;
 }
 
 .robot-ear-right {
   position: absolute;
-  width: 40px;
-  height: 20px;
-  border: solid 1px black;
-  background: radial-gradient(
-    circle at 95%,
-    #333333,
-    #333333 50%,
-    #eeeeee 75%,
-    #333333 75%
-  );
-  top: 50px;
-  right: -20px;
-  border-radius: 50%;
+  width: 140px;
+  height: 70px;
+  border: solid 1px firebrick;
+  background: radial-gradient(circle at 0%, #aaa 25%, #6b6b6b 50%, #3a3a3a 75%);
+  top: 60px;
+  right: 30px;
 }
 
 .robot-nose {
   position: relative;
-  left: 50px;
-  top: 30px;
-  height: 50px;
   width: 50px;
-  border-radius: 50%;
-  border: solid 1px black;
-  background: linear-gradient(
-    to top(180deg, #e1a0ee 0%, #a0e1f1 50%, #fa10ee 100%)
-  );
-  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  height: 50px;
+  background: url(https://picsum.photos/200/300);
+  background-size: cover;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%) rotate(-45deg);
 }
 
 .robot-teeth {
   position: relative;
-  left: 50px;
-  top: 10px;
-  display: flex;
-  gap: 5px;
-  height: 40px;
-  width: 50px;
-  border: solid 1px black;
-  background-color: red;
-  border-radius: 5px;
+  width: 0;
+  height: 0;
+  border-left: 30px solid transparent;
+  border-right: 30px solid transparent;
+  border-top: 30px solid white;
+  top: 40px;
+  left: 30%;
 }
 
 .robot-tooth {
-  height: 30px;
+  position: relative;
+  margin: 0 auto;
   width: 10px;
-  border: solid 1px black;
+  height: 1px;
+  border: 1px solid black;
   background-color: white;
+  bottom: 30px;
 }
 
 .robot-hair-style {
   position: absolute;
-  width: 300px;
-  height: 150px;
-  border-left: 25px solid transparent;
-  border-right: 25px solid transparent;
-  border-bottom: 20px solid black;
-  top: -20px;
-  left: 30px;
-  transform: rotate(-20deg);
-  z-index: 1;
-  background: conic-gradient(
-    from 90deg at 50% 50%,
-    #fff,
-    #cf01cf,
-    #201d,
-    #201d20
-  );
+  height: 15px;
+  width: 75px;
+  border-left: 50px solid semi-transparent;
+  border-right: 50px solid semi-transparent;
+  border-top: 5px solid #2f10a2;
+  border: 2px solid #2f10a2;
+  background-color: #3a3a3a;
+  top: 20px;
+  left: 57%;
+  transform: rotate(35deg);
 }
 
 .robot-hair-one {
   position: absolute;
-  top: -30px;
-  left: 20px;
-  transform: rotate(-20deg);
-  width: 2px;
-  height: 100px;
-  background-color: black;
-  transform: rotate(-20deg);
+  height: 13px;
+  width: 13px;
+  border: 2px solid rgb(20, 90, 180);
+  top: 0px;
 }
 
 .robot-hair-two {
   position: absolute;
-  top: -40px;
-  left: 30px;
-  width: 2px;
-  height: 100px;
-  background-color: black;
-  transform: rotate(10deg);
+  height: 12px;
+  width: 24px;
+  border: 2px solid rgba(222, 30, 187, 0.5);
+  top: 0;
+  left: 20px;
 }
 
 .robot-hair-three {
   position: absolute;
-  top: -30px;
-  left: 40px;
-  width: 2px;
-  height: 100px;
-  background-color: black;
-  transform: rotate(25deg);
-}
-
-.robot-beard {
-  position: absolute;
-  bottom: -20px;
-  left: 25px;
-  background: url(https://picsum.photos/200/100) no-repeat center;
-  background-size: cover;
-  border-top: 100px solid #372d2d;
-  border-left: 50px solid transparent;
-  border-right: 50px solid transparent;
-  height: 30px;
-  width: 100px;
+  height: 14px;
+  width: 23px;
+  border: 2px solid rgba(30, 187, 83, 0.5);
+  top: 0px;
+  left: 50px;
 }
diff --git a/css/legal-page.css b/css/legal-page.css
index 4873289..0546a70 100644
--- a/css/legal-page.css
+++ b/css/legal-page.css
@@ -6,10 +6,10 @@
   justify-content: center;
   align-items: center;
   background-color: #e2e2e2;
-  padding: 30px;
+  padding: 40px;
   margin-top: 60px;
   width: 100%;
-  z-index:1;
+  z-index: 1;
 }
 
 .legal-header h1 {
@@ -34,7 +34,7 @@ section {
   gap: 30px;
   position: relative;
   border-bottom: 1px solid grey;
-  padding: 30px;
+  padding: 50px;
   max-width: 900px;
   margin: 0 auto;
   color: white;
@@ -42,12 +42,13 @@ section {
 
 .section-label {
   position: sticky;
-  top: 100px;
+  top: 150px;
   align-self: flex-start;
   width: 100%;
   background-color: #2b2d3b;
   height: max-content;
   padding: 10px 16px;
+  margin-top: 30px;
 }
 
 .document-content {
@@ -55,6 +56,7 @@ section {
   flex-direction: column;
   gap: 30px;
   max-width: 600px;
+  margin: auto;
 }
 
 .document-content p {

From bd72f8acda6d7baea10b0d93a5f6542b807e95be Mon Sep 17 00:00:00 2001
From: drew_ <developerdrew2@gmail.com>
Date: Fri, 26 Sep 2025 12:34:54 -0400
Subject: [PATCH 3/3] Update styles.css

---
 css/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/styles.css b/css/styles.css
index cd905c3..6630d22 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -73,7 +73,7 @@ header.exercise-header {
 }
 
 .top-nav .back-button a:before {
-  content: '\2190';
+  content: "\2190";
 }
 
 .top-nav .back-button a:hover {