/* Early 2010s styling - simpler, table-like layouts */
        @font-face {
            font-family: "that_old__90s_computer_font";
            src: url("that_old__90s_computer_font.ttf");
            font-weight: normal;
            font-style: normal;
        }

        body {
            font-family: "that_old__90s_computer_font", Arial, Helvetica, sans-serif;
            /* Background image with fallback color */
            background-color: #3C3E3C;
            background-image: url('backdrop.png');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            margin: 0;
            padding: 0;
            font-size: 1.2em;
            color: #ff1493;
            text-align: center;
        }
        
        /* Top navigation bar */
        .top-nav {
            background-color: #464746;
            border-bottom: 1px solid #ccc;
            padding: 10px 20px;
            font-size: 11px;
        }
        
        .top-nav a {
            color: #ff1493;
            text-decoration: none;
            margin-right: 10px;
        }
        
        /* Breadcrumb navigation */
        .breadcrumb {
            background-color: #1a1a1a;
            padding: 8px 20px;
            border-bottom: 1px solid #ccc;
            font-size: 1em;
            text-align: left;
        }
        
        .breadcrumb a {
            color: #ff1493;
            text-decoration: none;
            text-align: left;
        }
        
        /* Header banner wrapper */
        div[style*="padding: 15px 20px"] {
            max-width: 900px;
            margin: 8px auto 0 auto;
            padding: 0 20px !important;
            display: flex;
            justify-content: flex-start;
        }
        
        /* Header banner */
        .header-banner {
            display: block;
            width: 200px;
            margin-left: 0;
        }
        
        /* Main container */
        .container {
            max-width: 900px;
            margin: 20px auto;
            background-color: #282A28;
            border: 3px solid #FFADD8;
            border-radius: 5px;
        }
        
        /* Two column layout */
        .content-wrapper {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto;
            grid-template-areas: "sidebar" "main-content";
            width: 100%;
        }
        
        .sidebar {
            display: grid;
            grid-template-rows: 15.5rem 7rem 31rem 50rem;
            width: 10rem;
            background-color: #282A28;
            border-right: 2px solid #FFADD8;
            padding: 1em;
            vertical-align: top;
            font-size: 1em;
        }

        .icons {
            width: 5rem;
            height: 5rem;
        }

        #link-icon {
            height: 1.5rem;
            width: 1.5rem;
            padding-right: 0.5rem;
            margin-bottom: -0.2rem;
        }

        .donation {
            display: grid;
            margin-bottom: 1.5rem;
            justify-items: center;
            row-gap: 1.5rem;
        }
        
        .main-content {
            display: table-cell;
            padding: 20px;
            vertical-align: top;
        }

        .scrolling {
            white-space: nowrap;
            animation: scroll 14s linear infinite;
            color: #fff;
            font-size: 1em;
            font-weight: bold;
            letter-spacing: 0.5em;
        }

        

        /* Profile image */
        .profile-image {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
        }
        
        /* Sidebar elements */
        .rate-box {
            display: grid;
            max-width: 20rem;
            min-width: 7rem;
            background-color: #ffffcc;
            border: 1px solid #cc9900;
            padding: 10px;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .rate-box .price {
            font-size: 18px;
            font-weight: bold;
            color: #cc0000;
        }

        .tiers:before {
            background-image: url('addictedd199-heart.png');
            background-repeat: no-repeat;
            background-size: 1em 1em;
            margin-right: 0.5em;
            padding-bottom: 0.1em;
            content: "";
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: middle;
        }
        
        .action-button {
            display: block;
            max-width: 8rem;
            min-width: 6.5rem;
            height: 1.5rem;
            background: linear-gradient(to bottom, #ff1493, #1a1a1a);
            color: white;
            text-decoration: none;
            padding: 8px;
            margin: 5px 0;
            text-align: center;
            border-radius: 3px;
            font-size: 0.9em;
        }
        
        .action-button:hover {
            background: linear-gradient(to bottom, #ff1493, #0a0a0a);
        }
        
        .contact-info {
            max-width: 10rem;
            background-color: #FFC2E2;
                /* #ff14932e; */
            border: 2px solid #FF1493;
            border-radius: 5px;
            padding: 0.7em;
            margin-top: 1em;
            font-size: 1em;
            row-gap: 2em;
        }

        .promo {
            padding: 2.6em 0.5em 3.3em 0.5em;
            border-image-source: url("border-for-video-pink.jpg");
            border-image-slice: 47 4 63 4;
            border-image-width: 47px 5px 63px 5px;
            border-image-repeat: stretch;
            /* border-image-outset: 47px 5px 63px 5px; */
        }

        .highlight {
            color: #FF1493;
        }
        
        /* Profile header */
        .profile-header {
            border-bottom: 2px solid #ff1493;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        .profile-header h1 {
            margin: 0 0 5px 0;
            font-size: 20px;
            background: linear-gradient(to right, #ff1493, #1a1a1a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .profile-header h2 {
            margin: 0;
            font-size: 14px;
            color: #666;
            font-weight: normal;
        }
        
        /* Profile content */
        .profile-description {
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        /* Offers section */
        .offers {
            background-color: #282A28;
            padding: 15px;
            margin: 20px 0;
        }
        
        .offer-item {
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px 0;
        }
        
        .offer-item .offer-title {
            font-weight: bold;
            color: #ff1493;
        }
        
        .offer-item .offer-price {
            color: #cc0000;
            font-weight: bold;
        }
        
        /* Feedback section */
        .feedback-section {
            margin-top: 30px;
        }
        
        .feedback-header {
            background:
                linear-gradient(-35deg, #1a1a1a 50%, #ff1493 50%);
            color: #FFFCF2;
            padding: 10px;
            font-weight: bold;
            text-align: start !important;
        }
        
        .rating-summary {
            background-color: #f0f0f0;
            padding: 10px;
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        
        .feedback-item {
            border: 3px solid #ff1493;
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;
            background-color: #333533;
            color: #FFFCF2;
        }
        
        .feedback-header-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 11px;
            color: #666;
        }
        
        .stars {
            color: #ff9900;
        }
        
        .feedback-comment {
            line-height: 1.5;
            text-align: start !important;
        }
        
        /* Footer */
        .footer {
            background-color: #333;
            color: #ccc;
            padding: 20px;
            text-align: center;
            font-size: 11px;
            margin-top: 20px;
        }
        
        .footer a {
            color: #99ccff;
            text-decoration: none;
            margin: 0 5px;
        }
        
        .footer-links {
            margin-bottom: 10px;
        }
        
        /* Scrolling text animation */
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        @media (max-width: 768px) {
            
            .content-wrapper {
                grid-template-columns: auto;
                grid-template-rows: repeat(auto, 1fr);
                grid-template-areas:
                    "main-content"
                    "sidebar";
                width: 100%;
            }

            .container {
                width: 85%;
                min-width: 25rem;
            }

            .vid-bound {
                min-width: 21rem;
            }

            .sidebar {
                grid-area: sidebar;
                display: grid;
                grid-template-rows: 1fr;
                width: auto;
                justify-items: center;
                border-right: 0px;
            }

            .main-content {
                grid-area: main-content;
                display: grid;
                grid-template-rows: 3fr;
                min-width: 10rem;
                width: auto;
            }

            .feedback-section {
                display: grid;
                width: auto;
            }

            .scrolling {
                animation: scroll 7s linear infinite;
            }

            .rate-box {
                min-width: 15rem;
            }

            .action-button {
                min-width: 10rem;
                min-height: 1.5rem;
            }

            .profile-image {
                min-width: 7rem;
                max-width: 15rem;
                max-height: 20rem;
                min-height: 10rem;
            }

            .contact-info {
                min-width: 15rem;
            }

            .sticky {
                position: sticky;
                top: 1em;
            }

            .banner-container {
                justify-content: center !important;
            }

            #ig {
                grid-area: ig;
            }

            #tt {
                grid-area: tt;
            }

            #tmb {
                grid-area: tmb;
            }

            #label {
                grid-area: title;
            }

            #donate-btn {
                grid-area: donate;
            }

            #email-btn {
                grid-area: email;
            }

            .donation {
                grid-template-areas:
                    ". title ."
                    ". donate ."
                    ". email ."
                    "ig tt tmb";
            }
        }