/* -+-----------------+--------------------------+---- */
/* +------------+------------+--------------+------+-- */
/* ----+--------------+------------*=@---------------- */
/* ---------------+---------------@@@@@-------+------- */
/* --------+----------------------*@@@%-----------+--- */
/* --+----------------+------------%%%%=-------------- */
/* ---------------------------=*%%::-+**=.**=--+------ */
/* ---------+----------------#@@@%-::::::::%%--------- */
/* ----+---------+-----------@@@@%==----::-%@%-------- */
/* -------------------------*@@@@#*+=-----=@@@-------- */
/* -+------+---------+------@@@-#%#+==---=--@@%----+-- */
/* -----+--------+---------@@@*-=%#*+=--==-*@@*------- */
/* -----------------------+@@=---##*==-===-@@%---+---- */
/* --+-----+- Ah shit, here we go again. -#@*--------- */
/* ----------------+------@@@----%%*++====+@--------+- */
/* ------+----------------@@@---%%#*+=++-+@=----+----- */

/* START */

@font-face {
    font-family: 'Ronzino Variable';
    src: url('../fonts/public/Ronzino-VFMod.woff2') format('woff2'),
        url('../fonts/public/Ronzino-VFMod.ttf') format('truetype');
}

@font-face {
    font-family: 'CorpoEmCadeia';
    src: url('../fonts/public/CorpoEmCadeia.woff2') format('woff2'),
        url('../fonts/public/CorpoEmCadeia.ttf') format('truetype');
}

:root {
    /* variables */
    --black: #101010;
    --white: #fff;
    --grey-1: #808080;
    --grey-2: #E0E0E0;

    --gold: #9D8407;
    --gold: #a6874d;
    --orange: #FF2600;
    --yellow: #b3bd0d;

    --gradient-1: linear-gradient(to right, var(--orange) 10%, var(--gold), var(--yellow) 90%);

    --sans-font: "Ronzino Variable", sans-serif;
    --cvf-font: "CorpoEmCadeia", sans-serif;

    --theme-background: var(--white);
    --theme-background-accent: var(--gold);

    --theme-text: var(--black);
    --theme-text-alt: var(--gold);
    --theme-text-accent: var(--yellow);
    --theme-text-alt-accent: var(--orange);

    --theme-text-hover: var(--yellow);
    --theme-text-alt-hover: var(--yellow);

    --theme-graphics-background: blue;
    --theme-graphics-background-accent: blue;
    --theme-graphics-text: blue;
    --theme-graphics-text-accent: blue;

    --theme-btn-background: var(--white);
    --theme-btn-background-hover: blue;
    --theme-btn-background-accent: blue;
    --theme-btn-text: var(--gold);
    --theme-btn-text-alt: var(--black);
    --theme-btn-text-alt-accent: var(--orange);
    --theme-btn-text-alt-hover: var(--yellow);

    --theme-btn-text-accent: blue;
    --theme-btn-stroke: blue;
    --theme-btn-stroke-accent: blue;

    --outer-padding: 2rem;

    --100vh: calc(var(--vh) * 100);
}

.bg-grain {
    opacity: 0.2;
}

::scrollbar {
    display: none;
}

::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px transparent;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0px;
}

@media screen and (hover:hover) {
    ::-webkit-scrollbar-thumb:hover {
        background: transparent;
    }
}

::selection {
    background-color: var(--theme-background-accent);
    color: var(--theme-background);
}

* {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    position: relative;
    font-size: 10px;
    background-color: var(--theme-background);
    color: var(--theme-text);
    height: var(--100vh);
    min-height: var(--100vh);
    width: 100vw;
    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--sans-font);
    font-variation-settings: 'wght'120, 'slnt'0;
    letter-spacing: .1em;
    line-height: 1;

    padding: var(--outer-padding);
    padding: .2rem var(--outer-padding) var(--outer-padding);
    margin-top: var(--outer-padding);
    overflow-x: hidden;
    overflow-y: scroll;

    height: calc(var(--100vh) - var(--outer-padding) * 1);
    min-height: calc(var(--100vh) - var(--outer-padding) * 1);
}

