body {
        margin: 0;
        height: 200%;
    }

    :root {

        --bbx-blur: 0px;
        --bbx-bg-opacity: 1;
        --bbx-photo-opacity: 1;
        --bbx-bio-sticky-wrap-height: 0px;

        --bbx-adminbar-height: 0px;

        --bbx-content-lg: 980px;
        --bbx-content-md: 692px;
        --bbx-content-sm: 87.5%;

        --bbx-hero-h: 436px;
        --bbx-hero-h-sm: 288px;

        --bbx-bio-heading-padding: 36px;
        --bbx-bio-padding-bottom: 60px;

        --bbx-img-desktop: url("https://bayazidbulbul.com/wp-content/uploads/2024/07/Bayazid-Bulbul-Photo-D-2x.webp");
        --bbx-img-mobile: url("https://bayazidbulbul.com/wp-content/uploads/2024/12/Bayazid-Bulbul-Photo-M-3x.webp");

        --bbx-scroll-offset: 1;
        --bbx-max-blur: 50;
        --bbx-final-blur: 50;

        --bbx-bg-max-opacity: 1;
        --bbx-bg-middle-opacity: 0;

        --bbx-photo-max-opacity: 1;
        --bbx-photo-middle-opacity: 0.5;

        --bbx-bg-middle-scroll: 80;
        --bbx-photo-middle-scroll: 180;
        --bbx-hold-duration: 80;
        --bbx-max-scroll: calc((var(--bbx-bio-sticky-wrap-height, 0px) - var(--bbx-hero-h)) + 150px);

        --bbx-image-reveal-delay: 500;
        --bbx-motion-blur-scale: 1;
    }

    body.admin-bar {
        --bbx-adminbar-height: 32px;
    }

    @media screen and (max-width: 782px) {
        body.admin-bar {
            --bbx-adminbar-height: 46px;
        }
    }

    @media only screen and (max-width: 1068px) {
        :root {
            --bbx-bg-middle-scroll: 70;
            --bbx-photo-middle-scroll: 170;
        }
    }

    @media only screen and (max-width: 767px) {
        :root {
            --bbx-photo-middle-scroll: 300;
            --bbx-max-scroll: calc(var(--bbx-bio-sticky-wrap-height, 0px) - 80px);
        }
    }

    .bbx-bio .bbx-preloader-small {
        position: absolute;
        top: calc((var(--bbx-hero-h) / 2) + 22px);
        left: 50%;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33px;
        height: 33px;
        transform: translate(-50%, -50%);
        border-radius: 12px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        isolation: isolate;
    }


    body.bbx-is-page-loading:not(.bbx-is-page-ready) .bbx-bio .bbx-preloader-small,
    body.bbx-is-page-warming:not(.bbx-is-page-ready) .bbx-bio .bbx-preloader-small {
        opacity: 1;
        visibility: visible;
        transition: opacity 1s cubic-bezier(1, 0, 1, 0), visibility 1s cubic-bezier(1, 0, 1, 0);
    }

    .bbx-bio .bbx-preloader-small span {
        position: absolute;
        height: 7px;
        width: 2px;
        background-color: #1d1d1f55;
        border-radius: 8px;
        transform: rotate(calc(var(--i) * -30deg - 120deg)) translateY(9px);
        animation: bbxBioLoader 0.6s linear infinite;
        animation-delay: calc(-0.05s * var(--i));
    }

    .theme-dark .bbx-bio .bbx-preloader-small span {
        background-color: #f5f5f766;
    }

    @keyframes bbxBioLoader {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0.12;
        }
    }

    @media only screen and (max-width: 767px) {
        .bbx-bio .bbx-preloader-small {
            top: calc((var(--bbx-hero-h-sm) / 2) + 24px);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bbx-bio .bbx-preloader-small span {
            animation: none;
        }
    }

    .theme-dark .bbx-bio {
        color: #f5f5f7;
    }

    .bbx-bio {
        font-size: 17px;
        line-height: 1.470589;
        letter-spacing: -0.022em;
        font-family: "BB Pro Text", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-style: normal;
        color: #1d1d1f;
    }

    .bbx-bio .bbx-blur-section {
        position: fixed;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
        background: transparent;
        contain: layout paint style;
        pointer-events: none;
    }

    .theme-dark .bbx-bio .bbx-blur-section .bbx-img-bg {
        background-color: #141416;
    }

    .bbx-bio .bbx-blur-section .bbx-img-bg {
        background-color: #fafafc;
        position: absolute;
        left: 0;
        width: 100%;
        height: var(--bbx-hero-h);
        z-index: 1;

        opacity: 0;
        visibility: hidden;

        transform: translate3d(0, 0, 0);
        transform-origin: center center;
        backface-visibility: hidden;
        will-change: opacity, transform;
        contain: paint;
        transition: none;
    }


    .bbx-bio .bbx-blur-section .bbx-img-bg,
    .bbx-bio .bbx-blur-section .bbx-bio-image {
        transition-property: none;
        transition-duration: 0s;
        animation-duration: 0s;
    }

    .bbx-bio .bbx-blur-section .bbx-bio-image {
        position: absolute;
        left: 50%;

        width: var(--bbx-content-lg);
        height: var(--bbx-hero-h);
        z-index: 2;
        opacity: 0;
        visibility: hidden;
        background-image: var(--bbx-img-desktop);
        background-size: 750px var(--bbx-hero-h);
        background-repeat: no-repeat;
        background-position: center bottom;
        transform: translate3d(-50%, 0, 0);
        transform-origin: center bottom;
        backface-visibility: hidden;
        will-change: filter, -webkit-filter, opacity, transform;
        contain: paint;
    }


    body:not(.bbx-is-page-ready) .bbx-bio .bbx-blur-section .bbx-img-bg,
    body:not(.bbx-is-page-ready) .bbx-bio .bbx-blur-section .bbx-bio-image {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    body.bbx-is-page-warming:not(.bbx-is-page-ready) .bbx-bio .bbx-blur-section .bbx-img-bg,
    body.bbx-is-page-warming:not(.bbx-is-page-ready) .bbx-bio .bbx-blur-section .bbx-bio-image {
        opacity: 0.001 !important;
        visibility: visible !important;
    }

    body.bbx-is-page-ready .bbx-bio .bbx-blur-section .bbx-img-bg {
        visibility: visible !important;
        opacity: var(--bbx-bg-opacity);
    }


    body.bbx-is-page-ready .bbx-bio .bbx-blur-section .bbx-bio-image {
        visibility: visible !important;
        opacity: var(--bbx-photo-opacity);
    }


    @media only screen and (max-width: 1200px) {
        .bbx-bio .bbx-blur-section .bbx-bio-image {
            width: var(--bbx-content-md);
            height: var(--bbx-hero-h);
            background-image: var(--bbx-img-desktop);
            background-size: 750px var(--bbx-hero-h);
            background-position: center bottom;
        }
    }

    @media only screen and (max-width: 767px) {
        .bbx-bio .bbx-blur-section {
            height: 100%;
            min-height: var(--bbx-hero-h-sm);
        }

        .bbx-bio .bbx-blur-section .bbx-img-bg {
            height: var(--bbx-hero-h-sm);
            transform: translate3d(0, 0, 0);
        }

        .bbx-bio .bbx-blur-section .bbx-bio-image {
            left: 0;
            width: 100%;
            height: var(--bbx-hero-h-sm);
            background-image: var(--bbx-img-mobile);
            background-size: 290px 240px;
            background-repeat: no-repeat;
            background-position: center bottom;
            transform: translate3d(0, 0, 0);
            transform-origin: center bottom;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        :root {
            --bbx-motion-blur-scale: 1;
        }
    }

    html.bbx-no-filter .bbx-bio .bbx-blur-section .bbx-bio-image {
        filter: none;
        -webkit-filter: none;
    }

    html.bbx-save-data .bbx-bio .bbx-preloader-small span {
        animation-duration: 1s;
    }

    html.bbx-reduced-data .bbx-bio .bbx-preloader-small span {
        animation-duration: 1s;
    }

    html.bbx-forced-colors .bbx-bio {
        color: CanvasText;
    }

    html.bbx-forced-colors .bbx-bio .bbx-blur-section .bbx-img-bg {
        background: Canvas;
    }


    .bbx-bio .bbx-bio-sec {
        position: relative;
        margin-bottom: var(--bbx-bio-padding-bottom);
        z-index: 3;
    }

    .bbx-heading-section {
        position: relative;
        height: var(--bbx-hero-h);
        max-width: var(--bbx-content-lg);
        margin: 0 auto;
    }

    .bbx-headlines {
        position: sticky;
        inset-block-start: var(--bbx-adminbar-height);
        z-index: 9;
        width: 50%;
        padding-top: 194px;
        margin-bottom: -36px;
        font-family: "BB Pro Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .bbx-my-name {
        margin-top: 0;
        margin-bottom: 12px;
        font-size: 40px;
        letter-spacing: 0.008em;
        line-height: 1.1;
        font-weight: 500;
    }

    .bbx-subhead {
        margin: 0;
        font-size: 32px;
        letter-spacing: 0.01em;
        line-height: 1.125;
        font-weight: 300;
    }

    .bbx-content-sec {
        width: var(--bbx-content-lg);
        margin-left: auto;
        margin-right: auto;
        padding-top: 60px;
    }

    .bbx-bio .bbx-bio-sec .bbx-content-sec::after {
        content: "";
        display: block;
        clear: both;
    }

    .bbx-bio-column {
        position: relative;
        float: left;
        width: 41.66667%;
        min-height: 2px;
        margin: 0;
        padding: 0;
    }

    .bbx-right {
        margin-left: 8.33333%;
    }

    .bbx-bio-sticky-wrap {
        position: relative;
    }

    .bbx-aalink:hover {
        text-decoration: underline;
    }

    .bbx-aalink:active {
        text-decoration: none;
    }

    @media (min-width: 768px) {
        .bbx-aalink {
            display: none;
        }
    }

    @media (max-width: 767px) {
        .bbx-dview {
            display: none;
        }
    }

    @media only screen and (max-width: 1200px) {
        .bbx-content-sec {
            width: var(--bbx-content-md);
            padding-top: 56px;
        }

        .bbx-heading-section {
            max-width: var(--bbx-content-md);
        }

        .bbx-my-name {
            font-size: 36px;
            letter-spacing: 0.008em;
            line-height: 1.11111;
        }

        .bbx-subhead {
            font-size: 28px;
            letter-spacing: 0.012em;
            line-height: 1.1428572;
        }
    }

    @media only screen and (max-width: 767px) {
        .bbx-bio .bbx-bio-sec {
            position: relative;
            min-height: calc(var(--bbx-bio-sticky-wrap-height, 0px) + 80px);
        }

        .bbx-bio-sticky-wrap {
            position: sticky;
            top: 0;
            z-index: 4;
        }

        .bbx-heading-section {
            height: auto;
            max-width: var(--bbx-content-sm);
            margin: 0 auto;
            padding-top: calc(var(--bbx-hero-h-sm) + var(--bbx-bio-heading-padding));
        }

        .bbx-headlines {
            position: relative;
            inset-block-start: auto;
            width: 100%;
            margin: 0;
            padding-top: 0;
        }

        .bbx-my-name {
            font-size: 28px;
            letter-spacing: 0.016em;
            line-height: 1.1428572;
        }

        .bbx-subhead {
            font-size: 24px;
            letter-spacing: 0.016em;
            line-height: 1.166667;
        }

        .bbx-content-sec {
            width: var(--bbx-content-sm);
            padding-top: 24px;
        }

        .bbx-bio-column {
            float: none;
            width: 100%;
            margin-left: 0;
        }

        .bbx-right {
            margin-left: 0;
            display: none;
        }
    }


    .animated-text-ab[data-bbx-text] {

        --bbx-viewport-offset: 144px;
        --bbx-scroll-start: 0;
        --bbx-scroll-step: 20px;
        --bbx-text-transition-duration: 600ms;


        position: relative;
        overflow: hidden;
        height: 44px;
        contain: paint;
    }

    @media only screen and (max-width: 1200px) {
        .animated-text-ab[data-bbx-text] {
            height: 40px;
        }
    }

    @media only screen and (max-width: 767px) {
        .animated-text-ab[data-bbx-text] {

            --bbx-viewport-offset: 124px;
            --bbx-scroll-start: 50px;
            --bbx-scroll-step: 30px;

            height: 32px;
        }
    }

    .animated-text-ab[data-bbx-text] .transform {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;

        display: block;
        margin: 0;
        padding-bottom: 4px;
        line-height: 1.2;

        opacity: 0;
        pointer-events: none;
        transform: translate3d(0, 100%, 0);
        transition:
            transform var(--bbx-text-transition-duration) cubic-bezier(0.77, 0, 0.175, 1),
            opacity 100ms linear;
        will-change: transform, opacity;
    }

    .animated-text-ab[data-bbx-text] .transform.middle {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .animated-text-ab[data-bbx-text] .transform.up {
        opacity: 1;
        transform: translate3d(0, -100%, 0);
    }

    .animated-text-ab[data-bbx-text] .transform.hidden {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }


    .animated-text-ab[data-bbx-text].bbx-scroll-mode .transform {
        transition: none;
    }

    .theme-dark .animated-text-ab[data-bbx-text] .transform:not(:first-child) {
        color: #09f;
    }

    .animated-text-ab[data-bbx-text] .transform:not(:first-child) {
        color: #0070ee;
    }