:root {
    --background: #7f916f;
    --background-content: #1a1a1a;
    --base-color: #7f916f;
    --link-base-color: #cbd9bf;
    --alpha-base-color: rgba(127, 145, 111, 0.451);
    --font-color: #d5d5d5;

    --blockquote-background: #7f916f1e;
    --blockquote: #7f916f;

    --table: #7f916f;
    --table-background: #7f916f5f;
    --table-head-color: #fff;

    --scrollbar-background: #0000007f;
    --scrollbar-color: var(--base-color);

    --button-background: #262824;
    --button-color: var(--font-color);

    --button-background-focus: #3b3e38;
    --button-color-focus: var(--font-color);

    
    --button-blockquoted-background: #383d34;
    --button-blockquoted-color: var(--font-color);

    --button-blockquoted-background-focus: rgb(68, 72, 63);
    --button-blockquoted-color-focus: var(--font-color);
    
    --button-danger-backgroud: rgb(253 27 83);
    --button-danger-color: #fff;

    --button-danger-backgroud-focus: var(--button-danger-color);
    --button-danger-color-focus: var(--button-danger-backgroud);

    --input-background: var(--button-background);
    --input-color: var(--font-color);

    --details: #7f916f;
    --details-background: #7f916f1e;
    --details-color: #d5d5d5;

    --link-color: #000;
    --link-color-alpha: #000000a4;
}
/* new */
.warning{
    padding: 8pt 24pt;
    margin-top: 4pt;
    margin-bottom: 8pt;
    border: rgb(253 27 83) 2pt solid;
    border-radius: 16pt;
    background-color: rgba(253, 27, 84, 0.272);
}
.empty{
    padding: 0;
    margin: 0;
    width: 0px;
    height: 0px;
}
#content{
    /* background-color: red; */
    width: 99%;
    max-width: 900pt;
    margin-left: 16pt;
    margin-right: 16pt;
    margin-bottom: 8pt;
}
#content #fit-content {
    width: 100%;
    max-width: 1000pt;
}

/* old */

html {
    box-sizing: border-box;
    background: var(--background);
    font-family: system-ui, monospace;
    color: var(--font-color);
}
body {
    padding:0;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}
#page{
    background-color: var(--background-content);
    width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-content: center;
            align-self: center;
    padding-top: 5pt;
    padding-bottom: 5pt;
    margin-top: 0pt;
    margin-bottom: 0pt;
    border-radius: 10pt;
}

body,
button,
input,
select {
    font: 12pt/1.33 system-ui, monospace;
}

/*  */

audio {
    width: 75%;
    -webkit-filter:invert(100%);
    filter:invert(100%);
}
@-moz-document url-prefix() {
    audio {
        -webkit-filter:invert(0%);
        filter:invert(0%);
    }
}

/* Шапка */
header {
    padding: 0 20pt;
}

.header .container {
    padding: 0 5pt;
}

.header {
    /* padding-top: 5pt;
    padding-bottom: 5pt; */
    background-color: var(--base-color);
}

.header .container .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .container .inner #icon {
    height: 30pt;
    margin: 0;
    margin-left: 5pt;
    margin-right: 0;
}

.header .container .inner #account {
    height: 30pt;
    margin: 0;
    margin-left: 5pt;
    margin-right: 0;
}

.header .container .inner .list {
    display: flex;
    list-style: none;
}

.header .container .inner .list .item {
    margin-left: 2pt;
}

.header .container .inner .list .item .link {
    padding: 10pt;
    font-size: 14pt;
    color: var(--link-color);
    text-decoration: none;
}

.header .container .inner .list .item .link:hover {
    color: var(--link-color-alpha);;
}

/* Ботинки */
footer {
    padding: 0 20pt;
}

.footer .container {
    padding: 0 5pt;
}

.footer {
    /* padding-top: 5pt;
    padding-bottom: 5pt; */
    background-color: var(--base-color);
}

.footer .container .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer .container .inner p {
    font-size: 14pt;
}

.footer .container .inner .list {
    display: flex;
    list-style: none;
    padding-left: 0;
}

.footer .container .inner .list .item {
    margin-left: 2pt;
}

.footer .container .inner .list .item .link {
    padding: 10pt;
    font-size: 14pt;
    color: var(--link-color);
    text-decoration: none;
}

.footer .container .inner p {
    font-size: 14pt;
    color: var(--link-color);
}

