/* CSS for UI elements (a.k.a. chrome) */

html {
    scrollbar-color: var(--scrollbar) transparent;
}
#mdbook-searchresults a,
.content a:link,
a:visited,
a > .hljs {
    color: var(--links);
}

/*
    mdbook-body-container is necessary because mobile browsers don't seem to like
    overflow-x on the body tag when there is a <meta name="viewport"> tag.
*/
#mdbook-body-container {
    /*
        This is used when the sidebar pushes the body content off the side of
        the screen on small screens. Without it, dragging on mobile Safari
        will want to reposition the viewport in a weird way.
    */
    overflow-x: clip;
}

/* Menu Bar */

#mdbook-menu-bar,
#mdbook-menu-bar-hover-placeholder {
    z-index: 101;
    margin: auto calc(0px - var(--page-padding));
}
#mdbook-menu-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--bg);
    border-block-end-color: var(--bg);
    border-block-end-width: 1px;
    border-block-end-style: solid;
}
.hubblo #mdbook-menu-bar {
    border-block-end: var(--border);
    gap: var(--space-16);
}

#mdbook-menu-bar.sticky,
#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
#mdbook-menu-bar:hover,
html.sidebar-visible #mdbook-menu-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0 !important;
}
#mdbook-menu-bar-hover-placeholder {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: var(--menu-bar-height);
}
#mdbook-menu-bar.bordered {
    border-block-end-color: var(--table-border-color);
}
#mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
    position: relative;
    padding: 0 8px;
    z-index: 10;
    line-height: var(--menu-bar-height);
    cursor: pointer;
    transition: color 0.5s;
}
@media only screen and (max-width: 420px) {
    #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
        padding: 0 5px;
    }
}

.hubblo #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
    position: relative;
    padding: 0 0;
    z-index: 10;
    line-height: var(--menu-bar-height);
    cursor: pointer;
    transition: color 0.5s;
}
@media only screen and (max-width: 420px) {
    .hubblo #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
        padding: 0 0;
    }
}

.icon-button {
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}
.icon-button .fa-svg {
    margin: 0;
}

.right-buttons {
    margin: 0 15px;
}
.right-buttons a {
    text-decoration: none;
}

.left-buttons {
    display: flex;
    margin: 0 5px;
}
.hubblo .left-buttons,
.hubblo .right-buttons{
    margin: 0;
    gap: var(--space-16);
    display: flex;
}
.hubblo .left-buttons svg,
.hubblo .right-buttons svg{
    height: var(--icon-menu-bar-height);
    width:  var(--icon-menu-bar-height);
}
html:not(.js) .left-buttons button {
    display: none;
}

.menu-title {
    display: inline-block;
    font-weight: 200;
    font-size: 2.4rem;
    line-height: var(--menu-bar-height);
    text-align: center;
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-title {
    cursor: pointer;
}
.hubblo #mdbook-menu-bar{
    box-sizing: border-box;
    height: var(--header-height);
    padding: var(--space-16) var(--gutter,2rem);
    align-items: center;
    justify-content: space-between;
}
.hubblo .menu-title{
    font-size: 1.4375rem;
    font-weight: 500;
    line-height: 1.2em;
}

.menu-bar,
.menu-bar:visited,
.nav-chapters,
.nav-chapters:visited,
.mobile-nav-chapters,
.mobile-nav-chapters:visited,
.menu-bar .icon-button,
.menu-bar a .fa-svg {
    color: var(--icons);
}

.menu-bar .fa-svg:hover,
.menu-bar .icon-button:hover,
.nav-chapters:hover,
.mobile-nav-chapters .fa-svg:hover {
    color: var(--icons-hover);
}

.hubblo #mdbook-menu-bar button,
.hubblo #mdbook-menu-bar label,
.hubblo #mdbook-menu-bar a{
    color: var(--menu-fg);
}
.hubblo #mdbook-menu-bar button:hover,
.hubblo #mdbook-menu-bar label:hover,
.hubblo #mdbook-menu-bar a:hover{
    color: var(--menu-hover-fg);
}

/* Nav Icons */

