body {
            margin: 0;
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #5f5f5f;
            color: #e0e0e0;
        }
        .container {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 220px;
            background: #1b1b1b;
            padding: 24px 0;
            box-shadow: 2px 0 8px #0002;
            position: sticky;
            top: 0;
            height: 100vh;
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar li {
            margin: 0;
        }
.sidebar a {
    display: block;
    padding: 12px 32px;
    color: #e0e0e0;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.2s, border-color 0.2s;
    font-family: 'VT323', monospace; /* Add this line */
    font-size: 1.2em; /* Optional: tweak for effect */
}
        .sidebar a:hover, .sidebar a:focus {
            background: #242424;
            border-left: 3px solid #8f8f8f;
        }
        .main {
            flex: 1;
            padding: 32px;
        }
        .category {
            margin-bottom: 48px;
        }
.category h2 {
    margin-top: 0;
    font-size: 1.6em; /* Increased size */
    color: rgb(255, 255, 255);
    font-family: 'Bitcount Prop Double', sans-serif;
}

        .unicode-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
        }
        .unicode-item {
            background: #252525;
            border-radius: 6px;
            padding: 0 8px; /* horizontal padding for variable width */
            min-width: 0; /* allow shrinking */
            height: 48px;
            font-size: 2em;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px #0002;
            cursor: pointer;
            transition: background 0.2s;
            user-select: none;
            white-space: nowrap; /* keep text in one line */
        }
        .unicode-item:active, .unicode-item.copied {
            background: #a8a8a8;
            color: #fff;
        }
.unicode-divider {
    width: 100%;
    height: 0;
    border-top: 2px dashed #444;
    margin: 8px 0;
    opacity: 0.7;
}

.tag-button.active {
    background-color: rgb(131, 104, 31) !important; /* Use !important to override inline styles */
    color: black;
}