.published-container {
  --page-width: 800px;
  --page-side-padding: 48px;
  --nav-item-color-hover: #1FB5E7;
  --nav-item-color-selected: #1FB5E7;
  --nav-item-border-color-hover: #1FB5E7;
  --nav-collapse-icon-color: #4296f7;
  --link-color: #6FA4EE;
  --link-color-hover: #1FB5E7;
  --link-external-color: #6FA4EE;
  --link-external-color-hover: #1FB5E7;
}

.nav-view-outer .tree-item-self.mod-active {
    background-color: transparent;
    color: #4296f7 var(--nav-item-color-active);
    border-left: 4px solid #4296f7 var(--nav-item-border-color-active);
    font-weight: bolder;
}

@media screen and (min-width: 1000px) {
  /* ... rules and variables for screens larger than tablet */
}
@media screen and (max-width: 1000px) {
  /* ... rules and variables for tablet devices and smaller */
}
@media screen and (max-width: 750px) {
  /* ... rules and variables for mobile devices and smaller */
}

.theme-light {
  --blockquote-font-style: italic;
  --blockquote-background-color: #fafafa;
  --blockquote-border-color: #000000;
  --blockquote-border-thickness: 3px;
  --background-primary: #ffffff;
  --background-secondary: #FFFCF0;
  --text-normal: #000000;
  --text-muted: ;
  --text-accent: ;
  --h1-color: #0d82c1;
  --h2-color: #4296f7;
  --h3-color: #CE5D97;
  --h4-color: #3AA99F;
  --h5-color: #D0A215;
  --h6-color: #DA702C;
  /* ... CSS color variables for when light mode is enabled */
}
.theme-dark {
  --blockquote-font-style: italic;
  --blockquote-background-color: #303030;
  --blockquote-border-color: #ffffff;
  --blockquote-border-thickness: 3px;
  --background-primary: #1A1919;
  --background-secondary: #000000;
  --text-normal: #ffffff;
  --text-muted: ;
  --text-accent: ;
  --h1-color: #0f84c1;
  --h2-color: #4296f7;
  --h3-color: #CE5D97;
  --h4-color: #3AA99F;
  --h5-color: #D0A215;
  --h6-color: #DA702C;
  /* ... CSS color variables for when dark mode is enabled */
}

.site-body-left-column {
    width: var(--sidebar-left-width);
    flex: 0 0 var(--sidebar-left-width);
    min-width: var(--sidebar-left-width);
    padding: 32px 0 0 18px;
    position: relative;
    display: flex;
    background-color: var(--sidebar-left-background);
    border-right: var(--sidebar-left-border-width) solid var(--sidebar-left-border-color);
    height: 100%;
}

.site-body-left-column-site-logo {
    margin-bottom: 10px;
    padding-right: 10px;
    text-align: center;
}

.site-body-left-column-site-name {
    text-align: center;
    margin: 0 auto;
    padding-left: 25px;
    color: #000000;
}

img[alt*="center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img[alt*="right"] {
    float: right;
    clear: right;
    margin-left: 1rem;
    margin-bottom: 5px;
    margin-top: 5px;
}

img[alt*="left"] {
    float: left;
    clear: left;
    margin-right: 1rem;
    margin-bottom: 5px;
    margin-top: 5px;
}