From 7b542a789e6b6ac6f0be0d207f8c44e6f89dfaa8 Mon Sep 17 00:00:00 2001
From: "sergio.valencia" <sergio.valencia@exos.mx>
Date: Wed, 26 Jun 2024 11:09:03 -0600
Subject: [PATCH] fix name size

---
 index.html         | 315 +++++++++++++++++----------------------------
 src/input.css      |   4 +-
 src/output.css     | 119 ++++-------------
 tailwind.config.js |   2 +-
 4 files changed, 151 insertions(+), 289 deletions(-)

diff --git a/index.html b/index.html
index 01ef1d0..d066259 100644
--- a/index.html
+++ b/index.html
@@ -40,77 +40,47 @@
     </nav> -->
     <main class="w-100 mx-auto px-3 bg-radial">
       <header class="container mx-auto">
-        <h2 class="pt-20 sm:pt-28 text-xl sm:text-2xl font-mono">
+        <h2 class="pb-2 pt-20 sm:pt-28 text-2xl sm:text-3xl font-mono">
           Systems Engineer
         </h2>
-        <div class="inline-block mt-2">
+        <div class="inline-block pb-4">
           <h1 class="name">Sergio Jared</h1>
         </div>
-        <p class="text-sm text-pretty pt-2">
-          Inside the web i like that they call me as "zelmo", sometimes could
-          find me with that name
+        <p class="text-sm pb-2">
+          I'm Mexican and Computational Systems Engineer., I usually learn new
+          things everyday. I am a hyperactive person, to complete a goal I find
+          and try different ways to achieve it. I like to breakdown a big
+          problem in many small tasks. I like order and discipline inside job
+          environment.
+        </p>
+        <p class="text-sm pb-2">
+          I like so much analyzing and planning problems or processes, the fact
+          of asking myself:
+          <span class="italic"
+            >What i need to begin? How long it will take? How much it will cost?
+          </span>
+          is some natural for me
+        </p>
+        <img
+          src="../public/img/selfie.jpg"
+          class="w-4/12 sm:w-4/12 mx-auto rounded-xl"
+          alt="Photography of sergio"
+        />
+        <p class="text-sm pb-10">
+          Actually I have finished my
+          <span class="font-bold">career</span> and I am in my
+          <span class="font-bold">first job!</span>
         </p>
-        <nav
-          class="pt-20 pb-10 flex justify-center sm:justify-end font-semibold text-xl sm:text-base"
-        >
-          <a
-            href="https://www.linkedin.com/in/sergio-jared-valencia-cortaza-806551253/"
-            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
-            title="Go to my LinkedIn profile"
-            target="_blank"
-          >
-            <i class="fa-brands fa-linkedin m-1"></i>
-            <p class="hidden sm:block">Sergio Jared</p>
-          </a>
-          <a
-            href="https://github.com/zelmo-ingeniero"
-            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
-            title="Go to my github profile"
-            target="_blank"
-          >
-            <i class="fa-brands fa-github m-1"></i>
-            <p class="hidden sm:block">zelmo</p>
-          </a>
-          <a
-            href="https://www.facebook.com/sergiojared.valencia.3"
-            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
-            title="Go to my facebook profile"
-            target="_blank"
-          >
-            <i class="fa-brands fa-facebook m-1"></i>
-            <p class="hidden sm:block">Sergio Jared</p>
-          </a>
-          <a
-            href="https://www.youtube.com/channel/UCZDzVVdgyy7Da0v6GCqQC5w"
-            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
-            title="Go to my YouTube videos"
-            target="_blank"
-          >
-            <i class="fa-brands fa-youtube m-1"></i>
-            <p class="hidden sm:block">zelmo</p>
-          </a>
-          <a
-            href="https://www.kaggle.com/sergiojaredvalencia"
-            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
-            title="Go to my Kaggle notebooks"
-            target="_blank"
-          >
-            <i class="fa-brands fa-kaggle m-1"></i>
-            <p class="hidden sm:block">Sergio Jared</p>
-          </a>
-        </nav>
       </header>
     </main>
     <h1
-      class="px-2 pt-10 pb-4 text-4xl font-bold font-mono text-term sm:w-10/12 sm:mx-auto"
+      class="px-2 pt-20 pb-4 text-4xl font-bold font-mono text-term sm:w-10/12 sm:mx-auto"
     >
       Experience
     </h1>
     <main class="flex flex-col w-10/12 sm:w-8/12 mx-auto">
