/* ------------------------------------------------------- */
/*--------------------- MAIN DATA -------------------------*/
/* ------------------------------------------------------- */

:root{
    --theme_color: rgba(253, 93, 0, 1);
    --theme_color_transparent10: rgba(253, 93, 0, 0.1);
    --theme_color_transparent20: rgba(253, 93, 0, 0.2);
    --theme_color_transparent60: rgba(253, 93, 0, 0.6);
    --theme_hue_shift: 0deg;
    --theme_saturation: 100%;
    --theme_value: 200%;
    --menu_width: 100%;
    --nav_width: 280px;
    --top_bar_height: 48px;
    --vh: 100vh;
    
    --font_display: 'Playfair Display';
    /* --font_display: 'Bebas Neue'; */
    /* --font_display: 'Comfortaa'; */
    /* --font_display: 'Fredericka the Great'; */
    /* --font_display: 'DM Serif Display'; */
    /* --font_display: 'Abril Fatface'; */

    --font_header: 'Playfair Display';
    --font_header: 'Roboto Mono';
    /* --font_header: 'Oleo Script Swash Caps'; */
    /* --font_header: 'Fredericka the Great'; */
    /* --font_header: 'DM Serif Display'; */
    /* --font_header: 'Comfortaa'; */

    --font_text: 'Catamaran';
    --font_text: 'Catamaran';

    --font_mono: 'Courier Prime';
    --font_mono: 'Roboto Mono';
    /* --font_mono: 'Comfortaa'; */
    /* --font_mono: 'Courier New'; */


    --tiny_screen: 400px;
    --small_screen: 600px;
    --med_screen: 1000px;
    
    --cover_size: 40px;
    --header_size: 40px;
    --header_size_small: 32px;
    --footer_size: 16px;
    --body_size: 18px;

    --ease_out_quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease_in_quint: cubic-bezier(0.64, 0, 0.78, 0);
    --ease_out_back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease_out_back: cubic-bezier(.25,1.57,.45,1);
    --ease_in_out_expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease_in_expo: cubic-bezier(0.7, 0, 0.84, 0);
    --ease_out_expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 600px) or (max-height: 600px) {
    :root {
        --cover_size: 34px;
        --header_size: 34px;
        --header_size_small: 28px;
        --footer_size: 14px;
        --body_size: 16px;
    }
}

@media (max-width: 400px) or (max-height: 400px) {
    :root {
        --cover_size: 28px;
        --header_size: 28px;
        --header_size_small: 26px;
        --footer_size: 12px;
        --body_size: 14px;
    }
}





/* -------------------------------------------------------- */
/*--------------------- TAG STYLES -------------------------*/
/* -------------------------------------------------------- */



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

/* Track */
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0);
    border: solid 4px transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    /* background: var(--theme_color_transparent60); */
    /* border-radius: 20px; */
    box-shadow: inset 0 0 10px 10px var(--theme_color_transparent60);
    /* border-right: solid 4px transparent; */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    /* background: var(--theme_color); */
    box-shadow: inset 0 0 10px 10px var(--theme_color);
}

* {
    box-sizing: border-box;
}

html {
    /* scroll-behavior: smooth; */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    color: rgb(255, 255, 255);
    background-color: rgb(10,10,10);
    overflow: overlay;
    display: block;
}

body.preload *{
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;}

main {
    left: 0;
    /* display: flex; */
    flex-direction: row;
    position: relative;
    width: 100%;
    height: 100vh;
    /* top: calc(var(--top_bar_height) + 28px); */
    overflow: hidden;
    /* padding: 20px; */
    gap: 20px;
    max-width: 250vh;
    margin: 0px auto;
    border: solid 1px;
    border-color: var(--theme_color);
    transition: border-color 1s, opacity 0.5s;
    will-change: border-color, opacity;
}

button {
    padding: 0px;
    margin: 0px;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

a {
    padding: 0px;
}

a:link {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: none;
    font-weight: unset;
}

body.hasHover a:hover {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
}

a:focus {
    color: inherit;
    text-decoration: none;
}

a:active {
    color: inherit;
    text-decoration: underline;
}

::selection {
    background: var(--theme_color_transparent20);
}

input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}





/* ------------------------------------------------------------ */
/*------------------------- NAVBAR -----------------------------*/
/* ------------------------------------------------------------ */