@media screen and (max-width: 1920px) {

    html,
    body {
        /*        font-size: calc(.6rem + (100vw - 1920px) / 400);*/
    }
}

@media screen and (max-width: 1760px) {

    html,
    body {
        /*        font-size: calc(.55rem + (100vw - 1760px) / 400);*/
    }
}

@media screen and (max-width: 1440px) {

    html,
    body {
        font-size: calc(.55rem + (100vw - 1440px) / 400);
    }
}

@media screen and (max-width: 1280px) {

    html,
    body {
        font-size: calc(.55rem + (100vw - 1280px) / 400);
    }
}

@media screen and (max-width: 1080px) {

    html,
    body {
/*        font-size: calc(.4825rem + (100vw - 1080px) / 400);*/
    }
}

@media screen and (max-width: 900px) {
    :root {
/*        --outer-padding: .5rem;*/
    }

    html,
    body {
        font-size: calc(7.5px + (100vw - 900px) / 400);
    }
}

@media screen and (max-width: 700px) {

    html,
    body {
/*        font-size: calc(8.5px + (100vw - 700px) / 400);*/
    }
}

@media screen and (max-width: 500px) {

    html,
    body {
        font-size: calc(4.5px + (100vw - 500px) / 400);
    }
}

@media screen and (max-width: 350px) {

    html,
    body {
        font-size: calc(4.5px + (100vw - 350px) / 400);
    }
}

/* TEXT SETUP */

.text,
.title,
.label {
    transition: all .25s cubic-bezier(0.33, 1, 0.68, 1);
    transition-property: font-size, letter-spacing, font-variation-settings, background-color;
    line-height: 1;
}

/* GENERAL */

.text {
    --wght: 120;
    --slnt: 0;

    font-variation-settings: 'wght'var(--wght), 'slnt'var(--slnt);
}

.text.large {
    font-size: 5.4rem;
    line-height: 1.15;
}

.text.medium {
    font-size: 4.8rem;
    line-height: 1.2;
}

.text.small {
    font-size: 3.6rem;
    line-height: 1.2;
}

@media screen and (max-width: 900px) {
    .text.medium {
/*        font-size: 2.1rem;*/
    }
}

/* TITLES */

.title {
    --wght: 140;
    --slnt: 0;

    font-variation-settings: 'wght'var(--wght), 'slnt'var(--slnt);
    text-transform: lowercase;
}

.title.large {
    font-size: 9rem;
}

.title.medium {
    font-size: 5.4rem;
}

.title.small {
    font-size: 3.6rem;
}

.title.tiny {
    font-size: 2.4rem;
}

@media screen and (max-width: 700px) {
    .title.large{
        font-size: 5.4rem
    }
    
/*
    .title.tiny {
        font-size: 3.2rem;
    }
*/
}

em {
    --wght: 92;
    --slnt: 8;
    font-variation-settings: 'wght'var(--wght), 'slnt'var(--slnt);
}

strong,
strong > em {
    --wght: 140;
    font-variation-settings: 'wght'var(--wght), 'slnt'var(--slnt);
    text-transform: lowercase;
}

h1, h2, h3, h4, h5, h6{
    color: var(--theme-text);
}

h2, h3, h4, h5, h6{
    --wght: 140;
    font-variation-settings: 'wght'var(--wght), 'slnt'var(--slnt);
    text-transform: lowercase;
}

/* LABELS */

.label {}

.label.large {
    font-size: 4.8rem;
}

.label.medium {
    font-size: 3.6rem;
}

.label.small {
    font-size: 1.4rem;

    padding: .5rem .8rem .2rem;
}

.label.tiny {
    font-size: 1.2rem;
}

/* BUTTONS */

.btn {
    display: flex;
    width: fit-content;
    height: fit-content;
    text-align: left;
    text-transform: lowercase;
    font-feature-settings: "case";
    background-color: var(--theme-btn-background);
    color: var(--theme-btn-text-alt);
    
    -webkit-user-select: none;
    user-select: none;
}


