input.css

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

@layer base {
  h3 {
    @apply mb-8 text-4xl font-bold text-darkGrayishBlue md:text-5xl;
  }

  h5 {
    @apply mb-2 text-2xl font-bold text-darkGrayishBlue;
  }
}

. {
  @apply flex flex-col max-w-6xl mx-auto my-20 px-10;
}

.section-content {
  @apply max-w-3xl mx-auto text-xl leading-9 text-center text-grayishBlue;
}

 .button-container {
  @apply flex flex-col justify-center w-full space-y-6 text-xl 
  text-white md:flex-row md:space-y-0 md:space-x-4;
} 

body {
  background-image: url('../images/bg-header-desktop.png');
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 576px) {
  body {
    background-image: url('../images/bg-header-mobile.png');
  }
}

.ficon:hover {
  filter: invert(53%) sepia(68%) saturate(434%) hue-rotate(121deg)
    brightness(101%) contrast(94%);
}