/* -------------------------------------------------------
Variable font.
Usage:

  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }
*/
@font-face {
    font-family: "Inter var";
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: "Regular";
    src: url("/fonts/InterVariable.woff2?v=26a312df") format("woff2");
}

@font-face {
    font-family: "Inter var";
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance: "Italic";
    src: url("/fonts/InterVariable-Italic.woff2?v=26a312df") format("woff2");
}

@font-face {
    font-family: "Figtree";
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: "Regular";
    src: url("/fonts/FigtreeVariable.woff2?v=26a312df") format("woff2");
}

@font-face {
    font-family: "Figtree";
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance: "Italic";
    src: url("/fonts/FigtreeVariable-Italic.woff2?v=26a312df") format("woff2");
}

@font-face {
    font-family: "Fira Code var";
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: "Regular";
    src: url("/fonts/FiraCode-VF.woff2?v=26a312df") format("woff2");
}

body {
    font-family: "Inter var", sans-serif !important;
    font-weight: 400;
    font-feature-settings: "ss01" !important;
}

/* use 650 rather than 700 for bold text because it looks more elegant */
strong,
th {
    font-weight: 650;
}

h1.menu-title {
    letter-spacing: -0.025em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 325;
    font-feature-settings: "ss01", "ss03";
    letter-spacing: -0.01em;
}

.logo {
    font-family: "Inter var", sans-serif !important;
}

div.floatright,
figure.floatright {
    height: auto;
    float: right;
    position: relative;
    z-index: 100;
    margin-left: 1em;
}

div.floatright {
    width: 60%;
}

pre.mermaid {
    letter-spacing: 0;
}

figure.floatright {
    max-width: 45%;
}

figure.floatright img {
    width: 100%;
}

@media (max-width: 684px) {
    figure.floatright {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
        float: none;
        margin-left: 0;
    }

    figure.floatright img {
        width: 100%;
    }
}

figure.floatleft {
    max-width: 45%;
    height: auto;
    float: left;
    position: relative;
    z-index: 100;
}

.footnotes {
    clear: both;
}