From 7736c71f2cd63862b150e04ca43ffe7f233a9199 Mon Sep 17 00:00:00 2001
From: Semidan <semidan.robaina@gmail.com>
Date: Mon, 1 Mar 2021 11:42:30 +0000
Subject: [PATCH] adapted mobile

---
 index.html |  8 +++++---
 styles.css | 33 +++++++++++++++++++++++++++++----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 145a770..35a1ea1 100644
--- a/index.html
+++ b/index.html
@@ -110,9 +110,11 @@
 
   </div> -->
 
-	<footer>
-		<p><a><</a> <a>></a> by <a href="https://semidanrobaina.com">Semidán Robaina Estévez</a>, 2021</p>
-	</footer>
+  <div class="centering_container">
+		<footer>
+			<p><a><</a> <a>></a> by <a href="https://semidanrobaina.com">Semidán Robaina Estévez</a>, 2021</p>
+		</footer>
+  </div>
 
 	<script src="sketch.js"></script>
 
diff --git a/styles.css b/styles.css
index f2901f2..0751c76 100644
--- a/styles.css
+++ b/styles.css
@@ -153,10 +153,10 @@ a {
 }
 
 footer {
-  position: absolute;
+  /* position: absolute;
   top: 93vh;
-  left: 40vw;
-  font-size: 1.3vw;
+  left: 40vw; */
+  font-size: 1.3em;
   z-index: 2;
   color: var(--fontColor);
 }
@@ -191,8 +191,33 @@ footer {
     display: inline;
   }
 
+  #cnv_container {
+    margin: calc((100vw - var(--canvasSideLength)) / 2);
+  }
+
+  #button-controls {
+    display: block;
+    margin-top: 2vh;
+  }
+
+  .button {
+    width: 50px;
+    height: 50px;
+    font-size: 1em;
+    display: inline-block;
+  }
+
+  .slider {
+    width: 30vw;
+  }
+
   :root {
-    --canvasSideLength: 100vw;
+    --canvasSideLength: 95vw;
+    --plotWidth: 100vw;
+  }
+
+  footer {
+    font-size: 1em;
   }
 
 }