.nav-chapters {
    font-size: 2.5em;
    text-align: center;
    text-decoration: none;

    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    max-width: 150px;
    min-width: 90px;
    z-index: 99;

    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;

    transition: color 0.5s, background-color 0.5s;
}

.nav-chapters:hover {
    text-decoration: none;
    background-color: var(--theme-hover);
    transition: background-color 0.15s, color 0.15s;
}
.nav-wrapper {
    margin-block-start: 50px;
    display: none;
}

.mobile-nav-chapters {
    font-size: 2.5em;
    text-align: center;
    text-decoration: none;
    width: 90px;
    border-radius: 5px;
    background-color: var(--sidebar-bg);
}

/* Only Firefox supports flow-relative values */
.previous { float: left; }
[dir=rtl] .previous { float: right; }

/* Only Firefox supports flow-relative values */
.next {
    float: right;
    right: var(--page-padding);
}
.hubblo .next {
    right: 0;
}
[dir=rtl] .next {
    float: left;
    right: unset;
    left: var(--page-padding);
}

@media only screen and (max-width: 1080px) {
    .nav-wide-wrapper { display: none; }
    .nav-wrapper { display: block; }
}

.nav-chapters svg{
    color: var(--nav-chapters-arrow-color) ;
}
.nav-chapters:hover svg{
    color: var(--nav-chapters-arrow-hover-color) ;
}

/* sidebar-visible */
@media only screen and (max-width: 1380px) {
    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
}

/* Inline code */

:not(pre) > .hljs {
    display: inline;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

:not(pre):not(a) > .hljs {
    color: var(--inline-code-color);
    overflow-x: initial;
}

a:hover > .hljs {
    text-decoration: underline;
}

pre {
    position: relative;
}
pre > .buttons {
    position: absolute;
    z-index: 100;
    right: 0px;
    top: 2px;
    margin: 0px;
    padding: 2px 0px;

    color: var(--sidebar-fg);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.1s linear, opacity 0.1s linear;
}
pre:hover > .buttons {
    visibility: visible;
    opacity: 1
}
pre > .buttons :hover {
    color: var(--sidebar-active);
    border-color: var(--icons-hover);
    background-color: var(--theme-hover);
}
pre > .buttons button {
    cursor: inherit;
    margin: 0px 5px;
    padding: 2px 3px 0px 4px;
    font-size: 23px;

    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: var(--icons);
    background-color: var(--theme-popup-bg);
    transition: 100ms;
    transition-property: color,border-color,background-color;
    color: var(--icons);
}

pre > .buttons button.clip-button {
    padding: 2px 4px 0px 6px;
}
.hubblo pre > .buttons button.clip-button {
    padding: 4px 6px 8px 6px;
}
pre > .buttons button.clip-button::before {
    /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license
     */
    content: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard"><path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/></svg>');
    filter: var(--copy-button-filter);
}
.hubblo pre > .buttons button.clip-button::before {
    width: 20px;
    height: 20px;
    display: block;
    content: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"></path></svg>');
}
pre > .buttons button.clip-button:hover::before {
    filter: var(--copy-button-filter-hover);
}

.hubblo pre > .buttons :hover {
    border: var(--border);
}
.hubblo pre > .buttons button {
    border: var(--border);
    background-color: var(--color-white);
}

@media (pointer: coarse) {
    pre > .buttons button {
        /* On mobile, make it easier to tap buttons. */
        padding: 0.3rem 1rem;
    }

    .sidebar-resize-indicator {
        /* Hide resize indicator on devices with limited accuracy */
        display: none;
    }
}
pre > code {
    display: block;
    padding: 1rem;
}

/* FIXME: ACE editors overlap their buttons because ACE does absolute
   positioning within the code block which breaks padding. The only solution I
   can think of is to move the padding to the outer pre tag (or insert a div
   wrapper), but that would require fixing a whole bunch of CSS rules.
*/
.hljs.ace_editor {
  padding: 0rem 0rem;
}

pre > .result {
    margin-block-start: 10px;
}

/* Search */

#mdbook-searchresults a {
    text-decoration: none;
}