-      <section class="flex pb-2">
-        <div
-          class="flex bg-gradient-to-b from-green-500 to-green-950 w-0.5 justify-center mr-10"
-        >
+      <section class="flex">
+        <div class="flex bg-green-500 w-0.5 justify-center mr-10">
           <i
             class="fa-solid fa-terminal bg-black-800 border-2 rounded-full border-green-500 h-fit p-2 mt-6"
           ></i>
@@ -127,7 +97,7 @@ <h1 class="pb-4 font-semibold text-2xl">Infrastructure</h1>
           <p class="mb-2">
             During my time in this company I got the next achievements:
           </p>
-          <ul class="px-4 divide-y divide-gray font-thin">
+          <ul class="px-4 divide-y divide-gray">
             <li class="py-4">
               I created one
               <a href="#" class="text-term hover:underline">
@@ -172,9 +142,7 @@ <h1 class="pb-4 font-semibold text-2xl">Infrastructure</h1>
         </aside>
       </section>
       <section class="flex pb-20">
-        <div
-          class="flex bg-gradient-to-b from-green-500 to-green-950 w-0.5 justify-center mr-10"
-        >
+        <div class="flex bg-green-500 w-0.5 justify-center mr-10">
           <i
             class="fa-solid fa-computer bg-black-800 border-2 rounded-full border-green-500 h-fit p-2 mt-6"
           ></i>
@@ -188,7 +156,7 @@ <h1 class="pb-4 font-semibold text-2xl">Apprenticeship</h1>
             Here I was still studying the university last year, and to do this
             work was a requirement
           </p>
-          <ul class="px-4 divide-y divide-gray font-thin">
+          <ul class="px-4 divide-y divide-gray">
             <li class="py-4">
               Improvement to almost two hundred computers by doing electrical
               connections, hardware assembling, Windows OS installation,
@@ -222,9 +190,9 @@ <h1 class="pb-4 font-semibold text-2xl">Apprenticeship</h1>
       Education
     </h1>
     <main class="flex flex-col w-10/12 sm:w-8/12 mx-auto">
-      <section class="flex pb-2">
+      <section class="flex">
         <div
-          class="flex bg-gradient-to-b from-green-500 to-green-950 w-0.5 justify-center mr-10"
+          class="flex bg-green-500 w-0.5 justify-center mr-10"
         >
           <i
             class="fa-solid fa-graduation-cap bg-black-800 border-2 rounded-full border-green-500 h-fit p-2 mt-6"
@@ -243,7 +211,7 @@ <h1 class="pb-4 font-semibold text-2xl">
               and more
             </p>
             <p class="pb-4">This were my best projects:</p>
-            <ul class="px-4 divide-y divide-gray font-thin">
+            <ul class="px-4 divide-y divide-gray">
               <li class="py-4">
                 An responsive frontend with multimedia, logos and fonts using
                 pure HTML, CSS and JS
@@ -307,7 +275,7 @@ <h1 class="pb-4 font-semibold text-2xl">English basic</h1>
       </section>
       <section class="flex pb-20">
         <div
-          class="flex bg-gradient-to-b from-green-500 to-green-950 w-0.5 justify-center mr-10"
+          class="flex bg-green-500 w-0.5 justify-center mr-10"
         >
           <i
             class="fa-solid fa-graduation-cap bg-black-800 border-2 rounded-full border-green-500 h-fit p-2 mt-6"
@@ -341,8 +309,8 @@ <h1 class="pb-4 font-semibold text-2xl">Technical Programming</h1>
     >
       Certifications
     </h1>
-    <main class="flex flex-wrap w-11/12 mx-auto pb-6">
-      <aside class="flex p-4 rounded-lg self-start w-full md:w-1/2">
+    <main class="flex flex-wrap mx-1 pb-6">
+      <aside class="flex px-2 py-4 rounded-lg self-start w-full md:w-1/2">
         <img
           class="mr-4 w-20 h-20"
           src="../public/img/google-logo.png"
@@ -375,7 +343,7 @@ <h1 class="pb-2 text-lg font-semibold">
           </a>
         </div>
       </aside>
