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

 :root {
  --standard-border-radius: 8px;

  /* Default (light) theme */
  --bg: #171717;
  --text: #a7a7a7;
  --main-bg: #3f3c3a;
  --input-bg: #fff;
  --input-color: var(--bg)
  --accent-bg: #8790b4;
  --hover-bg: #7777772a;
  --text-light: #585858;
  --border: #898EA4;
  --accent: #040455;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
  --header-bg: #020024;
  --header-bg-gradiant: var(--bg);
  --button-bg: #040455;

  --font-size: 14pt;
}

 section {
  padding: 10pt;
  border-radius: 8pt;
  border: 2pt solid var(--border);
  border-style: double;
  max-width: 200pt;
}

strong{
  /* the font doesn't have a bold */
  text-shadow: -1px -1px;
  letter-spacing: 0.11em;
}

.hidden_toolbar > trix-toolbar {display: none;}
trix-editor{ background: var(--input-bg); color: black; }
trix-editor .scroll_height { overflow-y: scroll; }

details > summary {
  list-style: none;
  background: rgb(46, 49, 61);
  padding: 6pt 6pt;
  border-radius: 8px 8px 0px 0px;
  color: white;
  text-shadow: -1px -1px;
  letter-spacing: 0.11em;
  border-bottom: white solid 2pt;
}

input[type=text] {
  padding: 4pt 8pt;
  font-size: var(--font-size);
  border-radius: 4pt;
  max-width: calc(100% - 16pt);
}