* {
            font-family: "ＭＳ Pゴシック", "MS PGothic", sans-serif;
        }

        a {
            text-decoration: none;
        }

        b {
            color: white;
        }

        /* ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: transparent !important;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
        }


        ::-webkit-scrollbar-thumb:hover {
            background: #595959;
        } */

        .avatar-small {
            box-sizing: border-box;
            border: 1px solid #CCC;
            padding: 2px;
            background-clip: content-box;
            width: 61px;
            height: 61px;
            z-index: 2;
            position: relative;
        }

        .button.button-yellow {
            --button-bg: #ffca38;
            border-color: #9b5d00;
            color: #531;
            text-shadow: 0 1px 0 #ffe8af, 1px 0 0 #ffe8af;
        }

        .button {
            height: 100%;
            padding: 4px;
            border: solid 1px #646464;
            outline: 0;
            font-size: 13px;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            box-sizing: border-box;
            --button-bg: #e7e7e7;
            background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .3) 100%), var(--button-bg);
            background-blend-mode: normal, overlay, normal;
            background-repeat: no-repeat;
            border-radius: 3px;
            color: #444;
            text-shadow: 0 1px 0 #fff, 1px 0 0 #fff;
            box-shadow: inset 0 2px 1px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .2);
            transition: box-shadow .2s steps(3);
            --hover-shadow-color: rgba(128, 128, 128, 0.5);
            cursor: pointer;
            max-height: 60px;
            transition: .5s ease-in-out;
        }

        .button:hover {
            box-shadow: inset 0 5px 5px rgba(255, 255, 255, .5), inset 0 0 0 1px #fff, inset 0 -1px 0 rgba(0, 0, 0, .2), 0 0 0 2px var(--hover-shadow-color);
        }

        #follow-link {
            color: #906219;
        }

        #cardContainer {
            max-width: 500px;
            display: flex;
            flex-direction: column;
            background: black;
            border-radius: 8px;
            padding: 10px;
            gap: 8px;
        }

        #userContainer {
            display: flex;
            background-repeat: no-repeat;
            gap: 5px;
            border-radius: 8px;
            padding: 5px;
            box-shadow: 0 0 4px black;
        }

        #cardMain {
            display: flex;
            justify-content: space-between;
            gap: 5px;
        }

        #mainUserInfo {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        /* #userBio {
            background: #333;
            padding: 10px;
            border-radius: 2px;
            color: white;
            max-height: 40px;
            width: 30%;
            overflow: hidden;
        }

        #userBio:hover {
            max-height: 100%;
        } */

        #postsContainer {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .post-content {
            background: #333;
            color: white;
            word-break: break-all;
            width: 95%;
            padding: 5px;
            gap: 5px;
        }

        .post-content a {
            color: #3f7bac;
            text-decoration: underline;
        }

        .post {
            display: flex;
            gap: 5px;
        }

        .post-actions {
            font-size: 12px;
            padding-top: 4px;
            color: #ccc;
        }

        .post-button {
            color: white;
            cursor: pointer;
        }

        .ping {
            color: #3f7bac;
            background-color: rgba(63, 123, 172, .1);
            border: 1px solid rgba(63, 123, 172, .3);
            border-radius: 3px;
            padding: 1px 4px;
            display: inline-block;
            text-decoration: none;
            vertical-align: baseline;
            box-sizing: border-box;
            font-size: 13px;
            margin: -2px 0;
            position: relative;
            top: -1px;
            height: 17px;
            padding-bottom: 0
        }

        .ping:hover {
            background-color: rgba(58, 134, 197, .2)
        }

        .nametag-wrapper {
            display: inline-flex;
            cursor: pointer;
            margin: -2px 0;
            position: relative;
            top: -1px;
            height: 17px
        }

        .nametag-left {
            padding: 1px 4px;
            border: 1px solid transparent;
            border-radius: 3px;
            transition: border-radius .2s, background-color .2s, border-right .25s, padding .2s;
            z-index: 1;
            text-decoration: none;
            vertical-align: baseline;
            box-sizing: border-box;
            font-size: 13px
        }

        .nametag-right {
            padding-left: 0;
            padding-right: 0;
            padding-top: 1px;
            padding-bottom: 1px;
            color: #3f7bac;
            background-color: rgba(63, 123, 172, .1);
            border: 1px solid rgba(63, 123, 172, .3);
            border-left: none;
            border-radius: 0 3px 3px 0;
            font-size: 13px;
            vertical-align: baseline;
            box-sizing: border-box;
            text-decoration: none;
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            white-space: nowrap;
            transition: max-width .25s ease, opacity .25s steps(3), padding-left .25s steps(3), padding-right .25s steps(3)
        }

        .nametag-wrapper:hover .nametag-right {
            max-width: 200px;
            opacity: 1;
            padding-left: 4px;
            padding-right: 4px
        }

        .nametag-wrapper:hover .nametag-left {
            border-radius: 3px 0 0 3px;
            border-right: 0 solid transparent !important
        }

        .post-emotes {
            gap: 5px;
        }

        .post-header {
            display: flex;
            flex-direction: column;
            width: 95%;
            gap: 2px;
        }

        .post-content .image,
        .post-content video {
            border: 1px #CCC solid;
            padding: 2px;
            object-fit: contain;
        }