@media screen and (hover:hover) {}

/* LOGO */

.inline-logo {
    color: var(--theme-text-alt-accent);
}

.inline-logo span {
    display: inline-block;
}

.inline-logo-icons {
    letter-spacing: -.125em;
}

.logo-wrapper {
    display: flex;
}

.logo-wrapper .logo-text {
    font-size: 5.4rem;
    line-height: 0.7;
    text-transform: lowercase;
    color: var(--theme-text-alt-accent);
    
    display: flex;
    background-color: var(--theme-btn-background);
    padding: 0 1ch 1.3rem 0;

    position: relative;
    
    transition: all .15s cubic-bezier(0.33, 1, 0.68, 1);
    transition-property: font-size, font-variation-settings;
    
    z-index: 999;
    -webkit-user-select: none;
    user-select: none;
}

.logo-wrapper .logo-text {
    display: flex;
}

/* UPRIGHT BOLD */
.logo-wrapper .logo-text span,
.inline-logo .inline-logo-text span {
    --skew: -2deg;
    font-variation-settings: "wght"140, "slnt"0;
    font-feature-settings: "calt" 0;
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    user-select: none;
}

/* SLANT BOLD */
.logo-wrapper .logo-text span:nth-child(1),
.logo-wrapper .logo-text span:nth-child(5),
.logo-wrapper .logo-text span:nth-child(8),
.logo-wrapper .logo-text span:nth-child(10),
.logo-wrapper .logo-text span:nth-child(12),
.logo-wrapper .logo-text span:nth-child(13),
.inline-logo .inline-logo-text span:nth-child(1),
.inline-logo .inline-logo-text span:nth-child(5),
.inline-logo .inline-logo-text span:nth-child(8),
.inline-logo .inline-logo-text span:nth-child(10),
.inline-logo .inline-logo-text spann:nth-child(12),
.inline-logo .inline-logo-text span:nth-child(13) {
    font-variation-settings: "wght"140, "slnt"8;
    transform: skew(var(--skew), 0deg);
}

/* SLANT LIGHT */
.logo-wrapper .logo-text span:nth-child(6),
.logo-wrapper .logo-text span:nth-child(7),
.inline-logo .inline-logo-text span:nth-child(6),
.inline-logo .inline-logo-text span:nth-child(7) {
    font-variation-settings: "wght"92, "slnt"8;
    transform: skew(var(--skew), 0deg);
}

@media screen and (hover:hover) {
    .logo-wrapper .logo-text:hover {
        color: var(--theme-text-alt-hover);
    }
}

/* NAVIGATION */

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    pointer-events: none;
    z-index: 999;
}

.nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--outer-padding);
    z-index: 999;
}

.nav .logo-wrapper {}

.nav .list-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav .nav-menu {
    align-items: flex-start;
    justify-content: flex-start;
    
    pointer-events: auto;
}

.nav .lang-menu {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
}

.nav .logo-wrapper,
.nav .list-menu .nav-item{
    pointer-events: auto;
}

.nav .list-menu .menu-item .btn {
    font-variation-settings: "wght"140, "slnt"0;
    font-size: 5.4rem;
    line-height: 0.7;

    background-color: var(--theme-btn-background);
    pointer-events: auto;
}

.nav .nav-menu .menu-item .btn {
    padding: 1.3rem 2.5rem 1.3rem 0;
}

.nav .lang-menu .menu-item .btn {
    font-size: 3.6rem;
    padding: 1rem 0 1rem 1.3rem;
}

.nav .lang-menu .active .btn {
    color: var(--theme-btn-text-alt-accent);
}

.nav .nav-current .btn,
.nav .list-menu .menu-item.nav-current .btn{
    font-variation-settings: "wght"140, "slnt"8;
    font-feature-settings: "calt" 0;
    line-height: .7;
    padding: 1.3rem 2.5rem 1.3rem 4rem;
}

.nav:not(.active) .list-menu .menu-item.nav-current{
    display: initial;
}

