Better styled theme buttons

2 files changed, 14 insertions, 12 deletions

diff --git a/index.css b/index.css
index cb8290e..3ab6a73 100644
--- a/index.css
+++ b/index.css
@@ -80,7 +80,6 @@ section a:hover {
 	flex: 0 1 auto;
 	width: 100%;
 	overflow: auto;
-	justify-content: center;
 }
 
 #image_container .image_item {
@@ -167,14 +166,15 @@ input:focus {
 }
 
 /* Theme Selector */
-#theme_selector {
-	width: 50%;
+#theme_selector {;
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	bottom: 1rem;
     pointer-events: all;
     opacity: 1;
     transition: opacity 150ms linear;
+	gap: 2rem;
 }
 
 #theme_selector.hidden {
@@ -191,8 +191,6 @@ input:focus {
 	background-color: white;
 	cursor: pointer;
 	transition: opacity 100ms linear;
-    margin-right: 1rem;
-    margin-left: 1rem;
 }
 
 #theme_selector > button:hover {
diff --git a/index.html b/index.html
index 647d95b..86c83c5 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,9 @@
         <figcaption>
           Hanging with my friends, circa July 2019.
         </figcaption>
-      </figure> 
+      </figure>
+	  
+
     </section>
 	<section>
 	  <h2>About Me</h2>
@@ -62,13 +64,15 @@
       </ul>
     </section>
 
-    <h2>Theme</h2>
-    <div id="theme_selector" class="hidden">
-      <button id="theme_button_default">Default</button>
-      <button id="theme_button_autumn">Autumn</button>
+	<section>
+      <h2>Theme</h2>
+      <div id="theme_selector" class="hidden">
+		<button id="theme_button_default">Default</button>
+		<button id="theme_button_autumn">Autumn</button>
 	    <button id="theme_button_winter">Winter</button>
-      <button id="theme_button_spring">Spring</button>
-    </div>
+		<button id="theme_button_spring">Spring</button>
+      </div>
+	</section>
   </body>
 
   <script src='/index.js'></script>