@view-transition {
    navigation: auto
}

@keyframes move-out {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%)
    }
}

@keyframes move-in {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0%)
    }
}

:root {
    color-scheme: dark light;
    --color-scheme: dark;
    --dark-color1: #fff;
    --dark-shade0: #121212;
    --dark-shade7: #8f8f92;
    --dark-accent0: #534d94;
    --dark-accent1: #534d94;
    --dark-accent2: #665fa0;
    --dark-accent3: #7971ac;
    --dark-accent4: #8c84b7;
    --dark-accent5: #9f98c3;
    --dark-accent6: #b2accf;
    --dark-accent7: #b2accf;
    --dark-accent8: #b2accf;
    --dark-accent9: #b2accf;
    --dark-shade1: #282828;
    --dark-shade2: #3f3f3f;
    --dark-shade3: #575757;
    --dark-shade4: #717171;
    --dark-shade5: #8b8b8b;
    --dark-shade6: #757479;
    --dark-shadow0: hsl(0,0%,11%);
    --dark-shadow1: hsl(0,0%,68%);
    --dark-border0: hsl(0,0%,33%);
    --dark-transparent-prmy: rgba(32,25,19,0);
    --light-color1: hsl(0,0%,3%);
    --light-shade0: hsl(49,65%,97%);
    --light-shade7: hsl(154,12%,11%);
    --light-accent0: hsl(346,38%,41%);
    --light-accent1: hsl(28,61%,61%);
    --light-accent2: hsl(38,56%,57%);
    --light-accent3: hsl(167,26%,41%);
    --light-accent4: hsl(151,20%,63%);
    --light-accent5: hsl(151,19%,37%);
    --light-accent6: hsl(351,10%,43%);
    --light-accent7: hsl(5,29%,48%);
    --light-accent8: hsl(261,68%,75%);
    --light-accent9: hsl(261,68%,84%);
    --light-shade1: hsl(53,11%,85%);
    --light-shade2: hsl(68,6%,72%);
    --light-shade3: hsl(77,3%,60%);
    --light-shade4: hsl(96,2%,48%);
    --light-shade5: hsl(120,2%,36%);
    --light-shade6: hsl(140,5%,24%);
    --light-shadow0: hsl(0,0%,68%);
    --light-shadow1: hsl(0,0%,11%);
    --light-border0: hsl(0,0%,33%);
    --light-transparent-prmy: rgba(249,250,251,0);
    --shadow-direction: inset -2px 2px 6px 0 var(--shadow-color-prmy);
    --header-shadow: rgba(0, 0, 0, 0.7) 0px 3px 6px, rgba(0, 0, 0, 0.8) 0px 3px 6px;
}

:root {
    --bg-color-prmy: var(--dark-shade0);
    --bg-color-secy: var(--dark-shade1);
    --bg-color-tery: var(--dark-shade2);
    --bg-color-qaty: var(--dark-shade3);
    --color-prmy: var(--dark-color1);
    --color-secy: var(--dark-shade7);
    --color-tery: var(--dark-shade6);
    --color-quadr: var(--dark-shade5);
    --color-accent-prmy: var(--dark-accent1);
    --color-accent-secy: var(--dark-accent0);
    --color-accent-tery: var(--dark-accent2);
    --color-accent-qaty: var(--dark-accent3);
    --color-accent-qiny: var(--dark-accent4);
    --color-link-prmy: var(--dark-accent8);
    --color-link-secy: var(--dark-color1);
    --color-link-hover-prmy: var(--dark-accent9);
    --color-link-hover-secy: var(--dark-accent8);
    --color-button-prmy: var(--color-prmy);
    --color-footnotes: var(--color-quadr);
    --bg-color-button-prmy: var(--dark-accent1);
    --bg-color-button-secy: var(--dark-shade2);
    --bg-color-button-tery: var(--dark-accent5);
    --shadow-color-prmy: var(--dark-shadow0);
    --shadow-color-secy: var(--dark-shadow1);
    --border-color-prmy: var(--dark-border0);
    --transparent-color-prmy: var(--dark-transparent-prmy);
    scroll-behavior: smooth
}

@media screen and (prefers-reduced-motion:reduce),(update:slow) {
    :root {
        transition-duration: none
    }
    html:focus-within {
        scroll-behavior: auto;
    }
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
}

