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

/* START */

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

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

@font-face {
    font-family: 'Absans';
    src: url('../fonts/public/Absans-Regular.woff2') format('woff2'),
        url('../fonts/public/Absans-Regular.ttf') format('opentype');
    font-style: normal;
}

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

:root {
    /* variables */
    --black: #000;
    --grey: #888;
    --white: #fff;

    --blue: #000066;
    --saphire: #000099;
    --sulphur: #999900;
    --gold: #aaaa00;

    --sans-font: "Fungal", sans-serif;
    --mono-font: "Geist Mono", monospace;
    --display-font: "Absans", sans-serif;

    --theme-background: var(--saphire);
    --theme-background-accent: var(--white);
    --theme-text: var(--sulphur);
    --theme-text-accent: var(--white);
    --theme-graphics-background: var(--grey);
    --theme-graphics-accent: var(--saphire);
    --theme-graphics: var(--white);
    
    --bg-grain: .2;
    
    --header-top: 130px;
    --header-bottom: 120px;
}

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

html,
body {
    position: relative;
    
    background-color: var(--theme-background);
    color: var(--theme-text);
    height: calc(--100vh);
    min-height: calc(--100vh);
    width: 100vw;
    overflow-y: visible;
    
    scroll-behavior: smooth;
}

body{
    font-family: var(--sans-font);
    font-variation-settings: 'THCK' 0, 'grow' 0;
    font-size: calc(13px + (140vw - 1400px) / 400);
    letter-spacing: .025em;
    line-height: 1;
}

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

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

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

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

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

    html,
    body {
        font-size: calc(13.5px + (100vw - 600px) / 400);
        overflow: auto;
    }
}

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

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

.outer-wrapper {
    --padding: 15px;
    padding: var(--padding);
}

@media screen and (max-width: 900px){
    .outer-wrapper {
        --padding: 10px;
    }
}

header {    
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--padding);

    padding: var(--padding);

    height: 100%;
    width: 100%;
    
    pointer-events: none;
    z-index: 1000;
}

.header-top{
    --logos: 70px;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 250px;
    width: 100%;
}

.header-top::before,
.header-bottom::before{
    content: "";
    width: 100vw;
    background-color: var(--theme-background);
    
    position: absolute;
    left: 0;
    z-index: -1;
}

.header-top::before{
    height: calc( var(--header-top) +  var(--padding) * 3 );
}

.header-bottom::before{
    height: calc( var(--header-bottom) +  var(--padding) * 2 );
}

@media screen and (max-width: 900px){
    .header-top::before{
        height: calc( var(--header-top) +  var(--padding) * 2 );
    }
    
    .header-bottom::before{
        height: calc( var(--header-bottom) +  var(--padding) * 2 );
    }
}

.header-top::before{
    top: 0;
}

.header-bottom::before{
    bottom: 0;
}

.header-bottom{
    --logos: 80px;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--padding);
    width: 100%;
}

header .header-logo{
    display: flex;
    top: unset;
    height: var(--logos);
    
    pointer-events: all;
}

header .header-logo.left{
    left: 0;
}

header .header-logo.right{
    right: 0;
}

header .header-logo svg{
    fill: white;
    height: var(--logos);
}

header .header-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--padding) / 2);

    font-size: .875rem;
}

header .header-item.center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

header .header-top .header-item.center .title-info{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: column;
}

header .header-bottom .header-item.center{
    gap: var(--padding);
}

header .header-item.right {
    text-align: right;
}

header .title {
    font-size: 1.55rem;
    color: var(--theme-text-accent);
}

header .header-logo.title{
    --logo: 40px;
    height: var(--logo);
}

header .header-logo.title svg{
    height: var(--logo);
}

header .footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--padding) / 4);

    font-size: .75rem;
}

header .footer-item:first-child :first-child{
    color: var(--theme-text-accent);
}

header .footer-item:has(copyright) span{
    text-transform: uppercase;
    font-family: var(--mono-font);
}