.footer .container .inner .list .item .link:hover {
    color: var(--link-color-alpha);;
}

.footer .container .inner #header-icon {
    height: 30pt;
    margin: 0;
    margin-left: 0;
    margin-right: 0;
}
.footer .container .inner .list .item .link i {
    vertical-align: bottom;
}

.header .container .inner .list .item .link i {
    vertical-align: bottom;
}
* i, * span {
    vertical-align: bottom;
}

/* База */
p,
pre,
h1,
h2,
h3,
h4,
h5,
h6,
label,
table {
    margin: 8pt;
    margin-left: 0;
    margin-right: 0;
    padding-right: 10pt;
}

blockquote p,
blockquote a,
blockquote img,
blockquote video,
blockquote audio,
blockquote details,
blockquote iframe,
blockquote pre,
blockquote h1,
blockquote h2,
blockquote h3,
blockquote h4,
blockquote h5,
blockquote h6,
blockquote button,
blockquote details,
details p,
details a,
details img,
details video,
details audio,
details details,
details iframe,
details pre,
details h1,
details h2,
details h3,
details h4,
details h5,
details h6,
details button,
details details  {
    margin-left: 16pt;
    margin-right: 8pt;
}

blockquote p a,
blockquote p img,
blockquote p a img,
blockquote p video,
blockquote p a video,
blockquote p audio,
blockquote p a audio,
blockquote h1 a,
blockquote h2 a,
blockquote h3 a,
blockquote h4 a,
blockquote h5 a,
blockquote h6 a,
details p a,
details p img,
details p a img,
details p video,
details p a video,
details p audio,
details p a audio,
details h1 a,
details h2 a,
details h3 a,
details h4 a,
details h5 a,
details h6 a {
    margin-left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* margin-right: 16pt; */
}

h1 {
    font-size: 20pt;
}

h2 {
    font-size: 18pt;
}

h3 {
    font-size: 16pt;
}

h4 {
    font-size: 14pt;
}

h5 {
    font-size: 12pt;
}

h6 {
    font-size: 10pt;
}

img,
iframe {
    margin: 8pt;
    margin-left: 0;
    margin-right: 0;
    /* margin-left: 16pt;
    margin-right: 16pt; */
}

video {
    margin: 4pt;
    /* margin-left: 16pt;
    margin-right: 16pt; */
}

audio {
    margin-top: 6pt;
    margin-bottom: 6pt;
}

p img,
p iframe,
p video {
    margin-left: 0pt;
    margin-right: 0pt;
}

a {
    color: var(--link-base-color);
    text-decoration: none;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    color: var(--font-color)
}

a:hover {
    color: var(--base-color);
    text-decoration: underline dashed;
}

/* scroller */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) var(--scrollbar-background);
}

*::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-color);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 5px;
    border: 3px solid var(--scrollbar-background);
}

/* pre */

pre {
    background: #000;
    color: #fff;
    margin-right: 16pt;
    color: "fira code";
    /* width: 350px; */
    padding: 10pt;
    font-size: 10pt;
    border: solid 0.20pc var(--base-color);
    border-radius: 8pt;
    word-break: break-all;
}

pre code {
    padding: 3pt;
    border: none;
    background-color: none;
}

/* details */

details {
    
    margin: 8pt;
    margin-left: 0pt;
    margin-right: 0pt;
    border-radius: 8pt;
}
details summary{
    border-radius: 8pt;
    padding: 8pt 16pt;
    background-color: var(--details-background);
    color: var(--details-color);
    font-weight: 600;
    margin-bottom: 8pt;
}
details summary::marker{
    content: '✏  ';
    color: var(--details);
    margin-right: 50pt;
}
details[open] summary::marker{
    content: '✎  ';
}

/*  */

blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 0.5pt 0 0.5pt 0;
    border-left: solid 0.20pc var(--blockquote);
    border-radius: 8pt;
    background: var(--blockquote-background);
}

hr {
    /* margin-right: 8pt;
    margin-left: 8pt; */
    border-color: var(--alpha-base-color)
}

p code {
    background: var(--alpha-base-color);
    padding-left: 6pt;
    padding-right: 6pt;
    border-radius: 4pt;
}