-      <aside class="flex p-4 rounded-lg self-start w-full md:w-1/2">
+      <aside class="flex px-2 py-4 rounded-lg self-start w-full md:w-1/2">
         <img
           class="mr-4 w-20 h-12"
           src="../public/img/aws-logo.png"
@@ -400,7 +368,7 @@ <h1 class="pb-2 text-lg font-semibold">
           </a>
         </div>
       </aside>
-      <aside class="flex p-4 rounded-lg self-start w-full md:w-1/2">
+      <aside class="flex px-2 py-4 rounded-lg self-start w-full md:w-1/2">
         <img
           class="mr-4 w-20 h-20"
           src="../public/img/datadog.png"
@@ -425,7 +393,7 @@ <h1 class="pb-2 text-lg font-semibold">
           </a>
         </div>
       </aside>
-      <aside class="flex p-4 rounded-lg self-start w-full md:w-1/2">
+      <aside class="flex px-2 py-4 rounded-lg self-start w-full md:w-1/2">
         <img
           class="mr-4 w-20 h-12"
           src="../public/img/aws-logo.png"
@@ -450,7 +418,7 @@ <h1 class="pb-2 text-lg font-semibold">
           </a>
         </div>
       </aside>
-      <aside class="flex p-4 rounded-lg self-start w-full md:w-1/2">
+      <aside class="flex px-2 py-4 rounded-lg self-start w-full md:w-1/2">
         <img
           class="mr-4 w-20 h-20"
           src="../public/img/datadog.png"
@@ -475,7 +443,7 @@ <h1 class="pb-2 text-lg font-semibold">
           </a>
         </div>
       </aside>
-      <aside class="flex p-4 rounded-lg self-start w-full md:w-1/2">
+      <aside class="flex px-2 py-4 rounded-lg self-start w-full md:w-1/2">
         <img
           class="mr-4 w-20 h-20"
           src="../public/img/google-logo.png"
@@ -507,7 +475,7 @@ <h1 class="pb-2 text-lg font-semibold">
           </a>
         </div>
       </aside>
-      <aside class="flex p-4 rounded-lg self-start w-full md:w-1/2">
+      <aside class="flex px-2 py-4 rounded-lg self-start w-full md:w-1/2">
         <img
           class="mr-4 w-20 h-20"
           src="../public/img/google-logo.png"
@@ -529,6 +497,15 @@ <h1 class="pb-2 text-lg font-semibold">
             <li class="px-4 py-1 m-1 rounded-xl bg-gray">Tableau</li>
             <li class="px-4 py-1 m-1 rounded-xl bg-gray">SQL</li>
           </ul>
+          <div class="flex justify-end">
+            <a
+              href="pcs.html"
+              title="View more"
+              class="rounded-lg py-1 px-4 bg-green-600 hover:bg-green-500 font-semibold"
+            >
+              View more
+            </a>
+          </div>
           <a
             href="https://www.coursera.org/account/accomplishments/professional-cert/5JBAH8YJ8K34"
             class="block w-full text-right text-term hover:underline"
@@ -539,7 +516,7 @@ <h1 class="pb-2 text-lg font-semibold">
           </a>
         </div>
       </aside>
-      <aside class="flex p-4 rounded-lg self-start w-full md:w-1/2">
+      <aside class="flex px-2 py-4 rounded-lg self-start w-full md:w-1/2">
         <img
           class="mr-4 w-20 h-20"
           src="../public/img/google-logo.png"
@@ -562,6 +539,33 @@ <h1 class="pb-2 text-lg font-semibold">
             <li class="px-4 py-1 m-1 rounded-xl bg-gray">Prototypes</li>
             <li class="px-4 py-1 m-1 rounded-xl bg-gray">Personal branding</li>
           </ul>
+          <div class="flex justify-end">
+            <a
+              href="asesories.html"
+              title="Complete project"
+              class="rounded-lg py-1 px-4 bg-green-600 hover:bg-green-500 font-semibold"
+            >
+              View more
+            </a>
+          </div>
+          <div class="flex justify-end">
+            <a
+              href="cars.html"
+              title="Complete project"
+              class="rounded-lg py-1 px-4 bg-green-600 hover:bg-green-500 font-semibold"
+            >
+              View more
+            </a>
+          </div>
+          <div class="flex justify-end">
+            <a
+              href="beer-shop.html"
+              title="Complete project"
+              class="rounded-lg py-1 px-4 bg-green-600 hover:bg-green-500 font-semibold"
+            >
+              View more
+            </a>
+          </div>
           <a
             href="https://www.coursera.org/account/accomplishments/professional-cert/TR3SGP6JRVK8"
             class="block w-full text-right text-term hover:underline"
