+
+
+ @import
+ url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Geologica:wght@100..900&display=swap");
+
+ @layers system interface content colorscheme animation demonstration;
+
+ @layer system {
+ :not(details.page) > details.page {
+ position: relative;
+ counter-reset: page 0;
+ }
+
+ :not(details.page) > details.page[open] > summary {
+ display: none;
+ }
+
+ details.page {
+ --pages-page-width: max(20vw, 380px);
+ --pages-page-height: max(40vh, 370px);
+ --pages-page-padding: 1rem;
+ width: var(--pages-page-width, max(20vw, 380px));
+ height: var(--pages-page-height, max(40vh, 370px));
+ box-sizing: border-box;
+ padding: var(--pages-page-padding, 1rem);
+ border-radius: 0.75rem;
+ overflow: hidden;
+ }
+
+ details.page > details.page {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ details.page[open] {
+ z-index: 10;
+ counter-increment: page 1;
+ }
+
+ details.page > :not(details, summary) {
+ z-index: 1;
+ position: relative;
+ }
+
+ details.page > summary {
+ z-index: 5;
+ right: var(--pages-page-padding, 1rem);
+ bottom: var(--pages-page-padding, 1rem);
+ position: absolute;
+ max-width: calc(50% - var(--pages-page-padding, 1rem));
+ min-width: 30px;
+ width: min-content;
+ box-sizing: border-box;
+ padding: 0.4rem 1rem;
+ display: flex;
+ gap: 0.2rem;
+ justify-content: center;
+ cursor: pointer;
+ border-radius: 0.75rem;
+ }
+
+ details.page[open] > summary {
+ left: var(--pages-page-padding, 1rem);
+ right: unset;
+ }
+
+ details.page[open] > summary:before {
+ content: var(--localization-button-previous, "Previous");
+ }
+
+ details.page[open] > details.page:not([open]) > summary:before {
+ content: var(--localization-button-next, "Next");
+ }
+ }
+
+ @layer content {
+ @layer page {
+ details.page > section.content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ padding: var(--pages-page-padding, 1rem);
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ details.page > section.content > span:has(> :is(span, a).separated) {
+ justify-content: space-between;
+ }
+
+ details.page > section.content > :is(h2, h3) {
+ margin: unset;
+ margin-top: 0.2rem;
+ text-align: center;
+ font-weight: 200;
+ }
+ }
+
+ @layer author {
+ details.page#author > section.content {
+ --pages-author-avatar-diameter: 200px;
+ padding: var(--pages-page-padding, 1rem)
+ calc(var(--pages-page-padding, 1rem) + 0.5rem);
+ gap: unset;
+ }
+
+ details.page#author > section.content > h2 {
+ font-weight: 500;
+ font-family: "Cascadia Code";
+ }
+
+ details.page#author > section.content > h2 + span#name {
+ margin-bottom: 1.2rem;
+ align-self: center;
+ font-weight: 400;
+ font-family: "Cascadia Code";
+ }
+
+ details.page#author > section.content > span {
+ margin-bottom: 0.6rem;
+ display: inline-flex;
+ font-family: "Cascadia Code";
+ }
+
+ details.page#author > section.content > div.x:has(> div.y > img#avatar) {
+ --pages-author-avatar-diameter: 100px;
+ z-index: -10;
+ width: 100%;
+ height: calc(100% - (var(--pages-page-padding, 1rem) * 2 + 3rem));
+ }
+
+ details.page#author > section.content > div.x > div.y:has(> img#avatar) {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ details.page#author > section.content > div.x > div.y > img#avatar {
+ z-index: 20;
+ position: absolute;
+ width: var(--pages-author-avatar-diameter, 100px);
+ height: var(--pages-author-avatar-diameter, 100px);
+ align-self: center;
+ object-fit: cover;
+ border-radius: 5rem 5rem 100% 100%;
+ }
+ }
+
+ @layer xiaomi {
+ details.page#xiaomi > section.content > img.xiaomi {
+ --pages-xiaomi-image-diameter: 120px;
+ position: absolute;
+ right: 15%;
+ bottom: 30%;
+ width: var(--pages-xiaomi-image-diameter, 120px);
+ height: var(--pages-xiaomi-image-diameter, 120px);
+ border-radius: 0.75rem;
+ }
+ }
+
+ @layer destiny {
+ details.page#destiny > section.content > img#masha {
+ position: absolute;
+ top: -10%;
+ height: 150%;
+ align-self: center;
+ }
+
+ details.page#destiny > section.content > img.masha.red {
+ z-index: 100;
+ position: absolute;
+ top: -10%;
+ height: 150%;
+ align-self: center;
+ mix-blend-mode: overlay;
+ }
+
+ details.page#destiny > section.content > div#css {
+ z-index: 50;
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-sizing: border-box;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ mix-blend-mode: multiply;
+ /* font-size: 0.8rem; */
+ }
+
+ details.page#destiny > section.content > div#css > div.color {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ details.page#destiny > section.content > div#css > div.color > span.flow {
+ word-break: break-all;
+ position: absolute;
+ scale: 1.5;
+ font-family: "Cascadia Code", sans-serif;
+ /* font-size: 0.7rem; */
+ /* height: 130rem; */
+ width: 100%;
+ overflow: hidden;
+ /* line-height: 1rem; */
+ }
+ }
+
+ @layer license {
+ details.page#license > section.content > p {
+ margin: unset;
+ font-family: "Cascadia Code", sans-serif;
+ font-size: smaller;
+ }
+ }
+ }
+
+ @layer colorscheme {
+ details.page {
+ outline: var(
+ --pages-page-outline,
+ 2px solid var(--invert-background-color, #fff)
+ );
+ background-color: var(
+ --pages-page-background-color,
+ var(--section-background-color, #000)
+ );
+ }
+
+ details.page > summary {
+ /* outline-offset: -2px; */
+ }
+
+ details.page > summary:hover {
+ /* outline-offset: 2px;
+ transition: outline-offset 0.1s ease-in; */
+ }
+
+ details.page > summary:active {
+ filter: brightness(0.8);
+ /* outline-offset: -2px;
+ transition: outline-offset 0.05s ease-out; */
+ }
+
+ details.page[open] > summary {
+ color: var(
+ --pages-button-previous-text-color,
+ var(--pages-button-previous-text-color, var(--button-text-color, #000))
+ );
+ /* outline: 2px solid
+ var(
+ --pages-button-previous-background-color,
+ var(
+ --pages-button-previous-background-color,
+ var(--button-background-color, #fff)
+ )
+ ); */
+ background-color: var(
+ --pages-button-previous-background-color,
+ var(
+ --pages-button-previous-background-color,
+ var(--button-background-color, #fff)
+ )
+ );
+ }
+
+ details.page[open] > details.page:not([open]) > summary {
+ color: var(
+ --pages-button-next-text-color,
+ var(--pages-button-next-text-color, var(--button-text-color, #000))
+ );
+ /* outline: 2px solid
+ var(
+ --pages-button-next-background-color,
+ var(
+ --pages-button-next-background-color,
+ var(--button-background-color, #fff)
+ )
+ ); */
+ background-color: var(
+ --pages-button-next-background-color,
+ var(
+ --pages-button-next-background-color,
+ var(--button-background-color, #fff)
+ )
+ );
+ }
+
+ details.page#author
+ > section.content
+ > div.x
+ > div.y:has(> img#avatar)
+ > div.effects {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--background-color, #000);
+ filter: contrast(50);
+ }
+
+ details.page#author
+ > section.content
+ > div.x
+ > div.y:has(> img#avatar)
+ > div.effects
+ > div.border {
+ z-index: 10;
+ position: absolute;
+ width: calc(var(--pages-author-avatar-diameter, 100px) + 1rem);
+ height: var(--pages-author-avatar-diameter, 100px);
+ border-radius: 100%;
+
+ filter: blur(25px);
+ /* mix-blend-mode: multiply; */
+ }
+
+ details.page#author
+ > section.content
+ > div.x
+ > div.y:has(> img#avatar)
+ > div.effects
+ > div.border:nth-of-type(1) {
+ background-color: white;
+ }
+
+ details.page#author
+ > section.content
+ > div.x
+ > div.y:has(> img#avatar)
+ > div.effects
+ > div.border:nth-of-type(2) {
+ width: var(--pages-author-avatar-diameter, 100px);
+ height: calc(var(--pages-author-avatar-diameter, 100px) + 1rem);
+ background-color: white;
+ }
+
+ details.page#author
+ > section.content
+ > div.x
+ > div.y
+ > img#avatar
+ ~ div.border:nth-of-type(3) {
+ background-color: white;
+ }
+ }
+
+ @layer animation {
+ @keyframes determination-x {
+ 0% {
+ transform: translateX(20%);
+ }
+
+ 100% {
+ transform: translateX(-20%);
+ }
+ }
+
+ @keyframes determination-y {
+ 0%,
+ 5% {
+ transform: translateY(30px);
+ }
+
+ 95%,
+ 100% {
+ transform: translateY(-30px);
+ }
+ }
+
+ @keyframes determination-rotate {
+ 0% {
+ rotate: 10deg;
+ }
+
+ 100% {
+ rotate: -10deg;
+ }
+ }
+
+ @keyframes determination-border {
+ 0% {
+ transform: rotate(0deg) translateY(9px);
+ }
+
+ 100% {
+ transform: rotate(360deg) translateY(-9px);
+ }
+ }
+
+ details.page#author > section.content > div.x:has(> div.y > img#avatar) {
+ animation-name: determination-x;
+ animation-duration: 1.8s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: forwards;
+ animation-timing-function: cubic-bezier(0.5, 0, 0.55, 1);
+ }
+
+ details.page#author > section.content > div.x > div.y:has(> img#avatar) {
+ animation-name: determination-y;
+ animation-duration: 2.2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: forwards;
+ animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1);
+ }
+
+ details.page#author > section.content > div.x > div.y > img#avatar {
+ animation-name: determination-rotate;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: forwards;
+ animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
+ }
+
+ details.page#author
+ > section.content
+ > div.x
+ > div.y:has(> img#avatar)
+ > div.effects
+ > div.border {
+ animation-name: determination-border;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: forwards;
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+ }
+
+ details.page#author
+ > section.content
+ > div.x
+ > div.y:has(> img#avatar)
+ > div.effects
+ > div.border:nth-of-type(1) {
+ animation-duration: 2s;
+ }
+
+ details.page#author
+ > section.content
+ > div.x
+ > div.y:has(> img#avatar)
+ > div.effects
+ > div.border:nth-of-type(2) {
+ animation-duration: 3s;
+ }
+
+ details.page#author
+ > section.content
+ > div.x
+ > div.y:has(> img#avatar)
+ > div.effects
+ > div.border:nth-of-type(3) {
+ animation-duration: 1.7s;
+ }
+
+ @keyframes page-from {
+ 0% {
+ top: 0px;
+ opacity: 1;
+ filter: blur(0px);
+ }
+
+ 100% {
+ top: -10px;
+ opacity: 0;
+ filter: blur(1px);
+ }
+ }
+
+ @keyframes page-to {
+ 0% {
+ top: 10px;
+ opacity: 0;
+ filter: blur(1px);
+ }
+
+ 100% {
+ top: 0px;
+ opacity: 1;
+ filter: blur(0px);
+ }
+ }
+
+ /* details.page:has(> summary:focus) > section.content {
+ animation-name: page-to;
+ animation-duration: 0.1s;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
+ animation-timing-function: ease-out;
+ }
+
+ details.page[open]:has(> details.page > summary:focus) > section.content {
+ animation-name: page-from;
+ animation-duration: 0.1s;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
+ animation-timing-function: ease-in;
+ } */
+
+ /* details.page[open]:has(> summary:focus) > section.content {
+ animation-name: page-from;
+ animation-duration: 0.1s;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
+ animation-timing-function: ease-out;
+ }
+
+ details.page:has(> details.page[open] > summary:focus) > section.content {
+ animation-name: page-to;
+ animation-duration: 0.1s;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
+ animation-timing-function: ease-in;
+ } */
+
+ @keyframes destiny-masha {
+ 0% {
+ transform: translateX(-10px) translateY(10px);
+ }
+
+ 100% {
+ transform: translateX(-20px) translateY(-20px);
+ }
+ }
+
+ details.page#destiny > section.content > img#masha {
+ animation-name: destiny-masha;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: forwards;
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+ }
+
+ details.page#destiny > section.content > img.masha.red {
+ animation-name: destiny-masha;
+ animation-duration: 2s;
+ animation-delay: 0.4s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: forwards;
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+ }
+
+ @keyframes destiny-flow {
+ 0% {
+ transform: translateY(0px);
+ }
+
+ 100% {
+ transform: translateY(-1000px);
+ }
+ }
+
+ @keyframes destiny-color {
+ 0%,
+ 30% {
+ font-size: 0.7rem;
+ font-weight: 300;
+ line-height: 0.7rem;
+ opacity: 1;
+ color: rgb(0, 0, 0);
+ }
+
+ 100% {
+ font-size: 1.2rem;
+ font-weight: 900;
+ line-height: 1.5rem;
+ opacity: 1;
+ color: rgb(255, 0, 0);
+ filter: blur(0px);
+ }
+ }
+
+ @keyframes destiny-rotate {
+ 0% {
+ rotate: -10deg;
+ }
+
+ 100% {
+ rotate: 10deg;
+ }
+ }
+
+ details.page#destiny > section.content > div#css {
+ animation-name: destiny-rotate;
+ animation-duration: 3s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: forwards;
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+ }
+
+ details.page#destiny > section.content > div#css > div.color {
+ animation-name: destiny-color;
+ animation-duration: 4s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: forwards;
+ animation-timing-function: cubic-bezier(1, 0, 0.5, 1);
+ }
+
+ details.page#destiny > section.content > div#css > div.color > span.flow {
+ animation-name: destiny-flow;
+ animation-duration: 0.6s;
+ animation-iteration-count: infinite;
+ animation-fill-mode: forwards;
+ animation-timing-function: linear;
+ }
+ }
+
+ @layer demonstration {
+ :root {
+ @layer colorscheme {
+ @layer system {
+ --text-color: #fff;
+ --link-text-color: #7c84f7;
+ --link-hover-text-color: #56b8f3;
+ --link-active-text-color: #6f54d9;
+ --background-color: #000;
+ --invert-background-color: #fff;
+ --section-background-color: #000;
+ --button-background-color: #000;
+ --button-text-color: #fff;
+ }
+
+ @layer pages {
+ @layer page {
+ --pages-page-background-color: #000;
+ --pages-page-outline: 2px solid var(--invert-background-color, #fff);
+ }
+
+ @layer button {
+ --pages-button-background-color: #fff;
+ --pages-button-next-background-color: #fff;
+ --pages-button-previous-background-color: #fff;
+ --pages-button-text-color: #000;
+ --pages-button-next-text-color: #000;
+ --pages-button-previous-text-color: #000;
+ }
+ }
+ }
+
+ @layer localization {
+ --localization-button-next: "Next";
+ --localization-button-previous: "Previous";
+ }
+
+ color: var(--text-color, #fafafa);
+ font-family: "Geologica", sans-serif;
+ }
+
+ body {
+ --gap: 2rem;
+ margin: unset;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--background-color, #000);
+ }
+
+ .unselectable {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ h1 {
+ margin: unset;
+ margin-bottom: var(--gap, 2rem);
+ font-weight: 200;
+ }
+
+ strong:has(+ h1) {
+ margin-left: 2.5rem;
+ margin-bottom: -0.8rem;
+ font-family: "Cascadia Code", sans-serif;
+ font-weight: 200;
+ text-decoration: line-through;
+ color: red;
+ }
+
+ a {
+ font-family: "Cascadia Code", sans-serif;
+ text-decoration: unset;
+ color: var(--link-text-color, blue);
+ }
+
+ a:hover {
+ color: var(--link-hover-text-color, blue);
+ }
+
+ a:is(:active, :focus) {
+ color: var(--link-active-text-color, blue);
+ }
+
+ span#current_page {
+ z-index: 1000;
+ margin-top: var(--gap, 2rem);
+ padding: 0.4rem 1rem;
+ display: flex;
+ gap: 0.3rem;
+ border-radius: 0.75rem;
+ border: 2px solid var(--invert-background-color, #fff);
+ background-color: var(--background-color, #000);
+ }
+
+ span#current_page:after {
+ content: counter(page);
+ font-variant-numeric: tabular-nums;
+ }
+ }
+
+
+
+ 
+ 
+
+
+ И одуренные молитвами, проповедями, воззваниями, процессиями, картинами, газетами, пушечное мясо, сотни
+ тысяч людей однообразно одетые, с разнообразными орудиями убийства, оставляя родителей, жен, детей, с тоской
+ на сердце, но с напущенным молодечеством, едут туда, где они, рискуя смертью, будут совершать самое ужасное
+ дело: убийство людей, которых они не знают и которые им ничего дурного не сделали. И за ними едут врачи,
+ сестры милосердия, почему-то полагающие, что дома они не могут служить простым, мирным, страдающим людям, а
+ могут служить только тем людям, которые заняты убийством друг друга. Остающиеся же дома радуются известиям
+ об убийстве людей и, когда узнают, что убитых японцев много, благодарят за это кого-то, кого они называют
+ Богом.
+
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+