@media screen and (max-width: 900px){
    .header-top{
        --logos: 50px;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    header .header-logo.title{
        --logo: 30px;
    }
    
    header .header-logo.left{
        order: 2;
    }
    
    header .header-item.center{
        order: 1;
        
        position: relative;
        left: unset;
        transform: unset;
        
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    header .header-top .header-item.center .title-info{
        justify-content: flex-end;
        align-items: flex-end;
    }
    
    header .header-top .header-item.center .title-info h1{
        text-align: right;
    }
    
    header .header-logo.right{
        order: 2;
    }
    
    .header-bottom{
        --logos: 60px;
    }
    
    header .header-bottom .header-item.center{
        flex-direction: column;
        align-items: flex-start;
    }
}

main {
    --main-top: 140px;
    --main-btm: 120px;
    
    display: flex;
    flex-direction: column;
    gap: 80px;
    
    padding: var(--main-top) var(--padding) var(--main-btm);
}

@media screen and (max-width: 900px){
    main {
        --main-top: calc( var(--header-top) + var(--padding) * 4 );
        --main-btm: 120px;
    }
}


.hero-section {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 100px;
}

#index .hero-section{
    min-height: calc( 100vh - var(--main-top) - var(--padding) - 40px );
}

@media screen and (max-width: 900px){
    #index .hero-section{
        min-height: unset;
    }
}

.hero-section .interactive-banner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 80px;
}

.hero-section .instructions {
    font-family: var(--mono-font);
    font-feature-settings: "case";
    font-size: .875rem;
    letter-spacing: .125em;
    line-height: 1.3;
    text-transform: uppercase;
    
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hero-section .hero-heading {
    font-family: var(--display-font);
    font-style: normal;
    font-size: 8.25vw;
    letter-spacing: 0em;
    line-height: 1.05;
    text-align: right;
    color: var(--theme-text);

    padding-right: 20px;
    padding-left: 5vw;
}

.hero-section .hero-heading p,
.hero-section .hero-heading u{
    color: var(--theme-text);
    user-select: none;
}

#phraseWrapper::after {
    content: ".";
    position: absolute;
    bottom: 0;
}

@media screen and (max-width: 900px){
    .hero-section{
        gap: 40px;
        
/*        min-height: calc( 75vh - var(--main-top) - var(--padding) - 40px );*/
        min-height: unset;
    }
    
    .hero-section .hero-heading{
        font-size: 4.2rem;
        
        padding-right: 0;
        padding-left: 0;
    }
    
    #phraseWrapper {
        position: relative;
        display: flex;
        align-items: flex-end;
    }
    
    #phraseWrapper::after{
        position: relative;
        display: inline;
    }
    
    .hero-section .interactive-banner{
        gap: 40px;
    }
    
    .hero-section .instructions{
        line-height: 1.3;
        gap: 20px;
    }
}

/* HERO FORM */

#phraseWrapper{
    position: relative;
}

.custom-select{
    display: inline-block;
    position: relative;
    color: var(--theme-text);
}

.custom-select select{
    display: none;
}

.select-selected{
    text-decoration: underline;
    text-decoration-thickness: .035em;
    text-decoration-color: var(--theme-text-accent);
    text-underline-offset: .07em;
}

@media (hover: hover) {
    .select-selected:hover{
        color: var(--theme-graphics-background);
        text-decoration-color: var(--theme-text);
    }
}

.select-items div,
.select-selected{ }

.select-items{
    font-family: var(--sans-font);
    font-size: 2rem;
    background-color: var(--theme-text);
    color: var(--theme-background);
    
    text-align: left;
    
    position: absolute;
    
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    z-index: 1000;
}

.select-items div{
    padding: 12px 20px 5px 20px;
}

.select-hide{
    display: none;
}

.select-items div:hover,
.same-as-selected{
	background-color: var(--theme-graphics-background);
    color: var(--theme-graphics-accent);
}

.email{
    display: none;
}

/* NAVIGATION */

nav {
    background-color: var(--theme-background);
    padding: 5px 10px;
    margin: 0px -5px;
    position: sticky;
    top: calc( var(--header-top) +  var(--padding) * 3 );
    z-index: 999;
}

nav .nav-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 40px;
}

@media screen and (max-width: 900px){
    nav .nav-menu {
        gap: 15px 30px;
    }
}

nav .nav-item {
    font-family: var(--mono-font);
    font-size: .875rem;
    letter-spacing: .125em;
    text-transform: uppercase;
    color: var(--theme-text-accent);
}

