From 9d74ce7322b5efb06b178f2665c72212b7de4c34 Mon Sep 17 00:00:00 2001
From: Boyana <boyana@o.nl>
Date: Sun, 26 Mar 2023 13:40:21 +0200
Subject: [PATCH] style changes

---
 spin-wheel/bg-images/bg3.jpg | Bin 4961333 -> 4961537 bytes
 spin-wheel/index.html        |  17 ++++++++++-------
 spin-wheel/style.css         |  27 ++++++++++++++-------------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/spin-wheel/bg-images/bg3.jpg b/spin-wheel/bg-images/bg3.jpg
index b170ac3c9e1ae14a0b37b20f61b77c1a92289f66..ef4f84f0e846f5875dd514b19f5d27e01761d8ab 100644
GIT binary patch
delta 442
zcmYL?OHxx|5JvmI2?;&`Js41)B7%sBNqqB0KoKibh77G@2h1o2r<~#rGGI)VRj>(n
z;mmRs-U>I+lRjVf*I!@$J<m@5ooA=D<3I6x=jiZzM5`6^5z!l!M3iz$IY%0ao(@Os
zr_pOZNOOfJi^v8GP7yy2qg?p&%uekV`l?q?BdYnNTyHiTKhxfoNLeY`-9@8bZ>O8c
zcGiuY{M9aXxz;+X6rRqPh!Z49CM79Lk5r^8y>d%#%N@BZebO%ja!>9{el;i$q$Wc$
zEDz<8jL4{r$+%3&q&$`>c_P#DRAyvWp2?g%mw9<13-VGH<(1T>Ax(KLZ{)4KllSsL
kKFX3T%ZjYZnykx)Y|1Cul5N?M&+<if<*V#n@@@L!KM_hzZ~y=R

delta 239
zcmV~$**XFN0D#fYC?v_!kdy{xNm(je3zZO_YA*hJPcm0}p#RS2DV!7kCBghR3BJQv
zT)+SqF@<Sd!ev~+46b4p*D#0cn8yv=#4X&$0*1JQyI90MEa5(uv4RI!#Rw1a2#>Lb
zbv(gSJi~Kr-~~3Zg_n4R*LZ_%>|hsf@ec3t0Uxo4eH`ErpYRz+IK~OS;1pl+4c~Ew
LANV=<EBg5dgSUHl

diff --git a/spin-wheel/index.html b/spin-wheel/index.html
index 4a2d859..80a4653 100644
--- a/spin-wheel/index.html
+++ b/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. 
+            
+            <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>
-        
-        <button class="spin-wheel" onclick="spin()" > Spin</button>
 
         <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-right-corner" src="crystals.svg">
-<img class="bottom-left-corner" src="crystals.svg">
-<img class="bottom-right-corner" src="crystals.svg">
+<img class="top-left-corner" src="/spin-wheel/svg/spiral.svg">
+<img class="top-right-corner" src="/spin-wheel/svg/moon-stars.svg">
+<img class="bottom-left-corner" src="/spin-wheel/svg/crystals.svg">
+<img class="bottom-right-corner" src="/spin-wheel/svg/crystals.svg">
 
 
 
diff --git a/spin-wheel/style.css b/spin-wheel/style.css
index ae26ffb..6c9f51b 100644
--- a/spin-wheel/style.css
+++ b/spin-wheel/style.css
@@ -14,7 +14,7 @@ html {
     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-size: 150%;
-    
+
     /* Add animation properties */
     -webkit-animation: spin 100s linear infinite;
     -moz-animation: spin 100s linear infinite;
@@ -45,40 +45,41 @@ html {
     position: fixed;
     top: 0px;
     left: 0px;
-    transform: translate(-50%,-50%);
-    width: 40vw;
-    filter: hue-rotate(180deg);
+    transform: translate(0%,0%);
+    width: 18vw;
+    filter: hue-rotate(380deg);
   }
 
   .top-right-corner {
     position: fixed;
     top: 0px;
     right: 0px;
-    transform: translate(50%,-50%);
-    width: 40vw;
-    filter: hue-rotate(180deg);
+    transform: translate(0%,0%);
+    width: 14vw;
+    filter: hue-rotate(380deg);
 }
 
   .bottom-left-corner {
     position: fixed;
     bottom: 0px;
     left: 0px;
-    transform: translate(-50%,50%);
-    width: 40vw;
-    filter: hue-rotate(180deg);
+    transform: translate(-16%,40%);
+    width: 31vw;
+    filter: hue-rotate(80deg);
 }
 
   .bottom-right-corner{
     position: fixed;
     bottom: 0px;
     right: 0px;
-    transform: translate(50%,50%);
-    width: 40vw;
-    filter: hue-rotate(180deg);
+    transform: translate(0%,30%);
+    width: 30vw;
+    filter: hue-rotate(-68deg);
 }
 
   #wheel{
     text-align: center;
+    filter: hue-rotate(-68deg);
   }
 
   button{