/*
this code under free to learn and exploration use,
there is covered GNU/GPL3 (as part of j4l no-care restrictions, just idea), with j4l restrictions:
you can modify, but not redist as anything, what that is not cost.
be ready for carmic destruction.
there is no way to cover obfusc on it - there is big question of life, universe and something other etc.
you can use it on production, with all over you modifications, you can install it for any non-commercial structures,
or with mailing to lostbyte32@gmail.com, with words: 'we want it', and take any representable answer for "why".
code is free to use, learn and research.

code redistutable as it and nobody care, for free exactly
j4l 0.0.4 Common Annual Part Restrictions And No Cares Waranty Happens, self-licensed and as it 04.11.2023
*/

.masonry-layout {
    column-count: 4;
    /* Adjust the number of columns based on your design */
    column-gap: 1rem;
    /* Space between columns */
    width: 100%;
    /* Full width of the container */

}

.masonry-item {
    break-inside: avoid;
    /* Prevent items from splitting across columns */
    margin-bottom: 1rem;
    /* Space between items */
    padding: 1rem;
    /* Padding inside items */
    background-color: #444;
    color: #fff;
    background: #333;
    font-size: 1rem;
}

.mansonry-wrapper {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    columns: 1;
    column-gap: 5px;
}

@media (max-width: 768px) {
    .masonry-layout {
        column-count: 1;
    }
}

@media (min-width: 768px) and (max-width:1024px) {
    .masonry-layout {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .masonry-layout {
        column-count: 1;
    }
}

/*
@media (max-width: 1024px) {
    .masonry-layout {
        column-count: 2;
    }
}
*/
.mansonry-card {
    background-color: #444;
    color: #fff;
    background: #797878;
    display: inline-block;
    /* stops block being split across columns. Could use break-inside: avoid for modern browsers; */
    width: 100%;
    /*break-inside: avoid;*/
    /*text-align: center;*/
    margin-top: 10px;
}

.mansonry-card .date {
    margin-top: 22px;
    font-size: 14px;
    font-style: italic;
}

.mansonry-card>p {
    font-size: 1.4em;
}

.single-page {
    width: 100%;
    border: 1px solid #2d2d2d;
    display: grid;
    justify-content: center;
    font-size: 22px;
}

.single-page>p {
    margin-bottom: 25px;
}

.single-page>h2 {
    font-size: 33px;
}

.single-page .date {
    font-size: 14px;
    font-style: italic;
}

#spoiler_click {
    background-color: #929268;
}

#spoiler {
    display: none;
}

.row {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.size-full {
    width: 100%;
}

img {
    width: 100%;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 5px;
    margin: 10px 0px 10px 0px;
}

.nav-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-list li {
    margin: 0 5px;
    font-size: 1.2rem;
}

.nav-list a {
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.nav-list a:hover {
    background-color: #555;
    /* Подсветка при наведении */
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    height: 3px;
    width: 25px;
    background-color: white;
    margin: 3px 0;
}

/* Мобильные стили */
@media (max-width: 1024px) {
    .nav-list {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #333;
    }

    .nav-list.active {
        display: flex;
    }

    .menu-toggle {
        display: flex;
        flex-direction: left;
    }
}

.cols {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

* {
    margin: 0;
    box-sizing: boder-box;
}

#sw-cache-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    z-index: 99999;
    font-family: system-ui;
    font-size: 13px;
}

#sw-cache-bar .progress {
    flex: 1;
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden
}

#sw-cache-bar .progress>i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    transition: width .3s
}

#sw-cache-bar .label {
    min-width: 140px
}

#sw-cache-bar .hide-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer
}

#sw-cache-hidden-toggle {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 99999;
    display: none
}

#capcha img {
    width: 150px;
    height: 150px;
}

body {
    font: 10px sans-serif;
    background: hsl(216, 14%, 78%);
    color: #141313;
    padding: 16px;
}

footer {

    color: white;
    line-height: 10px;
    padding: 0 20px;
}

