prisma-home-challenge/styles/globals.css

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

@layer base {
  html,
  body {
    @apply text-prisma-900 p-0 m-0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  * {
    box-sizing: border-box;
  }
}

@layer components {
  .form {
    @apply w-full max-w-screen-xs mx-auto flex flex-col xs:grid xs:grid-cols-form xs:items-center gap-4;
  }

  .form-group {
    @apply xs:contents;
  }

  .form-label {
    @apply font-bold flex-1 xs:text-right;
  }

  .form-input {
    @apply bg-prisma-50 w-full rounded py-2 px-3 text-sm;
  }

  .form-button {
    @apply col-start-2 w-max py-2 px-4 bg-prisma-900 text-white font-bold rounded text-sm hover:bg-prisma-800 active:bg-prisma-700;
  }

  .form-alert-msg {
    @apply col-span-2 bg-red-200 p-4 text-center rounded font-bold text-red-900;
  }

  .form-success-msg {
    @apply col-span-2 bg-green-200 p-4 text-center rounded font-bold text-green-900;
  }
}