.nav .nav-toggle {
    display: none;
}

.nav .nav-toggle a {
    display: inline-block;
}

.nav .nav-toggle .btn {
    font-size: 5.4rem;
    line-height: 0.7;
    padding: 1.3rem 2.5rem 1.3rem 0;
}

.nav .nav-toggle a::after {
    content: attr(data-open);
}

nav.active .nav-toggle a::after {
    content: attr(data-close);
}

.nav .nav-toggle {
    display: flex;
    position: relative;
}

nav.active .nav-toggle {
    display: none;
}

nav.nav-pages:not(.active) .list-menu .menu-item {
    display: none;
}

@media screen and (hover:hover) {
    .nav .menu-item .btn:hover,
    .nav .nav-toggle .btn:hover{
        color: var(--theme-btn-text-alt-hover);
    }
}

/* BASE LAYOUT */

.outer-wrapper {}

main,
article {
    display: flex;
    flex-direction: column;
    gap: 12rem;
    
    min-height: var(--100vh);
    overflow-y: hidden;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 12rem;

    padding-bottom: 12rem;
}

.page:not(#index) main > .section:first-of-type,
.section.cloud-section:first-of-type {
    padding-top: 24rem;
}

.post#default main > .section:first-of-type {
    padding-top: 32rem;
}

@media screen and (max-width: 900px){
    main,
    article{
        gap: 8rem;    
    }
    
    .section {
        gap: 8rem;
        padding-bottom: 8rem;
    }
    
    .page#default main > .section:first-of-type,
    .page#all-posts main > .section:first-of-type,
    .section.cloud-section:first-of-type {
        padding-top: 32rem;
    }
}

.ascii-banner {
    font-family: var(--cvf-font);

    width: calc(100vw + 0.6rem - var(--outer-padding) * 2);
    height: 100vh;
    min-height: 100vh;
    height: calc(var(--100vh) - var(--outer-padding));
    position: relative;
    overflow: hidden;
    padding: 0 0 0 0;
    margin-top: -1rem;
    margin-left: -.3rem;
    pointer-events: none;
    z-index: 120;
    transition: opacity 1s ease;
    
    -webkit-user-select: none;
    user-select: none;
}

.section.ascii-banner.standby{
    position: fixed;
}

.ascii-banner.is-hidden{
    opacity: 0;
    position: absolute;
}

.ascii-banner.standby,
.ascii-banner.is-hidden.standby{
    opacity: 1 !important;
}

.ascii-banner::after {
    content: "";
    position: absolute;
    inset: -20%;

    height: 180%;

    background:
        radial-gradient(90% 85% at 10% 20%, var(--black) 0%, transparent 70%),
        radial-gradient(95% 90% at 85% 15%, var(--yellow) 0%, transparent 72%),
        radial-gradient(88% 92% at 50% 85%, var(--orange) 0%, transparent 74%),
        radial-gradient(85% 80% at 90% 70%, var(--gold) 0%, transparent 68%),
        radial-gradient(92% 88% at 20% 75%, var(--yellow) 0%, transparent 76%),
        radial-gradient(86% 84% at 60% 45%, var(--yellow) 0%, transparent 70%),
        radial-gradient(80% 78% at 70% 55%, var(--yellow) 0%, transparent 66%);

    filter: blur(10rem) saturate(160%);
    mix-blend-mode: screen;
    
    z-index: 120;
    pointer-events: none;

    will-change: transform, background-position;
    animation: ascii-noise 160s linear infinite;
    transition: opacity 1s ease;
}

.ascii-banner.standby::after{ }

.ascii-banner.is-hidden.standby::after{
/*    opacity: 1 !important;*/
}

.ascii-banner.is-fading::after{
/*    opacity: 0;*/
}

.ascii-banner .inner-wrapper {
    --col-size: 3.6rem;
    --row-size: 6.4rem;
    
    font-family: var(--cvf-font);
    background-color: var(--theme-background);
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
    pointer-events: none;
    
    transition: opacity 1s ease;
}

