/*
 * 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.
 */


.comment {
    padding: 5px;
    margin-bottom: 5px;
}
.comment p, small {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.comment small {
  font-size: 0.8rem;
  opacity: 0.65;
}

.comment > p {
  white-space: pre-wrap;
}

.separators {
  display: flex;
  gap: 2rem;
  margin: 2.5rem 0;
  justify-content: center;
}

.separators > div {
  width: 0.75rem;
  height: 0.75rem;
  background: #42b883;
}

#posts {
  color: black;
}

#post {
  color: var(--text)
}

#post:hover {
  color: var(--accent)
}

a:has(article) {
  text-decoration: none;
}

/* Customize the lexxy colors. Its css variables should manually tailored for dark-mode. */
:root {
  --sandbox-text-color: oklch(20% 0 0);
  --sandbox-code-color: #2d3748;

  /* Dark mode colors */
  @media (prefers-color-scheme: dark) {
    --sandbox-code-color: #f7fafc;

    /* Lexxy dark mode colors */
    --lexxy-color-ink: oklch(96% 0 0);
    --lexxy-color-ink-medium: oklch(75% 0 0);
    --lexxy-color-ink-light: oklch(55% 0 0);
    --lexxy-color-ink-lighter: oklch(40% 0 0);
    --lexxy-color-ink-lightest: oklch(30% 0 0);
    --lexxy-color-ink-inverted: oklch(15% 0 0);

    --lexxy-color-accent-dark: oklch(70% 0.30 260);
    --lexxy-color-accent-medium: oklch(75% 0.196 258);
    --lexxy-color-accent-light: oklch(45% 0.04 254);
    --lexxy-color-accent-lightest: oklch(35% 0.04 254);

    --lexxy-color-red: oklch(70% 0.15 27);
    --lexxy-color-green: oklch(70% 0.15 145);
    --lexxy-color-blue: oklch(75% 0.196 258);
    --lexxy-color-purple: oklch(70% 0.15 305);

    --lexxy-color-code-token-att: #ff7b72;
    --lexxy-color-code-token-comment: #8b949e;
    --lexxy-color-code-token-function: #d2a8ff;
    --lexxy-color-code-token-operator: #ff7b72;
    --lexxy-color-code-token-property: #79c0ff;
    --lexxy-color-code-token-punctuation: #f0f6fc;
    --lexxy-color-code-token-selector: #7ee787;
    --lexxy-color-code-token-variable: #ffa657;

    --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);

    --highlight-1: rgb(240, 200, 22);
    --highlight-2: rgb(230, 118, 14);
    --highlight-3: rgb(244, 5, 5);
    --highlight-4: rgb(248, 21, 192);
    --highlight-5: rgb(214, 80, 255);
    --highlight-6: rgb(53, 157, 255);
    --highlight-7: rgb(26, 231, 23);
    --highlight-8: rgb(201, 135, 72);
    --highlight-9: rgb(161, 161, 161);
  }
}