style edits

web/spin-wheel/index.html

@@ -19,7 +19,6 @@ questions.onreadystatechange = function() {
 }
 questions.send();
 
-console.log("hey there");
 function preload(){
     img=loadImage('wheel.svg');
 }
@@ -90,7 +89,8 @@ function draw() {
 
         <div id="wheel"></div>
         <div id="popup">
-            <h1 id="popuptext"></h1>
+            <h3 id="popuptext"></h3>
+            <img src="photo-slide.jpg">
             <button class="close" onclick="closepopup()" > Close</button>
         </div>
     
@@ -105,6 +105,10 @@ function draw() {
     
 
 <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">
+
 
 
 </body>

web/spin-wheel/style.css

@@ -46,10 +46,37 @@ html {
     top: 0px;
     left: 0px;
     transform: translate(-50%,-50%);
-    width: 50vw;
+    width: 40vw;
     filter: hue-rotate(180deg);
   }
 
+  .top-right-corner {
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    transform: translate(50%,-50%);
+    width: 40vw;
+    filter: hue-rotate(180deg);
+}
+
+  .bottom-left-corner {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    transform: translate(-50%,50%);
+    width: 40vw;
+    filter: hue-rotate(180deg);
+}
+
+  .bottom-right-corner{
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+    transform: translate(50%,50%);
+    width: 40vw;
+    filter: hue-rotate(180deg);
+}
+
   #wheel{
     text-align: center;
   }
@@ -72,8 +99,9 @@ html {
     position: fixed;
     top: 50%;
     left: 50%;
-    width: 5cm;
-    height: 5cm;
+    width: fit-content;
+    height: fit-content;
+    padding: 5%;
     background-color: azure;
     z-index: 3;
     transform: translate(-50%,-50%);
@@ -83,9 +111,10 @@ html {
   h1{
   position: relative;
   margin-top: 5%;
+  margin-bottom: 0;
   text-align: center;
   font-family: fantasy;
-  font-size:larger;
+  font-size:5em;
   color:antiquewhite;
   }
 
@@ -94,10 +123,19 @@ html {
     font-family: fantasy;
     color:antiquewhite;
   }
+
+  h3 {
+    text-align: center;
+    font-family: fantasy;
+    color:antiquewhite;
+  }
   
   p {
     text-align: center;
     font-family: monospace;
     color:antiquewhite;
-    padding: 5%;
+    font-size: 1.2em;
+    padding-right: 15%;
+    padding-left: 15%;
+    padding-bottom: 5%;
   }