@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

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

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

:root {
  font-family: "DM Sans", sans-serif;
  @apply text-lg;
}

/* monaco editor */
.monaco-editor-background,
.monaco-editor .margin {
  background-color: #020617 !important;
  /* background-color: #18181b !important; */
}
.monaco-editor {
  position: absolute !important;
}

.monaco-editor .mtk1 {
  @apply text-slate-300;
}

h1 {
  @apply text-4xl font-bold my-1;
}

h2 {
  @apply text-3xl font-semibold my-1;
}

h3 {
  @apply text-2xl font-semibold my-1;
}

h4 {
  @apply text-xl font-medium my-1;
}

h5 {
  @apply text-lg font-medium my-1;
}

h6 {
  @apply text-base font-medium my-1;
}

strong {
  @apply font-semibold;
}

ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}
table {
  @apply border-collapse border border-gray-700;
}

thead {
  @apply text-lg;
}

th,
td {
  @apply px-2 py-1 border border-gray-700;
}

hr {
  @apply border-t border-gray-500 my-4;
}

blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic text-gray-400 m-5 pe-3;
}

code {
  @apply font-mono text-sm bg-gray-800 px-2 py-1 rounded-md leading-tight inline-block;
}

p {
  @apply mb-3;
}

button, .btn {
  @apply font-bold py-1 px-3 rounded transition-all duration-200;
}

button:not(.unstyled), .btn:not(.unstyled) {
  @apply bg-blue-900 hover:bg-blue-700 text-blue-50;
}

.btn-danger {
  @apply bg-red-800 hover:bg-red-900 text-red-100;
}

.btn-outline {
  @apply bg-transparent text-blue-200 border border-blue-500;
  @apply hover:border-blue-500 hover:text-blue-100 hover:bg-blue-900;
}

select {
  @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm sm:text-sm;
  @apply focus:outline-none focus:ring-blue-500 focus:border-blue-500;
  @apply bg-slate-800;
}

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.collapsible.expand {
  max-height: 100vh;
}

.markdownQuizAnswerPreview p:last-child {
  @apply p-0 m-0;
}

.markdownPreview a {
  @apply text-blue-500 hover:text-blue-600 font-bold underline;
}