new desgine for mobile

src/pages/drag/dragdrop_phonics.astro

@@ -71,11 +71,11 @@ import Layout from '../../layouts/Layout.astro';
   let retryButton;
   let blockMatches;
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.8;
+      resetIconWidth = 1.47;
+      tickIconWidth = 1.24;
+      cancelIconWidth = 1.08;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -147,7 +147,7 @@ import Layout from '../../layouts/Layout.astro';
       .then(({data}) => {
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){
-          imageCustomWidth = "?width=100";
+          imageCustomWidth = "?width=80";
         } else{
           imageCustomWidth = "?width=100";
         }
@@ -356,24 +356,24 @@ import Layout from '../../layouts/Layout.astro';
             graphics.strokePath();
 
             if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
-                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 55, data.label1, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 55, data.label2, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 15, window.innerHeight - 55, data.label3, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 55, data.label4, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 185, data.label5, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 185, data.label6, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 20, window.innerHeight - 185, data.label7, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 185, data.label8, {font:`15px`, fill: `#7c4c23`})
             }
             if(isMobile){
-                this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`});
-                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
+                this.add.text(leftTargetZoneW - 20, window.innerHeight / 4.5, data.left_label, {font:`10px`, fill: `#60C6CB`});
+                this.add.text(rightTargetZoneW - 100, window.innerHeight / 4.5, data.right_label, {font:`10px`, fill: `#60C6CB`});
             } else{
                 this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
                 this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
             }
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
@@ -438,53 +438,75 @@ import Layout from '../../layouts/Layout.astro';
           // windowLoad();
           submitUserData(this);
         })
+        let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
 
+
+        if(isMobile){
+          blocks1Width1 = 180;
+          blocks1Width2 = 90;
+          blocks1Width3 = 2;
+          blocks1Width4 = 90;
+          blocks1Width5 = 180;
+          blocks1Width6 = 90;
+          blocks1Width7 = 2;
+          blocks1Width8 = 90;
+        } else{
+          blocks1Width1 = 200;
+          blocks1Width2 = 100;
+          blocks1Width3 = 2;
+          blocks1Width4 = 100;
+          blocks1Width5 = 200;
+          blocks1Width6 = 100;
+          blocks1Width7 = 2;
+          blocks1Width8 = 100;
+
+        }
         const blocks = [
             {
-                x: displayW / 2 - 200,
-                y: window.innerHeight - 250,
+                x: displayW / 2 - blocks1Width1,
+                y: window.innerHeight - 290,
                 textureKey: "blocks1",
                 id: "block1",
             },
             {
-                x: displayW / 2-100,
-                y: window.innerHeight - 250,
+                x: displayW / 2 - blocks1Width2,
+                y: window.innerHeight - 290,
                 textureKey: "blocks2",
                 id: "block2",
             },
             {
-                x: displayW / 2,
-                y: window.innerHeight - 250,
+                x: displayW / blocks1Width3,
+                y: window.innerHeight - 290,
                 textureKey: "blocks3",
                 id: "block3",
             },
             {
-                x: displayW / 2+100,
-                y: window.innerHeight - 250,
+                x: displayW / 2 + blocks1Width4,
+                y: window.innerHeight - 290,
                 textureKey: "blocks4",
                 id: "block4",
             },
             {
-                x: displayW / 2-200,
-                y: window.innerHeight - 120,
+                x: displayW / 2 - blocks1Width5,
+                y: window.innerHeight - 160,
                 textureKey: "blocks5",
                 id: "block5",
             },
             {
-                x: displayW / 2-100,
-                y: window.innerHeight - 120,
+                x: displayW / 2 - blocks1Width6,
+                y: window.innerHeight - 160,
                 textureKey: "blocks6",
                 id: "block6",
             },
             {
-                x: displayW / 2,
-                y: window.innerHeight - 120,
+                x: displayW / blocks1Width7,
+                y: window.innerHeight - 160,
                 textureKey: "blocks7",
                 id: "block7",
             },
             {
-                x: displayW / 2+100,
-                y: window.innerHeight - 120,
+                x: displayW / 2 + blocks1Width8,
+                y: window.innerHeight - 160,
                 textureKey: "blocks8",
                 id: "block8",
             },
@@ -495,7 +517,7 @@ import Layout from '../../layouts/Layout.astro';
         const targetZoneBorders = [];
         targetZones.forEach((targetZone) => {
           const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
-          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale);
           targetZoneBorders.push(targetBorder);
           targetZone.block = null;
         }),
