@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Alfa+Slab+One&family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kameron:wght@400..700&family=Lobster&family=Orelega+One&family=Pacifico&family=Purple+Purse&family=Ranchers&family=Risque&family=Roboto+Slab:wght@100..900&family=Rokkitt:ital,wght@0,100..900;1,100..900&family=Tilt+Warp&family=Yeseva+One&display=swap');

body {

  /* FONTS */
  --font-text-theme: "Alegreya", serif;
  --font-monospace-theme: unset;
  --font-interface-theme: "Alegreya", serif;
  --inline-title-font: "Lobster", sans-serif;
  --h1-font: "Rockwell", serif;
  --h2-font: "Rockwell", serif;

  /* FONT SIZES */
  --font-text-size: unset;
  --font-smallest: unset;
  --font-smaller: unset;
  --font-small: unset;
  --font-ui-smaller: unset;
  --font-ui-small: unset;
  --font-ui-medium: unset;
  --font-ui-large: unset;

  /* BORDERS */
  --border-width: unset;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-xl: 100px;

  /* ICONS */
  --icon-size: unset;
  --icon-stroke: unset;
  --icon-opacity: unset;
  --icon-opacity-hover: unset;
  --icon-opacity-active: unset;

  /* SPACING */
  --line-height-normal: unset;
  --line-height-tight: unset;
  --heading-spacing: 20px;
  --p-spacing: 12px;
  
  /* TABLES */
  /*--table-border-width: 4px;*/
  /*--table-cell-vertical-alignment: top;*/
  /*--table-white-space: normal;*/
  /*--table-header-font: unset;*/
  /*--table-header-size: unset;*/
  /*--table-header-weight: unset;*/
  /*--table-text-size: unset;*/

  /* RETROMA Accent Colors */
  --base-accent: var(--medium-green); /*oklch(from var(--interactive-accent) l c h) !important;*/
  --interactive-accent: oklch(from var(--base-accent) 50% c h) !important;
  --interactive-accent-hover: oklch(from var(--base-accent) 40% c h) !important;

  /* Hue is normalized to the 0-360 degree angle range, any rotation value greater than 360 wraps around (e.g., 370 becomes 10) */
  --rotation-1: 30;
  --rotation-2: 330;
  --accent-1: oklch(from var(--base-accent) l c calc(h + var(--rotation-1)));
  --accent-2: oklch(from var(--base-accent) l c calc(h + var(--rotation-2)));

  /* RETROMA TABLE STYLING */
  /*--table-header-background: oklch(from var(--accent-1) 50% c h / 30%);*/
  --table-data-background: oklch(from var(--base-accent) l c h / 7%) !important;
  --table-border-color: oklch(from black 50% c h / 50%) !important;
  --table-border-width: 1px !important;
  --table-border-spacing: 2px !important;
  --bases-table-header-weight: 100 !important;
  --window-border-radius: 12px !important;
  --button-border-radius: 8px !important;

  /* CUSTOM DINER COLOR DEFINITIONS */
  --beige:#FFF5E2;
  --light-red:#EB486F;
  --medium-red:#CB1858;
  --dark-red:#941849;
  --light-orange:#FF8E7C;
  --medium-orange:#FF7E7B;
  --light-yellow:#FFE6B9;
  --medium-yellow:#FFD4A8;
  --light-green:#A7DEAB;
  --medium-green:#66BB9F;
  --dark-green:#2B94A2;
  --light-pink:#FFC4DB;
  --medium-pink:#F673A7;
}

.theme-light {
  /* CUSTOM COLOR VARIABLES */
  --divider-color: var(--medium-red);
  --nav-background-color: black;
  --nav-accent-color: var(--light-red);
  --nav-text-color: white;
  --nav-hover-color: var(--light-green);
  --nav-active-color: var(--light-red);

  /* OBSIDIAN COLOR VARIABLES */
  /*--table-border-color: var(--background-primary);
  --table-background: white;*/
  /*--table-header-background: var(--medium-yellow);*/
  /*--table-header-color: black !important;*/
  /*--table-text-color: unset;*/
  /*--table-column-alt-background: unset;*/
  /*--table-row-alt-background: unset;*/


  --color-base-00: unset;
  --color-base-05: unset;
  --color-base-10: unset;
  --color-base-20: unset;
  --color-base-25: unset;
  --color-base-30: unset;
  --color-base-35: unset;
  --color-base-40: unset;
  --color-base-50: unset;
  --color-base-60: unset;
  --color-base-70: unset;
  --color-base-100: unset;
  --background-primary: var(--beige);
  --background-primary-alt: var(--medium-yellow);
  --background-secondary: black;
  --background-secondary-alt: #333436;
  --background-modifier-hover: var(--background-primary-alt);
  --background-modifier-active-hover: unset;
  --background-modifier-border: unset;
  --background-modifier-border-hover: unset;
  --background-modifier-border-focus: unset;
  --background-modifier-error: unset;
  --background-modifier-error-hover: unset;
  --background-modifier-success: unset;
  --background-modifier-message: unset;
  --background-modifier-form-field: unset;
  --interactive-normal: unset;
  --interactive-hover: unset;
  --interactive-accent: unset;
  --interactive-accent-hover: unset;
  --text-normal: unset;
  --text-muted: unset;
  --text-faint: unset;
  --text-on-accent: red;
  --text-on-accent-inverted: unset;
  --text-success: unset;
  --text-warning: unset;
  --text-error: unset;
  --text-accent: unset;
  --text-accent-hover: unset;
  --text-selection: unset;
  --text-highlight-bg: unset;
  --caret-color: unset;
  --icon-color: unset;
  --icon-color-hover: unset;
  --icon-color-active: unset;
  --icon-color-focused: unset;
}

