header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--vertical-space-2) var(--horizontal-space-2);
    margin: 10px;
    padding-bottom: 0;
    box-sizing: border-box;
    opacity: 0.2;
    transition: opacity 0.25s ease;
}
header:not(.is-at-top) .ContentItem,
header:not(.is-at-top) .ContentItem * {
    color: transparent !important;
}
header.is-at-top {
    opacity: 1;
}
header:hover {
    opacity: 1;
}
header:hover:not(.is-at-top) .HeaderText,
header:hover:not(.is-at-top) .HeaderVersions,
header:hover:not(.is-at-top) .HeaderInfoBtn {
    color: var(--color-9) !important;
}
header:hover:not(.is-at-top) .HeaderText strong {
    color: var(--color-5) !important;
}
header:hover:not(.is-at-top) .HeaderText a,
header:hover:not(.is-at-top) .HeaderVersions a {
    color: var(--color-3) !important;
}
header.is-info-open {
    opacity: 1;
    background-color: rgb(197, 197, 197);

}
header.is-info-open .HeaderBar,
header.is-info-open .HeaderBar * {
    color: rgb(0, 0, 0) !important;
    -webkit-text-stroke-color: rgb(0, 0, 0) !important;
}
header.is-info-open .HeaderDescription,
header.is-info-open .HeaderDescription * {
    color: var(--color-9) !important;
}
header.is-info-open .HeaderDescription strong {
    color: var(--color-5) !important;
}
header.is-info-open .HeaderDescription a {
    color: var(--color-3) !important;
}
header .ContentItem,
header .ContentItem * {
    transition: color 0.25s ease;
}

main {
    padding: var(--vertical-space-4) var(--horizontal-space-3);
    padding-top: var(--header-height, 8rem);
}

a {
    text-decoration: underline;
    text-decoration-thickness: var(--line-thickness-4);
    text-underline-offset: var(--line-offset-1);
}

:root {
    --text-stroke-width: 0.2px;
    --text-stroke-color: rgb(0, 0, 0);
    --page-bg: rgb(251, 251, 251);
    --scroll-image-blur: 17px;
}

html {
    -webkit-text-stroke-width: var(--text-stroke-width);
    -webkit-text-stroke-color: var(--text-stroke-color);
    background-color: var(--page-bg);
    color: var(--text-fill-color, rgb(0, 0, 0));
}

body {
    background: transparent;
}