.ascii-banner.standby .inner-wrapper{
    
}

.ascii-banner.is-fading .inner-wrapper{
/*    opacity: 0;*/
}

.ascii-banner .inner-wrapper * {
    --wght: 60;
    --slnt: 0;
    font-family: var(--cvf-font);

    display: flex;
    align-items: baseline;
    justify-content: center;
    font-family: var(--sans-font);
    font-size: 5.4rem;
    font-variation-settings: "wght"var(--wght), "slnt"var(--slnt);
    line-height: 1;

    position: absolute;
    will-change: contents, opacity, font-variation-settings;
    transition: all .6s linear;
    transition-property: font-variation-settings, opacity;
    pointer-events: none;
    
    -webkit-user-select: none;
    user-select: none;
}

.section .section-heading {
    position: relative;
    display: block;
/*
    justify-content: flex-start;
    gap: .4ch;
*/
    width: fit-content;
    transform: translateX(calc(50vw - 50%));
    transition: transform 1.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.section .section-heading > * {
    color: inherit;
}

.section .section-heading .inline-logo-icons{
    display: none;
}

.section .section-content ul li .inline-logo {
    color: inherit;
}

.section .section-content ul li .inline-logo-icons{
    display: none;
}

.section .section-heading.visible {
    transform: translateX(0);
}

body.scrolling .section .section-heading {
    transform: translateX(calc(50vw - 50%)) !important;
}

.section .section-content {
    color: var(--theme-text);
}

.section .section-content {
    display: flex;
    flex-direction: column;
    gap: 12rem;

    color: var(--theme-text-alt);
}

.section.cloud-section .section-content {
    display: block;
}

.section.cloud-section:not(:first-of-type) .section-content ul{
    margin-top: 12rem;
}

@media screen and (max-width: 900px){
    .section.cloud-section:not(:first-of-type) .section-content ul{
        margin-top: 8rem;
    }
}

.section:not(.cloud-section) .section-text.text:not(:has(li)),
.post#default .section .section-text{
    display: block;
}

.section .section-text p {
    text-align: left;
    
    display: contents;
    padding-right: 1em;
    width: fit-content;
}

.section .section-text p a{
    --wght: 140;
    font-variation-settings: 'wght' var(--wght), 'slnt' var(--slnt);
    text-transform: lowercase;
    text-decoration: underline;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.1em;
}
@media screen and (hover:hover){
    .section .section-text p a:hover{
        color: var(--theme-text-accent);
    }
}

@media screen and (max-width: 900px){
    .section .section-content {
        gap: 8rem;
    }
}

/* PARAGRAPH SCROLL ANIM */
/*
.section .section-text.text.medium {
    width: 100%;
    max-width: 100%;
    transition: max-width 600ms cubic-bezier(0.33, 1, 0.68, 1);
    margin: 0 auto;
}

body.scrolling .section .section-text.text.medium {
    max-width: 80%;
}
*/

.section .section-text p{
    --deg: 0deg;
}

.section .section-text p:not(:has(br))::after {
    content: "■ ";
    display: inline-block;
    transform: rotate(var(--deg));
}

.page#index .section .section-text.intro-text p:not(:has(br))::after{
    color: var(--theme-text-alt);
}

.section .section-content ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rem;
}

.section .text.small ul,
.section:not(.cloud-section) .text.medium ul,
#default .section .text.medium ul,
#default .section .text.large ul,
.section.section-journal ul {
    gap: 4rem;
}

.section .section-content ul li {
    text-transform: lowercase;
    text-align: center;
    padding-right: 1em;
    width: fit-content;
    max-width: 46ch;
    transform: translateX(var(--spread-x, 0));
    transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}

.section .section-content ul li:not(.no-square){
    --deg: 0deg;
}

.section .section-content ul li:not(.no-square)::after {
    content: "■";
    position: absolute;
    transform: translate(10%, 0) rotate(var(--deg));
}

.section .section-content ul li:has(img)::after{
    display: none;
}

