* {
    margin: unset;
    padding: unset;
    border: unset;
    font-family: 'Lucida Console', 'Courier New', 'Monaco', monospace;
    scrollbar-color: #7700ff #1900ff00;
    scrollbar-width: thin;
    box-sizing: border-box;
    cursor: enherit;
    --bg: 1;
    -webkit-touch-callout: inherit;
    -webkit-user-select: inherit;
    -khtml-user-select: inherit;
    -moz-user-select: inherit;
    -ms-user-select: inherit;
    user-select: inherit;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
    -webkit-touch-callout: auto;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

@keyframes appear {
    0% {
        visibility: 0;
    }

    100% {
        visibility: 1;
    }
}

.goodclassname {
    width: 60px;
    height: 60px;
}

.platformhover {
    position: absolute;
    opacity: 0;
    transition: opacity .3s;
    width: fit-content;
    height: fit-content;
}

.goodclassname:hover+.platformhover {
    opacity: 1;
}

#navigation {
    margin: auto;
}

#crt {
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 49%);

    position: fixed;
    z-index: 3;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100vw;
    height: 100vh;

    background-repeat: repeat;
    background-size: 2px 2px;
    animation-timing-function: linear;
    pointer-events: none;
}

html {
    cursor: url("/images/xp_cursor.png"), auto;
}

@property --percent-transparent-bg {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

@property --article-color {
    syntax: '<color>';
    initial-value: #6600ff;
    inherits: false;
}

@keyframes bgPulse {
    0% {
        --percent-transparent-bg: 0%
    }

    50% {
        --percent-transparent-bg: 60%
    }
}

@keyframes starScroll {
    0% {
        background-position-y: 0%, 0%, 0%, 0%;
        background-position-x: 0%, 0%, 0%, 0%
    }

    100% {
        background-position-y: 0%, 8000px, 4000px, 0%;
        background-position-x: 0%, 10000px, 5000px, 0%
    }
}

@keyframes rainbow {
    0% {
        --article-color: #c004f9;
    }

    14% {
        --article-color: #2904f9;
    }

    28% {
        --article-color: #04b4f9;
    }

    42% {
        --article-color: #04f966;
    }

    56% {
        --article-color: #f1f904;
    }

    70% {
        --article-color: #f9a804;
    }

    84% {
        --article-color: #f90419;
    }

    100% {
        --article-color: #c004f9;
    }
}

body {
    padding: 20px;
    background: rgb(53, 10, 209);
    background-image:
        radial-gradient(rgba(0, 0, 0, 0) var(--percent-transparent-bg),
            #260b89 90%),
        url("/images/background.png"),
        url("/images/stripes.svg"),
        linear-gradient(#140a3a);
    background-size: auto, auto, 20px, auto;
    background-repeat: no-repeat, repeat, repeat, no-repeat;
    background-attachment: fixed, scroll, scroll, fixed;
    background-position-y: 0px;
    animation: 10s bgPulse infinite, 200s starScroll infinite;
    animation-timing-function: linear;
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }
}

a {
    cursor: url("/images/xp_hand.png"), auto;
    color: lightblue;
    font-weight: bold;
    /*border-bottom: 1px dotted white;*/
}

a::visited {
    color: lightcoral;
    font-weight: bold;
}

flatwindow {
    display: block;
    width: unset;
    height: unset;
    border: 3px solid #49318c;
}

flatwindow:hover {
    border: 3px solid #6932ff;
}

windowtitle {
    font-style: italic;
    position: absolute;
    left: 8px;
    top: 3px;
}

/*
border: 3px solid #6932ff;
border: 3px solid #1f2851;*/

.eighty8x31 {
    margin: 0;
    padding: 0;
    border: 3px solid #1f2851;
    image-rendering: pixelated;
}

.eighty8x31:hover {
    border: 3px solid #3257ff;
}


body {
    color: white;
}

html,
body {
    margin: 0px;
    height: 100%;
}

article {
    background-color: #000000;
    border: 3px solid var(--article-color);
    margin: auto;
    padding: 20px;
    /*max-width: 60%;*/
    overflow: hidden;
    margin: auto;
    background-image: url('/images/window.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 4px) 2px;
    /*box-shadow: 0px 0px 20px -4px rgb(89, 0, 255);*/
    box-shadow: 0px 0px 20px 0px rgba(89, 0, 255, .5), inset 0px 0px 20px 0px rgba(89, 0, 255, .5);
    background-size: 40px;
    margin-bottom: 1em;
}

@font-face {
  font-family: sevensegment;
  src: url("/seven.ttf");
}

.time {
    font-family: sevensegment, monospace;
    color: #f10f5d;
    padding: 4px;
    background-color: #410a1d;
    border-radius: 3px;
    border: 4px solid #141414;
    width: fit-content;
    height: fit-content;
}
#pm {
    width: 20%;
    height: 100%;
    outline: 2px solid white;
    display: inline-block;
}
#time {
    font-family: inherit;
    display: inline;
    font-weight: ;
    font-size: 15vw;
}
.noai:hover {
    transform: scale(2);
}
#colon {
    font-family: monospace;
}

.posrelative {
    min-width: unset;
    width: fit-content;
    position: relative;
}

subarticle {
    display: block;
    position: relative;
    background-color: #000000;
    border: 3px solid var(--article-color);
    width: 50%;
    margin: auto;
    padding: 20px;
    overflow: hidden;
    background-image: url('/images/window.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 4px) 2px;
    /*box-shadow: 0px 0px 20px -4px rgb(89, 0, 255);*/
    box-shadow: 0px 0px 20px 0px rgba(89, 0, 255, .5), inset 0px 0px 20px 0px rgba(89, 0, 255, .5);
    background-size: 40px;
    margin-bottom: 1em;
    visibility: 0;
    animation-name: appear;
    animation-duration: 3s;
    padding-top: 25px;
}

.cat {
    pointer-events: none;
}

.sqlist>*,
.sqlistr>* {
    display: block;
    color: white;
    text-decoration: none;
}

.sqlist>*::before {
    content: url("/images/dot.svg");
    padding-right: 8px;
}

.sqlistr>*::after {
    content: url("/images/dot.svg");
    padding-left: 8px;
}

.sqlistr {
    text-align: right;
}

.invis {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    background-image: none;
    box-shadow: none;
}

.mouse {
    -webkit-touch-callout: unset;
    -webkit-user-select: unset;
    -khtml-user-select: unset;
    -moz-user-select: unset;
    -ms-user-select: unset;
    user-select: unset;
}

linkbutton,
button {
    display: block;
    cursor: url("/cursors/xp_hand.png"), auto;
    background-color: #0e0d16;
    border: 3px solid #1f2851;
    height: unset;
    font-size: 20px;
    width: calc(100% - 8px);
    padding: 8px;
    margin: 4px;
    color: white;
    align-content: center;
}

linkbutton:hover,
button:hover {
    border: 3px solid #3257ff;
}



window {
    overflow: scroll;
    background-color: #000000;
    border: 3px solid #49318c;
    height: 100%;
    min-height: 0;
    z-index: 600002;
    flex: 1;
    padding: 10px;
}

window:hover {
    border: 3px solid #6932ff;
}

.img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px 10px;
    grid-template-areas: ". . . ."
        ". . . .";
    justify-content: stretch;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
}

.flex {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    justify-items: stretch;
    gap: 10px;
}

.nolink {
    color: white;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
}