.inner-section{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-heading{
    font-family: var(--mono-font);
    font-size: .875rem;
    letter-spacing: .125em;
    text-transform: uppercase;
    color: var(--theme-text-accent);
}

.intro-section,
.info-section{
    display: flex;
    flex-direction: row;
    gap: 80px;
}

.section-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media screen and (max-width: 900px){
    .intro-section,
    .info-section{
        flex-direction: column;
        gap: 0px;
    }
}

.intro-section .excerpt {
    font-size: 3rem;
    line-height: 1.2;
/*    color: var(--theme-text-accent);*/
    
    flex-basis: 60%;
}

.intro-section .excerpt .ql-indent-1{
    padding-left: 8rem;
}

.intro-section .excerpt p em{
color: var(--theme-text-accent);
}

.intro-section .details {
    font-size: 1rem;
    line-height: 1.6;
    
    flex-basis: 40%;
}

.intro-section .details .ql-indent-1{
    padding-left: 3.5rem;
}

.intro-section .details .ql-indent-2{
    padding-left: 6.5rem;
}

.info-section{
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.info-section .committee{
    font-size: 1.55rem;
}

.info-section .committee .section-content{
    gap: 20px 40px;
}

.info-section .committee .section-content p:has(br){
    display: none;
}

.info-section .committee .section-content strong{
    font-family: var(--mono-font);
    font-size: .875rem;
    letter-spacing: .125em;
    text-transform: uppercase;
    color: var(--theme-text-accent);
}

.info-section .section-content > *{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 40px;
}

.info-section .sponsors-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
}

.info-section .sponsor-item{ }

.info-section .sponsor-item svg{
    fill: var(--theme-graphics-background);
    height: 120px;
}

.info-section .footnote{
    column-count: 2;
    column-gap: 40px;
    line-height: 1.4;
}

@media screen and (max-width: 900px){
    .intro-section .excerpt{
        font-size: 1.6rem;
    }
    
    .intro-section .excerpt .ql-indent-1{
        padding-left: 3.5rem;
    }
    
    .intro-section .details{
        font-size: 1.2rem;
        line-height: 1.4;
    }
    
    .intro-section .details .ql-indent-1{
        padding-left: 2.5rem;
    }

    .intro-section .details .ql-indent-2{
        padding-left: 5rem;
    }
    
    .info-section .sponsors-list{
        gap: 5px 20px;
    }
    
    .info-section .sponsor-item svg{
        height: 100px;
    }

    .info-section .footnote{
        column-count: 1;
        column-gap: 10px;
        
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.large-text-section{
    display: flex;
    flex-direction: column;
    gap: 80px;
}

#index .large-text-section .page-thumbnail{
    width: 100%;
    aspect-ratio: 21 / 9;
}

#index .large-text-section .page-thumbnail img{
    aspect-ratio: 21 / 9;
}

#index .large-text-section .section-content{
    font-size: 2.4rem;
    line-height: 1.2;
}

#index .large-text-section .section-content .ql-indent-1{
    padding-left: 8rem;
}

@media screen and (max-width: 900px){
    #index .large-text-section .section-content{
        font-size: 1.6rem;
    }
    
    #index .large-text-section .section-content .ql-indent-1{
        padding-left: 3.5rem;
    }
}

/* PAGE STYLES */

.page .hero-section h1 {
    font-family: var(--display-font);
    font-style: normal;
    font-size: 8.25vw;
    letter-spacing: 0em;
    line-height: .9;
    text-align: right;
    color: var(--theme-text);
    
    width: 100%;

    padding-right: 20px;
    padding-left: 5vw;
}

@media screen and (max-width: 900px){
    .page .hero-section h1{
        font-size: 3.6rem;
    }
}

.page .content-section {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.page .page-body.full {
    width: 100%;
}

.page .page-body.full p{
    width: 60%;
}

.page .page-body.half {
    width: 60%;
}

.page .page-thumbnail {
    width: calc(40% - 100px);
    height: fit-content;
    background-color: var(--theme-text);
}

.page .page-thumbnail img {
    width: 100%;
    height: stretch;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 4 / 3;
    filter: blur(.05px) grayscale(1) contrast(1) brightness(0.75);
    mix-blend-mode: darken;
}

.page .content-section h2 {
    font-size: 3rem;
    line-height: 1;
    color: var(--theme-text-accent);
}

.page .content-section h3 {
    font-family: var(--mono-font);
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: .075em;
    line-height: 1.2;
    color: var(--theme-text-accent);
    margin-left: 3.5rem;
}

.page .content-section h2:not(:first-of-type)::before{
    content: " ";
    display: block;
    border-top : solid 1px var(--sulphur);
    padding-bottom: 40px;
    width: 100%;
}

.page .content-section p {
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--gold);
    margin-left: 3.5rem;
}

.page .content-section .ql-indent-1{
    padding-left: 3.5rem;
}

.page .content-section .ql-indent-2{
    padding-left: 6.5rem;
}

