body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #333;
            margin: 0;
            margin-bottom: 2rem;
            padding: 0;
            color: white;
        }
header {
            background: red;
            padding: 2rem 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: left;
            gap: 2rem;
        }
        h1 {
            margin: 1rem 0 0 0;
            font-size: 2.5rem;
        }
        h2 {
            color: #b8860b;
            margin-top: 0.8rem;
        }
        .page-flex {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 2rem;
            max-width: 1200px;
            margin: 2rem auto 0 auto;
        }
        .bsky-blackbox-alt {
            background: #222831;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.18);
            padding: 1.5rem 1rem 1.5rem 1.5rem;
            display: flex;
            justify-content: flex-start;
            align-items: stretch; /* changed from center to stretch */
            height: auto;         /* let it grow with content */
            margin-left: -100px;
            margin-right: 1rem;
            min-width: 400px;
            width: 100%;
        }
        .bsky-embed-scroll {
            height: 100%;
            max-height: 140vh;     /* remove max-height restriction */
            overflow-y: auto;
            width: 100%;
            min-width: 0;
            scrollbar-color: black #222831;
            padding-right: 5rem;
            display: flex;
            flex-direction: column;
        }
        bsky-embed {
            flex: 1 1 auto;
            height: 100%;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            display: block;
        }
        main {
            max-width: 700px;             /* Slightly wider black text box */
            background: #181818;
            border-radius: 12px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.07);
            padding: 2rem;
            color: #fff;
            margin: 0;
            margin-right: -100px;
        }
        .section {
            margin-bottom: 2rem;
        }
        .social-links {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
        }

        .social-links a {
            margin-right: 1rem;
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        .social-links a:hover {
            color: red;
        }
        .social-img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            border-radius: 8px;
            transition: transform 0.2s;
            display: block;
        }

        .social-links a:hover .social-img {
            transform: scale(1.08);
        }

        .vrchat-img {
            aspect-ratio: unset;      /* Remove custom aspect ratio */
            object-fit: cover;        /* Fill the box, cropping if needed */
            width: auto;
            height: 50px;
        }

        .header-badge {
            height: 7rem; /* Adjust as needed */
            width: auto;
            border-radius: 12px;
            margin-right: 1.5rem;
        }

        .header-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .ital {
            font-style: italic;
        }

    @media (max-width: 600px) {
    .social-img {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 800px) {
    .header-badge {
            height: 5rem; /* Adjust as needed */
            width: auto;
            border-radius: 12px;
            margin-right: 1.5rem;
        }

    .page-flex {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 1.5rem;
    }
    .bsky-blackbox-alt {
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
        align-items: center;
        justify-content: center;
        width: 90%;
        max-width: 100vw;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
    }
    .bsky-embed-scroll {
        width: 100%;
        max-width: 100vw;
        padding: 0;
    }
    bsky-embed {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    main {
        margin-right: 0;
        max-width: 100%;
    }
}