:root[data-color-scheme="light"] {
    --color-prmy: var(--light-color1);
    --bg-color-prmy: var(--light-shade0);
    --bg-color-secy: var(--light-shade1);
    --bg-color-tery: var(--light-shade2);
    --bg-color-qaty: var(--light-shade3);
    --color-prmy: var(--light-color1);
    --color-secy: var(--light-shade7);
    --color-tery: var(--light-shade6);
    --color-quadr: var(--light-shade5);
    --color-link-prmy: var(--light-accent8);
    --color-link-secy: var(--light-color1);
    --color-link-hover-prmy: var(--light-accent9);
    --color-link-hover-secy: var(--light-accent8);
    --color-button-prmy: var(--color-tery);
    --color-footnotes: var(--color-secy);
    --bg-color-button-prmy: var(--light-accent2);
    --bg-color-button-secy: var(--light-accent1);
    --shadow-color-prmy: var(--light-shadow0);
    --shadow-color-secy: var(--light-shadow1);
    --border-color-prmy: var(--light-border0);
    --transparent-color-prmy: var(--light-transparent-prmy);
    --color-scheme: light;
    --light-color1: hsl(0,0%,15%);
    --light-shade0: hsl(210,20%,98%);
    --light-shade7: hsl(60,100%,15%);
    --light-accent0: hsl(2,85%,50%);
    --light-accent1: hsl(27,90%,50%);
    --light-accent2: hsl(36,90%,50%);
    --light-accent3: hsl(168,55%,40%);
    --light-accent4: hsl(163,50%,35%);
    --light-accent5: hsl(152,50%,30%);
    --light-accent6: hsl(340,70%,50%);
    --light-accent7: hsl(0,50%,35%);
    --light-accent8: hsl(261,70%,40%);
    --light-accent9: hsl(261,60%,30%);
    --light-shade1: hsl(40,20%,90%);
    --light-shade2: hsl(43,15%,82%);
    --light-shade3: hsl(49,15%,72%);
    --light-shade4: hsl(55,15%,62%);
    --light-shade5: hsl(58,20%,50%);
    --light-shade6: hsl(240,20%,20%);
    ;--light-shadow0: hsl(0,0%,65%);
    --light-shadow1: hsl(0,0%,50%);
    --light-border0: hsl(0,0%,75%);
    --shadow-direction: 0 0 15px -3px rgb(0 0 0 / .1), 0 0 6px -2px rgb(0 0 0 / .05);
    --header-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

html {
    --base-font-size: 62.5%;
    --grid-max-width: 960px;
    font-size: var(--base-font-size)
}

body {
    font-size: 2em;
    line-height: 1.6;
    font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    background-color: var(--bg-color-prmy);
    color: var(--color-prmy);
    font-weight: 400;
    transition: background-color 200ms,color 200ms;
    margin: 0;
}

h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 300
}

h1 {
    font-size: 4rem;
    line-height: 1.2;
    letter-spacing: -.1rem
}
.rainbow {
    background-image: linear-gradient(to top,
        #770088 30%,
        #004cff 30%,
        #004cff 40%,
        #028121 40%,
        #028121 50%,
        #ffee00 50%,
        #ffee00 60%,
        #ff8d00 60%,
        #ff8d00 70%,
        #e50000 70%,
        #e50000 100%);
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -3px;
    background-clip: text;
    font-weight: bold;
    font-family: Cambria, Charter, 'Bitstream Charter', 'Sitka Text', serif;
    filter: drop-shadow(0 0 1px var(--shadow-color-secy));
}

h2 {
    font-size: 3.6rem;
    line-height: 1.25;
    letter-spacing: -.1rem
}

h3 {
    font-size: 3rem;
    line-height: 1.3;
    letter-spacing: -.1rem
}

h4 {
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: -.08rem
}

h5 {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: -.05rem
}

h6 {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0
}

@media (min-width: 600px) {
    h1 {
        font-size:5rem
    }

    h2 {
        font-size: 4.2rem
    }

    h3 {
        font-size: 3.6rem
    }

    h4 {
        font-size: 3rem
    }

    h5 {
        font-size: 2.4rem
    }

    h6 {
        font-size: 1.5rem
    }
}

.button,button,input[type="submit"],input[type="reset"],input[type="button"] {
    display: inline-block;
    padding: 0 30px;
    color: var(--text-color-softer);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    box-sizing: border-box
}

input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select {
    height: 38px;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box
}

input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],input[type="button"],input[type="submit"],textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px
}

label,legend {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600
}

fieldset {
    padding: 0;
    border-width: 0
}

input[type="checkbox"],input[type="radio"] {
    display: inline
}

label>.label-body {
    display: inline-block;
    margin-left: .5rem;
    font-weight: 400
}

.hidden {
    visibility: hidden;
    position: absolute
}

abbr[title]:focus:after {
    content: attr(title);
    position: absolute;
    background: var(--bg-color-secy);
    padding: 10px;
    z-index: 10;
    box-shadow: -2px 2px 6px 0 var(--shadow-color-prmy);
    border-radius: 4px;
    transform: translateY(1.4em);
    min-width: 200px;
    max-width: 320px
}

abbr[title]:focus:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--bg-color-secy) transparent transparent transparent
}

abbr {
    margin-right: 3px
}

@media(max-width: 600px) {
    abbr[title]:focus:after {
        left:auto;
        right: 0
    }
}

.site ul {
    list-style: circle inside;
    max-width: 36em
}

ol {
    list-style: decimal inside
}

ol,ul {
    padding-left: 0;
    margin-top: 0
}

ul ul,ul ol,ol ol,ol ul {
    font-size: 100%;
    margin: 1rem 0 1rem 3rem;
    color: var(--text-color-softer)
}

li {
    margin-bottom: .5rem
}

.monospace {
    font-family: ui-monospace,'Cascadia Code','Source Code Pro',Menlo,Consolas,'DejaVu Sans Mono',monospace
}

button,.button {
    margin-bottom: 1rem
}

input,textarea,select,fieldset {
    margin-bottom: 1.5rem
}

pre,blockquote,dl,figure,table,p,ul,ol,form {
    margin-bottom: 2.5rem
}

header {
    --header-height: 12.4rem;
    --header-padding: 0px;
    font-size: 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    margin-bottom: 1em;
    anchor-name: --header;
}
header, footer {
    box-shadow: var(--header-shadow);
}

header a {
    color: var(--color-link-secy)
}

header a:hover {
    color: var(--color-link-hover-secy)
}

.main-navigation {
    position: relative;
    align-content: center;
    overflow: visible;
    margin-right: 5vw;
}

header nav li {
    list-style: none;
    display: inline-block;
    font-size: .5em;
    z-index: 2;
}

