:root {
    --white: #fcf0da;
    --faded-white: #fcf0daa0;
    --tsp: #fcf0da00;
    --blue: #1d4569;
    --dp: #190426;

    --cw: #1904260a;
    --cb: #190426a0;
    --cd: #190426e0;

    --mp: #15062e00;
    --green: #1cff46;
    --mint: #2bffca;

    --gold: #ff9f0a;
    --sea: #0583fa;

    --forest: #60ef2b;
    --scarlet: #d92c60;

    /* slightly translucent versions
*       of the above colours */

    --di-green: #1cff46a0;
    --di-mint: #2bffcaa0;

    --di-gold: #ef7f2ab8;
    --di-sea: #0389ffb0;

    --di-forest: #58df2ba0;
    --di-scarlet: #ef1f4da0;

    /* color-scheme: dark; */
}

* {
    font-family: monospace;
    scrollbar-color: var(--dp) var(--green);
    scrollbar-width: thin;
    scrollbar-gutter: stable;

    /* color-scheme: dark; */
}

*::selection {
    background-color: var(--cb);
    color: var(--green);
    text-decoration: var(--green);
}

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

::-webkit-scrollbar-track {
    background: var(--blue);
    opacity: 0.3;
}

::-webkit-scrollbar-thumb {
    background: var(--white);
}

.page {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--white);
}


.lpage {
    position: fixed;
    width: 100vw;
    height: 100vh;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rpage {
    position: fixed;
    width: 100vw;
    height: 100vh;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.content {
    margin: 20vw;
}

.item {
    color: var(--white);
    
}

.text {
    /* text-decoration: none; */
    color: var(--white);
    /* text-shadow: 1px 1px 0px var(--dp), 2px 2px 0px var(--dp), 3px 3px 0px var(--dp); */
}

.text::selection {
    text-shadow: -1px -1px 0px var(--dp), -2px -2px 0px var(--dp), -3px -3px 0px var(--dp);
}

.link {
    text-decoration: underline;
}

.link:hover {
    color: var(--green);
}

.checkerboard {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
    width: 100vw;
    height: 100vh;
    background-color: var(--mp); /* default background for gaps */
}

.checkerboard div {
    width: 100%;
    height: 100%;
}

.moving-gradient {
    background: linear-gradient(270deg, #0d0313, #25033b);
    background-size: 400% 400%;

    -webkit-animation: MoveBG 9s ease infinite;
    -moz-animation: MoveBG 9s ease infinite;
    -o-animation: MoveBG 9s ease infinite;
    animation: MoveBG 9s ease infinite;
}

@-webkit-keyframes MoveBG {
    0%{background-position:0% 52%}
    50%{background-position:100% 49%}
    100%{background-position:0% 52%}
}
@-moz-keyframes MoveBG {
    0%{background-position:0% 52%}
    50%{background-position:100% 49%}
    100%{background-position:0% 52%}
}
@-o-keyframes MoveBG {
    0%{background-position:0% 52%}
    50%{background-position:100% 49%}
    100%{background-position:0% 52%}
}
@keyframes MoveBG {
    0%{background-position:0% 52%}
    50%{background-position:100% 49%}
    100%{background-position:0% 52%}
}

@-webkit-keyframes Rotate {
    0%{transform: rotate(0deg)}
    33%{transform: rotate(45deg)}
    66%{transform: rotate(270deg)}
    100%{transform: rotate(0deg)}
}
@-moz-keyframes Rotate {
    0%{transform: rotate(0deg)}
    33%{transform: rotate(45deg)}
    66%{transform: rotate(270deg)}
    100%{transform: rotate(0deg)}
}
@-o-keyframes Rotate {
    0%{transform: rotate(0deg)}
    33%{transform: rotate(45deg)}
    66%{transform: rotate(270deg)}
    100%{transform: rotate(0deg)}
}
@keyframes Rotate {
    0%{transform: rotate(0deg)}
    33%{transform: rotate(45deg)}
    66%{transform: rotate(270deg)}
    100%{transform: rotate(0deg)}
}