@@ -578,7 +582,7 @@ <h1 class="pb-2 text-lg font-semibold">
     >
       Other Certifications
     </h1>
-    <main class="w-11/12 sm:w-8/12 mx-auto pb-40">
+    <main class="sm:w-8/12 mx-1 pb-40">
       <aside class="p-2 flex">
         <h2 class="w-12 text-sm font-mono">2020</h2>
         <div class="flex-1">
@@ -647,134 +651,57 @@ <h1 class="text-lg pb-2 font-semibold">
         </span>
       </aside>
     </main>
-    <section class="w-10/12 sm:w-8/12 lg:w-1/2 mx-auto pb-20">
-      <p class="pb-2">
-        I was Born in Veracruz, Mexico. I enjoy studying and learn new things
-        everyday
-      </p>
-      <p class="pb-2">
-        I am a hyperactive person. Once that I get a final goal use distinct
-        ways and strategies to achieve it, I can't be so many time doing only
-        one action, i like to breakdown a big task in many small tasks.
-      </p>
-      <p class="pb-2">
-        I studied Technical Programming and Computational Systems, I did a few
-        courses online and also have expertise offering PC's maintenance.
-      </p>
-      <img
-        src="../public/img/selfie.jpg"
-        class="w-6/12 sm:w-4/12 mx-auto rounded-xl"
-        alt="Photography of sergio"
-      />
-      <p class="pb-2">
-        One of my engineer favorite things, was the analyzing and planning, the
-        fact of waiting to think:
-        <i>What i need to begin? How much it will cost? </i> Is some natural for
-        me, I like order and discipline inside job environment.
-      </p>
-      <p class="pb-2">
-        Actually I finished my <b>career</b> and I am in my
-        <b>first job!</b>
-      </p>
-    </section>
-    <h1
-      class="px-2 pt-10 text-4xl font-bold font-mono text-term sm:w-10/12 sm:mx-auto"
-    >
-      Projects
-    </h1>
-    <main class="grid w-10/12 sm:w-8/12 md:w-6/12 mx-auto">
-      <h1 class="py-4 font-bold text-3xl">Data analysis projects</h1>
-      <article
-        class="p-4 rounded-2xl bg-gradient-to-br from-black-400 to-black-700"
-      >
-        <h2 class="text-2xl">The company's PCs</h2>
-        <img
-          class="mr-4 w-20 h-20"
-          src="../public/img/google-logo.png"
-          alt="Google logo"
-        />
-        <p class="text-pretty text-lg font-light my-4">
-          Last project from a Google Career Data analysis certificate. Here I
-          show all knowledge about
-          <span class="italic">data driven decision making</span>
-          using Kaggle and Excel
-        </p>
-        <div class="flex justify-end">
+    <footer class="bg-radial pb-52">
+      <section class="w-11/12 mx-auto flex flex-wrap py-4">
+        <nav
+          class="pt-20 pb-10 flex justify-center sm:justify-end font-semibold text-xl sm:text-base"
+        >
           <a
-            href="pcs.html"
-            title="View more"
-            class="rounded-lg py-1 px-4 bg-green-600 hover:bg-green-500 font-semibold"
+            href="https://www.linkedin.com/in/sergio-jared-valencia-cortaza-806551253/"
+            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
+            title="Go to my LinkedIn profile"
+            target="_blank"
           >
-            View more
+            <i class="fa-brands fa-linkedin m-1"></i>
+            <p class="hidden sm:block">Sergio Jared</p>
           </a>
-        </div>
-      </article>
-      <h1 class="py-4 font-bold text-3xl">UX projects</h1>
-      <div
-        class="p-4 mb-10 rounded-2xl bg-gradient-to-br from-black-400 to-black-700"
-      >
-        <h2 class="text-2xl mb-4">
-          Mobile app and responsive website "Nutrimore"
-        </h2>
-        <img
-          class="mr-4 w-20 h-20"
-          src="../public/img/google-logo.png"
-          alt="Google logo"
-        />
-        <div class="flex justify-end">
           <a