header nav .page_item.active a {
    text-decoration: underline
}
.menu-item-has-children:after{
    content:  "\25BE";
    text-decoration: none;
}
header nav li:hover > ul.sub-menu,
header nav li:active > ul.sub-menu,
header nav li:focus-within > ul.sub-menu,
ul.sub-menu:hover,ul.sub-menu:focus{
    opacity: 1;
    height: 50px;
    padding: 10px 0 0 10px;
    border-top: 3px solid var(--color-accent-prmy);
    z-index: 1000;
}
ul.sub-menu {
    opacity: 0;
    background-clip: padding-box;
    background-color: var(--bg-color-secy);
    font-size: 1rem;
    float: none;
    left: auto;
    list-style: none;
    padding: 0;
    position: absolute;
    top: 100%;
    width: 240px;
    -moz-box-shadow: 0 1px 20px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
    margin: 0;
    margin-top: -13px;
    border-radius: 0 0 4px 4px;
    transition: all .5s;
    height: 0;
    z-index: 0;
}
#menu-primary ul.sub-menu li {
    margin-left: 0;
}
@media (min-width: 1024px) {
    ul.sub-menu {
        width: 240px;
    }
    ul.sub-menu:after{
        right: -1em;
    }
}
header nav button {
    border: none;
    box-shadow: none
}

header a,sup a {
    text-decoration: none
}

sup a svg {
    height: 1em;
    width: 1em
}

sup a svg path {
    stroke: var(--color-link-prmy)
}

header nav a:hover {
    text-decoration: underline;
    color: var(--color-prmy)
}

header nav a.highlight {
    color: var(--color-secy)
}
#page {
    min-height: 100vh;
    position: relative;
}
main {
    padding-bottom: 8em;
}
article,.article {
    max-width: 36em;
    margin: auto;
    hyphens: auto
}
@media(max-width: 820px){
    article{
        max-width: 90%;
    }
}

article p,.article p {
    max-width: 36em;
    margin: 1em 0 2.5em 0;
}
article p.has-background, .article p.has-background {
    border-radius: 12px;
}

a {
    color: var(--color-link-prmy)
}

a:hover {
    color: var(--color-link-hover-prmy)
}
.current-menu-item > a{
    text-decoration: underline;
    text-decoration-color: var(--color-accent-tery);
}
#menu-item-install.hidden {
    display: none;
    width: 0;
}
@keyframes slide-in{
    0% {
        width: 0;
    }
    10%{
        width: 16px
    }
    25% {
        width: 40px;
    }
    35% {
        width: 64px;
    }
    50% {
        width: 80px;
    }
    60%{
        width: 96px;
    }
    75%{
        width: 120px;
    }
    90%{
        width: 144px;
    }
    100% {
        width: auto;
    }
}
#menu-item-install:not(.hidden){
    animation: slide-in .5s linear;
}
.menu-toggle {
    width: 50px;
    height: 60px;
    anchor-name: --menu-toggle;
}

.menu-toggle,.menu-close {
    vertical-align: bottom;
    margin-bottom: 0;
    padding: 0 0
}

.menu-close {
    width: 60px;
    height: 58px;
    display: none;
    background-color: var(--bg-color-prmy)
}

.menu-toggle svg .secondary,.menu-close svg .secondary {
    fill: var(--color-prmy)
}

.search-form {
    display: flex;
    justify-content: space-evenly;
    max-width: 36em;
    flex-wrap: wrap;
    align-items: flex-start
}

article button,
article input[type="submit"],
.button {
    color: var(--color-button-prmy);
    border-radius: 12px;
    background-color: var(--bg-color-button-prmy);
    font-size: 1.5rem;
    border: none;
    box-shadow: 0 0 3px var(--shadow-color-secy);
}

@media(max-width: 1024px) {
    header {
        padding:0 var(--header-padding);
    }
}
#primary-menu-wrap {
        background-color: var(--bg-color-prmy);
        border: none;
        position: relative;
        overflow: visible
}
#primary-menu-wrap:popover-open{
    position: absolute;
    background-color: var(--bg-color-tery);
}
#menu-primary .button{
    margin-bottom: 0;
    font-size: 1rem;
}
#primary-menu-wrap {
    border: none;
    box-shadow: -2px 2px 6px 0 var(--shadow-color-prmy);
    padding: .3em;
    margin-right: .5em;
    margin-top: 2em;
}
@supports(top:anchor(bottom)) {
    #primary-menu-wrap {
        position-anchor: --menu-toggle;
        margin-top: .5em;
        margin-right: 0;
        top: anchor(bottom);
        right: anchor(right);
    }
}
.menu-close svg {
    vertical-align: middle
}

#menu-primary {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    min-width: 160px;
}
#menu-primary li{
    font-size: .7em;
    width: 175px;
}
#menu-primary ul.sub-menu {
    width: 175px;
    font-size: 1em;
    position: relative;
    padding-top: 0;
    margin-top: 0;
}
.menu-item-has-children{
    position: relative;
}
.menu-item-has-children:after{
    position: absolute;
    top: 0;
    right: 0;
}

.site-branding {
    display: flex
    margin-left: 1vw;
}

.site-branding p {
    margin: 5px
}
.site-title img {
    background-color: var(--light-shade0);
    border-radius: 4px;
}
.site-title picture{
    display: flex;
}

.site-branding .site-description {
    color: var(--color-tery);
    font-size: .5em;
    width: 8em;
    line-height: 1.2em
}

.home .site-branding .site-description {
    display: none
}

@media(max-width: 359px) {
    .site-branding .site-description {
        font-size:.35em;
        max-width: 8em;
        width: auto;
        margin-top: 12px
    }
}

.subheading {
    font-size: .5em;
    color: var(--color-tery);
    text-transform: uppercase;
    letter-spacing: normal
}

.p-intro p {
    font-size: 1.5em;
    margin-top: .5em
}

.is-style-rounded img {
    border-radius: 50%;
    float: right;
    margin: 0 0 1rem 1rem
}
img {
    border-radius: 12px;
}
img.rect{
    display: block;
    border-radius: 0;
}

