/**
 * Typography
 */

html {
    font-family: "Georgia";
}

/* Book Title */
h1.menu-title {
    font-family: "Open Sans";
}

/**
 * Layout
 */

.side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
}

/**
 * Components
 */

header.codeblock-header {
    font-weight: bold;
    padding: 8px;
    background: var(--table-header-bg);
    margin-top: 32px;
    /* egregious hack to "undo" the top-margin on the following code black */
    margin-bottom: -16px;
}

.photo-credit {
    font-style: italic;
    /* this is probably bad, but there are multiple themes in mdbook and I'm not sure how to concisely support them all */
    opacity: 0.5;
}

.callout {
    padding: 8px 16px 16px 16px;
    margin: 16px 0;
}

.callout h2:first-child,
.callout h3:first-child {
    /* margin-top effectively provided by background-image in :after */
    margin-top: 0;
}

.callout h1:first-child::after,
.callout h2:first-child::after,
.callout h3:first-child::after,
.callout h4:first-child::after,
.callout h5:first-child::after,
.callout h6:first-child::after {
    display: inline-block;
    content: "";
    margin-left: 8px;

    background-position: center bottom -5px;
    background-repeat: no-repeat;
    background-size: 40px;
    width: 40px;
    height: 40px;
}

.rust-callout {
    /* using transparency for background to get something that looks decent across themes */
    background-color: #FF333355;
}

.rust-callout h1:first-child::after,
.rust-callout h2:first-child::after,
.rust-callout h3:first-child::after,
.rust-callout h4:first-child::after,
.rust-callout h5:first-child::after,
.rust-callout h6:first-child::after {
    background-image: url("../../images/ui/ferris.svg");
}