-            href="asesories.html"
-            title="Complete project"
-            class="rounded-lg py-1 px-4 bg-green-600 hover:bg-green-500 font-semibold"
+            href="https://github.com/zelmo-ingeniero"
+            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
+            title="Go to my github profile"
+            target="_blank"
           >
-            View more
+            <i class="fa-brands fa-github m-1"></i>
+            <p class="hidden sm:block">zelmo</p>
           </a>
-        </div>
-      </div>
-      <div
-        class="p-4 mb-10 rounded-2xl bg-gradient-to-br from-black-400 to-black-700"
-      >
-        <h2 class="text-2xl mb-4">Responsive website "Car Diagnostic"</h2>
-        <img
-          class="mr-4 w-20 h-20"
-          src="../public/img/google-logo.png"
-          alt="Google logo"
-        />
-        <div class="flex justify-end">
           <a
-            href="cars.html"
-            title="Complete project"
-            class="rounded-lg py-1 px-4 bg-green-600 hover:bg-green-500 font-semibold"
+            href="https://www.facebook.com/sergiojared.valencia.3"
+            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
+            title="Go to my facebook profile"
+            target="_blank"
           >
-            View more
+            <i class="fa-brands fa-facebook m-1"></i>
+            <p class="hidden sm:block">Sergio Jared</p>
+          </a>
+          <a
+            href="https://www.youtube.com/channel/UCZDzVVdgyy7Da0v6GCqQC5w"
+            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
+            title="Go to my YouTube videos"
+            target="_blank"
+          >
+            <i class="fa-brands fa-youtube m-1"></i>
+            <p class="hidden sm:block">zelmo</p>
           </a>
-        </div>
-      </div>
-      <div
-        class="p-4 rounded-2xl bg-gradient-to-br from-black-400 to-black-700"
-      >
-        <h1 class="text-2xl mb-4">Mobile app "Beer Shop"</h1>
-        <img
-          class="mr-4 w-20 h-20"
-          src="../public/img/google-logo.png"
-          alt="Google logo"
-        />
-        <div class="flex justify-end">
           <a
-            href="beer-shop.html"
-            title="Complete project"
-            class="rounded-lg py-1 px-4 bg-green-600 hover:bg-green-500 font-semibold"
+            href="https://www.kaggle.com/sergiojaredvalencia"
+            class="mx-2 flex items-center hover:text-green-100 sm:hover:underline"
+            title="Go to my Kaggle notebooks"
+            target="_blank"
           >
-            View more
+            <i class="fa-brands fa-kaggle m-1"></i>
+            <p class="hidden sm:block">Sergio Jared</p>
           </a>
-        </div>
-      </div>
-    </main>
-    <footer class="bg-radial pt-40 pb-52">
-      <h1 class="w-100 text-center font-mono font-bold text-2xl">
-        Contact me!
-      </h1>
-      <section class="w-11/12 mx-auto flex flex-wrap py-4">
+        </nav>
         <div class="flex justify-center py-4">
           <a
             class="bg-gray/0 p-1 hover:text-green-100 hover:underline"
