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

@font-face {
  font-family: "Satoshi-Regular";
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2"),
    url("../fonts/Satoshi-Regular.woff") format("woff"),
    url("../fonts/Satoshi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@layer components {
  /* Sections */
  .sectionWidth {
    @apply w-11/12 sm:w-2/3 lg:w-1/2 2xl:w-1/3;
  }
  /* Buttons */
  .bigButtonPrimary {
    @apply cursor-pointer rounded-lg px-7 py-5 text-blue-100 text-xl bg-blue-500 hover:bg-blue-600 transition-all duration-300 ease-out;
  }
  .smallButtonPrimary {
    @apply cursor-pointer rounded-lg sm:px-5 py-3 text-blue-100 text-xl bg-blue-500 hover:bg-blue-600 transition-all duration-300 ease-out;
  }
  /* Text  Headers */
  .heading3Bold {
    @apply font-bold text-[32px] leading-10;
  }
  .heading4Regular {
    @apply font-normal text-[28px] leading-9;
  }
  .heading5Bold {
    @apply font-bold text-xl;
  }
  .heading5Regular {
    @apply font-normal text-xl;
  }
}

@layer utilities {
  .text-vertical-gradient {
    background-image: linear-gradient(
      180deg,
      #001130 0%,
      #001130 70%,
      #0055ee 80%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .text-horizontal-gradient {
    background-image: linear-gradient(
      90deg,
      #0055ee 0%,
      #001130 80%,
      #001130 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .text-gradient {
    background-image: linear-gradient(to right, #0055ee, #e6eefd, #0055ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}