@@ -516,7 +538,7 @@ import Layout from '../../layouts/Layout.astro';
                 if (
                     Phaser.Geom.Intersects.RectangleToRectangle(
                         newBlock.getBounds(),
-                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 50)
                     )
                 ) {
                     // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@@ -535,7 +557,7 @@ import Layout from '../../layouts/Layout.astro';
 
                         droppedOnTargetZone = true;
                         targetZoneBorders[targetIndex].setVisible(true);
-                        targetZoneBorders[targetIndex].setAlpha(0);
+                        targetZoneBorders[targetIndex].setAlpha(0.5);
                         return;
                     }
             });

src/pages/drag/index.astro

@@ -313,7 +313,7 @@ import Layout from '../../layouts/Layout.astro';
           .then(({ data }) => {
             // console.log(data)
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            const baseFontSize = 20;
+            const baseFontSize = 24;
             const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
             let wrapWidth;
             if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}

src/pages/drag/match_phonics.astro

@@ -315,7 +315,7 @@ import Layout from '../../layouts/Layout.astro';
                 },
               ];
               const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-              const baseFontSize = 20;
+              const baseFontSize = 24;
               const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
               let wrapWidth;
               if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}

src/pages/drag/v2.astro

@@ -315,7 +315,7 @@ import Layout from '../../layouts/Layout.astro';
                 },
               ];
               const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}

src/pages/drag/v3.astro

@@ -361,7 +361,7 @@ import Layout from '../../layouts/Layout.astro';
             ];
             // console.log(data)
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            const baseFontSize = 20;
+            const baseFontSize = 24;
             const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
             let wrapWidth;
             if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}

src/pages/drag/v4.astro

@@ -349,7 +349,7 @@ import Layout from '../../layouts/Layout.astro';
                 this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
             }
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-              const baseFontSize = 20;
+              const baseFontSize = 24;
               const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
               let wrapWidth;
               if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}

src/pages/drawing/drawing_phonics.astro

@@ -30,11 +30,11 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
+       topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -139,7 +139,7 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}

src/pages/drawing/drawing_writo.astro

@@ -31,11 +31,11 @@ import Layout from '../../layouts/Layout.astro';
     let shortUniqueID;
 
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
+       topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -140,7 +140,7 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}

src/pages/guided-tracing/0.astro

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);

src/pages/guided-tracing/1.astro

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);

src/pages/guided-tracing/2.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
     const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);

src/pages/guided-tracing/3.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);

src/pages/guided-tracing/4.astro

@@ -274,7 +274,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);

src/pages/guided-tracing/5.astro

@@ -275,7 +275,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);

src/pages/guided-tracing/6.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);

src/pages/guided-tracing/7.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);

src/pages/guided-tracing/8.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);

src/pages/guided-tracing/9.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);

src/pages/guided-tracing/A.astro

@@ -264,7 +264,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);

src/pages/guided-tracing/B.astro

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/C.astro

@@ -265,7 +265,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/D.astro

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/E.astro

@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73);

src/pages/guided-tracing/F.astro

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale);

src/pages/guided-tracing/G.astro

@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/H.astro

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale);

src/pages/guided-tracing/I.astro

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale);

src/pages/guided-tracing/J.astro

@@ -264,7 +264,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/K.astro

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);

src/pages/guided-tracing/L.astro

@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/M.astro

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/N.astro

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale);

src/pages/guided-tracing/O.astro

@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/P.astro

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/Q.astro

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/R.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/S.astro

@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/T.astro

@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/U.astro

@@ -265,7 +265,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/V.astro

@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/W.astro

@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/X.astro

@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/Y.astro

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale);

src/pages/guided-tracing/Z.astro

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);

src/pages/guided-tracing/a.astro

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : a', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/b.astro

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : b', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/c.astro

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : c', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/d.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : d', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale);

src/pages/guided-tracing/e.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : e', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/f.astro

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : f', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/g.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : g', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/h.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : h', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/i.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : i', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/j.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : j', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/k.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : k', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);

src/pages/guided-tracing/l.astro

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : l', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/m.astro

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : m', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale);

src/pages/guided-tracing/n.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : n', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/o.astro

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : o', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/p.astro

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/q.astro

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
     const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/r.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : r', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/s.astro

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : s', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/t.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : t', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/u.astro

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : u', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/v.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : v', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/w.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : w', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);

src/pages/guided-tracing/x.astro

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : x', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale);

src/pages/guided-tracing/y.astro

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale);

src/pages/guided-tracing/z.astro

@@ -273,7 +273,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);

src/pages/tracing/index.astro

@@ -69,7 +69,7 @@ function create() {
         .then(response => response.json())
         .then(({ data }) => {
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            const baseFontSize = 20;
+            const baseFontSize = 24;
             const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
             const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4', };