From 092b2a7c1f5f821d9f19f7dc14f6d469f1db5891 Mon Sep 17 00:00:00 2001
From: Aldess <106018979+AldessScratch@users.noreply.github.com>
Date: Fri, 24 Nov 2023 12:06:37 +0100
Subject: [PATCH] Add files via upload

---
 public/styles.css | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index 5ee6203..74b9934 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -6,13 +6,15 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
+    width: 100%;
     margin: 0;
     font-family: 'Poppins', sans-serif; /* Set font family for the entire page */
     background-color: var(--bg); /* Light gray background color */
   }
   .intro {
     position: absolute;
+    top: 0;
     z-index: 2;
     background-color: #000;
     width: 100%;
@@ -98,16 +100,20 @@ body {
     border-radius: 15px; /* Rounded corners for the container */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
     padding: 20px; /* Add padding inside the container */
-    max-width: 800px; /* Set a maximum width for the container */
-  }
+    width: 95%; /* Set a maximum width for the container */
+    height: 1050px;
+    margin-bottom: 10px;
+  } 
   
   /* Styling for the canvas where pixels will be placed */
   #canvas {
-    width: 500px;
-    height: 500px;
+    padding: 10px;
+    overflow-x: scroll;
+    width: calc(100% - 100px);
+    height: 1030px;
     display: grid;
-    grid-template-columns: repeat(50, 10px); /* Create 50 columns of 10px each */
-    grid-template-rows: repeat(50, 10px); /* Create 50 rows of 10px each */
+    grid-template-columns: repeat(100, 10px); /* Create 50 columns of 10px each */
+    grid-template-rows: repeat(100, 10px); /* Create 50 rows of 10px each */
     gap: 0; /* Remove any gap between pixels */
   }
   
@@ -116,7 +122,7 @@ body {
     width: 10px;
     height: 10px;
     display: inline-block;
-    border: 1px solid #ccc; /* Add a 1px border around each pixel */
+    border: .1px solid #ccc; /* Add a 1px border around each pixel */
   }
   
   /* Styling for the color selector section */
@@ -155,12 +161,7 @@ body {
       margin: 20px 0; /* Add some spacing around the canvas */
     }
   
-    .color-selector {
-      flex-direction: row; /* Arrange color options horizontally */
-      justify-content: center; /* Center color options horizontally */
-      margin: 0; /* Remove any margin on smaller screens */
-      margin-top: 20px; /* Add some spacing above the color selector */
-    }
+
   
     .color-option {
       margin: 5px 8px; /* Adjust spacing between color options */