update index

css/index.css

@@ -108,35 +108,13 @@ a img:hover{
 .dropdown {
 
   background-color: rgb(0 0 0 / 50%);
-  @apply
+  @apply lg:text-lg px-6 py-1 lg:mr-5 my-3 shadow border-black capitalize leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:border-stone-700
-  lg:text-lg
-  px-6
-  py-1
-  lg:mr-5
-  my-3
-  shadow
-  border-black
-  capitalize 
-  leading-6 
-  border-transparent 
-  flex 
-  flex-col
-  border-2 
-  w-full 
-  items-start
-  rounded 
-  transition  
-  hover:border-stone-700 
   /* hover:bg-stone-100  */
-  p-2 
+  p-2 text-left text-white
-  text-left
-  text-white
 }
 
 .dropdown a {
-  @apply
+  @apply px-0 text-white
-  px-0
-  text-white
 }
 
 .subtitle {
@@ -156,6 +134,7 @@ a img:hover{
 .green:hover {
   background-color: #7ad993 !important;
 }
+
 .green a {
   color: #fff !important;
 }
@@ -175,6 +154,7 @@ color: #58CF77 ;
   color: #fff !important;
 
 }
+
 .blue_b a {
   color: #fff !important;
 }
@@ -264,68 +244,69 @@ background-color:#5596f5 !important;
 
 @layer components {
   h1 {
-    @apply font-normal tracking-tight leading-tight text-white lg:text-6xl text-3xl;
+    @apply text-4xl lg:text-6xl font-normal;
     color: #ffffff;
     font-family: "Inter", sans-serif !important;
   }
+
   h2 {
     @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
     color: #ffffff;
     font-family: "Inter", sans-serif !important;
   }
+
   h2 strong {
     @apply font-semibold;
   }
+
   h3 {
-    @apply  lg:text-2xl text-xl leading-tight font-normal tracking-tight 
+    @apply text-2xl lg:text-3xl my-4 font-extralight;
     color: #ffffff;
     font-family: "Inter", sans-serif !important;
   }
+
   h3 strong {
     @apply font-normal;
   }
+
   h4 {
     @apply text-xl lg:text-2xl font-normal tracking-wider;
     font-family: "Inter", sans-serif !important;
 
   }
+
   h5 {
     @apply text-lg my-1 tracking-normal font-medium;
     font-family: "Inter", sans-serif !important;
     color: #fff !important
   }
+
   h6 {
     @apply text-md not-italic font-normal my-1;
     font-family: "Inter", sans-serif !important;
   }
+
   p {
     @apply text-lg text-gray-200 font-light;
     font-family: "Inter", sans-serif !important;
   }
+
   blockquote {
     @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
   }
+
   li {
     @apply text-base lg:text-base font-normal;
   }
+
   li li {
     @apply text-sm lg:text-sm font-light;
   }
+
   button {
-    @apply 
+    @apply inline-block md:text-md text-sm lg:mr-3 py-1 my-2 border rounded shadow border-gray-400 capitalize bg-gray-200
-    inline-block
-    md:text-md
-    text-sm
-    lg:mr-3
-    py-1
-    my-2
-    border
-    rounded
-    shadow
-    border-gray-400
-    capitalize
-    bg-gray-200
   }
+
   .my-header h4 {
     color: #9f9f9f;
 
@@ -358,6 +339,7 @@ background-color:#5596f5 !important;
   }
 
 }
+
 .article p {
   font-size: 1.125rem;
   font-family: "Inter", sans-serif;
@@ -365,11 +347,13 @@ background-color:#5596f5 !important;
   color: #e2e2e2
 }
 
-  .post-content-text a, .article a{
+.post-content-text a,
+.article a {
   color: #a1debd;
 }
 
-  .post-content-text a:hover, .article a:hover{
+.post-content-text a:hover,
+.article a:hover {
   color: #57d391;
 }
 
@@ -406,9 +390,7 @@ button :is(:where(p)) {
 
 button a {
   line-height: 1.3;
-  @apply
+  @apply text-black px-8
-  text-black
-  px-8
 }
 
 .long-text a {
@@ -447,6 +429,7 @@ header {
   flex-wrap: wrap;
   margin-bottom: 20px;
 }
+
 .quicklinks img {
   height: auto;
   max-width: 200px;
@@ -569,6 +552,7 @@ header {
 .my-test {
   font-family: "Inter", sans-serif;
 }
+
 .post-content-text .my-test {
   font-family: "Inter", sans-serif;
   line-height: 1.7;
@@ -580,6 +564,7 @@ header {
   font-size: 2.25rem;
   font-weight: 700;
 }
+
 .container-fluid {
   width: 100%;
   /* padding-right: 15px;
@@ -591,6 +576,7 @@ header {
 .zola-anchor {
   display: none;
 }
+
 @media (min-width: 1024px) {
   h2 {
     font-size: 3.5rem;
@@ -618,6 +604,7 @@ header {
   .banner h2 svg {
     font-size: 30px;
   }
+
   .arrow img {
     -moz-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
@@ -631,6 +618,7 @@ header {
 }
 
 @media (max-width: 480px) {
+
   .banner,
   .header {
     padding: 80px 0;
@@ -676,4 +664,3 @@ header {
   }
 
 }
-