/* Local fonts */

:root {
    --md-text-font: "SourceSans3";
    --md-code-font: "FiraCode";
}

@font-face {
    font-family: 'SourceSans3';
    font-style: normal;
    font-weight: 300;
    src: local(''),
        url('fonts/SourceSans3-Light.ttf')
}

@font-face {
    font-family: 'SourceSans3';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('fonts/SourceSans3-Regular.ttf')
}

@font-face {
    font-family: 'SourceSans3';
    font-style: italic;
    font-weight: 400;
    src: local(''),
        url('fonts/SourceSans3-Italic.ttf')
}


@font-face {
    font-family: 'SourceSans3';
    font-style: normal;
    font-weight: 700;
    src: local(''),
        url('fonts/SourceSans3-Bold.ttf')
}


@font-face {
    font-family: 'FiraCode';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('fonts/FiraCode-Regular.ttf')
}


/* Grid cards */

.md-typeset .grid {
    grid-gap: 0.4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin: 1em 0;
}

.md-typeset .grid.cards>ol,
.md-typeset .grid.cards>ul {
    display: contents;
}

.md-typeset ol:not([hidden]),
.md-typeset ul:not([hidden]) {
    display: flow-root;
}

[dir=ltr] .md-typeset ol,
[dir=ltr] .md-typeset ul {
    margin-left: 0.625em;
}

.md-typeset .grid>*,
.md-typeset .grid>.admonition,
.md-typeset .grid>.highlight>*,
.md-typeset .grid>.highlighttable,
.md-typeset .grid>.md-typeset details,
.md-typeset .grid>details,
.md-typeset .grid>pre {
    margin-bottom: 0;
    margin-top: 0;
}

.md-typeset .grid.cards>ol>li,
.md-typeset .grid.cards>ul>li,
.md-typeset .grid>.card {
    border: 0.05rem solid var(--md-default-fg-color--lightest);
    border-radius: 0.1rem;
    display: block;
    margin: 0;
    padding: 0.8rem;
    transition: border .25s, box-shadow .25s;
}

.md-typeset .grid.cards>ol>li:focus-within,
.md-typeset .grid.cards>ol>li:hover,
.md-typeset .grid.cards>ul>li:focus-within,
.md-typeset .grid.cards>ul>li:hover,
.md-typeset .grid>.card:focus-within,
.md-typeset .grid>.card:hover {
    border-color: #0000;
    box-shadow: var(--md-shadow-z2);
}

.md-typeset .grid.cards>ol>li>:first-child,
.md-typeset .grid.cards>ul>li>:first-child,
.md-typeset .grid>.card>:first-child {
    margin-top: 0;
}

.md-typeset .grid.cards>ol>li>hr,
.md-typeset .grid.cards>ul>li>hr,
.md-typeset .grid>.card>hr {
    margin-bottom: 1em;
    margin-top: 1em;
}