@import url(/style/style.css);
@import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bai+Jamjuree&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

*,
html {
    scrollbar-color: var(--main-color) var(--bg-color);
}

/* ตั้งค่าดีฟอลต์ด้วย CSS Variables */
body {
    min-height: 100vh;
    font-family: "Bai Jamjuree", sans-serif;
    background-color: var(--bg-color) !important;
    background-repeat: no-repeat;
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
    overflow: hidden scroll;
    user-select: none;
}

body::after {
    content: "";
    background-image: url("/images/icon.svg");
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: .05
}

:root {
    --main-color: #409EFE;
}

.border-b,
.border-t,
.border-r,
.border-l,
.border-y,
.border-x,
.border {
    border-color: var(--border) !important;
}

/* โหมด System (media query) */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light):not(.theme-dark) {
        --bg-color: #121212;
        --white-smoker: #222222;
        --border: #414143;
        --text-color: #DCDCDC;
        --sky-glow: #1B2830;
    }
}

@media (prefers-color-scheme: light) {
    :root:not(.theme-light):not(.theme-dark) {
        --bg-color: #FFF;
        --border: #E5E7EB;
        --white-smoker: #F5F5F5;
        --text-color: #0D0D0D;
        --sky-glow: #E3F2FD;
    }
}

.color-preview {
    display: inline-block;
    background-color: var(--color);
    color: #fff;
    border-width: 1px;
    border-radius: 4px;
    padding-inline: 2px;
    font-family: monospace;
}

.color-preview.light-color {
    color: #0D0D0D;
}

.hashtag-mention.mention,
.hashtag-mention {
    color: var(--main-color);
    transition: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* ease-in-out */
    transition-duration: 300ms
}

.hashtag-mention.mention:hover,
.hashtag-mention:hover {
    color: #2d7dd6;
    cursor: pointer;
}


ul#files span,
ul#files,
ul#files li a {
    overflow: hidden
}

body::after,
ul#files {
    height: 100%;
    width: 100%;
}

input#search,
body {
    -webkit-font-smoothing: antialiased;
}

body.directory {
    padding: 6rem 7rem;
    /* 96px 112px */
    user-select: none;
}

input#search {
    display: block;
    width: 14rem;
    /* 224px */
    position: absolute;
    top: 2rem;
    /* 32px */
    right: 2rem;
    /* 32px */
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--main-color);
    border-radius: 0.75rem;
    /* 12px */
    padding: 0.5em 1em;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* ease-in-out */
    transition-duration: 700ms
}

body.directory div#wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px */
}

body.directory div#wrapper h1 a#url {
    color: var(--main-color);
    font-size: 1.25rem;
    /* 20px */
    line-height: 1.75rem;
    /* 28px */
    text-wrap: nowrap;
    /* overflow: auto; */
}

ul#files li {
    float: left;
    width: 30%;
    line-height: 3.5rem;
    /* 56px */
}

ul#files li a {
    display: block;
    height: 3.5rem;
    /* 56px */
    border: 1px solid transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    white-space: nowrap;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* ease-in-out */
    transition-duration: 300ms
}

ul#files li a.highlight {
    color: #FFF;
    background: var(--main-color);
    border-color: var(--main-color);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* ease-in-out */
    transition-duration: 300ms
}

ul#files span {
    display: inline-block;
    text-overflow: ellipsis;
    text-indent: 10px;
}

ul#files .name {
    background-repeat: no-repeat;
}

ul#files [class^="icon-"] .name {
    text-indent: 2.25rem;
    /* 40px */
}

ul.view-tiles .name {
    width: 100%;
    background-position: 0.5rem 50%;
    /* 8px */
}

ul.view-tiles .date,
ul.view-tiles .size {
    display: none
}

@media (min-width:768px) {

    ul#files li a:hover,
    ul#files li a:focus {
        background: var(--sky-glow) !important;
        border: 1px solid var(--main-color);
    }

    input#search:hover,
    input#search:focus {
        width: 20rem;
        /* 320px */
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        /* ease-in-out */
        transition-duration: 700ms
    }
}