mark {
    border-radius: 2px;
    padding-block-start: 0;
    padding-block-end: 1px;
    padding-inline-start: 3px;
    padding-inline-end: 3px;
    margin-block-start: 0;
    margin-block-end: -1px;
    margin-inline-start: -3px;
    margin-inline-end: -3px;
    background-color: var(--search-mark-bg);
    transition: background-color 300ms linear;
    cursor: pointer;
}

mark.fade-out {
    background-color: rgba(0,0,0,0) !important;
    cursor: auto;
}

.searchbar-outer {
    margin-inline-start: auto;
    margin-inline-end: auto;
    max-width: var(--content-max-width);
}

#mdbook-searchbar-outer.searching #mdbook-searchbar {
    padding-right: 30px;
}
#mdbook-searchbar-outer .spinner-wrapper {
    display: none;
}
#mdbook-searchbar-outer.searching .spinner-wrapper {
    display: block;
}

.search-wrapper {
    position: relative;
}

.spinner-wrapper {
    --spinner-margin: 2px;
    position: absolute;
    margin-block-start: calc(var(--searchbar-margin-block-start) + var(--spinner-margin));
    right: var(--spinner-margin);
    top: 0;
    bottom: var(--spinner-margin);
    padding: 6px;
    background-color: var(--bg);
}

#fa-spin {
    animation: rotating 2s linear infinite;
    display: inline-block;
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#mdbook-searchbar {
    width: 100%;
    margin-block-start: var(--searchbar-margin-block-start);
    margin-block-end: 0;
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding: 10px 16px;
    transition: box-shadow 300ms ease-in-out;
    border: 1px solid var(--searchbar-border-color);
    border-radius: 3px;
    background-color: var(--searchbar-bg);
    color: var(--searchbar-fg);
}


#mdbook-searchbar:focus,
#mdbook-searchbar.active {
    box-shadow: 0 0 3px var(--searchbar-shadow-color);
}

.hubblo #mdbook-searchbar:focus,
.hubblo #mdbook-searchbar.active {
    outline: var(--focus);
}

.searchresults-header {
    font-weight: bold;
    font-size: 1em;
    padding-block-start: 18px;
    padding-block-end: 0;
    padding-inline-start: 5px;
    padding-inline-end: 0;
    color: var(--searchresults-header-fg);
}

.searchresults-outer {
    margin-inline-start: auto;
    margin-inline-end: auto;
    max-width: var(--content-max-width);
    border-block-end: 1px dashed var(--searchresults-border-color);
}

ul#mdbook-searchresults {
    list-style: none;
    padding-inline-start: 20px;
}
ul#mdbook-searchresults li {
    margin: 10px 0px;
    padding: 2px;
    border-radius: 2px;
}
ul#mdbook-searchresults li.focus {
    background-color: var(--searchresults-li-bg);
}
ul#mdbook-searchresults span.teaser {
    display: block;
    clear: both;
    margin-block-start: 5px;
    margin-block-end: 0;
    margin-inline-start: 20px;
    margin-inline-end: 0;
    font-size: 0.8em;
}
ul#mdbook-searchresults span.teaser em {
    font-weight: bold;
    font-style: normal;
}
.hubblo ul#mdbook-searchresults span.teaser em {
    font-weight: normal;
    font-style: normal;
    background-color: var(--search-highlight);
}

/* Sidebar */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    font-size: 0.875em;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-fg);
}