#top-bar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0px;
    left: 0px;
    width: var(--menu_width);
    height:var(--top_bar_height);
    margin: 0px;
    font-family: var(--font_mono);
    text-shadow: 0px 0px 10px var(--theme_color);
    transition: text-shadow 1s;
    will-change: text-shadow, transform;
    background-color: rgba(0, 0, 0, 0);
    z-index: 10;
    /* opacity: 0%; */
    animation: fade-in 1s both !important;
    animation-delay: 1s !important;
}

#main-icon {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px;
    padding-right: 16px;
    margin: 0px;
    margin-left:0px;
    font-family: var(--font_mono), "Courier New", monospace;
    font-size: 24px;
    text-align: left;
    white-space:nowrap;
    color: white;
    text-shadow: 0px 0px 10px var(--theme_color);
    border-bottom-style: solid;
    border-width: 1px;
    border-color: var(--theme_color);
    transition: text-shadow 1s, border-color 1s;
    will-change: text-shadow, border-color;
    /* box-shadow: 0px 20px 40px 4px black; */
    cursor: pointer;
    display: block;
}

#icon-function {
    color: var(--theme_color);
}

#main-icon-text {
    opacity: 0%;
    position: relative;
}

#main-icon-text.active {
    opacity: 100%;
}

#main-icon-loader {
    text-align: center;
    text-justify: distribute;
    opacity: 0%;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 8px;
    left: 0px;
    font-family: 'Courier New', Courier, monospace;
}

#main-icon-loader.active {
    opacity: 100%;
    display:block;
}

#main-icon > div {
    font-family: var(--font_mono);
    pointer-events: none;
}

.typewriter-text {
    /* color: var(--theme_color); */
    transition: color 1s;
    will-change: color;
    pointer-events: none;
}

.cursor {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cursor::after {
    content: "";
    width: 3px;
    height: 32px;
    overflow: hidden;
    position: absolute;
    transform: translate(0px, -2px);
    background: #ffffff;
    display: inline-block;
    animation: cursor-blink 1.3s steps(2) infinite;
    animation-timing-function: var(--ease_in_out_expo);
    margin-left:5px;
}

@keyframes expand {
    0% {
        transform: translateY(-100%);
        display: block;
    }
    99% {
        transform: translateY(0%);
        display: block;
    }
    100% {
        transform: translateY(0%);
        display: block;
    }
}

@keyframes retract {
    0% {
        transform: translateY(0%);
        display: block;
    }
    99% {
        transform: translateY(-100%);
        display: block;
    }
    100% {
        transform: translateY(-100%);
        display: none;
    }
}

#page-select {
    height: auto;
    width: var(--nav_width);
    max-width: 100vw;
    font-size:14px;
    color: var(--theme_color);
    transition: color 1s;
    will-change: color;
    /* background-color: var(--theme_color_transparent20);  */
    padding:6px 0px 6px 0px;
    text-align: center;
    display: flex; 
    overflow: hidden;
    justify-content : space-evenly;
    margin: 0px;
    animation: retract 0.6s var(--ease_out_quint);
    animation-fill-mode: forwards;
}

@media (max-width: 350px) {
    #page-select {
        width: 100vw;
    }
}


#top-bar > div {
    overflow: hidden;
}

#page-select.active {
    animation: expand 0.6s var(--ease_out_quint);
    animation-fill-mode: forwards;
}

#top-bar a {
    padding: 0px 4px 0px 4px;
}

#top-bar a:link {
    color: inherit;
    text-decoration: none;
}

#top-bar a:visited {
    color: inherit;
    text-decoration: none;
}

body.hasHover #top-bar a:hover {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
}

#top-bar a:focus {
    color: inherit;
    text-decoration: none;
}

#top-bar a:active {
    color: inherit;
    text-decoration: underline;
}

#page-select > .selected {
    font-weight: bold;
    border-bottom-style: solid;
    border-width: 1px;
    border-color: var(--theme_color);
    transition: border-color 1s;
    will-change: border-color;
}






/* ---------------------------------------------------------------- */
/*-------------------------- LOADING -------------------------------*/
/* ---------------------------------------------------------------- */

@keyframes loading-screen-enter {
    0% {opacity: 100%; display: block}
    99% {opacity: 0%; display: block}
    100% {opacity: 0%; display: hidden}
}

