style changes

spin-wheel/index.html

@@ -82,10 +82,12 @@ function draw() {
                 
             <br>
 
-            <br>I will be guiding you through a series of carefully selected questions written by different authors, some are well-known, and others will remain unknown. To begin the exercise, spin the Wheel of Fortune. After a few seconds, a question will appear on the screen. Then, take a photo slide from the deck and hold it to the screen. Think about that question by looking at it and the tiny film together like friends. If you feel like writing your thoughts, you can use the tiny notepad made just for you. These photo slides are there to help you dive deeper into your inner world. Use them to explore moments in your life that you may not have fully processed or understood. As you reflect on these images and answer the questions, you may gain new insights and perspectives about yourself and your life.</p>        
+            <br>I will be guiding you through a series of carefully selected questions written by different authors, some are well-known, and others will remain unknown. To begin the exercise, spin the Wheel of Fortune. After a few seconds, a question will appear on the screen. Then, take a photo slide from the deck and hold it to the screen. Think about that question by looking at it and the tiny film together like friends. 
-        </div>
             
-        <button class="spin-wheel" onclick="spin()" > Spin</button>
+            <br>
+            
+            <br>If you feel like writing your thoughts, you can use the tiny notepad made just for you. These photo slides are there to help you dive deeper into your inner world. Use them to explore moments in your life that you may not have fully processed or understood. As you reflect on these images and answer the questions, you may gain new insights and perspectives about yourself and your life.</p>        
+        </div>
 
         <div id="wheel"></div>
         <div id="popup">
@@ -94,6 +96,7 @@ function draw() {
             <button class="close" onclick="closepopup()" > Close</button>
         </div>
     
+        <button class="spin-wheel" onclick="spin()" > Spin</button>
 
         <div class="bg-text-bottom">
             <h2>Here are a few things I prepared for you before you begin:</h2>
@@ -107,10 +110,10 @@ function draw() {
         </div>
     
 
-<img class="top-left-corner" src="crystals.svg">
+<img class="top-left-corner" src="/spin-wheel/svg/spiral.svg">
-<img class="top-right-corner" src="crystals.svg">
+<img class="top-right-corner" src="/spin-wheel/svg/moon-stars.svg">
-<img class="bottom-left-corner" src="crystals.svg">
+<img class="bottom-left-corner" src="/spin-wheel/svg/crystals.svg">
-<img class="bottom-right-corner" src="crystals.svg">
+<img class="bottom-right-corner" src="/spin-wheel/svg/crystals.svg">
 
 
 

spin-wheel/style.css

@@ -45,40 +45,41 @@ html {
     position: fixed;
     top: 0px;
     left: 0px;
-    transform: translate(-50%,-50%);
+    transform: translate(0%,0%);
-    width: 40vw;
+    width: 18vw;
-    filter: hue-rotate(180deg);
+    filter: hue-rotate(380deg);
   }
 
   .top-right-corner {
     position: fixed;
     top: 0px;
     right: 0px;
-    transform: translate(50%,-50%);
+    transform: translate(0%,0%);
-    width: 40vw;
+    width: 14vw;
-    filter: hue-rotate(180deg);
+    filter: hue-rotate(380deg);
 }
 
   .bottom-left-corner {
     position: fixed;
     bottom: 0px;
     left: 0px;
-    transform: translate(-50%,50%);
+    transform: translate(-16%,40%);
-    width: 40vw;
+    width: 31vw;
-    filter: hue-rotate(180deg);
+    filter: hue-rotate(80deg);
 }
 
   .bottom-right-corner{
     position: fixed;
     bottom: 0px;
     right: 0px;
-    transform: translate(50%,50%);
+    transform: translate(0%,30%);
-    width: 40vw;
+    width: 30vw;
-    filter: hue-rotate(180deg);
+    filter: hue-rotate(-68deg);
 }
 
   #wheel{
     text-align: center;
+    filter: hue-rotate(-68deg);
   }
 
   button{