/* cyrillic */
@font-face {
  font-family: 'Ledger';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Ledger/Ledger_cyrillic.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Ledger';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Ledger/Ledger_latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ledger';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Ledger/Ledger_latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    /*Cozy Green*/ /*background: #2b542c; color: #999977;*/
    /*Cold Deep Aqua*/ /*background: #003229; color: #E0F2F1;*/
    /*Gold Black*/ background-color: black; color: white;

    font-family: 'Ledger', serif; font-size: 1rem;}
body {max-width: 800px; /*overflow: hidden;*/ margin: 0 auto;padding: 0; scroll-behavior: smooth;}
*, :after, :before {box-sizing: border-box;}
h1, h2, h3, h4, h5, h6 {margin: 1.2rem 0;padding: 0;}
p {margin: 0.3rem 0; padding: 0 0.4rem; max-width: 65ch;}
ol, ul {max-width: 65ch; padding-right: 0.4rem;}
li {padding-bottom: 0.2rem}
img {display: block; width: 100%;}
div {display: block;}
a[href] {color: white}
li>a {display: block;}

/* Background - Start */

/*
p {background-color: rgba(255, 0, 255, 0.3) !important;}
div {background-color: rgba(0, 255, 255, 0.15) !important;}
img {background-color: rgba(0, 255, 0, 0.15) !important;}
a {background-color: rgba(255, 255, 0, 0.15) !important;}
span {background-color: rgba(255, 0, 0, 0.15) !important;}
h1, h2, h3, h4, h5, h6 {background-color: rgba(255, 255, 255, 0.15) !important;}
ol, ul {background-color: rgba(255, 119, 0, 0.3) !important;}
li {background-color: rgba(76, 255, 0, 0.3) !important;}
*/
/* End */

/* Centering */

div.centering {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*height: 100vh;*/
    width: 100%;
}
div.centering .text-center {
    text-align: center;
}
/* End */

div.indent {
    margin: 0.3rem 0; padding: 0;
}

a.external:after {
    background: /*transparent*/#FFD700 url(/assets/icons/external.svg) 0 0 no-repeat;
    border-radius: 3px;
    background-size: 16px;
    content: "";
    display: inline-block;
    height: 16px;
    margin-left: 3px;
    width: 16px;
}

h1 {
    /*border-bottom: #FFEB3B 2px solid;*/
    background:linear-gradient(#FFD700,#FFD700) left bottom no-repeat;
    background-size:80% 2px;
    padding-bottom: 0.25rem;
}

span.title {
    font-size: 1.7rem;
    font-weight: bold;
    margin: .5rem .3rem;
}

strong.highlight {
    color: #FFD700;
    font-size: large;
}

.button {
    display: inline-block;
    max-width: 218px;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    border: 0;
    /*border: #FFD700 solid 4px;*/
    border-radius: 10px;
    background: #FFD700 !important;
    color: #000 !important;
    transition: all 300ms;
}

.button:hover {
    background: #c9af26 !important;
    /*border: #c9af26 solid 4px;*/
    transition: all 300ms;
}

.navButtons {
    /*margin: 0.3rem 0;*/
    position: -webkit-sticky;
    position: sticky;
    /*bottom: 0.3rem;*/
    /* Градиент */
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 100), rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 100), rgba(255, 255, 255, 0));
    background: linear-gradient(0deg, rgba(0, 0, 0, 100), rgba(255, 255, 255, 0));
    width: 100%;
    text-align: center;
    bottom: 0;
    margin: 0;
    padding: 0.3rem 0;
}

.code-example {
    position: relative;
    max-width: 65ch;
    width: 100%;
    padding: 0 .8rem;
}

pre.code {
    color: #fff;
    background-color: #2f2f2f;
    border-left: 6px solid #FFD700;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 1.5rem;
    overflow: auto;
    padding: 1.5rem;
    white-space: pre;

}

/* Media */

@media screen and (max-width: 520px) {
    h1 {
        font-size: 1.6rem;
    }
}
@media screen and (max-width: 420px) {
    html {
        font-size: .9rem
    }
    h1 {
        font-size: 1.3rem;
    }
}
@media screen and (max-width: 335px) {
    html {
        font-size: .8rem
    }
    h1 {
        font-size: 1.05rem;
    }
}
/* Media - End */