.theme-dark {}

.published-container {
  --site-name-font: "Risque", serif;
  --site-name-color: var(--nav-text-color);
  --site-name-color-hover: var(--nav-active-color);
  --page-title-font: "Rockwell", serif;
  --page-title-color: unset;
  --page-color: var(--background-primary);
  --sidebar-left-background: var(--nav-background-color);
  /*--logo-height: 100px;*/
  /*--logo-width: 100px;*/
  /*--header-height: 100px;*/
  --nav-collapse-icon-color: var(--nav-text-color);
  --nav-collapse-icon-color-hover: var(--nav-active-color);
  /*--nav-parent-item-color: var(--nav-text-color) !important;
  --nav-parent-item-color-active: var(--nav-active-color) !important;
  --nav-parent-item-weight: bold;
  --nav-item-color: var(--nav-text-color);
  --nav-item-color-hover: var(--nav-hover-color);
  --nav-item-color-active: var(--nav-active-color);*/
  /*--nav-item-border-color: var(--nav-text-color);*/
  --nav-item-border-color-hover: var(--nav-active-color);
  --nav-item-border-color-active: var(--nav-active-color);
  /*--nav-item-weight-active: 500;*/
}

.redbg {
    background: #e89595 !important;
    padding: 0.5em 0.75em 0.5em 0.75em;
    border-radius: 1em;
    display: block;
    width: 100%;
}

/* CUSTOM CALLOUTS */

.callout[data-callout="custom-question-type"] {
    --callout-color: var(--callout-error);
    --callout-icon: lucide-alert-circle;
}

.callout[data-callout="red"] { --callout-color: 211, 69, 69; --callout-icon: "<svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"star\" class=\"svg-inline--fa fa-star fa-w-18\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path fill=\"currentColor\" d=\"M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z\"></path></svg>"; }

.callout:is([data-callout="red"]) .callout-icon {
  display: none;
}

.callout-title .callout-title-inner {
  font-family: "Gill Sans", sans-serif;
  font-weight: 400;
  font-size: ;
}

br {
    display: block;
    margin: 0.25em;
}

h2 {
    padding: 0.6em 0.5em 0.125em 0.5em !important;
    background: var(--background-primary-alt);
    border: none !important;  
    border-radius: var(--radius-m);
    overflow: hidden;
}

h3 {
  border-bottom: 1px solid var(--divider-color);
  padding: 8px 0px 4px 0px !important;
  overflow: hidden;
}

.float-right {
  float: right;
  width: 300px;
  padding: 0px 0px 24px 24px;
}

.relationship_image {
  float: left;
  height: 125px;
  margin: 8px 12px 8px 0px;
}

.character-table {
  margin: 0px !important;
}

.character-table-name {
  text-align: center !important;
}

.character-table-image {
  width: 100%;
  background: var(--background-primary) !important;
  padding: 0px 4px 4px 4px !important;
  border-radius: var(--radius-l);
}

.character-table-quote {
  text-align: center !important;
  font-style: italic;
  font-weight: normal !important;
}

/*table {
  width: 100%;
  overflow: hidden;
  border-collapse: collapse;
  border-radius: var(--radius-l);
}

th {
  background: var(--background-primary-alt);
}*/

/* RETROMA TABLE */
table {
  border-collapse: unset !important;
  border-spacing: var(--table-border-spacing) !important;
  border: var(--border-ridge) !important;
  border-radius: var(--window-border-radius) !important;
  width: 100%;
}

table td {
  background-color: var(--table-data-background) !important;
}