@media screen and (max-width: 900px){
    .page .content-section {
        flex-direction: column;
        gap: 40px;
    }
    
    .page .page-body{
        order: 2;
    }
    
    .page .page-body.full p{
        width: 100%;
    }

    .page .page-body.half {
        width: 100%;
    }
    
    .page .page-thumbnail {
        order: 1;
        width: 100%;
    }
    
    .page .content-section p {
        margin-left: 0;
    }
}

.page .content-section ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.page .content-section ul li{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    
    font-family: var(--mono-font);
    text-transform: uppercase;
    font-size: .875rem;
    letter-spacing: .125em;
    
    color: var(--theme-text-accent);
    
    padding: 3px 10px;
}

.page .content-section ul li:has(strong){
    background-color: transparent;
    color: var(--theme-text-accent);
    padding: 3px 0;
}

.page .content-section ul li:has(em),
.page .content-section ul li:has(u),
.page .content-section ul li:has(a){
    padding: 0;
}

.page .content-section ul li:has(a) {
    background-color: var(--theme-text);
    color: var(--theme-text-accent);
    
    padding: 3px 10px;
    text-decoration: none;
}

.page .content-section ul li:has(a):hover{
    background-color: var(--theme-text);
    color: var(--theme-background);
}

.page .content-section ul li:has(> em:only-child) em{
    background-color: var(--theme-text-accent);
    color: var(--theme-background);
}

.page .content-section ul li:has(> em + *) > em{
    margin-right: 10px;
}

.page .content-section ul li u {
    background-color: var(--theme-text-accent);
    color: var(--theme-background);
    display: flex; 
    padding: 3px 10px;
    text-decoration: none;
}

.page .content-section ul li em {
    background-color: var(--grey);
    color: var(--theme-text-accent);
    display: flex; 
    padding: 3px 10px;
}

@media screen and (max-width: 900px){
    .page .content-section h2 {
        font-size: 2rem;
    }
    
    .page .page-body.full p{
        margin-left: 0;
        width: 100%;
    }
    
    .page .content-section .ql-indent-2{
        padding-left: 2.5rem;
    }
    
    .page .content-section .ql-indent-2{
        padding-left: 5rem;
    }
}

/* MAINTENANCE */

#maintenance .logoWrapper {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#maintenance .logo{
    text-align: center;
    text-transform: uppercase;
}

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

#maintenance .action {
    text-align: center;
    
    position: fixed;
    bottom: 2.5%;
    left: 50%;
    transform: translateX(-50%);
}

/* TEXT ANIMS / STYLING */

em {
    color: var(--theme-text-accent);
}

.underline {
    text-decoration: none;
    
    display: inline-block;
    position: relative;
    padding: .25rem .75ch .25rem .75ch;
    margin: -.25rem -.75ch -.2rem -.75ch;
    
    
    color: var(--theme-text-accent);
    box-shadow: inset 0 -.075em 0 0 var(--theme-text-accent);
    
    transition: all 0.3s ease 0s;
    transition-property: box-shadow, color, letter-spacing;
    
    user-select: none;
}


.underline-reverse {
    display: inline-block;
    position: relative;
    padding: .25rem .75ch .25rem .75ch;
    margin: -.25rem -.75ch -.2rem -.75ch;
    
    color: var(--theme-background);
    box-shadow: inset 0 calc(-1em - 0.75em) 0 0 var(--theme-text-accent);
    
    transition: all 0.3s ease 0s;
    transition-property: box-shadow, color, letter-spacing;
    
    user-select: none;
}

@media (hover: hover) {
    .underline:hover {
        color: var(--theme-background);
        box-shadow: inset 0 calc(-1em - 0.75em) 0 0 var(--theme-text);
        
        transition: all 0.3s ease 0s;
        transition-property: box-shadow, color, letter-spacing;
    }
    
    .underline-reverse:hover {
        color: var(--theme-graphics-accent);
        box-shadow: inset 0 calc(-1em - 0.75em) 0 0 var(--theme-graphics-background);
        
        transition: all 0.3s ease 0s;
        transition-property: box-shadow, color, letter-spacing;
    }
}

.shake{
    animation: vertshake 2s cubic-bezier(.36, .07, .19, .97) both infinite;
}

@media (hover: hover) {
    .shake:hover{
        animation-play-state: paused;
    }
}

@keyframes vertshake {
    10%,
    90% {
        transform: translate(0, -1px);
    }

    20%,
    80% {
        transform: translate(0, 1px);
    }

    30%,
    50%,
    70% {
        transform: translate(0, -3px);
    }

    40%,
    60% {
        transform: translate(0, 3px);
    }
}

