From 1e61c94728684f87910817013de3b35fe8adf8f5 Mon Sep 17 00:00:00 2001
From: Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
Date: Tue, 10 Jun 2025 23:53:36 +0700
Subject: [PATCH] added css (for linking)

---
 index.css | 729 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 729 insertions(+)
 create mode 100644 index.css

diff --git a/index.css b/index.css
new file mode 100644
index 0000000..154b5ac
--- /dev/null
+++ b/index.css
@@ -0,0 +1,729 @@
+@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;
+  }
+}