@media (max-width:768px) {

    body {
        font-size: 0.75rem;
        /* 12px */
        line-height: 1rem;
        /* 16px */
        padding: 0 !important;
    }

    input#search,
    body.directory h1 a {
        font-size: 1.25rem;
        /* 20px */
        line-height: 1.75rem;
        /* 28px */
    }

    input#search {
        position: static;
        width: 100% !important;
        line-height: 1rem;
        padding: 1rem 0.75rem;
        /* 16px 12px */
        box-shadow: none;
    }

    body.directory div#wrapper {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    body.directory h1 a#url {
        display: block;
        /* line-height: 1rem; */
        color: #FFF !important;
        background: var(--main-color);
        padding: 0.75rem;
        /* 12px */
        overflow-x: auto
    }

    ul#files {
        font-size: 1rem;
        /* 16px */
        line-height: 1.5rem;
        /* 24px */
    }

    ul#files .name,
    ul#files li {
        float: none;
        text-indent: 0
    }

    ul#files li {
        width: auto !important;
        display: block;
        line-height: 1.2em;
        margin: 0
    }

    ul#files li:nth-child(odd) {
        background: var(--white-smoker)
    }

    ul#files li a {
        height: auto;
        border: 0;
        border-radius: 0;
        padding: 1rem 0.75rem;
        /* 16px 12px */
    }

    ul#files li a:active {
        background: var(--sky-glow) !important;
        color: var(--main-color);
        border: 0;
    }

    ul#files li a span {
        vertical-align: middle;
    }

    ul#files .date,
    ul#files .header,
    ul#files .size {
        display: none !important
    }

    ul#files .name {
        display: inline-block;
        width: 100%;
        background-position: 0 50%
    }

    ul#files [class^="icon-"] .name {
        text-indent: 32px;
    }
}

ul#files .icon-default .name {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAC4SURBVCjPdZFbDsIgEEWnrsMm7oGGfZrohxvU+Iq1TyjU60Bf1pac4Yc5YS4ZAtGWBMk/drQBOVwJlZrWYkLhsB8UV9K0BUrPGy9cWbng2CtEEUmLGppPjRwpbixUKHBiZRS0p+ZGhvs4irNEvWD8heHpbsyDXznPhYFOyTjJc13olIqzZCHBouE0FRMUjA+s1gTjaRgVFpqRwC8mfoXPPEVPS7LbRaJL2y7bOifRCTEli3U7BMWgLzKlW/CuebZPAAAAAElFTkSuQmCC)
}

ul#files .icon-directory .name {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAWtQTFRFAAAA/PPQ9Nhc2q402qQ12qs2/PTX2pg12p81+/LM89NE9dto2q82+/fp2rM22qY39d6U+/bo2qo2/frx/vz32q812qs12qE279SU8c4w9NZP+/LK//367s9y7s925cp0/vzw9t92//342po2/vz25s1579B6+OSO2bQ0/v799NyT8tE79dld8Msm+OrC/vzx79KA2IYs7s6I9d6R4cJe9+OF/PLI/fry79OF/v30//328tWB89RJ8c9p8c0u9eCf//7+9txs6sts5Mdr+++5+u2z/vrv+/fq6cFz8dBs8tA57cpq+OaU9uGs27Y8//799NdX/PbY9uB89unJ//z14sNf+emh+emk+vDc+uys9+OL8dJy89NH+eic8tN5+OaV+OWR9N2n9dtl9t529+KF9+GB9Nue9NdU8tR/9t5y89qW9dpj89iO89eG/vvu2pQ12Y4z/vzy2Ict/vvv48dr/vzz4sNg///+2Igty3PqwQAAAAF0Uk5TAEDm2GYAAACtSURBVBjTY2AgA2iYlJWVhfohBPg0yx38y92dS0pKVOVBAqIi6sb2vsWWpfrFeTI8QAEhYQEta28nCwM1OVleZqCAmKCEkUdwYWmhQnFeOStQgL9cySqkNNDHVJGbiY0FKCCuYuYSGRsV5KgjxcXIARRQNncNj09JTgqw0ZbkZAcK5LuFJaRmZqfHeNnpSucDBQoiEtOycnIz4qI9bfUKQA6pKKqAgqIKQyK8BgAZ5yfODmnHrQAAAABJRU5ErkJggg==)
}

