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

@layer base {
  html,
  body {
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
  }
  h1 {
    @apply text-2xl font-bold;
  }
  h2 {
    @apply text-xl font-bold;
  }
  h3 {
    @apply text-lg font-bold;
  }
}

@layer components {
  .btn {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
  .card {
    @apply bg-white shadow-md rounded-lg p-4;
    .card-title {
      @apply text-lg font-bold;
    }
    .card-subtitle {
      @apply text-sm text-gray-500;
    }
    .card-description {
      @apply text-gray-700 break-words;
    }
    .card-code {
      @apply bg-gray-100 p-2;
    }
    .card-body {
      @apply text-gray-700;
    }
    .card-key {
      @apply text-xs text-gray-400;
    }
    .card-footer {
      @apply text-sm text-gray-500;
    }
  }
}

@layer utilities {
  .layout-menu {
    @apply bg-gray-900 p-2 text-white flex justify-between h-12;
  }
  .bg-custom-blue {
    background-color: #3490dc;
  }
}