button,
input,
select,
textarea {
    margin: 8pt;
    margin-left: 0pt;
    margin-right: 4pt;
    padding-right: 10pt;
    
    border: none;
    border-radius: 5pt;
    padding: 5pt 10pt;
    font-size: 12pt;

    background-color: var(--button-background);
    color: var(--button-color);
}

button{
	display: inline-flex;
    place-items: center;
}
button i,
button span{
    margin-right: 8pt;
}


label {
    font-size: 12pt;
}
.danger{
    background-color: var(--button-danger-backgroud);
    color: var(--button-danger-color);
}
.danger:hover{
    background-color: var(--button-danger-backgroud-focus);
    color: var(--button-danger-color-focus);
}
button:hover,
input:hover,
select:hover,
button:focus,
input:focus,
select:focus {
    border: none;
    stroke: none;
    background-color: var(--button-background-focus);
    color: var(--button-color-focus);
}

blockquote button{
    background-color: var(--button-blockquoted-background);
    color: var(--button-blockquoted-color);
}
blockquote button:hover{
    background-color: var(--button-blockquoted-background-focus);
    color: var(--button-blockquoted-color-focus);
}

textarea {
    width: 98%;
    max-width: 1000pt;
    min-width: 98%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1%;
    padding-right: 1%;
    max-height: max-content;
    min-height: 500pt;
}

input[type=file],
input[type=file] button {
    font-size: 10pt;
    background-color: var(--input-background);
    border: 0;
    padding: 5pt;
    border-radius: 5pt;
    color: var(--input-color);
}

input[type=file]::file-selector-button {
    background-color: var(--button-blockquoted-background);
    border: 0;
    margin-right: 10pt;
    padding: 5pt;
    border-radius: 5pt;
    color: var(--button-color);
}

input[type=file]::file-selector-button:hover {
    background-color: var(--button-blockquoted-background-focus);
    color: var(--button-color-focus);
}

table {
    padding: 0;
    border-spacing: 0;
    border-collapse:collapse;
    border-radius: 10px;
    border: 1pt solid var(--table);
}

/* Apply a border to the right of all but the last column */
table td:not(:last-child) {
    border-right: 1pt solid var(--table);
}
th, td{
    padding: 5pt 15pt;
}
thead {
    border-top-left-radius: 10pt;
    border-top-right-radius: 10pt;
    background-color: var(--table);
    color: var(--table-head-color);
    border-bottom: 1pt solid var(--table);
}
th{
    font-weight: 900;
}

/* Apply a border to the bottom of all but the last row */
table>thead>tr:not(:last-child)>th,
table>thead>tr:not(:last-child)>td,
table>tbody>tr:not(:last-child)>th,
table>tbody>tr:not(:last-child)>td,
table>tfoot>tr:not(:last-child)>th,
table>tfoot>tr:not(:last-child)>td,
table>tr:not(:last-child)>td,
table>tr:not(:last-child)>th,
table>thead:not(:last-child),
table>tbody:not(:last-child),
table>tfoot:not(:last-child) {
    border-bottom: 1pt solid var(--table);
}

.banner{
    background-image: url("/assets/main_banner_2.png");
    background-size: 100% auto;
    background-repeat: repeat;
    background-position: center;
    background-color: var(--blockquote-background);
    padding-top:30pt;
    padding-bottom:30pt;
    border-radius: 12pt;
}
.banner2{
    background-image: url("/assets/ng/back.png");
    background-size: 100% auto;
    background-repeat: repeat;
    background-position: center;
    background-color: var(--blockquote-background);
			display: inline-flex;
			place-items: center;
    padding-top:30pt;
    padding-bottom:30pt;
    border-radius: 12pt;
}

.one-line{
	display: inline-flex;
    place-items: center;
    width: 100%;
    max-width: 1000pt;
}

.one-line *{
    
    margin-right: 3pt;
    margin-left: 3pt;
}
.button-grid *{
    margin: 3pt;
}
.emote{
    max-height: 24pt;
    height: 24pt;
    vertical-align: middle;
}
#content .emote,
#content #post_content .emote{
    margin-left: 16pt;
}
#content * .emote,
#content #post_content * .emote{
    padding: 0;
    margin: 0;
}

.table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column: auto;
    margin-left: 0;
}

.table blockquote,
.table-3 blockquote {
    margin-left: 5pt;
    margin-right:5pt;
    margin-bottom: 6pt;
}

.table-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column: auto;
}
/* 
div[id=pages]{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    align-content: center;
} */