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

@layer base {
  /* paytone-one-regular - latin */
  @font-face {
    font-display: swap;
    font-family: 'Paytone One';
    font-style: normal;
    font-weight: 400;
    src: local('Paytone One'),
        url('/assets/fonts/paytone-one-v18-latin-regular.woff2') format('woff2'),
        url('/assets/fonts/paytone-one-v18-latin-regular.ttf') format('truetype');
  }

  /* inter-300 - latin */
  @font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 300;
    src: local('Inter Light'),
        url('/assets/fonts/inter-v12-latin-300.woff2') format('woff2'),
        url('/assets/fonts/inter-v12-latin-300.ttf') format('truetype');
  }

  /* inter-regular - latin */
  @font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    src: local('Inter'),
        url('/assets/fonts/inter-v12-latin-regular.woff2') format('woff2'),
        url('/assets/fonts/inter-v12-latin-regular.ttf') format('truetype');
  }

  /* inter-600 - latin */
  @font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    src: local('Inter SemiBold'),
        url('/assets/fonts/inter-v12-latin-600.woff2') format('woff2'),
        url('/assets/fonts/inter-v12-latin-600.ttf') format('truetype');
  }

  /* inter-800 - latin */
  @font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 800;
    src: local('Inter ExtraBold'),
        url('/assets/fonts/inter-v12-latin-800.woff2') format('woff2'),
        url('/assets/fonts/inter-v12-latin-800.ttf') format('truetype');
  }

  /* fira-mono-regular - latin */
  @font-face {
    font-display: swap;
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 400;
    src: local('Fira Mono'),
        url('/assets/fonts/fira-mono-v14-latin-regular.woff2') format('woff2'),
        url('/assets/fonts/fira-mono-v14-latin-regular.ttf') format('truetype');
  }

  /* fira-mono-700 - latin */
  @font-face {
    font-display: swap;
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/fira-mono-v14-latin-700.woff2') format('woff2'),
        url('/assets/fonts/fira-mono-v14-latin-700.ttf') format('truetype');
  }

  /* selection color */
  ::selection {
    @apply bg-primary text-white dark:bg-primary-light dark:text-black;
  }

  /* base style */
  body {
    @apply bg-background text-text dark:bg-background-dark dark:text-text-dark transition-colors;

    box-sizing: border-box;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5rem;
    margin: 0;
    padding: 0;
    text-align: center;
    height: 100%;
    width: 100%;
  }

  h1 {
    font-family: 'Paytone One', Arial, sans-serif;
    font-size: 2em;
    line-height: 1.3em;
  }

  h2 {
    font-family: 'Paytone One', Arial, sans-serif;
    font-size: 1.5em;
    line-height: 1.3em;
  }

  h3 {
    font-size: 1.2em;
    font-weight: 800;
    line-height: 1.2em;
  }

  a {
    @apply font-semibold;
  }

  a:hover {
    @apply underline decoration-2 decoration-secondary;
  }

  p+p {
    margin-top: .8em;
  }

  label.required::after {
    @apply text-red-700;

    content: "*";
  }

}

.grid-bg {
  background-size: 25px 25px;
  background-image: radial-gradient(circle, rgb(119 119 119 / 40%) 1px, rgba(0 0 0 / 0%) 1px);
}

.button-primary {
  @apply inline-block rounded-[6px] text-center hover:cursor-pointer font-semibold bg-secondary from-secondary-dark to-secondary-light py-[18px] px-[20px] leading-none text-black shadow-md hover:bg-gradient-to-tr hover:text-zinc-800 hover:no-underline hover:shadow-lg transition;
}

.button-primary-animated {
  @apply inline-block rounded-[6px] text-center font-semibold py-[18px] px-[20px] leading-none text-black shadow-md transition;
  background: linear-gradient(45deg, #fc8f29, #ffa255, #ffd0aa, #ffa255);
  background-size: 300% 300%;
  animation: gradient 5s ease infinite;
}

.button-primary-animated:hover {
  @apply cursor-pointer bg-secondary from-secondary to-secondary-light bg-gradient-to-tr text-zinc-800 no-underline shadow-xl;
  background-size: cover;
  animation: none;
}

@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

.button-secondary {
  @apply inline-block rounded-[6px] border-[2px] hover:cursor-pointer text-center font-semibold border-secondary hover:border-t-secondary-light hover:border-r-secondary-light from-secondary to-secondary-light py-[16px] px-[20px] leading-none shadow-md hover:bg-gradient-to-tr hover:text-zinc-800 hover:no-underline hover:shadow-lg;
}

.tech-stack-button {
  @apply flex flex-col justify-between justify-items-center self-center rounded-lg border-2 border-zinc-400 bg-gradient-to-tr from-zinc-200 to-zinc-100 p-1 text-zinc-700 shadow-md hover:no-underline hover:shadow-xl dark:border-zinc-600 dark:from-zinc-800 dark:to-zinc-700 dark:text-zinc-300;
}

.faq-button {
  @apply flex w-full justify-between px-4 py-2 text-left text-base font-semibold rounded-lg border dark:text-zinc-300 hover:dark:text-white hover:text-black border-zinc-300 bg-gradient-to-tr from-zinc-200 hover:from-zinc-100 dark:hover:from-zinc-700 dark:hover:to-zinc-700 to-zinc-100 p-1 text-zinc-700 shadow hover:no-underline hover:shadow-md dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-700;
}