.section .section-content ul li:not(.visible) {
    transform: translateX(0) !important;
}

.section .section-content ul li:has(img) {
    width: auto;
    height: fit-content;
    background: var(--gradient-1);
    padding: 0;
}

.section .section-content ul li img{
    width: 32rem;
    height: stretch;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 3 / 4;
    filter: grayscale(1) contrast(1.3) brightness(.9);
    mix-blend-mode: screen;
}

body.scrolling .section .section-content ul li {
    --spread-x: 0px;
    transform: translateX(0) !important;
}

.section .section-content.text.small ul li{
    font-size: 1.3333em;
}

.section .section-content.text.small ul li.ql-indent-1{
    --padding: 6rem;
    font-size: .675em;
    text-align: left;
    padding: 0 var(--padding);
    max-width: calc( 64ch + var(--padding) * 2 );
}

.section .section-content.text.small ul li.ql-indent-1:has(img){
    --padding: 0;
}

.section .section-content ul li strong,
.section .section-content ul li:has(strong)::after {
    color: var(--theme-text);
}

.section-content ul li a {
    position: relative;
    display: inline-block;
}

.section-content ul li a {
    position: relative;
    display: inline-block;
}

.section-content ul li a .mask {
    color: var(--theme-text-alt-accent);
    letter-spacing: -.125em;
    
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    white-space: nowrap;
}

.section-content ul li a.hovering {
    color: transparent;
}

.section .section-content ul li:has(a.hovering)::after {
    opacity: 0;
}

@media screen and (max-width: 900px){
    .section .section-content ul {
        gap: 8rem;
    }
    
    .section .section-content.text.small ul li.ql-indent-1{
        --padding: 0;
    }
}

/* INDEX */

.page#index {}

.page#index .intro-text.text {
    background: var(--gradient-1);
    background-clip: text;
    color: transparent;
}

.section .logo-gallery{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4rem;
}

.section .logo-gallery .logo-item{ }

.logo-item,
.logo-item a{
    display: flex;
    align-items: center;
    justify-content: center;
}

.section .logo-gallery .logo-item svg{
    display: block;
    height: calc( 6vw + 2rem);
    
    pointer-events: none;
}

.section .logo-gallery .logo-item svg,
.section .logo-gallery .logo-item svg *{
    fill: var(--theme-text-alt-accent) !important;
}

@media screen and (hover:hover){
    
    .section .logo-gallery .logo-item a:hover svg,
    .section .logo-gallery .logo-item a:hover  svg *{
        fill: var(--theme-text-accent) !important;
    }
}

/* DIARY POST */

.post#post {}

/* ABOUT PAGE */

.page#about {}

/* CONATACTS PAGE */

.page#contacts {}

/* FOOTER */

footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

footer .footer-list{
    display: flex;
    flex-direction: column;
}

footer .footer-list:nth-child(n+3){
    align-items: flex-end;
}

footer a{
    text-decoration: underline;
}

@media screen and (hover:hover){
    footer a:hover{
        color: var(--theme-text-alt-accent);
    }
}

@media screen and (max-width: 700px){
    footer {
        flex-wrap: wrap;
        gap: 2rem 0;
    }

    footer .footer-list {
        width: 50%;
    }

    /* top row */
    footer .footer-list:nth-child(1),
    footer .footer-list:nth-child(2) {
        order: 1;
    }

    /* bottom row */
    footer .footer-list:nth-child(3),
    footer .footer-list:nth-child(4) {
        order: 2;
    }

    /* alignment */
    footer .footer-list:nth-child(1),
    footer .footer-list:nth-child(3) {
        align-items: flex-start;
        text-align: left;
    }

    footer .footer-list:nth-child(2),
    footer .footer-list:nth-child(4) {
        align-items: flex-end;
        text-align: right;
    }
}

/* MAINTENANCE */

#maintenance .label.small,
#maintenance .label.tiny{
    font-size: 2.4rem;
}

#maintenance .logoWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#maintenance .logo.label {
    font-size: 3.6rem;
    text-align: center;
}

