/*
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
*/
article {
    font-size: 1.1rem;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f7f7f7;
}

.lib-panel {
    margin-bottom: 20px;
    padding: 0 20px 0 20px;
}

.lib-panel img {
    width: 100%;
    background-color: transparent;
}

.lib-panel .row,
.lib-panel .col-md-6 {
    padding: 0;
    background-color: #FFFFFF;
}

.lib-panel .lib-row {
    padding: 0 20px 0 20px;
}

.lib-panel .lib-row.lib-header {
    background-color: #FFFFFF;
    font-size: 20px;
    padding: 10px 20px 0 20px;
}

.lib-panel .lib-row.lib-header .lib-header-seperator {
    height: 2px;
    width: 26px;
    background-color: #d9d9d9;
    margin: 7px 0 7px 0;
}

.lib-panel .lib-row.lib-desc {
    position: relative;
    display: block;
    font-size: 13px;
}

.lib-panel .lib-row.lib-desc a {
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 20px;
}

.row-margin-bottom {
    margin-bottom: 20px;
}

.box-shadow {
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .10);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .10);
}

.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: #7f7f7f;
    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;
}

.mansonry-card a {

    color: #b16448
}

#spoiler_click {
    background-color: #929268;
    font-size: 14px;
}

#spoiler {
    display: none;
}

.mansonry-card a:active {
    color: #b16448
}

.mansonry-card a:visited {
    color: #632614;
}

.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;
}

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

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

.row-native {
    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-fock {
    font-size: 18px;
    color: #272724;
    padding: 10px 5px 20px 5px;
    overflow: hidden;
}

.nav-fock ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: rgb(110, 48, 15);
    /*background: linear-gradient(90deg, rgba(36, 34, 0, 1) 0%, rgba(215, 125, 52, 1) 15%, rgba(255, 217, 0, 1) 100%);*/
}

.nav-fock li {
    float: left;
}

.nav-fock li a {
    display: block;
    color: rgb(199, 189, 87);
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
}

.nav-fock li a:hover {
    background-color: #4c5740;
}

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

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

@media (max-width: 700px) {

    .nav-fock {
        top: 0;
        margin-top: 10px;
        left: 0;
        width: 100%;
        justify-content: center;
        align-items: center;

    }

    .nav-fock ul {
        background: rgb(171, 164, 24);
    }

    .nav-fock li {

        justify-content: center;
        margin: 0;
        padding: 0;
        font-size: 24px;
        width: 100%;
        color: rgb(134, 196, 126);
        background: rgb(110, 105, 15);
    }

    .nav-fock>li:not(:last-child) {
        border-bottom: 1px solid #444;
    }
}

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

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

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

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

#editor {
    display: flex;
}

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

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

.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;
}

.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-fock {
    margin: 25px 0 15px 0;
}

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

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

.pagination-fock 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);
}

.pagination-fock 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-fock li:last-child a {
    border-right-width: 1px;
}

.pagination-fock 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-fock li a:focus,
.pagination-fock 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-fock li.icon a {
    min-width: 120px;
}

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

.pagination-fock 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;
    font-size: 1.3em;
    color: rgb(12, 12, 12);
    min-height: 250px;

}

p.city {
    font-size: 1.2rem;
}

h3.short-desc>span {
    background: #632614;
}

.feautered-post>a {
    color: black;
}

.feautered-post a {
    color: rgb(6, 6, 6);
}

.feautered-post a:visited {
    color: rgb(14, 14, 14);
}


.feautered-post img {
    width: 33% !important;
    height: 33% !important;
}