body.is-scroll-blend {
    mix-blend-mode: difference;
    filter: blur(5px);
}
html.is-v2-ambient {
    --page-bg: rgb(255, 255, 255);
}
header .ContentBlock {
    margin-top: 0;
}
html.is-v2-ambient .ContentBlock .ContentTitle,
html.is-v2-ambient .ContentBlock .ContentTitle * {
    filter: none;
    mix-blend-mode: normal;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
    color: inherit;
}
html.is-v2-ambient .ContentBlock .ContentTitle .scroll-char {
    color: inherit !important;
    -webkit-text-stroke-width: 0 !important;
    -webkit-text-stroke-color: transparent !important;
}
html.is-v2-ambient .ContentBlock .ContentTitle h2 {
    color: transparent;
    -webkit-text-stroke-width: 0.7px;
}
html.is-v2-ambient main .ContentBlock:not(.ContentBlock--blog):not(.ContentBlock--media) {
    contain: layout style paint;
}
html.is-v2-ambient main .ContentBlock:not(:hover):not(.ContentBlock--blog):not(.ContentBlock--media) {
    filter: blur(5px);
    transition: filter 0.3s ease;
}
html.is-v2-ambient main .ContentBlock:hover {
    filter: none;
}
html.is-v2-ambient:has(header.is-info-open) main .ContentBlock,
html.is-v2-ambient.is-v2-info-open main .ContentBlock {
    filter: none;
    transition: none;
}
html.is-v2-ambient main .ContentBlock .ContentItem {
    color: rgb(0, 0, 0);
    -webkit-text-stroke-width: var(--v2-stroke-width, 3px);
    -webkit-text-stroke-color: rgb(0, 0, 0);
    mix-blend-mode: normal;
    transition: mix-blend-mode 0.3s ease, color 0.3s ease;
}
html.is-v2-ambient main .ContentBlock:not(:hover) .ContentItem,
html.is-v2-ambient main .ContentBlock:not(:hover) .ContentItem *:not(.scroll-char) {
    color: rgb(0, 0, 0);
    -webkit-text-stroke-width: var(--v2-stroke-width, 3px);
    -webkit-text-stroke-color: rgb(0, 0, 0);
}
html.is-v2-ambient main .ContentBlock:not(:hover) .ContentText,
html.is-v2-ambient main .ContentBlock:not(:hover) .ContentText em,
html.is-v2-ambient main .ContentBlock:not(:hover) .ContentText strong,
html.is-v2-ambient main .ContentBlock:not(:hover) .ContentItemTitle,
html.is-v2-ambient main .ContentBlock:not(:hover) .ContentDate,
html.is-v2-ambient main .ContentBlock:not(:hover) .ContentText a {
    color: inherit;
    -webkit-text-stroke-color: inherit;
}
html.is-v2-ambient main .ContentBlock:not(:hover) .ContentText em {
    font-style: normal;
}
html.is-v2-ambient main .ContentBlock:not(:hover) .scroll-char {
    -webkit-text-stroke-width: var(--v2-stroke-width, 3px);
    mix-blend-mode: normal;
}
html.is-v2-ambient main .ContentBlock:hover .ContentItem {
    mix-blend-mode: normal;
}
html.is-v2-ambient main .ContentBlock:hover .ContentItem,
html.is-v2-ambient main .ContentBlock:hover .ContentItem * {
    -webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: rgb(0, 0, 0);
    color: var(--color-1);
}
html.is-v2-ambient .ContentBlock:hover .ContentText {
    color: var(--color-1);
}
html.is-v2-ambient .ContentBlock:hover .ContentText a {
    color: var(--color-9);
}
html.is-v2-ambient .ContentBlock:hover .ContentItemTitle {
    color: var(--color-8);
}
html.is-v2-ambient .ContentBlock:hover .ContentDate {
    color: var(--color-5);
}
html.is-v2-ambient .ContentBlock:hover .ContentText em {
    font-style: normal;
    color: var(--color-9);
}
html.is-v2-ambient .ContentBlock:hover .ContentText strong {
    color: var(--color-8);
}
html.is-v2-ambient .ContentBlock:hover .scroll-char {
    color: var(--color-9) !important;
    -webkit-text-stroke-width: 0.2px !important;
    -webkit-text-stroke-color: rgb(0, 0, 0) !important;
}
html.is-v2-ambient .ContentBlock:hover .ImageContainer img {
    mix-blend-mode: normal;
}
html.is-v2-ambient header .ContentBlock .ContentItem,
html.is-v2-ambient header .ContentBlock .ContentItem * {
    filter: none;
    mix-blend-mode: normal;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
    transition: color 0.25s ease;
}
html.is-v2-ambient header .ContentBlock:hover .ContentItem,
html.is-v2-ambient header .ContentBlock:hover .ContentItem * {
    filter: none;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
}
.ImageContainer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--horizontal-space-2);
    padding: var(--horizontal-space-2);
}
.ImageFrame {
    position: relative;
    display: inline-block;
    line-height: 0;
    isolation: isolate;
    overflow: visible;
}
.ImageMat {
    position: absolute;
    inset: -5px;
    z-index: 0;
    background-color: var(--image-mat-color, transparent);
    pointer-events: none;
    border-radius: 5%;
    filter: blur(8px);
}
.ImageContainer img {
   width: 100px;
   cursor: pointer;
   border: none;
   outline: none;
   position: relative;
   z-index: 1;
   display: block;
   border: 0.5px solid var(--color-9);
   height: auto;
   mix-blend-mode: difference;
   filter: none;
}
html.is-scroll-burst .ContentBlock:not(.ContentBlock--media) .ImageContainer img {
   filter: blur(var(--scroll-image-blur));
}
.ContentBlock.is-expanded {
    grid-column: 1 / -1;
}
.ContentBlock.is-expanded .ImageContainer {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.ContentBlock.is-expanded .ImageFrame {
    flex: 0 1 50%;
    max-width: 50%;
    box-sizing: border-box;
}
.ContentBlock.is-expanded .ImageContainer img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.ImageDescription {
    display: none;
}
.ContentBlock.is-expanded .ImageFrame {
    line-height: var(--line-height-1);
}
.ContentBlock.is-expanded .ImageDescription {
    display: block;
    margin: auto;
    text-align: center;
    margin-top: var(--vertical-space-1);
}
.HeaderBar {

    align-items: baseline;
    gap: var(--horizontal-space-4);
    flex-wrap: wrap;
}
.HeaderBarContent {
    display: flex;
    gap: var(--horizontal-space-2);
    align-items: baseline;
    flex-wrap: wrap;
}
.HeaderInfoBtn {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: var(--line-thickness-4);
    text-underline-offset: var(--line-offset-1);
}
.HeaderDescription {
    display: none;
}
header.is-info-open .HeaderDescription {
    display: block;
}
.HeaderText,
.HeaderVersions {
    width: 700px;
    color: var(--color-9);
}
@media only screen and (max-width: 700px) {
    .HeaderText{
        width: auto;
    }
}
.HeaderText em,
.HeaderVersions em {
    color: var(--color-9);
}
.Content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--horizontal-space-9);
    align-items: start;
    width: 100%;
}
.Content--page {
    gap: var(--horizontal-space-4);
}
.ContentBlock {
   margin-top: var(--vertical-space-9);
   background-color: var(--content-block-scroll-bg, transparent);
   min-width: 0;
   grid-column: auto;
}
.ContentBlock--blog,
.ContentBlock--media {
   grid-column: 1 / -1;
}
.ContentBlock--media .MediaImageContainer {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--horizontal-space-2);
    width: 100%;
}
.ContentBlock--media .MediaImageContainer .ImageFrame {
    flex: 0 1 50%;
    max-width: 50%;
    box-sizing: border-box;
}
.ContentBlock--media .MediaImageContainer img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    filter: none;
    mix-blend-mode: normal;
}
.ContentBlock--media .ImageDescription {
    display: block;
    opacity: 0.5;
    text-align: center;
    margin-top: var(--vertical-space-1);
}
.ContentItem {
    margin-bottom: var(--vertical-space-5);
    text-align: left;
    min-width: 0;
}
.ContentText {
    display: flow-root;
    overflow-wrap: anywhere;
}
.ContentBlock--blog .ContentText {
   width: 700px;
}
.ContentBlock.ContentBlock--media {
    margin-top: var(--vertical-space-0)!important;
}
.ContentBlock--blog img {
    width: 140px;
    margin-top: var(--vertical-space-1);
 }