:root[data-color-scheme="dark"] .is-style-rounded img {
    filter: brightness(.9)
}

@media(max-width: 520px) {
    .is-style-rounded img {
        display:block;
        float: none
    }

    .p-intro picture {
        margin: 0 auto .5em
    }
}

.post-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 12px
}

:root[data-color-scheme="light"] .post-thumbnail img {
    background-color: var(--bg-color-tery)
}

.entry-meta {
    font-size: .8em
}

.p-icon {
    width: 128px;
    height: 128px;
    float: right;
    fill: var(--color-accent-prmy)
}

.p-icon .secondary {
    fill: var(--color-accent-secy)
}

.p-emoji {
    float: right;
    font-size: 5em
}

svg.inline {
    width: 24px;
    height: 24px;
    position: relative;
    top: 5px
}

svg.inline .primary {
    fill: var(--color-accent-prmy)
}

svg.inline .secondary {
    fill: var(--color-accent-secy)
}

svg.icon-globe .primary {
    fill: var(--dark-accent9)
}

svg.icon-globe .secondary {
    fill: var(--bg-color-button-tery)
}

.advice {
    background-color: var(--bg-color-secy);
    padding: 1em;
    margin: 1em 0;
    border-radius: 12px;
    box-shadow: var(--shadow-direction) var(--shadow-color-prmy);
    max-width: 36em
}

code {
    padding: .2rem .5rem;
    margin: 0 .2rem;
    font-size: 90%;
    border-radius: 4px;
    background-color: var(--bg-color-secy)
}

pre>code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
    overflow: auto
}

.code-comment {
    color: var(--color-qaty)
}

.advice code {
    background-color: var(--bg-color-tery)
}

footer {
    padding: 1em 3em;
    position: absolute;
    bottom: 0;
    width: calc(100% - 6em);
    z-index: 2;
    background-color: var(--bg-color-prmy);
}

footer .site-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

footer .site-title {
    margin: 0
}

footer .footer-links {
    width: 30em;
    max-width: 50%
}

footer .site-info .footer-pages {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 1em;
    font-weight: 700
}

footer .site-info .footer-pages.sub {
    margin-bottom: 0;
    font-weight: 400
}

footer .site-info .footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 0;
    border-radius: 12px;
    --color-accent: var(--color-prmy);
}

footer .site-info .footer-social svg,
footer .site-info .footer-social a {
    height: 40px;
    width: 45px;
}

.archiv-wrap {
    font-weight: bold;
}
.archiv-wrap a,
footer .site-info .footer-links a {
    color: var(--color-prmy);
    text-decoration: none;
    opacity: .9;
    &:hover{
        text-decoration: underline
    }
}
.archiv-wrap a{
    font-weight: normal;
}
footer .site-info .footer-pages.sub span{
    opacity: .7;
    text-decoration: none;
}
footer .site-info .footer-pages.sub {
    display: flex;
    justify-content: center;
    gap: 1em;
    align-items: center;
    flex-wrap: wrap;
}
footer .site-info .footer-pages.sub .thanks-links{
    display: flex;
    justify-content: space-evenly;
    gap: 1ch;
    align-items: center;
}
footer .archiv-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.colorswitch,
.socialswitch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 29px
}

.colorswitch input,.socialswitch input  {
    opacity: 0;
    width: 0;
    height: 0
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color-button-prmy);
    -webkit-transition: .4s;
    transition: .4s
}

.slider .toggle-button {
    position: absolute;
    font-size: 18px;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 1px;
    background-color: #000;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider .toggle-button svg{
    position: relative;
    top: 1px;
    left: 1px;
    width: 24px;
    height: 24px;
}
.slider .toggle-button svg#bandcamp,
.slider .toggle-button svg#bandcamp-no{
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
}
.slider .toggle-button #sun{
  display: none;
  --color-accent: #FFCC33;
}
.slider .toggle-button #moon{
  display: block;
  --color-accent: #EBE8E2;
}

.slider .toggle-button #insta,
.slider .toggle-button #soundcloud,
.slider .toggle-button #bandcamp{
  display: none;
  --color-accent: #FFCC33;
  color: var(--color-accent);
}
.slider .toggle-button #insta-no,
.slider .toggle-button #soundcloud-no,
.slider .toggle-button #bandcamp-no{
  display: block;
  --color-accent: #EBE8E2;
}
input:checked + .slider .toggle-button #sun,
input:checked + .slider .toggle-button #insta,
input:checked + .slider .toggle-button #soundcloud,
input:checked + .slider .toggle-button #bandcamp{
  display: block;
}
input:checked + .slider .toggle-button #moon,
input:checked + .slider .toggle-button #insta-no,
input:checked + .slider .toggle-button #soundcloud-no,
input:checked + .slider .toggle-button #bandcamp-no{
  display: none;
}

input:focus+.slider {
    box-shadow: 0 0 4px #2196F3
}

input:checked ~ .slider .toggle-button{
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px)
}

.slider.round {
    border-radius: 34px
}

.slider.round .toggle-button {
    border-radius: 50%
}

@media(max-width: 1024px) {
    footer .site-info .footer-links {
        display:flex;
        justify-content: space-between;
        flex-direction: column;
    }

    footer .site-info .footer-links .footer-pages {
        flex-direction: column;
        justify-content: space-evenly;
        margin-bottom: 1em;
        align-items: center;
    }
    footer .site-info .footer-links .footer-pages.sub {
        gap: .7em;
    }

    footer .site-info .footer-social {
        margin-right: 0
    }

    footer .site-info {
        flex-direction: column;
        align-items: center;
        gap: 1em
    }

    footer .footer-links {
        max-width: 100%
    }

    footer .site-info {
        flex-direction: column;
        align-items: center;
        gap: 1em
    }
}