diff --git a/src/input.css b/src/input.css
index c462275..5c7a7c8 100644
--- a/src/input.css
+++ b/src/input.css
@@ -2,8 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* I cant put tailwind classes here */
-
 @layer components {
   .bg-radial {
     background: radial-gradient(
@@ -14,7 +12,7 @@
     );
   }
   .name {
-    @apply w-0 inline-block overflow-hidden whitespace-nowrap p-1 border-r-4 border-term text-6xl md:text-7xl font-mono font-[1000];
+    @apply w-0 inline-block overflow-hidden whitespace-nowrap p-1 border-r-4 border-term text-6xl md:text-5xl font-mono font-[1000];
     animation:
       blink 0.8s steps(2, end) infinite,
       typing 1s steps(12, end) forwards;
diff --git a/src/output.css b/src/output.css
index 2e23d8d..2e0e0e5 100644
--- a/src/output.css
+++ b/src/output.css
@@ -614,7 +614,7 @@ video {
 
 @media (min-width: 768px) {
   .name {
-    font-size: 4.5rem;
+    font-size: 3rem;
     line-height: 1;
   }
 }
@@ -706,6 +706,11 @@ video {
   margin: 0.25rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -716,20 +721,11 @@ video {
   margin-right: auto;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -750,10 +746,6 @@ video {
   margin-top: 2.5rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -819,8 +811,8 @@ video {
   width: 5rem;
 }
 
-.w-6\/12 {
-  width: 50%;
+.w-4\/12 {
+  width: 33.333333%;
 }
 
 .w-fit {
@@ -915,10 +907,6 @@ video {
   border-radius: 0.25rem;
 }
 
-.rounded-2xl {
-  border-radius: 1rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -968,49 +956,25 @@ video {
   background-color: hsl(120 46% 36% / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: hsl(122 100% 100% / var(--tw-bg-opacity));
-}
-
-.bg-black-200 {
-  --tw-bg-opacity: 1;
-  background-color: hsl(210 13% 17% / var(--tw-bg-opacity));
-}
-
-.bg-black-500 {
+.bg-green-500 {
   --tw-bg-opacity: 1;
-  background-color: hsl(210 13% 11% / var(--tw-bg-opacity));
+  background-color: hsl(120 42% 45% / var(--tw-bg-opacity));
 }
 
 .bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
-.bg-gradient-to-br {
-  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
-}
-
 .bg-none {
   background-image: none;
 }
 
-.from-black-400 {
-  --tw-gradient-from: hsl(210, 13%, 13%) var(--tw-gradient-from-position);
-  --tw-gradient-to: hsl(210 13% 13% / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .from-green-500 {
   --tw-gradient-from: hsl(120, 42%, 45%) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(120 42% 45% / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.to-black-700 {
-  --tw-gradient-to: hsl(210, 13%, 7%) var(--tw-gradient-to-position);
-}
-
 .to-green-950 {
   --tw-gradient-to: hsl(122, 49%, 10%) var(--tw-gradient-to-position);
 }
@@ -1023,10 +987,6 @@ video {
   padding: 0.5rem;
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1087,6 +1047,10 @@ video {
   padding-bottom: 1rem;
 }
 
+.pb-40 {
+  padding-bottom: 10rem;
+}
+
 .pb-52 {
   padding-bottom: 13rem;
 }
@@ -1107,26 +1071,10 @@ video {
   padding-top: 2.5rem;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
 .pt-20 {
   padding-top: 5rem;
 }
 
-.pt-40 {
-  padding-top: 10rem;
-}
-
-.pb-40 {
-  padding-bottom: 10rem;
-}
-
-.text-center {
-  text-align: center;
-}
-
 .text-right {
   text-align: right;
 }
@@ -1144,11 +1092,6 @@ video {
   line-height: 2rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -1173,10 +1116,6 @@ video {
   font-weight: 700;
 }
 
-.font-light {
-  font-weight: 300;
-}
-
 .font-semibold {
   font-weight: 600;
 }
@@ -1226,8 +1165,6 @@ video {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-/* I cant put tailwind classes here */
-
 .selection\:bg-term *::-moz-selection {
   --tw-bg-opacity: 1;
   background-color: hsl(120 100% 40% / var(--tw-bg-opacity));
@@ -1312,6 +1249,10 @@ video {
     display: block;
   }
 
+  .sm\:w-10\/12 {
+    width: 83.333333%;
+  }
+
   .sm\:w-4\/12 {
     width: 33.333333%;
   }
@@ -1320,10 +1261,6 @@ video {
     width: 66.666667%;
   }
 
-  .sm\:w-10\/12 {
-    width: 83.333333%;
-  }
-
   .sm\:justify-end {
     justify-content: flex-end;
   }
@@ -1342,23 +1279,23 @@ video {
     line-height: 1.5rem;
   }
 
-  .sm\:hover\:underline:hover {
-    text-decoration-line: underline;
+  .sm\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
   }
-}
 
-@media (min-width: 768px) {
-  .md\:w-1\/2 {
-    width: 50%;
+  .sm\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
   }
 
-  .md\:w-6\/12 {
-    width: 50%;
+  .sm\:hover\:underline:hover {
+    text-decoration-line: underline;
   }
 }
 
-@media (min-width: 1024px) {
-  .lg\:w-1\/2 {
+@media (min-width: 768px) {
+  .md\:w-1\/2 {
     width: 50%;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 1c797b4..35b4d9c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 
-export const content = ["./src/**/*.{html,js}", "./src/*.{html,js}"];
+export const content = ["index.html", "./src/**/*.{html,js}", "./src/*.{html,js}"];
 export const theme = {
   colors: {
     black: {