table th {
  background-color: oklch(from var(--accent-1) 50% c h / 30%);
}

.markdown-rendered thead tr > th:nth-child(2n+2) {
  background-color: oklch(from var(--accent-1) 50% c h / 30%);
}

tr:first-child th:first-child {
  border-top-left-radius: var(--window-border-radius) !important;
}

tr:first-child th:last-child {
  border-top-right-radius: var(--window-border-radius) !important;
}

tr:last-child td:first-child {
  border-bottom-left-radius: var(--window-border-radius) !important;
}

tr:last-child td:last-child {
  border-bottom-right-radius: var(--window-border-radius) !important;
}

/* END OF RETROMA TABLE */

.outline-view .tree-item-inner:hover {
  font-weight: 500;
  padding-left: 16px !important;
  border-left: 2px solid var(--nav-active-color);
  color: var(--nav-active-color);
}

.outline-view .mod-active .tree-item-inner {
  font-weight: 500;
  padding-left: 8px;
  border-left: 2px solid var(--nav-active-color);
  color: var(--nav-active-color);
}

.nav-view .tree-item-inner {
  color: var(--nav-text-color);
}

.nav-view .tree-item-inner:hover {
  font-weight: 500 !important;
  color: var(--nav-active-color);
  padding-left: 8px;
}

.nav-view .mod-active .tree-item-inner {
  font-weight: 500;
  /*padding-left: 8px;*/
  /*border-left: 2px solid var(--nav-active-color);*/
  color: var(--nav-active-color);
}

.site-body-left-column, .site-header {
  background: var(--nav-background-color) !important;
}

@media (hover: hover) {
  .site-body-left-column-site-name:hover {
    color: var(--site-name-color-hover);
    text-decoration: none;
  }
  .tree-item-self.is-clickable:hover > .tree-item-icon {
    color: var(--nav-active-color);
}

.site-header {
  color: white;
  background: var(--nav-background-color) !important;
}

.search-bar {
  background-color: var(--background-secondary-alt) !important;
}

.search-bar, .published-search-icon {
  color: white !important;
}

.checkbox-container {
  background-color: var(--background-secondary-alt) !important;
}

.checkbox-container, .option {
  color: white;
}

/* Small Smartphone Specific CSS (480px wide and below) */
@media screen and (max-width: 500px) {
  .float-right {
    width: 100%;
    padding: 0px 0px 24px 0px;
  }
}

/* HEADING DIVIDERS */

/* Credit: Border theme by Akifyss https://github.com/Akifyss/obsidian-border */

:root {
  /* Toggle switches (1 = enabled, 0 = disabled) */
  --h1-underline-enabled: 0;
  --h2-underline-enabled: 0;
  --h3-underline-enabled: 0;
  --h4-underline-enabled: 0;
  --h5-underline-enabled: 0;
  --h6-underline-enabled: 0;
  
  /* Global settings */
  --heading-underline-opacity: 1;
  --heading-underline-gradient-start: 100%;
  --heading-underline-gradient-end: 100%;
}

/* Base positioning for all headings */
.markdown-preview-sizer>div>h1,
.markdown-preview-sizer>div>h2,
.markdown-preview-sizer>div>h3,
.markdown-preview-sizer>div>h4,
.markdown-preview-sizer>div>h5,
.markdown-preview-sizer>div>h6,
.markdown-rendered>h1,
.markdown-rendered>h2,
.markdown-rendered>h3,
.markdown-rendered>h4,
.markdown-rendered>h5,
.markdown-rendered>h6,
.HyperMD-header-1,
.HyperMD-header-2,
.HyperMD-header-3,
.HyperMD-header-4,
.HyperMD-header-5,
.HyperMD-header-6 {
  position: relative;
}

/* H1 Underline */
.markdown-preview-sizer>div>h1::after,
.markdown-rendered>h1::after,
.HyperMD-header-1::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  right: 0;
  bottom: 0;
  opacity: calc(var(--heading-underline-opacity) * var(--h1-underline-enabled));
  background: var(--accent-primary);
}

/* H2 Underline */
.markdown-preview-sizer>div>h2::after,
.markdown-rendered>h2::after,
.HyperMD-header-2::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  right: 0;
  bottom: 0;
  opacity: calc(var(--heading-underline-opacity) * var(--h2-underline-enabled));
  background: var(--divider-color);
}

/* H3 Underline */
.markdown-preview-sizer>div>h3::after,
.markdown-rendered>h3::after,
.HyperMD-header-3::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  right: 0;
  bottom: 0;
  opacity: calc(var(--heading-underline-opacity) * var(--h3-underline-enabled));
  background: var(--divider-color);
}