@keyframes loading-screen-exit {
    0% {opacity: 0%; display: block}
    100% {opacity: 100%; display: block}
}

.loading {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: rgb(10,10,10);
    pointer-events: none;
}

.loading.enter {
    animation: loading-screen-enter 0.5s var(--ease_out_quint);
    animation-fill-mode: forwards;
}

.loading.exit {
    animation: loading-screen-exit 0.5s var(--ease_out_quint);
    animation-fill-mode: forwards;
}

.loading > div {
    position: absolute;
    top: 50%;
    left: 50vw;
    transform: translate(-50%, -50%);
}

.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
}

.loader::after,
.loader::before {
    content: '';
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border: 4px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    animation: animloader 2s ease-in-out infinite;
}

.loader::after {
    border-color: #FF3D00;
    animation-delay: 1s;
}

@keyframes animloader {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}










/* -------------------------------------------------------------- */
/* -------------------- JAVA BACKGROUNDS ------------------------ */
/* -------------------------------------------------------------- */

#main-canvas {
    background-color: rgb(0, 0, 0);
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -9999;
    filter: blur(1vh) contrast(100%) saturate(70%);
    -webkit-filter: blur(1vh) contrast(100%) saturate(70%);
    opacity: 0%;
}

#p5container {
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 0;
    will-change:transform;
    margin:1px;
    pointer-events: none;
}

.p5Canvas {
    width: 100%;
    height: 100%;
    transition: opacity 1s;
    will-change: opacity;
    opacity: 0%;
    padding-right: 2px;
    padding-bottom: 2px;

}

.p5Canvas.active {
    opacity: 100%;
}










/* ---------------------------------------------------------------------- */
/*-------------------------- UNIVERSAL CSS -------------------------------*/
/* ---------------------------------------------------------------------- */



/* ---------------------- BACKGROUNDS ------------------------ */

.terminal-bg {
    background-image: radial-gradient(rgba(253, 93, 0, 0.1), rgba(10, 10, 10, 1) 120%);
}
.terminal-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: repeating-linear-gradient(0deg, rgba(10,10,10,0.3) 2px, rgba(10,10,10,0.3) 6px, transparent 4px, transparent 8px);
    pointer-events: none;
}

.grain {
    position: fixed;
    left: 0%;
    top: 0%;
    z-index: 10000;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-image: url("https://uploads-ssl.webflow.com/620f7be7ba14210e13ef2aa0/62139eb491f4e8aa9259c525_noise.gif");
    background-position: 0px 0px;
    background-size: 250px;
    opacity: 0.035;
    pointer-events: none;
}



/* ---------------------- TEXT ------------------------ */

.white-text {
    color: white; 
}

.black-text {
    color: black; 
}



/* ---------------------- IMG ------------------------ */

