/**
 * Styles for ReMarkdown demo pages
 * Depends on default remarkdown.css
 */

:root {
    --wght: 400;
    --wdth: 60;
}

@font-face {
    font-family: monoto;
    src: url('monoto.woff2') format('woff2-variations');
    font-style: normal;
}

@media (min-width: 900px) {
    html {
        background-color: #eee;
    }
}

html {
    margin: 0;
    padding: 0;
    font-size: calc(0.5vw + 10px);
}

figure {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.8rem;
    font-variation-settings: 'wdth': 57 !important;
    line-height: 1em;
    letter-spacing: -0.2em;
    white-space: pre;
    margin: 2em 0 0 0;
}

body {
    margin: 0;
    padding: 0;
    max-width: 960px;
    margin: 0 auto;
}

article {
    padding: 30px;
    color: #202020;
    background-color: white;
}

body,
.remarkdown {
    font-family: monoto, "foundation-icons", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-variation-settings: 'wght' var(--wght), 'wdth' var(--wdth);
}

#container {
    height: 100%;
    margin: 0px;
    display: flex;
}

@media (min-width: 960px) {
    #container {
        margin: 30px auto;
        padding: 40px 80px;
        border: 1px solid #DDD;
        background-color: white;
        box-shadow: 3px 3px 3px -2px #DDD;
    }
}

a {
    color: #F02050;
    text-decoration: none;
}

a:hover {
    border-bottom: 1px solid;
}

a:focus,
a:active {
    color: white;
    background-color: #F02050;
}

nav {
    margin: 0 0 4em;
    text-align: right;
}

nav>br {
    display: none;
}

nav>span {
    float: left;
}

@media (max-width: 960px) {
    nav>* {
        display: block;
        padding-bottom: .4em;
    }
}

.example {
    margin: 1.5em -30px;
    padding: .5em 30px;
    background: #EEF;
}


/* Make the Markdown-like markers look cool */

.remarkdown ::before,
.remarkdown ::after {
    opacity: .6;
    color: #205080;
}

.remarkdown pre {
    white-space: pre-wrap;
    color: #802020;
}

.remarkdown code {
    color: #802020;
}

@media (max-width: 700px) {
    .remarkdown pre {
        margin-left: 0 !important;
    }
    #container {
        display: block;
    }
    article {
        padding: 2rem;
    }
    aside {
        display: inline;
        float: right;
        padding: 0 2rem 0 1rem;
        margin: 0;
    }
    aside p {
        display: none;
    }
}

.remarkdown table {
    margin: 2.5em 0;
    font-size: 95%;
}


/* Styles page */

#style-list tr>* {
    white-space: nowrap;
}

.remarkdown h1:first-child {
    margin-top: 0em;
}

aside {
    font-size: 0.6em;
    text-transform: uppercase;
    text-align: right;
}

.remarkdown a::before,
.remarkdown a::after {
    content: none;
}

.ic-web:before {
    content: "\f212\0020" !important;
}

.ic-video:before {
    content: "\f197\0020" !important;
}

.ic-slides:before {
    content: "\f179\0020" !important;
}

.ic-pdf:before {
    content: "\f18b\0020" !important;
}

.ic-view:before {
    content: "\f147\0020" !important;
}

.ic-book:before {
    content: "\f11e\0020" !important;
}

.ic-link:before {
    content: "\f165\0020" !important;
}

.ic-photo:before {
    content: "\f195\0020" !important;
}

.ic-music:before {
    content: "\f17b\0020" !important;
}

.ic-email:before {
    content: "\f16d\0020" !important;
}

.ix:before {
    font-family: monoto, "Font Awesome 5 Brands", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-variation-settings: 'wght' var(--wght), 'wdth' var(--wdth);
}

a.ix-github:before {
    content: "\f09b\0020" !important;
}

a.ix-linkedin:before {
    content: "\f08c\0020" !important;
}

a.ix-twitter:before {
    content: "\f099\0020" !important;
}

a.ix-facebook:before {
    content: "\f082\0020" !important;
}

.ix-email:before {
    content: "\f1fa\0020" !important;
}