fix some stuff

index.css

@@ -39,7 +39,14 @@ body {
     width: 64px;
     height: 64px;
     background-image: url("assets/verify.png");
-    background-color: darksalmon;
+    background-color: blue;
+}
+
+#refresh {
+    width: 64px;
+    height: 64px;
+    background-image: url("assets/refresh.png");
+    background-color: darkgreen;
 }
 
 .status {
@@ -85,6 +92,9 @@ td {
     left: 4%;
     position: absolute;
     z-index: 2;
+    width: 25%;
+    height: 50%;
+    object-fit: contain;
 }
 
 .lettervec{
@@ -99,6 +109,11 @@ td {
 .imagevec{
     width: 64px;
     height: 64px;
-    object-fit: scale-down;
     background-color:white;
+}
+
+#currentvzor{
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
 }

index.html

@@ -36,11 +36,14 @@
 
                                 </div>
                             </td>
-                        </tr>
-                        <tr>
                             <td>
                                 <div id="trashcan" class="fixbgimage activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)"></div>
                                     
+                                </div>
+                            </td>
+                            <td>
+                                <div id="refresh" class="fixbgimage activepart"></div>
+                                    
                                 </div>
                             </td>
                         </tr>

index.js

@@ -148,6 +148,11 @@ function getRandomElement(array){
     return array[getRandomInt(0, array.length)];
 }
   
+
+function refresh(){
+    cleanup();
+    generatePair();
+}
 function randomize(inarray){
     var tmp = [];
     const randomly = () => Math.random() - 0.5;
@@ -340,6 +345,8 @@ $(function() {
     $("#verify").on("click", checkAnswers);
 
     $("#trashcan").on("click", cleanup);
+
+    $("#refresh").on("click", refresh);
     
 });