/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.markdown p {
  margin-bottom: 1em;
}

.markdown ul {
  margin-bottom: 1em;
  margin-left: 2em;
  list-style-type: disc;
}

.markdown li ul, .markdown li ol {
  margin-bottom: 0;
}

.markdown ol {
  margin-bottom: 1em;
  margin-left: 2em;
  list-style-type: decimal;
}

.markdown h1 {
  font-size: 1.75em
}

.markdown h2 {
  font-size: 1.5em;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0.5em;
  margin: 1em 0;
}

.markdown h3 {
  font-size: 1.25em;
  margin: 1em 0;
}

.markdown h4 {
  font-size: 1.125em;
  margin: 1em 0;
}

.markdown blockquote {
  border-left: 4px solid #a0a0a0;
  padding-left: 1em;
}

.markdown code {
  font-size: .875em;
  border: 1px solid var(--color-stone-200);
  background-color: var(--color-stone-100);
  color: var(--color-stone-600);
  padding: 2px 3px;
  border-radius: 4px;
}

.codeblock {
  background: var(--color-stone-100);
  border: 1px solid var(--color-stone-200);
  border-radius: 8px;
  padding: 1em;
  margin: 1em 0 2em;
}

.codeblock > pre > code {
  font-size: .875em;
  border: 0;
  background-color: transparent;
  color: var(--color-stone-700);
  padding: 2px 3px;
  border-radius: 4px;
}

.markdown a {
  color: var(--color-sky-600);
  text-decoration: none;
}

.markdown a:hover {
  text-decoration: underline;
}

.markdown a code {
  font-size: .875em;
  border: 1px solid var(--color-sky-100);
  background-color: var(--color-sky-50);
  color: var(--color-sky-600);
  padding: 2px 3px;
  border-radius: 4px;
}

.markdown table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-stone-300);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.markdown table thead {
  background-color: var(--color-stone-100);
}

.markdown table th {
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-stone-300);
}

.markdown table th:not(:last-child) {
  border-right: 1px solid var(--color-stone-300);
}

.markdown table td {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  vertical-align: top;
  color: var(--color-stone-600);
}

.markdown table tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-stone-200);
}

.markdown table td:not(:last-child) {
  border-right: 1px solid var(--color-stone-200);
}

.markdown table code {
  background-color: var(--color-stone-100);
  border: 1px solid var(--color-stone-200);
  color: var(--color-stone-900);
  font-weight: 500;
}

.bg-reservepay-gradient {
  background: linear-gradient(135deg, rgba(62, 206, 217, .6) 0%, rgba(106, 226, 207, .6) 50%, rgba(239, 231, 192, .6) 100%);
}

.text-reservepay-gradient {
  background: linear-gradient(135deg, rgba(62, 206, 217, 1) 0%, rgba(106, 226, 207, 1) 50%, rgba(239, 231, 192, 1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes rainbow-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.rainbow {
  /* The background is a linear gradient with all the colors of the rainbow, repeated once to ensure a seamless loop. */
  background-image: linear-gradient(to right, oklch(57.7% 0.245 27.325), oklch(64.6% 0.222 41.116), oklch(68.1% 0.162 75.834), oklch(62.7% 0.194 149.214), oklch(54.6% 0.245 262.881), oklch(54.1% 0.281 293.009), oklch(59.1% 0.293 322.896), oklch(57.7% 0.245 27.325));
  background-size: 800% auto;
  animation: rainbow-flow 8s linear infinite;
}