ul#files .icon-image .name {
    background-image: url(data:image/png3333235;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGWSURBVBgZpcE/a1NhGMbh3/OeN56cKq2Dp6AoCOKmk4uCn8DNycEOIojilr2TaBfRzVnESQR3Bz+FFDoWA2IjtkRqmpyc97k9qYl/IQV7XSaJw4g0VlZfP0m13dwepPbuiH85fyhyWCx4/ubxjU6kkdxWHt69VC6XpZlFBAhwJgwJJHAmRKorbj94ewvoRBrbuykvT5R2/+lLTp05Tp45STmEJYJBMAjByILxYeM9jzr3GCczGpHGYAQhRM6fO8uFy1fJQoaUwCKYEcwwC4QQaGUBd36KTDmQ523axTGQmEcIEBORKQfG1ZDxcA/MkBxXwj1ggCQyS9TVAMmZiUxJ8Ln/kS+9PmOvcSW+jrao0mmMH5bzHfa+9UGBmciUBJ+2Fmh1h+yTQCXSkJkdCrpd8btIwwEJQnaEkOXMk7XaiF8CUxL/JdKQOwb0Ntc5SG9zHXQNd/ZFGsaEeLa2ChjzXQcqZiKNxSL0vR4unVwwMENMCATib0ZdV+QtE41I42geXt1Ze3dlMNZFdw6Ut6CIvKBhkjiM79Pyq1YUmtkKAAAAAElFTkSuQmCC)
}

ul#files .icon-svg .name {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGWSURBVBgZpcE/a1NhGMbh3/OeN56cKq2Dp6AoCOKmk4uCn8DNycEOIojilr2TaBfRzVnESQR3Bz+FFDoWA2IjtkRqmpyc97k9qYl/IQV7XSaJw4g0VlZfP0m13dwepPbuiH85fyhyWCx4/ubxjU6kkdxWHt69VC6XpZlFBAhwJgwJJHAmRKorbj94ewvoRBrbuykvT5R2/+lLTp05Tp45STmEJYJBMAjByILxYeM9jzr3GCczGpHGYAQhRM6fO8uFy1fJQoaUwCKYEcwwC4QQaGUBd36KTDmQ523axTGQmEcIEBORKQfG1ZDxcA/MkBxXwj1ggCQyS9TVAMmZiUxJ8Ln/kS+9PmOvcSW+jrao0mmMH5bzHfa+9UGBmciUBJ+2Fmh1h+yTQCXSkJkdCrpd8btIwwEJQnaEkOXMk7XaiF8CUxL/JdKQOwb0Ntc5SG9zHXQNd/ZFGsaEeLa2ChjzXQcqZiKNxSL0vR4unVwwMENMCATib0ZdV+QtE41I42geXt1Ze3dlMNZFdw6Ut6CIvKBhkjiM79Pyq1YUmtkKAAAAAElFTkSuQmCC)
}

ul#files .icon-video .name {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIfSURBVDjLpZNPaBNBGMXfbrubzBqbg4kL0lJLgiVKE/AP6Kl6UUFQNAeDIAjVS08aELx59GQPAREV/4BeiqcqROpRD4pUNCJSS21OgloISWMEZ/aPb6ARdNeTCz92mO+9N9/w7RphGOJ/nsH+olqtvg+CYJR8q9VquThxuVz+oJTKeZ63Uq/XC38E0Jj3ff8+OVupVGLbolkzQw5HOqAxQU4wXWWnZrykmYD0QsgAOJe9hpEUcPr8i0GaJ8n2vs/sL2h8R66TpVfWTdETHWE6GRGKjGiiKNLii5BSLpN7pBHpgMYhMkm8tPUWz3sL2D1wFaY/jvnWcTTaE5DyjMfTT5J0XIAiTRYn3ASwZ1MKbTmN7z+KaHUOYqmb1fcPiNa4kQBuyvWAHYfcHGzDgYcx9NKrwJYHCAyF21JiPWBnXMAQOea6bmn+4ueYGZi8gtymNVobF7BG5prNpjd+eW6X4BSUD0gOdCpzA8MpA/v2v15kl4+pK0emwHSbjJGBlz+vYM1fQeDrYOBTdzOGvDf6EFNr+LYjHbBgsaCLxr+moNQjU2vYhRXpgIUOmSWWnsJRfjlOZhrexgtYDZ/gWbetNRbNs6QT10GJglNk64HMaGgbAkoMo5fiFNy7CKDQUGqE5r38YktxAfSqW7Zt33l66WtkAkACjuNsaLVaDxlw5HdJ/86aYrG4WCgUZD6fX+jv/U0ymfxoWVZomuZyf+8XqfGP49CCrBUAAAAASUVORK5CYII=)
}

