.published-container {
  // These are the Default Ones that Come with App.css

// Page width and padding
  --page-width: 100%;
  --page-side-padding: 3rem  /* 48/16 */;

  // Page titles
  --page-title-color: var(--h1-color);
  --page-title-font: var(--h1-font);
  --page-title-line-height: var(--h1-line-height);
  --page-title-size: 2.6em;
  --page-title-style: var(--h1-style);
  --page-title-variant: var(--h1-variant);
  --page-title-weight: var(--h1-weight);

  // Component Titles
  --component-title-color: var(--text-normal);
  --component-title-font: inherit;
  --component-title-size: var(--font-ui-small);
  --component-title-style: inherit;
  --component-title-transform: uppercase;
  --component-title-variant: inherit;
  --component-title-weight: var(--font-semibold);

  // Inputs
  --input-height: 2rem  /* 32/16 */;

  // Graph
  --graph-height: 16.25rem  /* 260/16 */;

  // Sidebar
  --sidebar-font-size: 0.875rem  /* 14/16 */;
  --sidebar-left-width: 17.5rem  /* 280/16 */;
  --sidebar-left-background: var(--background-primary);
  --sidebar-left-border-width: 0.0625rem  /* 1/16 */;
  --sidebar-left-border-color: var(--background-modifier-border);
  --sidebar-right-width: 18.75rem  /* 300/16 */;
  --sidebar-right-background: transparent;
  --sidebar-right-border-width: 0px;
  --sidebar-right-border-color: var(--background-modifier-border);

  // Site Headers
  --logo-width: auto;
  --logo-height: auto;
  --logo-max-width: calc(100% - 18px);
  --logo-max-height: 12.5rem  /* 200/16 */;
  --logo-radius: 0.5rem  /* 8/16 */;
  --header-height: 3.125rem  /* 50/16 */;
  --site-name-color: var(--text-normal);
  --site-name-color-hover: var(--text-muted);
  --site-name-font: var(--ebw-font-monospace);
  --site-name-size: 1.125rem;  /* 18/16 */;
  --site-name-weight: var(--font-semibold);
  --site-menu-icon-color: var(--text-faint);
  --site-menu-icon-color-hover: var(--text-normal);
  --site-menu-icon-size: 1.5rem  /* 24/16 */;

  // Site Navigation
  --nav-collapse-icon-color: var(--text-faint);
  --nav-collapse-icon-color-hover: var(--text-muted);
  --nav-parent-item-color: var(--text-normal);
  --nav-parent-item-color-active: var(--text-accent);
  --nav-parent-item-weight: var(--font-medium);
  --nav-item-color: var(--text-muted);
  --nav-item-color-hover: var(--text-normal);
  --nav-item-color-active: var(--text-accent);
  --nav-item-border-color: var(--background-modifier-border);
  --nav-item-border-color-active: var(--text-accent);
  --nav-item-weight-active: var(--font-medium);

  // Outline
  --outline-heading-color: var(--text-muted);
  --outline-heading-color-hover: var(--text-normal);
  --outline-heading-color-active: var(--text-accent);
  --outline-heading-weight-active: var(--font-semibold);

  // Footer
  --footer-display: block;

  // Fonts
  --font-text-size: 16px;
  --font-text-theme: var(--ebw-font-text);
  --font-monospace-theme: var(--ebw-font-monospace);
  --font-interface-theme: var(--ebw-font-text);
  --font-mermaid: var(--ebw-font-monospace);
}

body {
  /* Tooltips */
  --tooltip-display: none;
  /* Popovers */
  --popover-display: block;

  // Added to fix borders on callouts
  --callout-border-width: 0.05rem 0 0 0.05rem;
}


.theme-dark {
  --nav-item-border-color-hover: var(--yellow-2);
}

.theme-light {
  --nav-item-border-color-hover: var(--yellow-4);
}



/* Obsidian Publish mobile variables */
/* --------------------------------- */
@media screen and (max-width: 750px) {
  body {
    --popover-display: none;
    --input-height: 36px;
  }
  .published-container {
    --site-name-size: 1.125rem;
    --header-height: 3.125rem;
    --header-background: var(--background-primary);
    --page-title-size: 2em;
    --page-side-padding: 1.5rem;
    --footer-display: none;
    --list-spacing: 0.15em;
  }
}


@media screen and (max-width: 1000px) {
  body {
    font-size: var(--font-ui-medium);
  }

  .published-container {
    --footer-display: none;
    --outline-heading-weight-active: 600;
    --header-height: var(--h2-size);
    --logo-height: auto;
    --nav-item-weight-active: 500;
    --logo-max-height: 9.375rem;
    --logo-max-width: calc(100% - 1.125rem);
    --site-menu-icon-size: 1.375rem;
    /* Navigation */
    --site-name-size: var(--h3-size);
    --nav-parent-item-weight: 500;
    /* Outline */
    --logo-radius: 0.375rem;
    /* Footer */
    --logo-width: auto;
  }
}

@media screen and (min-width: 1280px) {
  /* ... rules and variables for screens larger than a big tablet */
  .published-container {
    --page-side-padding: 10rem;
    --sidebar-left-width: 14.375rem;
    --sidebar-right-width: 15.625rem;
    --graph-height: 12.5rem;
  }
}


@media screen and (min-width: 1440px) {
  /* ... rules and variables for screens larger than a small monitor */
  .published-container {
    --page-side-padding: 12rem;
  }
}

@media screen and (min-width: 1600px) {
  /* ... rules and variables for screens larger than a medium monitor */
  .published-container {
    --page-side-padding: 14rem;
  }
}

@media screen and (min-width: 1920px) {
  /* ... rules and variables for screens larger than a average monitor */
  .published-container {
    --page-side-padding: 16rem;
  }
}

@media screen and (min-width: 2560px) {
  /* ... rules and variables for screens larger than a good monitor */
  .published-container {
    --page-side-padding: 18rem;
  }
}

@media screen and (min-width: 3840px) {
  /* ... rules and variables for screens larger than a projector */
  .published-container {
    --page-side-padding: 20rem;
  }
}