#maintenance .inline-logo-text{
    color: var(--black);
}

#maintenance .message {
    text-align: center;
}

#maintenance .action .label{
    color: var(--theme-text-alt-accent);
}

#maintenance .action .label:hover{
    color: var(--theme-text-accent);
}

/* COOKIE BANNER */

#cookie-banner {
    display: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 0 2rem;

    background-color: var(--theme-background);
    padding: .6rem 0 .6rem 1.3rem;
    width: max-content;

    position: fixed;
    right: var(--outer-padding);
    bottom: 0;

    font-feature-settings: 'case';

    z-index: 9999;
}

#cookie-banner .button-array {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0 1rem;
}

#cookie-banner .button-array .btn.primary{
    color: var(--theme-text-alt-accent);
}

@media screen and (hover:hover){
    #cookie-banner .button-array .btn.primary:hover{
        color: var(--theme-text-accent);
    }
}

/* BG NOISE */

.bg-grain::before {
    content: "";
    top: -10rem;
    left: -10rem;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    z-index: 9999;
    position: fixed;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAABWIAAAViAHE10CgAAAE7mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4yLWMwMDAgNzkuMWI2NWE3OWI0LCAyMDIyLzA2LzEzLTIyOjAxOjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuNSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDgtMzFUMTI6Mjk6MTIrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDgtMzFUMTI6NDgrMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTA4LTMxVDEyOjQ4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4Zjg5ZjkxYS03MTFmLTRhMjQtOWNjMS1lZmQzMDUxYzU5M2EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OGY4OWY5MWEtNzExZi00YTI0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');
    pointer-events: none;
    --speed: 1.5s;
    -webkit-animation: noise var(--speed) steps(2) infinite;
    animation: noise var(--speed) steps(2) infinite;
}

@-webkit-keyframes noise {
    to {
        transform: translate3d(-7rem, 0, 0);
    }
}

@keyframes noise {
    0% {
        transform: translate3d(0, 9rem, 0);
    }

    10% {
        transform: translate3d(-1rem, -4rem, 0);
    }

    20% {
        transform: translate3d(-8rem, 2rem, 0);
    }

    30% {
        transform: translate3d(9rem, -9rem, 0);
    }

    40% {
        transform: translate3d(-2rem, 7rem, 0);
    }

    50% {
        transform: translate3d(-9rem, -4rem, 0);
    }

    60% {
        transform: translate3d(2rem, 6rem, 0);
    }

    70% {
        transform: translate3d(7rem, -8rem, 0);
    }

    80% {
        transform: translate3d(-9rem, 1rem, 0);
    }

    90% {
        transform: translate3d(6rem, -5rem, 0);
    }

    to {
        transform: translate3d(-7rem, 0, 0);
    }
}

@keyframes ascii-noise {
    0% {
        transform: translate3d(-18%, -14%, 0) scale(1.35) rotate(-180deg);

    }

    10% {
        transform: translate3d(14%, -10%, 0) scale(1.38) rotate(120deg);

    }

    20% {
        transform: translate3d(-10%, 16%, 0) scale(1.48) rotate(-260deg);

    }

    30% {
        transform: translate3d(18%, 8%, 0) scale(1.32) rotate(210deg);

    }

    40% {
        transform: translate3d(-16%, -12%, 0) scale(1.42) rotate(-320deg);

    }

    50% {
        transform: translate3d(12%, 18%, 0) scale(1.5) rotate(360deg);

    }

    60% {
        transform: translate3d(-20%, 10%, 0) scale(1.35) rotate(-420deg);

    }

    70% {
        transform: translate3d(16%, -18%, 0) scale(1.46) rotate(540deg);

    }

    80% {
        transform: translate3d(-14%, 20%, 0) scale(1.4) rotate(-600deg);

    }

    90% {
        transform: translate3d(20%, -12%, 0) scale(1.52) rotate(720deg);

    }

    100% {
        transform: translate3d(-18%, 16%, 0) scale(1.44) rotate(-840deg);

    }
}