ul#files .icon-json .name,
ul#files .icon-text-css .name,
ul#files .icon-text-html .name {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHtSURBVDjLjZM9T9tQFIYpQ5eOMBKlW6eWIQipa8RfQKQghEAKqZgKFQgmFn5AWyVDCipVQZC2EqBWlEqdO2RCpAssQBRsx1+1ndix8wFvfW6wcUhQsfTI0j33PD7n+N4uAF2E+/S5RFwG/8Njl24/LyCIOI6j1+v1y0ajgU64cSSTybdBSVAwSMmmacKyLB/DMKBpGkRRZBJBEJBKpXyJl/yABLTBtm1Uq1X2JsrlMnRdhyRJTFCpVEAfSafTTUlQoFs1luxBAkoolUqQZbmtJTYTT/AoHInOfpcwtVtkwcSBgrkDGYph+60oisIq4Xm+VfB0+U/P0Lvj3NwPGfHPTcHMvoyFXwpe7UmQtAqTUCU0D1VVbwTPVk5jY19Fe3ZfQny7CE51WJDXqpjeEUHr45ki9rIqa4dmQiJfMLItGEs/FcQ2ucbRmdnSYy5vYWyLx/w3EaMfLmBaDpMQvuDJ65PY8Dpnz3wpYmLtApzcrIAqmfrEgdZH1grY/a36w6Xz0DKD8ES25/niYS6+wWE8mWfByY8cXmYEJFYLkHUHtVqNQcltAvoLD3v7o/FUHsNvzlnwxfsCEukC/ho3yUHaBN5Buo17Ojtyl+DqrnvQgUtfcC0ZcAdkUeA+ye7eMru9AUGIJPe4zh509UP/AAfNypi8oj/mAAAAAElFTkSuQmCC)
}

ul#files .icon-application-javascript .name {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHdSURBVDjLjZNPaxNBGIdrLwURLznWgkcvIrQhRw9FGgy01IY0TVsQ0q6GFkT0kwjJId9AP4AHP4Q9FO2hJ7El2+yf7OzMbja7Sf0578QdNybFLjwszLu/Z2femZkDMEfI54FkRVL4Dw8l8zqXEawMBgM2HA6vR6MRZiHraDabH7KSrKBA4SAIEIahxvd9eJ6HbrerJKZpotVqaUkavkMC+iCKIsRxrN6EEAKMMViWpQT9fh/0k3a7PZZkBUPmqXAKCSjAOYdt21NLUj1JBYW7C6vi6BC8vKWKQXUXQcNA5Nh6KY7jqJl0Op1JwY/Hi7mLp/lT/uoA/OX2WLC3C9FoQBwfILKulIRmQv1wXfevwHmyuMPXS5Fv1MHrFSTmhSomnUvw/Spo3C+vg3/+pJZDPSGRFvilNV+8PUZvoziKvn+d3LZvJ/BelMDevIZXK2EQCiUhtMDM53bY5rOIGXtwjU3EVz/HM5Az8eplqPFKEfzLR91cOg8TPTgr3MudFx+d9owK7KMNVfQOtyQ1OO9qiHsWkiRRUHhKQLuwfH9+1XpfhVVfU0V3//k4zFwdzjIlSA/Sv8jTOZObBL9uugczuNaCP5K8bFBIhduE5bdC3d6MYIkkt7jOKXT1l34DkIu9e0agZjoAAAAASUVORK5CYII=)
}

ul#files .icon-text .name {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADoSURBVBgZBcExblNBGAbA2ceegTRBuIKOgiihSZNTcC5LUHAihNJR0kGKCDcYJY6D3/77MdOinTvzAgCw8ysThIvn/VojIyMjIyPP+bS1sUQIV2s95pBDDvmbP/mdkft83tpYguZq5Jh/OeaYh+yzy8hTHvNlaxNNczm+la9OTlar1UdA/+C2A4trRCnD3jS8BB1obq2Gk6GU6QbQAS4BUaYSQAf4bhhKKTFdAzrAOwAxEUAH+KEM01SY3gM6wBsEAQB0gJ+maZoC3gI6iPYaAIBJsiRmHU0AALOeFC3aK2cWAACUXe7+AwO0lc9eTHYTAAAAAElFTkSuQmCC)
}