@media only screen and (max-width: 700px) {
    .ContentBlock--blog .ContentText {
        width: auto;
     }
  }
.ContentBlock--media .ImageFrame {
    padding: var(--vertical-space-3);
}
.ContentBlock .ContentTitle{
   text-align: left;
   color: var(--color-5);
   margin-bottom: var(--vertical-space-5);
}
.ContentBlock .ContentTitle h2 {
   color: rgb(179, 179, 179);
   -webkit-text-stroke-width: 0.3px;
}
.ContentItemTitle {
    color: var(--color-8);
}
.ContentDate {
    color: var(--color-5);
}
.HeaderText strong{
    color: var(--color-5);
    font-style: normal;
}
.HeaderText a{
    color: var(--color-3);
}

.ContentText {
    font-style: normal;
    color: var(--color-1);
}
.ContentText em{
    font-style: normal;
    color: var(--color-9);
}
.ContentText strong{
   color: var(--color-8);
}
.ContentText a{
    color: rgb(187, 0, 255);
}

html:not(.is-v1-ambient) .ContentBlock--blog .ContentText,
html:not(.is-v1-ambient) .ContentBlock--blog .ContentText em,
html:not(.is-v1-ambient) .ContentBlock--blog .ContentText strong,
html:not(.is-v1-ambient) .ContentBlock--blog .ContentText a,
html:not(.is-v1-ambient) .ContentBlock--blog .ContentText * {
    color: rgb(0, 0, 0);
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
}

html.is-v1-ambient header:not(.is-at-top) ~ main .ContentBlock--blog .ContentText,
html.is-v1-ambient header:not(.is-at-top) ~ main .ContentBlock--blog .ContentText * {
    color: transparent !important;
}
html.is-v1-ambient header:hover:not(.is-at-top) ~ main .ContentBlock--blog .ContentText,
html.is-v1-ambient header:hover:not(.is-at-top) ~ main .ContentBlock--blog .ContentText *,
html.is-v1-ambient main:hover .ContentBlock--blog .ContentText,
html.is-v1-ambient main:hover .ContentBlock--blog .ContentText * {
    color: var(--text-fill-color, var(--color-9)) !important;
    -webkit-text-stroke-color: var(--text-stroke-color, rgb(0, 0, 0)) !important;
}
html.is-v1-ambient header:hover:not(.is-at-top) ~ main .ContentBlock--blog .ContentText strong,
html.is-v1-ambient main:hover .ContentBlock--blog .ContentText strong {
    color: var(--color-5) !important;
}
html.is-v1-ambient header:hover:not(.is-at-top) ~ main .ContentBlock--blog .ContentText a,
html.is-v1-ambient main:hover .ContentBlock--blog .ContentText a {
    color: var(--color-3) !important;
}

html.is-v2-ambient .ContentBlock--blog,
html.is-v2-ambient .ContentBlock--blog .ContentText,
html.is-v2-ambient .ContentBlock--blog .ContentText em,
html.is-v2-ambient .ContentBlock--blog .ContentText strong,
html.is-v2-ambient .ContentBlock--blog .ContentText a,
html.is-v2-ambient .ContentBlock--blog .ContentText * {
    color: rgb(0, 0, 0);
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
    filter: none;
    mix-blend-mode: normal;
}

@media only screen and (max-width: 800px) {
    .Content {
        display: block;

    }
    .HeaderText {
        width: 100%;
    }
  }