tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    /* #region  /**=========== Primary Color =========== */
    --tw-color-primary-50: 247 254 231;
    --tw-color-primary-100: 236 252 203;
    --tw-color-primary-200: 217 249 157;
    --tw-color-primary-300: 190 242 100;
    --tw-color-primary-400: 163 230 53;
    --tw-color-primary-500: 132 204 22;
    --tw-color-primary-600: 101 163 13;
    --tw-color-primary-700: 77 124 15;
    --tw-color-primary-800: 63 98 18;
    --tw-color-primary-900: 54 83 20;
    --color-primary-50: rgb(var(--tw-color-primary-50)); /* #f7fee7 */
    --color-primary-100: rgb(var(--tw-color-primary-100)); /* #ecfccb */
    --color-primary-200: rgb(var(--tw-color-primary-200)); /* #d9f99d */
    --color-primary-300: rgb(var(--tw-color-primary-300)); /* #bef264 */
    --color-primary-400: rgb(var(--tw-color-primary-400)); /* #a3e635 */
    --color-primary-500: rgb(var(--tw-color-primary-500)); /* #84cc16 */
    --color-primary-600: rgb(var(--tw-color-primary-600)); /* #65a30d */
    --color-primary-700: rgb(var(--tw-color-primary-700)); /* #4d7c0f */
    --color-primary-800: rgb(var(--tw-color-primary-800)); /* #3f6212 */
    --color-primary-900: rgb(var(--tw-color-primary-900)); /* #365314 */
    /* #endregion  /**======== Primary Color =========== */
  }

  @layer base {
    .cursor-newtab {
      cursor: url('/images/new-tab.png') 10 10, pointer;
    }
  
    /* #region  /**=========== Typography =========== */
    .h0 {
      @apply text-3xl font-bold md:text-5xl;
    }
  
    h1,
    .h1 {
      @apply text-2xl font-bold md:text-4xl;
    }
  
    h2,
    .h2 {
      @apply text-xl font-bold md:text-3xl;
    }
  
    h3,
    .h3 {
      @apply text-lg font-bold md:text-2xl;
    }
  
    h4,
    .h4 {
      @apply text-base font-bold md:text-lg;
    }
  
    body,
    .p {
      @apply text-sm md:text-base;
    }
    /* #endregion  /**======== Typography =========== */
  
    .layout {
      /* 1100px */
      max-width: 68.75rem;
      @apply mx-auto w-11/12;
    }
  
    .bg-dark a.custom-link {
      @apply border-gray-200 hover:border-gray-200/0;
    }
  
    /* Class to adjust with sticky footer */
    .min-h-main {
      @apply min-h-[calc(100vh-56px)];
    }
  }
  
  @layer utilities {
    .animated-underline {
      background-image: linear-gradient(#33333300, #33333300),
        linear-gradient(
          to right,
          var(--color-primary-400),
          var(--color-primary-500)
        );
      background-size: 100% 2px, 0 2px;
      background-position: 100% 100%, 0 100%;
      background-repeat: no-repeat;
    }
    @media (prefers-reduced-motion: no-preference) {
      .animated-underline {
        transition: 0.3s ease;
        transition-property: background-size, color, background-color,
          border-color;
      }
    }
    .animated-underline:hover,
    .animated-underline:focus-visible {
      background-size: 0 2px, 100% 2px;
    }
  }