@media(max-width: 1024px) {
    main {
        padding-bottom: 27em;
    }
    footer {
        padding:1em;
        width: calc(100% - 2em);
    }

    footer .site-info .footer-pages {
        margin-bottom: 1em
    }
}

input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select {
    height: 38px;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box
}

input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],input[type="button"],input[type="submit"],textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px
}

input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus {
    border: 1px solid var(--accent-color);
    outline: 0
}

label,legend {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600
}

fieldset {
    padding: 0;
    border-width: 0
}

input[type="checkbox"],input[type="radio"] {
    display: inline
}

label>.label-body {
    display: inline-block;
    margin-left: .5rem;
    font-weight: 400
}

article button:hover,article button:active,article button:focus,article .button:hover,article .button:active,article .button:focus {
    color: var(--color-prmy);
    background-color: var(--bg-color-button-secy)
}

.latest-posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 1%
}

article .latest-posts .entry {
    width: 100%
}
.latest-posts .entry {
    margin-bottom: 4em
}
.latest-posts .entry.onlytext {
    padding: .5em;
    border: thick dashed var(--border-color-prmy);
    margin-bottom: 1em;
}
.latest-posts .entry.onlytext .post-content{
    font-weight: bold;
    width: 100%;
}
.latest-posts .entry.onlytext p{
    font-weight: normal;
    margin-bottom: 0;
}
.latest-posts .entry.onlytext .fade{
    display: none;
}
.latest-posts .entry.onlytext a{
    height: auto;
}
.latest-posts a {
    display: flex;
    justify-content: flex-start;
    gap: 1em;
    text-decoration: none;
    flex-wrap: nowrap;
    height: 200px
}

.latest-posts .post-content {
    width: 400px;
    margin: 1%;
    overflow: hidden;
    position: relative
}

.latest-posts .post-content .post-tags {
    font-size: .8em;
    color: var(--color-secy)
}

.latest-posts .post-content p {
    text-decoration: none;
    color: var(--color-prmy);
    margin: .5em 0;
    font-size: .8em
}
.latest-posts .img-wrap{
    width: 300px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 1.5em 0;
    background-image: linear-gradient(to bottom,var(--transparent-color-prmy),var(--bg-color-prmy))
}

.latest-posts h2 {
    width: 100%;
    margin-bottom: 1em;
    text-align: center
}

.latest-posts img {
    border-radius: 12px
}

:root[data-color-scheme="light"] .latest-posts img {
    background-color: var(--bg-color-qaty)
}
.random-box.latest-posts {
    box-shadow: var(--shadow-direction);
    max-height: 475px;
    max-width: 350px;
    margin: auto;
    border-radius: 12px;
    padding: 1em;
}
.latest-posts.random-box .post-content {
    width:300px
}
.latest-posts.random-box{
    text-align: center;
}
.latest-posts.random-box a {
    height: auto;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: .2em
}
@media(min-width: 1280px){
    .random-box-wrap {
        float: right;
    }
    .random-box {
        position: fixed;
        margin-left: auto;
        max-width: 20em;
        right: 5vw;
        top: 9em;
        overflow: hidden;
    }
    body:has(#wpadminbar) .random-box {
            top: calc(9em + 32px);
    }
    .random-box.latest-posts .entry {
        margin-bottom: 0;
    }
    .random-box.latest-posts .entry .post-content .fade {
        display: block;
    }
    .random-box .post-content {
        height: 200px;
    }
}
@media(max-width: 1279.9px){
    .latest-posts.random-box .post-content {
        height: 250px;
        overflow: hidden;
    }
}
@media(min-width: 1280px) and (max-width: 1560px){
    .home article {
        margin-left: 12vw;
    }
}
@media(max-width: 736px) {
    .latest-posts .post-content {
        width:300px
    }

    .latest-posts a {
        height: auto;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        gap: .2em
    }

    .latest-posts:not(.random-box) .post-content .fade {
        display: none
    }
}

.no-list-style {
    list-style: none
}

.no-list-style .icon-check {
    width: 1.2em;
    vertical-align: sub;
    margin-right: 1em
}

.no-list-style .icon-check .primary {
    fill: var(--bg-color-button-tery)
}

.descr {
    font-size: .8em;
    color: var(--color-qaty)
}

.no-list-style.no-overflow {
    overflow-x: auto;
    display: grid;
    justify-content: center;
    max-width: 36em
}

.no-list-style.no-overflow li {
    white-space: nowrap
}

.no-list-style.indent {
    text-indent: -1.5em;
    padding-left: 1em;
    margin-left: 1em
}

@media(max-width: 450px) {
    .no-list-style.no-overflow {
        display:block
    }
}

.outset {
    list-style: disc;
    padding-left: 2em
}

header ul,article ul {
    max-width: 36em;
    list-style: disc inside
}

.table tr:nth-child(2) td{
    border-bottom: thin solid var(--border-color-prmy)
}

.p-intro table {
    float: right;
    margin: 1em
}

@media(max-width: 520px) {
    .p-intro table {
        float:none;
        margin: auto
    }
}

table {
    --table-bg-color: var(--bg-color-secy);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    background-color: var(--bg-color-secy);
    box-shadow: var(--shadow-direction) var(--shadow-color-prmy);
    width: 100%;
    max-width: 30em;
}