.fungal-pulse{
    animation: fungal-pulse 20s both infinite;
    transition: font-variation-settings 0.2s !important;
}

/*
@keyframes fungal-pulse {
    0%   { font-variation-settings: 'THCK' 0,    'grow' 500; }

    25%  { font-variation-settings: 'THCK' 500,  'grow' 500; }
    
    50%  { font-variation-settings: 'THCK' 1000,  'grow' 0; }
    
    75%  { font-variation-settings: 'THCK' 500,  'grow' 0; }
    
    100%  { font-variation-settings: 'THCK' 0, 'grow' 500; }
}
*/


@keyframes fungal-pulse {
    0%    { font-variation-settings: 'THCK' 0,    'grow' 500; }

    5%    { font-variation-settings: 'THCK' 100,  'grow' 495; }
    10%   { font-variation-settings: 'THCK' 200,  'grow' 480; }
    15%   { font-variation-settings: 'THCK' 300,  'grow' 460; }
    20%   { font-variation-settings: 'THCK' 400,  'grow' 450; }
    25%   { font-variation-settings: 'THCK' 500,  'grow' 400; }
    30%   { font-variation-settings: 'THCK' 600,  'grow' 300; }
    35%   { font-variation-settings: 'THCK' 700,  'grow' 200; }
    40%   { font-variation-settings: 'THCK' 800,  'grow' 150; }

    45%   { font-variation-settings: 'THCK' 900,  'grow' 180; }
    50%   { font-variation-settings: 'THCK' 1000, 'grow' 200; }

    55%   { font-variation-settings: 'THCK' 900,  'grow' 180; }
    60%   { font-variation-settings: 'THCK' 800,  'grow' 100; }
    65%   { font-variation-settings: 'THCK' 700,  'grow' 150; }
    70%   { font-variation-settings: 'THCK' 600,  'grow' 200; }
    75%   { font-variation-settings: 'THCK' 500,  'grow' 250; }
    80%   { font-variation-settings: 'THCK' 400,  'grow' 350; }
    85%   { font-variation-settings: 'THCK' 300,  'grow' 400; }
    90%   { font-variation-settings: 'THCK' 200,  'grow' 450; }
    95%   { font-variation-settings: 'THCK' 100,  'grow' 480; }

    100%  { font-variation-settings: 'THCK' 0,    'grow' 500; }
}

/* CUTSOM CURSOR */

html,
body,
*,
*:hover,
*::before,
*::after {
    cursor: none !important;
}

#cursor{ display: none; }

#cursor polygon{ fill: var(--black);  }

#cursor path{ fill: var(--white); }

.cursor-on{
    display: block !important;
    height: 13px;
    width: 13px;
    
    position: fixed;
    top: 0;
    left: 0;
    
    pointer-events: none;
    -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
    
    transform: rotate(-22.5deg);
    transition: transform 0.25s;
    z-index: 1000;
}

#altCursor-template{
    display: none !important;
}

#altCursor-template polygon{ fill: var(--black);  }

#altCursor-template path{ fill: var(--white); }

.altCursor{
    display: block !important;
    height: 13px;
    width: 13px;
    
    position: fixed;
    top: 50%;
    left: 0;
    
    pointer-events: none;
    -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
    
    transform: rotate(-22.5deg);
    transition: transform .25s;
    z-index: 1000;
}

.cursor-east { transform: rotate(90deg) !important; }

.cursor-south { transform: rotate(-180deg) !important; }

.cursor-north { transform: rotate(0deg) !important; }

.cursor-northeast { transform: rotate(45deg) !important; }

.cursor-northwest { transform: rotate(-45deg) !important; }

.cursor-southeast { transform: rotate(135deg) !important; }

.cursor-west { transform: rotate(-90deg) !important; }

.cursor-normal { transform: rotate(-22.5deg) !important; }

.cursor-click:not(.cursor-south, .cursor-east){
    transform: rotate(-45deg) !important;
    transition: transform 0.2s !important;
}

.cursor-south.cursor-click{
    transform: rotate(-180deg) translateY(-100%) !important;
    transition: transform 0.2s !important;
}

.cursor-east.cursor-click{
    transform: rotate(90deg) translateY(-100%) !important;
    transition: transform 0.2s !important;
}

/* BG NOISE */

.bg-grain::before {
    content: "";
    opacity: var(--bg-grain);
    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);
    }
}