diff --git a/tic-tac-toe/sass/main.scss b/tic-tac-toe/sass/main.scss
index 833431a..c554862 100644
--- a/tic-tac-toe/sass/main.scss
+++ b/tic-tac-toe/sass/main.scss
@@ -22,7 +22,7 @@ $raise-height: calc($lower-height * -1);
 $cell-size: 100%;
 $mark-size: 70%;
 
-$border-width: 0.5rem;
+$border-width: Min(0.75vw, 6px);
 
 
 $corner-elements: 1rem;
@@ -34,6 +34,7 @@ $shadow-marks: $lower-height $lower-height 0px $color-contrast;
 $xl-text: 7rem;
 $lg-text: 4rem;
 $md-text: 3rem;
+$sm-text: 2rem;
 
 // RESET
 
@@ -48,7 +49,7 @@ $md-text: 3rem;
 
 body {
     background-color: $color-secondary-lighter;
-    padding: 4rem;
+    margin: 0;
     min-height: 100vh;
     
     display: flex;
@@ -57,7 +58,9 @@ body {
 }
 
 h1 {
-    font-size: $xl-text;
+    font-size: $lg-text;
+    // Calculated in https://royalfig.github.io/fluid-typography-calculator/
+    font-size: clamp($lg-text, 2.3rem + 7.15vw, $xl-text);
     color: $color-primary;
     margin: 0;
     text-shadow: $shadow-text-h1;
@@ -85,8 +88,7 @@ button:active {
     padding: 2rem;
     border-radius: 2rem;
     background-color: white;
-    width: 80vw;
-    max-width: 800px;
+    width: clamp(280px, 80vw, 750px);
     box-shadow: 0px 2rem 0px calc($lower-height * -1) $color-secondary;
     
     display: flex;
@@ -125,8 +127,12 @@ dialog::backdrop {
         align-items: center;
         flex-wrap: nowrap;
         
-        & .score {
-            font-size: $md-text;
+        // Calculated in https://royalfig.github.io/fluid-typography-calculator/
+        font-size: $sm-text;
+        font-size: clamp($sm-text, 1.2rem + 2.38vw, $md-text);
+
+        & button {
+          font: inherit;
         }
 
         & .score-crosses {
@@ -151,17 +157,10 @@ dialog::backdrop {
     grid-template-rows: repeat(3, 1fr);
 
     & .cell {
-        height: $cell-size;
-        border: $border-width solid $color-border;
+        border: $border-width solid $color-border;    
         cursor: pointer;
-        aspect-ratio: 1/1;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
     }
-    
+
     & :nth-child(-n+3) {
         border-top: none;
     }
@@ -180,25 +179,38 @@ dialog::backdrop {
 }
 
 .cross::before,
-.circle::before { 
-    transition: 50ms ease-out;
+.circle::before {
+  content: "";
+  display: block;
+  height: 100%;
+  // EXAMPLE TO UNDERSTAND THE SHORTHAND
+  /* background-image: var(--background-image);
+  background-size: 80%;
+  background-repeat: no-repeat;
+  background-position: center; */
+  background: no-repeat center / 80% var(--background-image);
+  transition: 50ms ease-out;
 }
 
-.cross::before, 
-.board.cross-plays .cell:not(.cross):not(.circle):hover::before
-{
-    content: url('assets/cross.svg');
+.cross-plays,
+.cross {
+  --background-image: url("assets/cross.svg");
 }
 
-.circle::before,
-.board.circle-plays .cell:not(.cross):not(.circle):hover::before {
-    content: url('assets/circle.svg');
+.circle-plays,
+.circle {
+  --background-image: url("assets/circle.svg");
 }
 
 /* Marks' :hover states */
 
-.board.cross-plays .cell:not(.cross):not(.circle):hover::before, 
-.board.circle-plays .cell:not(.cross):not(.circle):hover::before {
-    transform:translate($raise-height, $raise-height);
-    filter: drop-shadow(3px 7px 0 $color-mark-hover);
+.cell:not(.cross):not(.circle):hover::before {
+  --shadow-offset-x: min(3px, 1vw);
+  --shadow-offset-y: min(7px, 1.2vw);
+  content: "";
+  display: block;
+  height: 100%;
+  background: no-repeat center / 80% var(--background-image);
+  transform: translate(-1vw, -1vw);
+  filter: drop-shadow(var(--shadow-offset-x) var(--shadow-offset-y) 0 $color-mark-hover);
 }
\ No newline at end of file
diff --git a/tic-tac-toe/styles.css b/tic-tac-toe/styles.css
index 23279c6..087f132 100644
--- a/tic-tac-toe/styles.css
+++ b/tic-tac-toe/styles.css
@@ -42,7 +42,7 @@
 
 body {
   background-color: #FF78F0;
-  padding: 4rem;
+  margin: 0;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -50,7 +50,8 @@ body {
 }
 
 h1 {
-  font-size: 7rem;
+  font-size: 4rem;
+  font-size: clamp(4rem, 2.3rem + 7.15vw, 7rem);
   color: #39B5E0;
   margin: 0;
   text-shadow: 0px 7px 0px #F5EA5A;
@@ -78,8 +79,7 @@ button:active {
   padding: 2rem;
   border-radius: 2rem;
   background-color: white;
-  width: 80vw;
-  max-width: 800px;
+  width: clamp(280px, 80vw, 750px);
   box-shadow: 0px 2rem 0px -5px #A31ACB;
   display: flex;
   flex-direction: column;
@@ -109,9 +109,11 @@ dialog::backdrop {
   justify-content: space-around;
   align-items: center;
   flex-wrap: nowrap;
+  font-size: 2rem;
+  font-size: clamp(2rem, 1.2rem + 2.38vw, 3rem);
 }
-.container .scores .score {
-  font-size: 3rem;
+.container .scores button {
+  font: inherit;
 }
 .container .scores .score-crosses {
   color: #39B5E0;
@@ -129,13 +131,8 @@ dialog::backdrop {
   grid-template-rows: repeat(3, 1fr);
 }
 .board .cell {
-  height: 100%;
-  border: 0.5rem solid #A31ACB;
+  border: min(0.75vw, 6px) solid #A31ACB;
   cursor: pointer;
-  aspect-ratio: 1/1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 .board :nth-child(-n+3) {
   border-top: none;
@@ -152,24 +149,37 @@ dialog::backdrop {
 
 .cross::before,
 .circle::before {
+  content: "";
+  display: block;
+  height: 100%;
+  /* background-image: var(--background-image);
+  background-size: 80%;
+  background-repeat: no-repeat;
+  background-position: center; */
+  background: no-repeat center/80% var(--background-image);
   transition: 50ms ease-out;
 }
 
-.cross::before,
-.board.cross-plays .cell:not(.cross):not(.circle):hover::before {
-  content: url("assets/cross.svg");
+.cross-plays,
+.cross {
+  --background-image: url("assets/cross.svg");
 }
 
-.circle::before,
-.board.circle-plays .cell:not(.cross):not(.circle):hover::before {
-  content: url("assets/circle.svg");
+.circle-plays,
+.circle {
+  --background-image: url("assets/circle.svg");
 }
 
 /* Marks' :hover states */
-.board.cross-plays .cell:not(.cross):not(.circle):hover::before,
-.board.circle-plays .cell:not(.cross):not(.circle):hover::before {
-  transform: translate(-5px, -5px);
-  filter: drop-shadow(3px 7px 0 rgba(176, 176, 176, 0.5333333333));
+.cell:not(.cross):not(.circle):hover::before {
+  --shadow-offset-x: min(3px, 1vw);
+  --shadow-offset-y: min(7px, 1.2vw);
+  content: "";
+  display: block;
+  height: 100%;
+  background: no-repeat center/80% var(--background-image);
+  transform: translate(-1vw, -1vw);
+  filter: drop-shadow(var(--shadow-offset-x) var(--shadow-offset-y) 0 rgba(176, 176, 176, 0.5333333333));
 }
 
 /*# sourceMappingURL=styles.css.map */
diff --git a/tic-tac-toe/styles.css.map b/tic-tac-toe/styles.css.map
index 0ce7250..f1ffd36 100644
--- a/tic-tac-toe/styles.css.map
+++ b/tic-tac-toe/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["sass/main.scss","sass/_animations.scss"],"names":[],"mappings":"AACQ;ACDR;EACC;EACQ;;;AAGT;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAKC;EACG;IAGE;;EAEF;IAEE;;;AAGJ;EACE;IAGE;;EAEF;IAEE;;;ADGN;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI,kBAtCsB;EAuCtB;EACA;EAEA;EACA;EACA;;;AAGJ;EACI,WA1BM;EA2BN,OApDY;EAqDZ;EACA,aAhCa;;;AAmCjB;EACI,WA/BM;EAgCN;EACA;EACA;EACA,eA3Cc;EA4Cd;EACA;EACA,kBAhEc;EAiEd,YA9CY;;;AAiDhB;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AAKJ;EACI;EACA,WArEM;EAsEN,aA3EU;EA6EV;EACA,YAhGsB;EAiGtB,eAjFc;EAkFd;EAEA;;;AAGJ;EACI;;;AAKA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI,WA7FF;;AAgGF;EACI,OA5HI;;AA+HR;EACI,OA7Hc;;;AAqI1B;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,QApII;EAqIJ;EACA;EACA;EAEA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;AAAA;EAEI;;;AAGJ;AAAA;EAGI;;;AAGJ;AAAA;EAEI;;;AAGJ;AAEA;AAAA;EAEI;EACA","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["sass/main.scss","sass/_animations.scss"],"names":[],"mappings":"AACQ;ACDR;EACC;EACQ;;;AAGT;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAKC;EACG;IAGE;;EAEF;IAEE;;;AAGJ;EACE;IAGE;;EAEF;IAEE;;;ADIN;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI,kBAvCsB;EAwCtB;EACA;EAEA;EACA;EACA;;;AAGJ;EACI,WA1BM;EA4BN;EACA,OAvDY;EAwDZ;EACA,aAnCa;;;AAsCjB;EACI,WAlCM;EAmCN;EACA;EACA;EACA,eA9Cc;EA+Cd;EACA;EACA,kBAnEc;EAoEd,YAjDY;;;AAoDhB;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AAKJ;EACI;EACA,WAvEM;EAwEN,aA7EU;EA+EV;EACA,YAlGsB;EAmGtB,eAnFc;EAoFd;EAEA;;;AAGJ;EACI;;;AAKA;EACI;EACA;EACA;EACA;EACA;EAGA,WA9FE;EA+FF;;AAEA;EACE;;AAGF;EACI,OAlII;;AAqIR;EACI,OAnIc;;;AA2I1B;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;AAAA;EAEE;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file