Anna-Qvil
diff --git a/‎roulette-wheel.html‎
Lines changed: 17 additions & 2 deletions b/‎roulette-wheel.html‎
Lines changed: 17 additions & 2 deletions
diff --git a/‎styles.css‎
Lines changed: 8 additions & 5 deletions b/‎styles.css‎
Lines changed: 8 additions & 5 deletions
@@ -5,6 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Kids' Fun Wheel</title>
     <link rel="stylesheet" href="styles.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;700&display=swap');
+        
+        body {
+            height: 100dvh;
+            overflow: hidden;
+        }
+        
+        #wheel-container {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    </style>
 </head>
 <body>
 
@@ -88,13 +103,13 @@
                 let fontSize = Math.floor(canvas.width / 10);
                 if (labels[i].length > 2) {
                     fontSize = Math.floor(canvas.width / 22);
-                    ctx.font = `${fontSize}px Comic Sans MS`;
+                    ctx.font = `bold ${fontSize}px Fredoka, 'Comic Sans MS', cursive`;
                     const textWidth = ctx.measureText(labels[i]).width;
                     if (textWidth > (radius * 0.4)) {
                         fontSize = Math.floor(fontSize * ((radius * 0.4) / textWidth));
                     }
                 }
-                ctx.font = `${fontSize}px Comic Sans MS`;
+                ctx.font = `bold ${fontSize}px Fredoka, 'Comic Sans MS', cursive`;
                 ctx.textAlign = "center";
                 ctx.fillText(labels[i], 0, 0);
                 ctx.restore();
 
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;700&display=swap');
+
 * {
     -webkit-tap-highlight-color: transparent; /* Fixes gray flash on tap */
 }
@@ -8,20 +10,21 @@ body {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100vh;
+    height: 100dvh;
     margin: 0;
     background-color: #FFF9E6; /* Soft yellow background */
-    font-family: 'Comic Sans MS', cursive, sans-serif;
+    font-family: 'Fredoka', 'Comic Sans MS', cursive, sans-serif;
     overscroll-behavior: none; /* Prevents "pull-to-refresh" bounce */
     -webkit-user-select: none; /* Prevents text selection popups */
     user-select: none;
 }
 
 #wheel-container {
     position: relative;
-    width: 500px;
-    height: 500px;
-    margin-bottom: 30px;
+    width: 90vw;   /* Matches the JS resize logic */
+    max-width: 500px;
+    height: auto;
+    aspect-ratio: 1 / 1;
 }
 
 canvas {