@import "./fonts.css";
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

h1, h2, h3, h4, h5, h6 {
  font-family: Kanit;
  font-weight: 600;
  font-style: normal;
  text-align: center;
}

h1 {
  font-size: 3rem;  
}

h2 {
  font-size: 2.6rem;
}

h3 {
  font-size: 2.2rem;
}

h4 {
  font-size: 1.8rem;
}

h5 {
  font-size: 1.4rem;
}

h6 {
  font-size: 1rem;
}

input {
  @apply rounded rounded-md drop-shadow-sm px-2 py-1;
  @apply bg-accent-100;
  @apply w-full;
}

input[type="submit"] {
  @apply rounded rounded-lg drop-shadow-md px-4 py-2;
  @apply bg-accent-600;
  @apply font-semibold;
  @apply hover:drop-shadow-xl;
}

a.btn {
  text-align: center;
  @apply rounded rounded-lg drop-shadow-md px-4 py-2;
  @apply bg-accent-600;
  @apply font-semibold;
  @apply hover:drop-shadow-xl;
}

a.btn-outline {
  text-align: center;
  @apply rounded rounded-lg drop-shadow-md px-4 py-2;
  @apply text-accent-600 bg-accent-600/10;
  @apply border-2 border-accent-600;
  @apply font-semibold;
  @apply hover:drop-shadow-xl;
}

body.global {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

header.global, main.global, footer.global {
  width: 100%;
}

main.global {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}

div.status-message {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

div.status-message.error {
  @apply bg-failure/50;
}

div.call-to-action-box {
  @apply bg-gradient-to-r from-secondary-300/75 to-secondary-500/75;
  @apply rounded-md py-4 px-6;
}