.sidebar-iframe-inner {
    --padding: 10px;

    background-color: var(--sidebar-bg);
    padding: var(--padding);
    margin: 0;
    font-size: 1.4rem;
    color: var(--sidebar-fg);
    min-height: calc(100vh - var(--padding) * 2);
}
.sidebar-iframe-outer {
    border: none;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
[dir=rtl] .sidebar { left: unset; right: 0; }
.sidebar-resizing {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html:not(.sidebar-resizing) .sidebar {
    transition: transform 0.3s; /* Animation: slide away */
}
.sidebar code {
    line-height: 2em;
}
.sidebar-logo-container{
    box-sizing: border-box;
    height: var(--header-height);
    border-block-end: var(--border);
    padding: 10px 10px;
    overflow: hidden;
}
.sidebar-logo{
    height: 100%;
}
.sidebar .sidebar-scrollbox {
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px;
}
.sidebar .sidebar-scrollbox .chapter:first-child,
.sidebar .sidebar-scrollbox .chapter:first-child > .part-title {
    margin-top: 0;
}
.sidebar .sidebar-scrollbox .chapter:first-child > .part-title ~ .part-title{
    margin-top: 1rem;
}

.sidebar .sidebar-scrollbox {
    top: var(--header-height);
}
.sidebar .sidebar-resize-handle {
    position: absolute;
    cursor: col-resize;
    width: 0;
    right: calc(var(--sidebar-resize-indicator-width) * -1);
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.sidebar-resize-handle .sidebar-resize-indicator {
    width: 100%;
    height: 16px;
    color: var(--icons);
    margin-inline-start: var(--sidebar-resize-indicator-space);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.sidebar-resize-handle .sidebar-resize-indicator::before {
    content: "";
    width: 2px;
    height: 12px;
    border-left: dotted 2px currentColor;
}
.sidebar-resize-handle .sidebar-resize-indicator::after {
    content: "";
    width: 2px;
    height: 16px;
    border-left: dotted 2px currentColor;
}

[dir=rtl] .sidebar .sidebar-resize-handle {
    left: calc(var(--sidebar-resize-indicator-width) * -1);
    right: unset;
}
.js .sidebar .sidebar-resize-handle {
    cursor: col-resize;
    width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
    padding-inline: 0;
}
.hubblo .sidebar {
    z-index: 100;
}
.js.hubblo .sidebar .sidebar-resize-handle{
    --sidebar-resize-handle-padding: 0.2rem;
    --sidebar-resize-handle-width: calc(0.5rem + var(--sidebar-resize-handle-padding));

    box-sizing: border-box;
    padding-left: var(--sidebar-resize-handle-padding);
    width: var(--sidebar-resize-handle-width);
    transform: translateX(var(--sidebar-resize-handle-width));
    z-index: 100;
}

html:not(.js) .sidebar-resize-handle {
    display: none;
}

/* sidebar-hidden */
#mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
}
[dir=rtl] #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
}
.sidebar::-webkit-scrollbar {
    background: var(--sidebar-bg);
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
}

/* sidebar-visible */
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
}
[dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
}

@media only screen and (min-width: 620px) {
    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
        transform: none;
        margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
    }
    [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
        transform: none;
    }
}

.chapter {
    list-style: none outside none;
    padding-inline-start: 0;
    line-height: 2.2em;
}

.chapter li {
    color: var(--sidebar-non-existant);
}

/* This is a span wrapping the chapter link and the fold chevron. */
.chapter-link-wrapper {
    /* Used to position the chevron to the right, allowing the text to wrap before it. */
    display: flex;
}

.chapter li a {
    /* Remove underlines. */
    text-decoration: none;
    color: var(--sidebar-fg);
}

.chapter li a:hover,
.hubblo .chapter > .chapter-item >.chapter-link-wrapper a:hover{
    color: var(--sidebar-active);
}

.chapter li a.active {
    color: var(--sidebar-active);
}

/* This is the toggle chevron. */
.chapter-fold-toggle {
    cursor: pointer;
    /* Positions the chevron to the side. */
    margin-inline-start: auto;
    padding: 0 10px;
    user-select: none;
    opacity: 0.68;
}

.chapter-fold-toggle div {
    transition: transform 0.5s;
    font-size: 0; /* hide the ❱ text character */
    display: flex;
    align-items: center;
    transform-origin: center;
}

.hubblo .chapter-fold-toggle div {
    transition: none;
    /*un peu bricoler. Même dimmetnion que le svg*/
    width: 20px;
    height: 20px;
}
.hubblo .chapter-fold-toggle div::after{
    content: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg>');
    filter: var(--copy-button-filter);
    display: block;
    /*un peu bricoler. Même dimmetnion que le svg*/
    width: 20px; 
    height: 20px;
}
.hubblo .chapter-fold-toggle:hover div::after{
    filter: var(--copy-button-filter-hover);
}

