style edits

spin-wheel/index.html

@@ -92,7 +92,7 @@ function draw() {
         <div id="wheel"></div>
         <div id="popup">
             <h3 id="popuptext"></h3>
-            <!-- <img src="photohere.svg"> -->
+            <img class="slide" src="photohere.svg">
             <button class="close" onclick="closepopup()" > Close</button>
         </div>
     

spin-wheel/style.css

@@ -12,8 +12,8 @@ html {
     right: 0;
     bottom: 0;
     z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */
-    background: url(bg-images/bg3.jpg) no-repeat center center fixed; 
+    background: url(bg-images/bg2.jpg) no-repeat center center fixed; 
-    background-size: 150%;
+    background-size: 100%;
 
     /* Add animation properties */
     -webkit-animation: spin 100s linear infinite;
@@ -46,8 +46,8 @@ html {
     top: 0px;
     left: 0px;
     transform: translate(0%,0%);
-    width: 18vw;
+    width: 12vw;
-    filter: hue-rotate(380deg);
+    filter: hue-rotate(0deg);
   }
 
   .top-right-corner {
@@ -55,8 +55,8 @@ html {
     top: 0px;
     right: 0px;
     transform: translate(0%,0%);
-    width: 14vw;
+    width: 12vw;
-    filter: hue-rotate(380deg);
+    filter: hue-rotate(0deg);
 }
 
   .bottom-left-corner {
@@ -64,8 +64,8 @@ html {
     bottom: 0px;
     left: 0px;
     transform: translate(-16%,40%);
-    width: 31vw;
+    width: 25vw;
-    filter: hue-rotate(80deg);
+    filter: hue-rotate(-68deg);
 }
 
   .bottom-right-corner{
@@ -73,10 +73,15 @@ html {
     bottom: 0px;
     right: 0px;
     transform: translate(0%,30%);
-    width: 30vw;
+    width: 25vw;
     filter: hue-rotate(-68deg);
 }
 
+  .slide {
+    width: 350px;
+    margin: 3%;
+  }
+
   #wheel{
     text-align: center;
     filter: hue-rotate(0deg);