.cookies-banner {
    background: #444;
    color: #fff;
    padding: 6px;
    font-size: 13px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

.textcols {
    overflow: hidden;
}

.textcols-left {
    float: left;
    width: 48%;
    background: #fff2e1;
}

.textcols-right {
    float: right;
    width: 48%;
    background: #fff2e1;
}

.cookies-banner button {
    text-decoration: none;
    background: #222;
    color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    padding: 4px 7px;
    margin: 2px 0;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.07s, color 0.07s, border-color 0.07s;
}

.cookies-banner button:hover {
    background: #fff;
    color: #222;
}


h2 {
    padding: 16px 0;
    font-weight: 200;
    font-size: 14px;
}

.highLite {
    position: relative;
    background: hsl(220, 16%, 14%);
    word-wrap: break-word;
    max-width: 800px;
}

.highLite_colors {
    color: white;
}

.highLite_colors,
.highLite_editable {
    padding: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    white-space: pre-line;
    font-family: monospace;
    font-size: 13px;
    word-wrap: break-word;
    max-width: 800px;
    -webkit-user-modify: read-write-plaintext-only;
}

/* THE OVERLAYING CONTENTEDITABLE WITH TRANSPARENT TEXT */
.highLite_editable {
    position: relative;
    color: transparent;
    /* Make text invisible */
    caret-color: hsl(50, 75%, 70%);
    min-height: 300px;
    /* But keep caret visible */
}

.highLite_editable:focus {
    outline: 1px solid hsl(220, 16%, 19%);
}

.highLite_editable::selection {
    background: hsla(0, 0%, 90%, 0.2);
}

/* THE UNDERLAYING ONE WITH HIGHLIGHT COLORS */
.highLite_colors {
    position: absolute;
    user-select: none;
}

.highLite_colors i {
    font-style: normal;
}

/* JS */
i.js_quot {
    color: hsl(50, 75%, 70%);
}

i.js_decl {
    color: hsl(200, 75%, 70%);
}

i.js_func {
    color: hsl(300, 75%, 70%);
}

i.js_pare {
    color: hsl(210, 75%, 70%);
}

i.js_squa {
    color: hsl(230, 75%, 70%);
}

i.js_curl {
    color: hsl(250, 75%, 70%);
}

i.js_numb {
    color: hsl(100, 75%, 70%);
}

i.js_logi {
    color: hsl(200, 75%, 70%);
}

i.js_equa {
    color: hsl(200, 75%, 70%);
}

i.js_comm {
    color: hsl(200, 10%, 45%);
    font-style: italic;
}

i.js_angl {
    color: hsl(200, 10%, 45%);
}

i.js_tags {
    color: hsl(0, 75%, 70%);
}

i.js_attr {
    color: hsl(200, 74%, 70%);
}

i.js_comm>* {
    color: inherit;
}



/* HTML */
i.html_angl {
    color: hsl(200, 10%, 45%);
}

i.html_tags {
    color: hsl(0, 75%, 70%);
}

i.html_attr {
    color: hsl(200, 74%, 70%);
}

.wrapper {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    color: #444;
    background: hsl(216, 14%, 78%);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.wrapper img {
    width: 100px;
    height: 100%;
    display: block;
    margin-left: auto;
}

.wrapper-item {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    height: 48%;
    background: hsl(216, 14%, 78%);
}

.wrapper-item+.wrapper-item {
    margin-left: 4%;
}

h1 {
    font-size: 24px;
    margin-bottom: 22px;
}

h2 {
    font-size: 22px;
    font-style: oblique;
    margin-bottom: 10px;
}

.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 4px;
    font-size: 130%;
}

.pagination-wrapper {
    display: grid;
}


.pagination {
    margin: 25px 0 15px 0;
}

.pagination,
.pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination li {
    background: #afa5a3;
    list-style: none;
}

.pagination li a {
    text-decoration: none;
    color: #fdfdfd;
    height: 50px;
    width: 50px;
    font-size: 18px;
    padding-top: 1px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-right-width: 0px;
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35);
}

.del-news {
    float: right;
    font-size: 0.5em;
    margin-left: 2em;
}

.edit-news {
    float: right;
    font-size: 0.5em;
}

.pagination li.active a {
    text-decoration: none;
    color: #2c2828;
    height: 50px;
    width: 50px;
    font-size: 24px;
    font-weight: 700;
    padding-top: 1px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-right-width: 0px;
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35);
}


.pagination li:last-child a {
    border-right-width: 1px;
}

.pagination li a:hover {
    background: rgba(255, 255, 255, 0.2);
    border-top-color: rgba(0, 0, 0, 0.35);
    border-bottom-color: rgba(0, 0, 0, 0.5);
}

.pagination li a:focus,
.pagination li a:active {
    padding-top: 4px;
    border-left-width: 1px;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, .25);
}

.pagination li.icon a {
    min-width: 120px;
}

.pagination li:first-child span {
    padding-right: 8px;
}

.pagination li:last-child span {
    padding-left: 8px;
}

.feautered-wrapper {
    display: grid;
    grid-template-areas: "a a a" "b c c" "b c c";
    font-size: 90%;
    margin-top: 12px;
}

.feautered-post {
    grid-area: 1 / 1 / 3 / 6;
}