html {
    font-size: var(--font-size);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior:smooth
}

body {
    background: var(--page-bg);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";   
    font-variation-settings: "wght" var(--font-weight-normal);
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    -ms-scroll-chaining: none;
    overscroll-behavior:none
}

a {
    text-decoration:none
    color: #FE4C15;
    text-color: #17181E;
    --headings-color: #17181E;
    link-color: #17181E;
    link-color-hover: #FE4C15;
    -webkit-transition: all .24s ease-out;
    transition:all .24s ease-out
}


a:hover {
    color:var(--link-color-hover)
}

a:active {
    color:var(--link-color-hover)
}

a:focus {
    outline:0
}

.forjanet {
    font-size: x-small;
}

.invert {
    color: var(--link-color-hover);
    -webkit-transition: all .24s ease-out;
    transition:all .24s ease-out
}

.invert:hover {
    color:var(--link-color)
}

.invert:active {
    color:var(--link-color)
}

.invert:focus {
    outline:0
}

dl, ol, p, ul {
    margin-top:calc(var(--baseline) * 4 + .25vw)
}

blockquote, figure, hr, pre, table {
    margin-top: calc(var(--baseline) * 6 + .5vw);
    margin-bottom:calc(var(--baseline) * 6 + .5vw)
}

h1, h2, h3, h4, h5, h6 {
    color: var(--headings-color);
    font-family: var(--heading-font);
    font-variation-settings: "wght" var(--headings-weight);
    font-style: var(--headings-style);
    -ms-hyphens: manual;
    hyphens: manual;
    letter-spacing: var(--headings-letter-spacing);
    line-height: var(--headings-line-height);
    margin-top: calc(var(--baseline) * 6 + 1vw);
    text-transform:var(--headings-transform)
}

.h1, h1 {
    font-size: clamp(1.5710900065rem, 1.5710900065rem + 1.424540906 *(100vw - 20rem) / 70, 2.9956309125rem);
    font-family:var(--heading-font)
}

.h2, h2 {
    font-size:clamp(1.3808408252rem, 1.3808408252rem + .9332127447 *(100vw - 20rem) / 70, 2.3140535699rem)
}

.h3, h3 {
    font-size:clamp(1.2136296308rem, 1.2136296308rem + .4621997101 *(100vw - 20rem) / 70, 1.6758293408rem)
}

.h4, h4 {
    font-size:clamp(1.1377777785rem, 1.1377777785rem + .1567604947 *(100vw - 20rem) / 70, 1.2945382732rem)
}

.h5, h5 {
    font-size:clamp(1.066666667rem, 1.066666667rem + .0711111115 *(100vw - 20rem) / 70, 1.1377777785rem)
}

.h6, h6 {
    font-size:clamp(1rem, 1rem + 0 *(100vw - 20rem) / 70, 1rem)
}

h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
    margin-top:calc(var(--baseline) * 2 + .25vw)
}

b, strong {
    font-variation-settings: "wght" var(--font-weight-bold)
}

blockquote {
    border-top: 2px solid var(--dark);
    border-bottom: 2px solid var(--dark);
    color: var(--headings-color);
    font-family: var(--heading-font);
    font-style: italic;
    font-variation-settings: "wght" var(--font-weight-bold);
    padding: calc(var(--baseline) * 6 + 1vw) 2rem;
    font-size:clamp(1.1377777785rem, 1.1377777785rem + .1567604947 *(100vw - 20rem) / 70, 1.2945382732rem)
}

blockquote > :first-child {
    margin-top:0
}

ol, ul {
    margin-left:3ch
}

ol > li, ul > li {
    list-style: inherit;
    padding:0 0 var(--baseline) 1ch
}

dl dt {
    font-variation-settings: "wght" var(--font-weight-bold)
}

pre {
    background-color: var(--lighter);
    font-size: .8239746086rem;
    padding: calc(var(--baseline) * 6);
    white-space: pre-wrap;
    word-wrap:break-word
}

pre > code {
    color: var(--text-color);
    display: inline-block;
    font-size: inherit;
    padding:0
}

code {
    background-color: var(--lighter);
    color: var(--color);
    font-size: .8239746086rem;
    font-family:Menlo, Monaco, Consolas, Courier New, monospace
}

table {
    # border: 1px solid var(--light);
    border-collapse: collapse;
    border-spacing: 0;
    vertical-align: top;
    text-align: left;
}


table th {
#    font-variation-settings: "wght" var(--font-weight-bold);
#    padding:calc(var(--baseline) * 2.5) calc(var(--baseline) * 4)
}

table td {
#    border-top: 1px solid var(--light);
#    padding:calc(var(--baseline) * 2.5) calc(var(--baseline) * 4)
}


img[loading] {
    opacity:0
}

img.is-loaded {
    opacity: 1;
    transition: opacity 1s cubic-bezier(.215, .61, .355, 1)
}
