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

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

form label {
  @apply dark:text-slate-400;
}

.responsive-table {
  @apply dark:text-white mx-auto;
}

.responsive-table tr:nth-child(even) {
  @apply bg-slate-800
}

.responsive-table tbody tr:nth-child(odd) {
  @apply bg-slate-900
}

.responsive-table thead th {
  @apply text-left border-b-2 border-b-slate-500 text-xl;
}

.responsive-table thead th:not(:first-child),
.responsive-table td:not(:first-child) {
  @apply border-l border-l-slate-500;
}

@layer utilities {
  .max-w-20char {
    max-width: 20ch;
  }
  .max-w-35char {
    max-width: 40ch;
  }
  .max-w-40char {
    max-width: 40ch;
  }
}

form input,
select,
textarea {
  @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
}

@media screen and (min-width: 768px) {
  form input,
  select,
  textarea {
    width: 300px;
  }
}

@media screen and (max-width: 768px) {
  form input,
  select,
  textarea {
    width: 150px;
  }
}

#button-container button {
  @apply mx-1;
}

th {
  @apply text-right;
}

th label {
  @apply mr-4;
}

.basic-button-container {
  @apply flex space-x-2 justify-center;
}

.basic-button {
  @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
}