.cover-img {
    position: absolute;
    top: 0;
    left: 0px;
    bottom: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden;
}
.cover-img img {
    /* Make image to at least 100% wide and tall */
    min-width: 100%; 
    min-height: 100%; 

    /* Setting width & height to auto prevents the browser from stretching or squishing the image */
    width: auto;
    height: auto;

    /* Center the image */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.cover-vid {
    position: absolute;
    top: 0;
    left: 0px;
    bottom: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden;
}
.cover-vid video {
    /* Make video to at least 100% wide and tall */
    min-width: 100%; 
    min-height: 100%; 

    /* Setting width & height to auto prevents the browser from stretching or squishing the video */
    width: auto;
    height: auto;

    /* Center the video */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.youtube-container {
    width: 100%;
    height: 100%;
}

.youtube-container div {
    position: relative;
    padding-bottom: 56.25%;
    border-color: inherit;
    transition: transform 1s;
    will-change: border-color, transform;
}

.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.background-img {
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    width: 100%;
    height: 100%;
}

.img-container {
    width: 100%;
    height: 100%;
    position: relative;
    /* border-bottom: solid 10px; */
    border-color: inherit;
    transition: transform 1s, filter 1s;
    will-change: border-color, transform;
}

.img-container > div {
    height:100%;
}

.img-container img {
    width: calc(100% + 0.5px);
    height: calc(100% + 0.5px);
    position: relative;
    transition: clip-path 1s;
    transition-timing-function: var(--ease_out_quint);
    will-change: clip-path;
    clip-path: inset(0 0 0 0);
    vertical-align: middle;
}

.img-container::after {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0%;
    background-color: inherit;
    transition: opacity 1s;
}
.img-container:active::after {
    transition: opacity 0s;
    opacity: 40%;
}

body.hasHover .img-container:hover img {
    clip-path: inset(3px 3px 3px 3px);
    transition: clip-path 0s;
}

.vid-container {
    width: 100%;
    height: 100%;
    position: relative;
    /* border-bottom: solid 10px; */
    border-color: inherit;
    transition: transform 1s;
    will-change: border-color, transform;
    clip-path: inset(0.5px 0.5px 0.5px 0.5px);
}

.vid-container > div {
    height:100%;
}

.vid-container video {
    width: 100%;
    height: 100%;
    position: relative;
    transition: clip-path 1s;
    transition-timing-function: var(--ease_out_quint);
    will-change: clip-path;
    clip-path: inset(0 0 0 0);
    vertical-align: middle;
}

body.hasHover .vid-container:hover video {
    clip-path: inset(3px 3px 3px 3px);
    transition: clip-path 0s;
}

.vid-container::after {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0%;
    background-color: inherit;
    transition: opacity 1s;
}
.vid-container:active::after {
    transition: opacity 0s;
    opacity: 40%;
}

.video-js {
    max-height: 70vh !important; 
}

.flex-container {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}



/* ---------------------- MISC ------------------------ */

.flex-container > * {
    flex: 1 0 100%;
}
.flex-container > .flex21 {
    flex: 1 0 40%;
}
.flex-container > .flex40 {
    flex: 1 0 100%;
}
.flex-container > .flex60 {
    flex: 1 0 100%;
}


@media (min-width: 600px) {
    .flex-container>* {
        flex: 1 0 100%;
    }
    .flex-container > .flex21 {
        flex: 1 0 40%;
    }
    .flex-container > .flex40 {
        flex: 1 0 100%;
    }
    .flex-container > .flex60 {
        flex: 1 0 100%;
    }
}

@media (min-width: 1000px) {
    .flex-container>* {
        flex: 1 0 30%;
    }
    .flex-container > .flex21 {
        flex: 1 0 21%;
    }
    .flex-container > .flex40{
        flex: 1 0 40%;
    }
    .flex-container > .flex60 {
        flex: 1 0 60%;
    }
}



.body-width {
    max-width: 2000px;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
    top: 0px;
}

.center {
    position: absolute;
    top: 50%;
    left: 50vw;
    transform: translate(-50%, -50%);
}

.margin-center {
    margin-left: auto;
    margin-right: auto;
}

.top {
    top: 0px;
}

.bottom {
    bottom: 0px;
}

.left {
    left:0px;
}

.right {
    right:0px;
}

/* ---------------------- REVEAL ANIMATIONS ------------------------ */

/*-------------------KEYFRAMES-----------------------*/

@keyframes grain {
    0%, 100% {transform: translate(0,0);}
    10% {transform: translate(-5%,-10%);}
    30% {transform: translate(3%,-15%);}
    50% {transform: translate(12%,9%);}
    70% {transform: translate(9%,4%);}
    90% {transform: translate(-1%,7%);}
}

@keyframes scroll-in {
    0% {transform: translateX(20%); opacity: 0;}
    100% {transform: translateX(0px); opacity: 100;}
}

@keyframes translate-in {
    0% {transform: translateX(20%);}
    0% {transform: translateX(0px);}
}

@keyframes clip-rect-in {
    0% {clip-path: inset(100% 100% 100% 100%);}
    100% {clip-path: inset(0 0 0 0);}
}

@keyframes scale-in {
    0% {transform: scale(0%);}
    100% {transform: scale(100%);}
}

@keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 100;}
}

@keyframes fade-out {
    0% {opacity:100%;}
    100% {opacity:0%;}
}