/* collapse the section */
.chapter li:not(.expanded) > ol {
    display: none;
}

.chapter li.chapter-item {
    line-height: 1.5em;
    margin-block-start: 0.6em;
}

/* When expanded, rotate the chevron to point down. */
.chapter li.expanded > span > .chapter-fold-toggle div {
    transform: rotate(90deg);
}

.chapter a.current-header {
    color: var(--sidebar-active);
}

.on-this-page {
    margin-left: 22px;
    border-inline-start: 4px solid var(--sidebar-header-border-color);
    padding-left: 8px;
}
.hubblo .on-this-page {
    margin-left: 22px;
    margin-top: var(--toc-space);
    border-inline-start: none;
    padding-left: 0px;
}

.on-this-page > ol {
    padding-left: 0;
}

/* Horizontal line in chapter list. */
.spacer {
    width: 100%;
    height: 3px;
    margin: 5px 0px;
}
.chapter .spacer {
    background-color: var(--sidebar-spacer);
}

/* On touch devices, add more vertical spacing to make it easier to tap links. */
@media (-moz-touch-enabled: 1), (pointer: coarse) {
    .chapter li a { padding: 5px 0; }
    .spacer { margin: 10px 0; }
}

.section {
    list-style: none outside none;
    padding-inline-start: 20px;
    line-height: 1.9em;
}
.hubblo .section {
    line-height: 1.5em;
}
/* .hubblo .section li:not(:last-child) > *{
    margin-bottom: var(--toc-space);
} */
.chapter-link-wrapper{
    margin-bottom: var(--toc-space);
}
/* Theme Menu Popup */

.theme-popup {
    position: absolute;
    left: 10px;
    top: var(--menu-bar-height);
    z-index: 1000;
    border-radius: 4px;
    font-size: 0.7em;
    color: var(--fg);
    background: var(--theme-popup-bg);
    border: 1px solid var(--theme-popup-border);
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    /* Don't let the children's background extend past the rounded corners. */
    overflow: hidden;
}
.hubblo .theme-popup {
    top: auto; 
    left: auto;
    margin-top: calc(var(--icon-menu-bar-height) + 5px) ;
    margin-left: 0.6rem;
}
.hubblo .theme-popup{
    border-radius: var(--rounded-md);
    padding: var(--space-4)var(--focus-offset)
}
[dir=rtl] .theme-popup { left: unset;  right: 10px; }
.theme-popup .default {
    color: var(--icons);
}
.theme-popup .theme {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 2px 20px;
    line-height: 25px;
    white-space: nowrap;
    text-align: start;
    cursor: pointer;
    color: inherit;
    background: inherit;
    font-size: inherit;
}
.theme-popup .theme:hover {
    background-color: var(--theme-hover);
}

.hubblo .theme-popup .theme{
    padding: var(--space-4) var(--space-16);
}

.theme-selected::before {
    display: inline-block;
    content: "✓";
    margin-inline-start: -14px;
    width: 14px;
}

/* The container for the help popup that covers the whole window. */
#mdbook-help-container {
    /* Position and size for the whole window. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* This uses flex layout (which is set in book.js), and centers the popup
       in the window.*/
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* Dim out the book while the popup is visible. */
    background: var(--overlay-bg);
}

/* The popup help box. */
#mdbook-help-popup {
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    min-width: 300px;
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg);
    color: var(--fg);
    border-width: 1px;
    border-color: var(--theme-popup-border);
    border-style: solid;
    border-radius: 8px;
    padding: 10px;
}

.mdbook-help-title {
    text-align: center;
    /* mdbook's margin for h2 is way too large. */
    margin: 10px;
}

.hubblo #mdbook-menu-bar #external-link-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .75em 1em .8em;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--rounded-xl);
  background-color: var(--background,var(--sidebar-active));
  color: var(--color,var(--color-white));
  transition: background var(--timing)var(--easing),color var(--timing)var(--easing);
  user-select: none;
  font-size: var(--text-sm);
  line-height: 0.8em;
}

#external-link-btn:hover{
    --background: color-mix(in srgb, var(--color-primary-100) 80%, black);
}