add ff template

css/index.css

@@ -33,6 +33,13 @@
     src: url("../fonts/CercoDEMO-Light.otf") format("opentype");
 }
 
+@font-face {
+    font-family: "BebasNeue";
+    font-weight: 600;
+    src: url("https://www2.freeflow.life/fonts/BebasNeue-Bold.ttf") format("opentype");
+    src: url("../fonts/BebasNeue-Bold.ttf") format("opentype");
+}
+
 * {
   font-family: "CercoDEMO", sans-serif;
 }
@@ -59,7 +66,7 @@ img[src*="#md"] {
 }
 
 img[src*="#medium"] {
-    width: 400px;
+    width: 500px;
 }
 
 img[src*="#logo"] {
@@ -72,6 +79,11 @@ img[src*="#large"] {
   margin: auto;
 }
 
+img[src*="#fill"] {
+  width: 100%;
+  height: 100%;
+}
+
 img[src*="#tft_img"] {
   width: 150px;
   margin: 8px;
@@ -81,27 +93,36 @@ img[src*="#tft_img"] {
   width: 200px;
 }
 
+.advance{
+
+  font-family: "BebasNeue";
+}
+
 @layer components {
-  h1 {
-    @apply text-4xl md:text-5xl lg:text-6xl leading-none font-normal;
+  h1, #h1  {
+    @apply text-4xl md:text-4xl lg:text-6xl leading-none font-normal my-4;
+    font-family: "BebasNeue", sans-serif
   }
   h1 strong {
     @apply font-medium;
   }
   h2 {
-    @apply text-3xl md:text-4xl lg:text-5xl xl:text-5xl font-normal leading-none;
+    @apply text-3xl md:text-4xl lg:text-5xl xl:text-8xl font-bold leading-none my-4;
+    font-family: "BebasNeue", sans-serif;
+    line-height: 0.8;
+    font-size:4.5rem
   }
   h2 strong {
     @apply font-medium;
   }
   h3 {
-    @apply text-xl md:text-2xl lg:text-3xl font-light;
+    @apply text-xl md:text-xl lg:text-2xl font-normal my-4;
   }
   h3 strong {
     @apply font-medium;
   }
   h4 {
-    @apply text-xl lg:text-2xl font-normal;
+    @apply text-xl lg:text-xl font-normal;
   }
   h5 {
     @apply text-xl lg:text-xl font-normal;
@@ -110,14 +131,14 @@ img[src*="#tft_img"] {
     @apply text-lg not-italic font-normal my-1;
   }
   p {
-    @apply text-lg lg:text-xl leading-tight tracking-normal font-normal;
+    @apply text-base lg:text-xl leading-tight tracking-normal font-normal my-4;
     font-family: "CercoDEMO", sans-serif;
   }
   blockquote {
     @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
   }
   li {
-    @apply text-lg lg:text-xl font-normal;
+    @apply text-lg lg:text-xl font-normal my-2;
   }
   li li {
     @apply text-sm lg:text-sm font-light;
@@ -126,23 +147,43 @@ img[src*="#tft_img"] {
     @apply inline-block
     text-base
     lg:text-lg
-    px-12
+    px-8
     py-1
     mr-5
-    my-10
+    my-4
     border-2
     shadow
-    capitalize;
   }
 }
 
-button:hover :is(:where(a)) {
-  color: #c6f8ff;
+button:hover  {
+  color: #984210;
 }
 
-button :is(:where(p)) {
-  color: #3d3b39;
-  font-weight: 400;
+button  {
+font-weight: 500;
+}
+
+.experience-btn {
+    border: none;
+    margin: 0;
+    padding: 0;
+    color: black;
+    padding: 20px;
+    width: fit-content;
+}
+
+.experience-btn p {
+    @apply text-lg;
+}
+
+.experience-btn:hover {
+    background: white;
+}
+
+
+.experience-btn h4 {
+    white-space: normal;
 }
 
 header .freeflow {
@@ -172,25 +213,14 @@ header .freeflow div {
 }
 
 button {
-  background-color: #1a1a1a;
-  border-radius: 20px;
-  border: 2px solid white;
+  background: transparent;
+  color: black;
+  border-radius: 10px;
+  border: 2px solid black;
   box-shadow: none;
   font-size: 20px;
 }
 
-button {
-    background-color: #1a1a1a;
-    border-radius: 10px;
-    border: none;
-    box-shadow: none;
-    font-size: 20px;
-  }
-
-button a {
-  color: white;
-}
-
 a {
   border: none;
 }
@@ -339,6 +369,11 @@ header {
 .header:hover .back {
   transform: none;
 }
+@media (max-width: 768px) {
+  h2 {
+    font-size: 4rem;
+  }
+}
 @media (max-width: 640px) {
   .banner h2 {
     font: 600 7vw/10vw;
@@ -358,4 +393,8 @@ header {
   .header {
     padding: 80px 0;
   }
+
+  h2 {
+    font-size: 3rem;
+  }
 }

css/layout.css

@@ -7,10 +7,14 @@ main {
 #text-3xl { @apply text-3xl }
 #text-4xl { @apply text-4xl }
 #text-5xl { @apply text-5xl }
-#text-6xl { @apply text-6xl }
+#text-6xl { @apply xl:text-6xl lg:text-5xl md:text-4xl sm:text-3xl}
 #text-7xl { @apply text-7xl }
 #text-8xl { @apply text-8xl }
+#text-9xl { 
+    font-size: 8rem;
+}
 
+#xp-heading { @apply m-0 }
 /*
 html, body {
   @apply dark:bg-black;