td,th {
    vertical-align: top;
    position: relative;
    text-align: left;
    padding: 2%;
    min-width: 45px;
    line-height: 1.2
}
tbody tr:nth-child(2n+1){
    background-color: var(--bg-color-tery);
}
tbody tr:last-child td:first-child {
    border-radius: 0 0 0 12px;
}
tbody tr:last-child td:last-child {
    border-radius: 0 0 12px 0;
}
td:first-child, th:first-child {
    min-width: 24px;
}
.p-intro td,.p-intro th {
    padding: 5%;
    line-height: 1em
}

th {
    border-bottom: thin solid var(--border-color-prmy)
}

td:last-child,th:last-child {
    text-align: right
}

span.lazy {
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: bottom;
    width: 110px;
    height: 62px;
    margin: .3em .3em .1em .3em
}
[popover]:popover-open {
    background-color: var(--bg-color-tery);
    border-radius: 12px;
}
.network-msg::backdrop {
  backdrop-filter: blur(3px); 
  -webkit-backdrop-filter: blur(3px);
}

.iframe-wrap{
    margin-bottom: 0;
}
.iframe-placeholder{
    margin-bottom: .1em;
}
.iframe-placeholder:hover,
#iframe-wrap:hover .iframe-placeholder{
    cursor: pointer;
    filter: brightness(.6);
}
#iframe-popover {
    inset: unset;
    position: absolute;
    width: 300px;
    hyphens: none;
}
#iframe-wrap iframe.hidden {
    height: 0;
    border: none;
}
.instagram-media{
    display: none;
}
.embedplaceholder{
    border: thin solid var(--border-color-prmy);
    border-radius: 12px;
    padding: 1em;
    color: var(--color-qaty);
}
.embeddialog {
    display: flex; 
    justify-content: space-evenly;
    align-items: center;
}
@media(max-width: 720px){
    .embeddialog{
        gap: 1em;
    }
}
.embedplaceholder p {
    font-size: .7rem;
    opacity: .8;
    max-width: 100%;
}
#countdown{
    position: absolute;
    position-anchor: --header;
    top: anchor(bottom);
    width: calc(100% - var(--local-padding) * 2 - var(--header-padding) * 2 );
    font-family: ui-monospace, monospace;
    font-size: 2rem;
    background: var(--bg-color-secy);
    --local-padding: 10px;
    padding-inline: var(--local-padding);
    height: 2em;
    line-height: 2em;
    box-shadow: var(--header-shadow);
    margin: 0;
    text-align: center;
    border-radius: 0;
}
header:has(#countdown){
    margin-bottom: 2em;
}
@supports( NOT (top: anchor(bottom)) ){
    #countdown{
        top: var(--header-height);
    }
}
@media(max-width: 360px){
    #countdown{
        font-size: 1.75rem;
    }
}
@media(min-width: 1024px){
    html[data-color-scheme="light"]{
        #countdown {
            position: relative;
            width: auto;
            margin: 0;
            box-shadow: 5px 5px 0 var(--bg-color-qaty);
            text-align: center;
            border-radius: 4px;
        }
        header:has(#countdown){
            margin-bottom: 1em;
        }
        @supports( NOT (top: anchor(bottom)) ){
            #countdown{
                top: 0;
            }
        }
    }
}

:root[data-color-scheme="light"]{
    .disco-wrap{
        display: none;
    }
}
.disco-wrap{
    position: relative;
    left: 25px;
    cursor: pointer;
}
@-webkit-keyframes rotateDiscoBall {
    0% {-webkit-transform: rotateX(90deg) rotateZ(0deg) rotate(0deg); }
    100% {-webkit-transform: rotateX(90deg) rotateZ(360deg) rotate(0deg); }
}

@keyframes rotateDiscoBall {
    0% {transform: rotateX(90deg) rotateZ(0deg) rotate(0deg); }
    100% {transform: rotateX(90deg) rotateZ(360deg) rotate(0deg); }
}

@-webkit-keyframes rotateDiscoBallMiddle {
    0% {-webkit-transform: rotateX(90deg) rotateY(0deg) rotate(0deg); }
    100% {-webkit-transform: rotateX(90deg) rotateY(-360deg) rotate(0deg); }
}

@keyframes rotateDiscoBallMiddle {
    0% {transform: rotateX(90deg) rotateY(0deg) rotate(0deg); }
    100% {transform: rotateX(90deg) rotateY(-360deg) rotate(0deg); }
}

@-webkit-keyframes reflect {
    0% {-webkit-filter: brightness(60%);}
    50% {-webkit-filter: brightness(120%);}  
    100% {-webkit-filter: brightness(90%);}  
}

@keyframes reflect {
    0% {opacity: 1;}
    50% {opacity: 0.4;}  
    100% {opacity: 1;}  
}

@keyframes bg-color-switch{
    0%{
        background-color: white;
    }
    17%{
        background-color: #770088;
        opacity: .3;
    }
   33%{
        background-color: #004cff;
        opacity: .4;
    }
    50%{
        background-color: #028121;
        opacity: .4;
    }
    67%{
        background-color: #ffee00;
        opacity: .3;
    }
    84%{
        background-color: #ff8d00;
        opacity: .3;
    }
    100%{
        background-color: #e50000;
        opacity: .3;
    }
}


#discoBall {
  -webkit-transform: rotateX(90deg) rotateZ(0deg) rotate(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100px;
  height: 100px;
  position: relative;
  margin-left: -50px;
  -webkit-animation: rotateDiscoBall 18s 0s 2 ease-in-out alternate;
  animation: rotateDiscoBall 18s 0s 2 ease-in-out alternate;
}
.off #discoBall,
:root[data-color-scheme="light"] #discoBall{
    -webkit-transform: rotateX(90deg) rotateZ(0deg) rotate(0deg);
    -webkit-animation: none;
    animation: none;
}
#discoBallLight {
  width: 100px;
  height: 100px;
  position: absolute;
  margin-left: -50px; 
  border-radius: 100%;
  background-color: white; 
  opacity: 0.2;
  -webkit-filter: blur(20px);
  animation: bg-color-switch 18s 0s 2 linear alternate;
}
.off #discoBallLight,
:root[data-color-scheme="light"] #discoBallLight{
  -webkit-animation: none;
  animation: none;    
}