@keyframes fade-up {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-down {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes black-in {
    0% {filter:brightness(0%);}
    100% {filter:brightness(100%);}
}

@keyframes black-out {
    0% {filter:brightness(100%);}
    100% {filter:brightness(0%);}
}

@keyframes cursor-blink {
    0% {opacity: 100;}
    25% {opacity: 100;}
    50% {opacity: 0;}
    75% {opacity: 0;}
    100% {opacity: 100;}
}

@keyframes pulsing-screen {
    0% {opacity: 100%;}
    5% {opacity: 93%;}
    18% {opacity: 100%;}
    21% {opacity: 93%;}
    28% {opacity: 100%;}
    40% {opacity: 93%;}
    45% {opacity: 100%;}
    60% {opacity: 93%;}
    69% {opacity: 100%;}
    80% {opacity: 93%;}
    82% {opacity: 100%;}
    100% {opacity: 93%;}
}

@keyframes width-shrink {
    0% {width: inherit;}
    100% {width: 0px;}
}

@keyframes width-grow {
    0% {width: 0px;}
    100% {width: inherit;}
}

@keyframes flicker-in {
    000% {opacity: 0%;}
    /* 005% {opacity: 10%;}
    0010% {opacity: 10%;}
    020% {opacity: 0%;} */
    020% {opacity: 20%;}
    022% {opacity: 10%;}
    030% {opacity: 30%;}
    032% {opacity: 20%;}
    036% {opacity: 36%;}
    050% {opacity: 50%;}
    053% {opacity: 40%;}
    055% {opacity: 55%;}
    070% {opacity: 70%;}
    073% {opacity: 65%;}
    075% {opacity: 75%;}
    080% {opacity: 80%;}
    083% {opacity: 70%;}
    085% {opacity: 85%;}
    100% {opacity: 100%;}
}

@keyframes flicker-border-shadow {
    000% {box-shadow: 0px 0px 4px 4px transparent;}
    005% {box-shadow: 0px 0px 6px 6px var(--theme_color_transparent20);}
    015% {box-shadow: 0px 0px 4px 4px var(--theme_color_transparent10);}
    025% {box-shadow: 0px 0px 4px 4px var(--theme_color_transparent20);}
    030% {box-shadow: 0px 0px 4px 4px var(--theme_color_transparent10);}
    060% {box-shadow: 0px 0px 4px 4px var(--theme_color_transparent20);}
    100% {box-shadow: 0px 0px 4px 4px transparent;}
}

@keyframes border-flicker-in {
    000% {border-color: transparent; opacity:0%;}
    /* 020% {border-color: inherit;}
    022% {border-color: transparent;} */
    030% {border-color: inherit;}
    032% {border-color: transparent;}
    /* 036% {border-color: inherit;}
    050% {border-color: transparent;} */
    053% {border-color: inherit;}
    055% {border-color: transparent;}
    /* 070% {border-color: inherit;}
    073% {border-color: transparent;} */
    075% {border-color: inherit;}
    080% {border-color: transparent;}
    /* 083% {border-color: inherit;}
    085% {border-color: transparent;} */
    100% {border-color: inherit; opacity:100%;}
}

.border-flicker-in.active {
    animation: border-flicker-in 0.75s;
}
.reveal {
    position: relative;
    opacity: 0;
}
.reveal.active {
    opacity: 1;
}
.active.fade-down {
    animation: fade-down  0.9s var(--ease_out_quint);
}
.active.fade-up {
    animation: fade-up  0.9s var(--ease_out_quint);
}
.active.fade-left {
    animation: fade-left  0.9s var(--ease_out_quint);
}
.active.fade-right {
    animation: fade-right 0.9s var(--ease_out_quint);
}
.active.fade-in {
    animation: fade-in 0.9s var(--ease_out_quint);
}
.active.black-in {
    animation: black-in 1s var(--ease_out_quint);
}
/* 
.image-view {
    position:absolute;
    top:0px;
    left: 0px;
    width:100vw;
    height:var(--vh);
    background-color: rgba(0, 0, 0, 0.8);
    transition: opacity 1s;
    will-change: opacity;
    opacity: 0%;
    pointer-events: none;
    z-index:-1;
}

.image-view.active {
    pointer-events: auto;
    opacity: 100%;
} */




/* -------------------- GRAPHICS ----------------------- */

.corner-tri-top-left {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 14px;
    height: 14px;
    -webkit-transform: rotate(45deg);
}
.corner-tri-top-right {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 14px;
    height: 14px;
    -webkit-transform: rotate(45deg);
}
.corner-tri-bottom-left {
    position: absolute;
    bottom: -7px;
    left: -7px;
    width: 14px;
    height: 14px;
    -webkit-transform: rotate(45deg);
}
.corner-tri-bottom-right {
    position: absolute;
    bottom: -7px;
    right: -7px;
    width: 14px;
    height: 14px;
    -webkit-transform-: rotate(45deg);
}


















/* ------------------------------------------------------------------- */
/*---------------------------RECYCLE BIN-------------------------------*/
/* ------------------------------------------------------------------- */


/* .grain {
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -9998;
    overflow: hidden;
    will-change: transform;
}
.grain::after {
    content:"";
    position: absolute;
    width:200vw;
    height: 200vh;
    left: -50%;
    top: -50%;
    animation: grain 1.5s steps(6) infinite;
    filter:opacity(30%);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAIsGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDg4LCAyMDIwLzA3LzEwLTIyOjA2OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMi0wMi0wMVQxNjoxMDo1Ni0wODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0wMi0wMVQxNjoxMToyOC0wODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjItMDItMDFUMTY6MTE6MjgtMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBjZmE1ZTRhLWVhOTctMmY0Yi05NjUxLTBhZWI4M2VkZjgyYiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjQ3NGIwMWI5LTMyOGQtMWQ0Ny1hMWIwLWNiN2U0NjMxNzZhZiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjdmZGQxZWJkLWUzNzctMjU0Mi05ZjBmLTg4ODQ1YTQyZTIwZCIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ZmRkMWViZC1lMzc3LTI1NDItOWYwZi04ODg0NWE0MmUyMGQiIHN0RXZ0OndoZW49IjIwMjItMDItMDFUMTY6MTA6NTYtMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMi4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NzM3MGRhODItNzRkMS0wYjQ4LTljNjMtMWFhNDY3ZGVlNDJhIiBzdEV2dDp3aGVuPSIyMDIyLTAyLTAxVDE2OjExOjI4LTA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iZGVyaXZlZCIgc3RFdnQ6cGFyYW1ldGVycz0iY29udmVydGVkIGZyb20gYXBwbGljYXRpb24vdm5kLmFkb2JlLnBob3Rvc2hvcCB0byBpbWFnZS9wbmciLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBz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);
} */

/* #navigation {
    width: var(--nav_width);
    height: calc(100vh - var(--top_bar_height));
    top: var(--top_bar_height);
    left: 0px;
    position: absolute;
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    text-shadow: 0px 0px 10px var(--theme_color);
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
} */

/* #body-content {
    flex-grow: 1;
    height: 100%;
    box-shadow: 0px 0px 4px 4px var(--theme_color_transparent20);
    transition: text-shadow 1s;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    flex-direction: column;
}

#project-select {
    width: calc(var(--nav_width) - 20px);
    height: 100%;
    box-shadow: 0px 0px 4px 4px var(--theme_color_transparent20);
} */

/* 
.scroll-in {
    animation: scroll-in 0.75s normal forwards ease-out;
    will-change: opacity;
}

.fade-in {
    animation: fade-in 0.75s normal forwards ease-out;
    will-change: opacity;
}

.fade-out-1s {
    animation: fade-out 1s normal forwards ease-in-out;
    will-change: opacity;
}

.fade-in-1s {
    animation: fade-in 1s normal forwards ease-in-out;
    will-change: opacity;
}

.black-in {
    animation: black-in 1s normal forwards ease-in-out;
    will-change: opacity;
}

.black-out {
    animation: black-out 1s normal forwards ease-in-out;
    will-change: opacity;
}

.flicker-in {
    animation: flicker-on 0.5s normal forwards ease-in-out;
    will-change: opacity;
}

.flicker-in-slow {
    animation: flicker-on 1s normal forwards ease-in-out;
    will-change: opacity;
}

.flicker-out {
    animation: flicker-off 1s normal forwards ease-in-out;
    will-change: opacity;
}

.width-shrink {
    animation: width-shrink 1s normal forwards ease-in-out;
    will-change: opacity;
}

.width-grow {
    animation: width-grow 1s normal forwards ease-in-out;
    will-change: opacity;
}

.screen-pulse {
    animation: pulsing-screen 1s infinite;
    will-change: opacity;
}

.translate-0-scroll {
    transition: transform 1s;
    will-change: transform;
} */