ul#files .icon-cpp .name {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAH/SURBVDjLjZPNaxNRFMWrf4cFwV13JVKXLuta61apIChIV0rblUqhjYpRcUaNboxIqxFTQgVti4hQQTe1C7FFSUmnmvmM85XJzCSpx3efzmTSRtqBw7yZ9+5v7rl3bg+AHhK7DjClmAZ20UGm/XFcApAKgsBqNptbrVYL3cT2IQjCnSQkCRig4FqtBs/zYtm2DdM0oaoqh8iyDFEUY0gUvI8AdMD3fYRhyO8k13VhWRY0TeOAer0O+kg2m/0LIcDx9LdDgxff5jJzKjJzCmbe6fi0anEABTiOA13Xd1jiNTlxfT01UVB/CfMG7r/WILxScaOo4FpeBrPEfUdWDMPgmVQqlTbgtCjls4sGjl16PxuRny5oGH3yA7oZoPjR4BDbqeHlksLrUa1W24DJWRU3Wer9Qw/Gk+kVmA2lGuDKtMQzsVwfl6c3eE3IUgyYeCFjsqCgb3DqQhJwq/gTY7lyV61Jdhtw7qFUSjNA/8m8kASkc5tYXnN4BvTs1kO23uAdIksx4OjI19Grzys4c7fkfCm5MO0QU483cf5eGcurNq8BWfD8kK11HtwBoDYeGV4ZO5X57ow8knBWLGP49jqevVF5IKnRaOxQByD6kT6smFj6bHb0OoJsV1cAe/n7f3PQRVsx4B/kMCuQRxt7CWZnXT69CUAvQfYwzpFo9Hv/AD332dKni9XnAAAAAElFTkSuQmCC)
}

ul#files .icon-application-x-sql .name {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHVSURBVDjLjZPLaiJBFIZNHmJWCeQdMuT1Mi/gYlARBRUkao+abHUhmhgU0QHtARVxJ0bxhvfGa07Of5Iu21yYFPyLrqrz1f+f6rIRkQ3icca6ZF39RxesU1VnAVyuVqvJdrvd73Y7+ky8Tk6n87cVYgVcoXixWNByuVSaTqc0Ho+p1+sJpNvtksvlUhCb3W7/cf/w+BSLxfapVIqSySRlMhnSdZ2GwyHN53OaTCbU7/cFYBgG4RCPx/MKub27+1ur1Xqj0YjW6zWxCyloNBqUSCSkYDab0WAw+BBJeqLFtQpvGoFqAlAEaZomuc0ocAQnnU7nALiJ3uh8whgnttttarVaVCgUpCAUCgnQhMAJ+gG3CsDZa7xh1mw2ZbFSqYgwgsGgbDQhcIWeAHSIoP1pcGeNarUqgFKpJMLw+/0q72azkYhmPAWIRmM6AGbXc7kc5fN5AXi9XgWACwAguLEAojrfsVGv1yV/sVikcrksAIfDIYUQHEAoPgLwT3GdzWYNdBfXh3xwApDP5zsqtkoBwuHwaSAQ+OV2u//F43GKRCLEc5ROpwVoOngvBXj7jU/wwZPPX72DT7RXgDfIT27QEgvfKea9c3m9FsA5IN94zqbw9M9fAEuW+zzj8uLvAAAAAElFTkSuQmCC)
}

/* —[ docs ]——————————————————————————————————————————————————————————————————————————————————————————————————— */

body {
    user-select: auto;
}

main.docs {
    max-width: 48rem;
    /* 768px */
    margin-inline: auto;
    padding: 6rem 2rem !important;
    /* 96px 32px */
}

@media (max-width:768px) {
    main.docs {
        padding: 3rem 1.5rem !important;
        /* 48px 24px */
    }
}

main.docs>*+* {
    margin-top: 2rem;
    /* 32px */
}

main.docs section>*+* {
    margin-top: 1.5rem;
    /* 24px */
}

main.docs h1 {
    font-size: 1.25rem;
    /* 20px */
    line-height: 1.75rem;
    /* 28px */
    font-weight: 700;
}

main.docs h2 {
    font-size: 1.125rem;
    /* 18px */
    line-height: 1.75rem;
    /* 28px */
    font-weight: 700;
}

main.docs a {
    color: var(--main-color)
}

main.docs a:hover {
    text-decoration-line: underline;
}

main.docs ul {
    list-style-position: outside;
}

main.docs section.docs code {
    background-color: var(--sky-glow);
    font-family: 'Roboto Mono', 'monospace' !important;
    border-radius: 4px;
    padding-inline: 2px;
}

main.docs section#code pre {
    background-color: #FFFFFFB0;
    overflow-x: auto;
}

main.docs section#code .hljs-attr,
main.docs section#code .language_ {
    color: #DF3079;
}

main.docs section#code .hljs-title,
main.docs section#code .function_ {
    color: #F22C3D;
}

main.docs section#code .hljs-params,
main.docs section#code .hljs-property {
    color: #0D0D0D
}

g main.docs section#code .hljs-comment {
    color: #A0A1A7;
}

main.docs section#code .hljs-keyword {
    color: #2E95D3;
}

main.docs section#code .hljs-string {
    color: #00A67D;
}