.square {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; 
  position: absolute;
  top: 50px;
  left: 50px;
  width: 6px;
  height: 6px;
  position: absolute;
  transform: rotateX(90deg) rotateY(0deg) translateZ(0px);
}

#discoBallMiddle { 
  height: 100%;
  border-radius: 100%;
  background-color: #111;
  position: absolute;
  background: -webkit-linear-gradient(top, #111, #333);
  background: -moz-linear-gradient(top, #111, #333);
  background: linear-gradient(top, #111, #333);
  -webkit-animation: rotateDiscoBallMiddle 18s ease-in-out 2 alternate;
  animation: rotateDiscoBallMiddle 18s ease-in-out 2 alternate;
}
.off #discoBallMiddle,
:root[data-color-scheme="light"] #discoBallMiddle{
    -webkit-animation: none;
    animation: none;
}
.off .square > div,
:root[data-color-scheme="light"] .square > div{
    -webkit-animation: none !important;
    animation: none !important;
}
html[data-color-scheme="dark"]:has(.disco-wrap):not(:has(.disco-wrap.off)){
    footer {
        overflow: hidden;
    }

    footer::before, footer::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2em;
        height: 2em;
        content: ".";
        mix-blend-mode: screen;
        animation: 18s 0s move 2 ease-in-out alternate;
        filter: blur(1px);
        color: var(--bg-color-prmy);
        pointer-events: none;
        transform: rotate(0deg) scale(12) translateX(-20px);
    }

    footer::before {
        text-shadow: 0.6606632498em 1.0420944601em 7px rgba(255, 0, 197, 0.9), 2.2089280129em 2.3615900745em 7px rgba(255, 175, 0, 0.9), 0.5822107939em 1.911292869em 7px rgba(138, 0, 255, 0.9), 0.9092002348em 0.4745924174em 7px rgba(77, 255, 0, 0.9), 2.4082601863em -0.0830393156em 7px rgba(0, 255, 236, 0.9), 0.0332944804em 1.0943904575em 7px rgba(255, 12, 0, 0.9), 2.3837471603em 0.6854185724em 7px rgba(255, 0, 171, 0.9), 2.4486651988em 2.2490829038em 7px rgba(255, 246, 0, 0.9), -0.0400337359em 1.6016004344em 7px rgba(255, 0, 0, 0.9), 1.3473885596em 1.0641537557em 7px rgba(162, 0, 255, 0.9), 1.7616145018em 1.3882535608em 7px rgba(27, 0, 255, 0.9), 0.0933648003em 1.0288759917em 7px rgba(0, 118, 255, 0.9), 0.9056232172em 0.0524820584em 7px rgba(74, 255, 0, 0.9), 0.8205745536em 1.5501202074em 7px rgba(0, 201, 255, 0.9), 0.1069721266em 0.1991308352em 7px rgba(0, 221, 255, 0.9), 1.6690058813em 1.653518275em 7px rgba(168, 255, 0, 0.9), 1.432875692em 2.3110864566em 7px rgba(0, 255, 85, 0.9), 0.0830416943em -0.0394430908em 7px rgba(0, 255, 210, 0.9), 2.158991006em 0.6676467562em 7px rgba(255, 12, 0, 0.9), 1.12590465em 1.9847323997em 7px rgba(0, 205, 255, 0.9), 0.1207514631em 1.1475408751em 7px rgba(0, 163, 255, 0.9), 0.592994226em 0.3256059574em 7px rgba(255, 107, 0, 0.9), 2.0749376585em 1.2978111473em 7px rgba(255, 254, 0, 0.9), 0.6066361408em 1.9874669174em 7px rgba(255, 0, 149, 0.9), 1.8491340808em -0.4224715838em 7px rgba(255, 25, 0, 0.9), 1.3214919333em 1.8363640348em 7px rgba(30, 0, 255, 0.9), 0.7552931358em 1.217662455em 7px rgba(0, 255, 226, 0.9), 1.8952534728em 0.4594050291em 7px rgba(0, 77, 255, 0.9), -0.0909484869em 2.0889440976em 7px rgba(231, 255, 0, 0.9), 1.9893264113em -0.2762966467em 7px rgba(12, 255, 0, 0.9), 1.8051775166em 1.2933442802em 7px rgba(0, 255, 141, 0.9), 0.2479024373em 1.8886003247em 7px rgba(178, 255, 0, 0.9), 2.4951359079em 0.7475614435em 7px rgba(255, 123, 0, 0.9), 1.5646478443em 0.8459771292em 7px rgba(0, 255, 98, 0.9), 2.4064388039em 0.8456485036em 7px rgba(255, 16, 0, 0.9), 1.5212822653em 2.3965762916em 7px rgba(0, 255, 66, 0.9), 0.5567223318em 0.5622904461em 7px rgba(0, 210, 255, 0.9), 1.2215781126em 1.4621266243em 7px rgba(52, 0, 255, 0.9), 1.7194405776em 0.5460820225em 7px rgba(255, 121, 0, 0.9), 1.2472867412em 1.354051991em 7px rgba(0, 140, 255, 0.9), 2.1140214755em 0.5178457875em 7px rgba(0, 27, 255, 0.9);
        animation-duration: 18s;
        animation-delay: 0s;
    }

    footer::after {
        text-shadow: 2.305865973em 1.3501186689em 7px rgba(255, 0, 177, 0.9), -0.3304613431em 1.6082003262em 7px rgba(255, 0, 140, 0.9), 0.4595205931em 0.2710142033em 7px rgba(255, 69, 0, 0.9), 1.1745995647em 0.2741855785em 7px rgba(255, 0, 182, 0.9), -0.2183366777em 0.3991307167em 7px rgba(0, 41, 255, 0.9), 2.4384426182em 1.717349252em 7px rgba(204, 255, 0, 0.9), 1.0960620727em 0.8645533836em 7px rgba(0, 255, 86, 0.9), 1.2615727809em 1.9159580112em 7px rgba(22, 255, 0, 0.9), 0.1096234336em 1.1057287183em 7px rgba(13, 0, 255, 0.9), 1.4244490292em 0.732970136em 7px rgba(90, 255, 0, 0.9), 0.6255426325em -0.2368584197em 7px rgba(54, 0, 255, 0.9), -0.0714536293em 1.7703691743em 7px rgba(255, 64, 0, 0.9), -0.3782474677em 0.3550883348em 7px rgba(224, 0, 255, 0.9), 0.6238090199em 0.331750078em 7px rgba(146, 0, 255, 0.9), 1.2206338967em 0.7270649282em 7px rgba(119, 255, 0, 0.9), 1.2981889332em 0.9368595964em 7px rgba(0, 138, 255, 0.9), 2.1440175892em -0.3750686152em 7px rgba(255, 0, 247, 0.9), 1.6635393117em -0.0934932354em 7px rgba(255, 5, 0, 0.9), 1.2403994969em -0.2344593366em 7px rgba(0, 255, 50, 0.9), 1.6217875453em -0.2119686824em 7px rgba(0, 251, 255, 0.9), 1.9747810226em 0.5525517607em 7px rgba(0, 39, 255, 0.9), 1.7416216314em 1.0329423905em 7px rgba(250, 255, 0, 0.9), 1.2553227793em -0.2915073566em 7px rgba(255, 0, 24, 0.9), 0.9128058814em -0.3854219168em 7px rgba(0, 255, 239, 0.9), 0.0019776947em 0.7854995348em 7px rgba(255, 212, 0, 0.9), 0.574992925em 1.3421321743em 7px rgba(0, 255, 69, 0.9), 2.1493784634em 1.1427904574em 7px rgba(0, 4, 255, 0.9), 1.7320190412em 1.6903293187em 7px rgba(213, 255, 0, 0.9), 0.7527174528em 1.0595657353em 7px rgba(255, 171, 0, 0.9), -0.2380541937em 1.2892378229em 7px rgba(112, 0, 255, 0.9), -0.1791297514em 0.4206574828em 7px rgba(0, 121, 255, 0.9), 0.1016115858em 0.6937989307em 7px rgba(255, 104, 0, 0.9), 1.0285926929em 1.5895141829em 7px rgba(0, 255, 52, 0.9), 1.431941253em -0.4180470758em 7px rgba(255, 215, 0, 0.9), 2.3788359696em -0.1436625307em 7px rgba(162, 0, 255, 0.9), -0.4961641345em -0.1410450256em 7px rgba(255, 119, 0, 0.9), 1.9170933113em 2.1695301211em 7px rgba(0, 29, 255, 0.9), 2.4949498385em 1.7420770745em 7px rgba(8, 0, 255, 0.9), 0.1337005385em 0.4739314825em 7px rgba(255, 111, 0, 0.9), 0.4645173826em -0.1732288516em 7px rgba(54, 255, 0, 0.9), 2.2689404728em -0.0458353067em 7px rgba(0, 190, 255, 0.9);
        animation-duration: 19s;
        animation-delay: -10s;
    }
}
@keyframes move {
    from {
        transform: rotate(0deg) scale(12) translateX(-20px);
    }

    to {
        transform: rotate(360deg) scale(18) translateX(20px);
    }
}


