tailwind.css

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

@layer base {
  /* Allow changing font family via CMS */
  html {
    font-family: var(--font-family);
    scroll-behavior: smooth;
  }

  button:hover {
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    font-weight: 700;
  }

  /** Remove default styles from input[type=number] */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
}

@layer components {
  /** Prevent scroll when modal is open */
  .no-scroll {
    overflow: hidden;
    height: 100vh;
  }
}

@layer utilities {
  /** Remove scrollbar from overflow-auto */
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

  .customContainer {
    max-width: 1256px;
    margin: 0 auto;
  }

  .text-shadow-in p {
    text-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
  }

  .background-df {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .background-df2 {
    background-color: rgba(255, 255, 255, 0.4);
  }

  .backgroundHeroTimeButton {
    background-color: rgba(235, 235, 235, 0.32);
  }

  .background-bar {
    background-color: rgba(217, 217, 217, 0.1);
  }
  .border-bar {
    border-bottom: 1px solid rgba(217, 217, 217, 0.1);
  }

  .colorFooterBorder {
    border-color: rgba(255, 255, 255, 0.1);
  }

  .videoHeaderBorder {
    border: 1px solid rgba(255, 255, 255, 0.16);
  }

  .hoverScale {
    transition: transform 0.2s;
  }

  .hoverScale:hover {
    transform: scale(1.1);
  }

  .sombreamentoImg {
    box-shadow: 1px 1px 1rem #000;
  }

  .heightParagraph p {
    min-height: 10px;
  }
}