::selection {
            color: white;
            text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 2px #0025b8, 0 0 3px #00619c;
        }

        ul[role=menu]>[role=menuitem]>a {
            color: black !important;
        }


        ul[role=menu]>[role=menuitem]>a:hover {
            font-style: normal !important;
        }

        /*   spirit by   asterism-m.com   */
        @font-face {
            font-family: Spirit;
            src: url('../fonts/Spirit.ttf');
        }

        /*   little spirit by   asterism-m.com   */
        @font-face {
            font-family: Little Spirit;
            src: url('../fonts/LittleSpirit.ttf');
        }

        /*   rainy hearts by   dafont.com/camellina.d3583   */
        @font-face {
            font-family: RainyHearts;
            src: url('../fonts/RainyHearts.ttf');
        }

        /*   questrial by   dafont.com/camellina.d3583   */
        @font-face {
            font-family: Questrial;
            src: url('../fonts/Questrial-Regular.ttf');
        }

        /*  basiic by   cinni.net  */
        @font-face {
            font-family: basiic;
            src: url('../fonts/basiic.ttf');
        }

        /*  curlyq by  miserabledolly.net  */
        @font-face {
            font-family: CurlyQ;
            src: url('../fonts/miserabledolly_CurlyQ.ttf');
        }

        /*  pirkkala by  dafont.com/otto-ojala.d11505  */
        @font-face {
            font-family: pirkkala;
            src: url('../fonts/pirkkala.ttf');
        }

        /*  pixelta by  dafont.com/blankids.d7030  */
        @font-face {
            font-family: pixelta;
            src: url('../fonts/Pixelta.ttf');
        }

        body,
        html {
            cursor: url('../cursors/normal.png'), auto;
        }

        a {
            cursor: url('../cursors/pointer.png'), pointer;
        }

        a:hover {
            font-style: italic !important;
        }

    .window {
        box-shadow: none !important;
    }

        .window,
        .title-bar-text,
        [role=button],
        button,
        input[type=file]::file-selector-button,
        .tree-view {
            font-family: basiic !important;
            font-size: 13px !important;
        }

        .outline {
            text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
            color: white;
            padding: 1px;
        }

        #lace {
            /*  nyaa @ neocities  */
            background-image: url(https://nyaa.neocities.org/images/index2024/lacey2222.png);
            background-size: auto 100%;
            width: 100%;
            height: 20px;
            filter: drop-shadow(0px 1px #7f8183);
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 9999;
        }

        #lace-bottom {
            background-image: url(https://nyaa.neocities.org/images/index2024/lacey2222.png);
            background-size: auto 100%;
            width: 100%;
            height: 20px;
            filter: drop-shadow(0px 1px #7f8183);
            position: fixed;
            bottom: 0px;
            left: 0px;
            transform: rotate(180deg);
            z-index: 9999;
        }

        /*      chat css        */

        /* container holding the chatbox elements*/
        #chat-container-main {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: stretch;
            width: 200px;
            background: #fadceb url('https://files.catbox.moe/7bhrh2.jpg');
            border: 1px solid #77c4fc;
            border-radius: 30px;
            padding: 16px;
        }

        #chat-title {
            margin-top: -20px;
            color: #f99ecc;
            text-align: center;
        }

        #chat-container {
            width: 180px;
            height: 150px;
            border: 1px solid #B6E2FE;
            border-radius: 20px;
            padding: 10px;
            overflow-y: auto;
            background-image: url('https://files.catbox.moe/10haj1.jpeg');
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            position: relative;
            display: block;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
        }

        #chat-container::-webkit-scrollbar {
            width: 0;
            height: 0;
            background: transparent;
        }

        /*whole username box */
        #username-container {
            width: 202px;
            height: min-content;
            padding: 10px;
            background-image: url('https://files.catbox.moe/vj9s6k.jpeg');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            border-radius: 20px;
            border: 1.5px dashed #F1C4F3;
            margin-top: 10px;
            position: relative;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            box-sizing: border-box;
        }

        /* inner wrapper*/
        #username-container>div {
            display: flex;
            gap: 22px;
        }

        #username-container .input-wrapper {
            padding: 2px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
            align-content: center;
            justify-content: space-evenly;
            width: 100%;
            overflow: visible;
        }


        #username-input-section {
            display: flex;
        }

        #welcome-message {
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }


        #username-input-section {
            display: flex;
        }

        #welcome-message {
            display: none;
        }


        #username-container.show-welcome #username-input-section {
            display: none;
        }

        #username-container.show-welcome #welcome-message {
            display: flex;
        }

        .welcome-text {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: "Verdana2";
            color: #f99ecc;
            font-size: 12px;
            letter-spacing: 1px;
            margin-bottom: -20px;
        }

        .username-display {
            font-size: 13px;
            color: #d58bd9;
            margin-top: 2px;
            margin-bottom: 12px;
        }

        .welcome-image {
            margin-top: -18px;
        }

        .message-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }

        .timestamp {
            order: -1;
            opacity: 1;
            font-style: italic;
            font-size: .6em;
            margin-left: auto;
            width: 100%;
            text-align: right;
            margin-bottom: -4px;
        }

        .username {
            font-size: 14px;
            margin-right: 1px;
            margin-left: 1px;
            width: 100%;
        }

    .lace {
        border-width: 6px;
        border-style: solid;
        border-image: url('../media/brdr_widerscallops.png') 6 fill round;
    }


        #username-input {
            width: 100px;
            border: 1px solid #000;
            border-radius: 8px;
            font-family: "Verdana2";
            font-size: 11px;
            color: #000;
            background: #d4f3fb;
            box-sizing: border-box;
            outline: none;
        }

        #username-input::placeholder {
            color: #000;
        }

        #website-input {
            width: 100px;
            border: 1px solid #000;
            border-radius: 8px;
            font-family: "Verdana2";
            font-size: 11px;
            color: #000;
            background: #d4f3fb;
            box-sizing: border-box;
            outline: none;
        }

        #website-input::placeholder {
            color: #000;
        }

        #button-container {
            margin-top: 14px;
            margin-left: -16px;
        }

        #set-username-btn {
            width: auto;
            background-color: #f99ecc;
            color: white;
            border: none;
            border-radius: 10px;
            font-family: "Verdana2";
            font-size: 12px;
            flex-shrink: 0;
        }

        #set-username-btn:hover {
            background: #ffb3d9;
        }

        .message-text strong {
            font-weight: 500;
        }

        .message-text {
            white-space: pre-wrap;
            overflow-wrap: break-word;
        }

        .message-text a {
            color: #8aaf46;
            text-decoration: none;
            word-break: break-all;
        }

        .message-text a:hover {
            color: #93d4f5;
        }

        .message {
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            padding: 8px;
            border-radius: 10px;
            margin: 3px 0;
            max-width: 90%;
            font-size: 12px;
            background-color: #fbe3ef;
            border: 1px solid #f99ecc;
            color: #f99ecc;
        }

        .message:nth-child,
        .message:nth-child .username,
        .message:nth-child .timestamp {
            color: #f99ecc;
        }

        .message:nth-child .message-text strong {
            color: #e67aa6;
        }

        .message:nth-child .username a {
            color: #f99ecc;
            text-decoration: none !important;
        }

        .message:nth-child .username a:hover {
            color: #e67aa6;
            text-decoration: normal !important;
        }

        #chat-messages {
            min-height: min-content;
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }


        #chat-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 4px;

        }

        #chat-input {
            width: 135px;
            height: 40px;
            overflow-y: auto;
            border-width: 7px;
            border-style: solid;
            border-image: url("https://i.imgur.com/ROjUrNz.gif") 6 fill round;
            padding: 2px;
            resize: none;
            font-family: "Verdana2";
            font-size: 12px;
            color: #f99ecc;
            outline: none;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        #chat-input::-webkit-scrollbar {
            width: 0;
            height: 0;
            background: transparent;
        }

        #chat-input::placeholder {
            color: #f99ecc;
            font-size: 12px;
        }

        #load-older-button {
            display: block;
            margin-left: 20px;
            margin-bottom: 6px;
            width: 100px;
            padding: none;
            background-color: #e0f3fc;
            color: #a2daf7;
            border-radius: 10px;
            border-width: 1px;
            border-color: #a2daf7;
            border-style: dashed;
            font-family: "Verdana2";
            font-size: 11px;
        }


        #load-older-button:hover {
            background-color: #f0f9fe;
        }


        #load-older-button:active {
            background-color: #e0f3fc;
        }

        .char-counter {
            position: absolute;
            right: 7px;
            bottom: -12px;
            font-size: 0.5rem;
            color: #f99ecc;
            font-style: italic;
            text-align: right;
            padding: 2px 5px;
        }

        .input-group {
            position: relative;
            flex-grow: 1;
        }


        .char-counter.over-limit {
            color: #F35890;
            font-weight: bold;
        }


        #send-button {
            width: 40px;
            height: 22px;
            background-color: #efddf5;
            color: #d58bd9;
            border: 1px solid #d58bd9;
            border-radius: 10px;
            text-align: center;
            font-family: "Verdana2";
            font-size: 12px;
            margin-left: -3px;
            outline: none;
        }

        #send-button:hover {
            background-color: #f6ebfa;
        }

        #send-text {
            display: flex;
            align-items: center;
            align-content: center;
            flex-direction: column;
            justify-content: center;
        }


        #emoji-button {
            width: 40px;
            height: 22px;
            background-color: #d4f3fb;
            color: #d58bd9;
            border: 1px solid #000;
            border-radius: 10px;
            text-align: center;
            font-family: "Verdana2";
            font-size: 12px;
            margin-left: -3px;
        }

        #emoji-content {
            display: flex;
            align-items: center;
            align-content: center;
            flex-direction: column;
            justify-content: center;
        }

        .input-group {
            position: relative;
        }

        .emoji-picker {
            display: none;
            position: absolute;
            background: white;
            padding: 10px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            right: 40px;
            grid-template-columns: repeat(4, 1fr);
            /* 4 columns */
            gap: 8px;
            width: 150px;

        }

        .emoji-picker.active {
            display: grid;
            gap: 5px;
            outline: none;
            background: #ecf8fc;
            border: 1px solid #000;
            border-radius: 10px;
        }

        .emoji {
            transition: transform 0.2s;
            outline: none;
            border: none;
            background: #ecf8fc;
        }

        .emoji img {
            width: 20px;
            height: 20px;
            outline: none;
            border: none;
        }

        .emoticon {
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }

        #emoji-button:hover {
            background-color: #e1f7fc;
        }