#bbpress-forums div.bbp-forum-header, 
#bbpress-forums div.bbp-reply-header, 
#bbpress-forums div.bbp-topic-header{
    background: var(--bg-color-secy);
}
#bbpress-forums li.bbp-footer, #bbpress-forums li.bbp-header {
    border: 1px solid var(--border-color-prmy);
    background: var(--bg-color-secy);
}
#bbpress-forums div.odd, #bbpress-forums ul.odd {
    border-top: 1px solid var(--border-color-prmy);
    background: var(--bg-color-tery);
}

#bbpress-forums div.even, #bbpress-forums ul.even {
    border-top: 1px solid var(--border-color-prmy);
    background: var(--bg-color-qaty);
}

@media(min-width: 720px){
    #bbpress-forums, #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-lead-topic, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-search-results, #bbpress-forums ul.bbp-topics {
        font-size: 1em;
    }
}

li.bbp-forum-info, li.bbp-topic-title {
    width: 38%;
}

li.bbp-forum-reply-count, li.bbp-forum-topic-count, li.bbp-topic-reply-count, li.bbp-topic-voice-count {
    width: 20%;
}

.bbp-breadcrumb-root, .bbp-breadcrumb-home, .bbp-breadcrumb-current,
.form-allowed-tags,
span.bbp-breadcrumb-sep {
    display: none;
}
#bbpress-forums ul.bbp-forums, 
#bbpress-forums ul.bbp-lead-topic, 
#bbpress-forums ul.bbp-replies, 
#bbpress-forums ul.bbp-search-results, 
#bbpress-forums ul.bbp-topics,
#bbpress-forums fieldset.bbp-form{
    border: 1px solid var(--border-color-prmy);
}
#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content{
    height: 100px;
}