bigger paddings

Author: flippont

src/functions.js

@@ -227,15 +227,15 @@ function enforceMinMax(el) {
 
 function drawBGCanvas() {
     loadArray = []
-    for(let i=0; i<20; i++) {
-        for(let j=0; j<20; j++) {
+    for(let i=0; i<10; i++) {
+        for(let j=0; j<10; j++) {
             const image = new Image(60, 45); // Using optional size for image
             image.src = countriesFlags[Math.floor(Math.random() * (countriesFlags.length - 1))].normal;
             image.crossOrigin = "anonymous"
             image.onload = () => {
                 ctx.drawImage(image, i * (canvas.width / 20), j * (( canvas.width / 20 ) / 1.5), canvas.width / 20, ( canvas.width / 20 ) / 1.5 );        
                 loadArray.push(i,j)
-                if(loadArray.length == 400) { // This is a programming sin if I've ever seen one
+                if(loadArray.length == 200) { // This is a programming sin if I've ever seen one
                     var imageDataURL = canvas.toDataURL();
                     //set the dynamic image as the background
                     document.body.style.background = 

style.css

@@ -51,7 +51,7 @@ input[type="file"] {
     text-align: left;
     box-sizing: border-box;
     width: 100%;
-    padding: 20px;
+    padding: 50px;
     height: auto;
     left: 50%;
     margin:auto;
@@ -274,7 +274,7 @@ hr {
     user-select: none;
     grid-gap: 10px;
     width: 100%;
-    padding: 20px;
+    padding: 50px;
 }
 .grid {
     grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));