/* breakpoints for tablet, mobile l and mobile p */

/* 1152px */
/* 768px */
/* 425px */

@media screen and (max-width:1152px) {

    :root {
        --fs-xs: var(--s0-625);
        --fs-s: var(--s0-75);
        --fs-m: var(--s1);
        --fs-l: var(--s1-5);
        --fs-xl: var(--s3);
    }

    .player_layout {
        grid-template-columns: 1fr;
    }

    .heading_wrapper {
        padding-bottom: var(--s1);
    }

    .video_info_wrapper .scroll-wrapper {
        position: relative;
        overflow: auto;
    }

}

@media screen and (max-width:800px) {

    .nav_brand {
        width: 6.1rem;
        min-width: 6.1rem;
        height: 2rem;
    }

    *:not(h1, h2, h3, h4, p) {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .nav_toggle {
        display: flex;
        position: fixed;
        z-index: 1001;
        outline: none;
        background-color: var(--white);
        color: var(--black);
        top: var(--s1);
        right: var(--page-padding);
        align-items: center;
        padding-block: 0.3125rem;
        cursor: pointer;
        font-size: var(--fs-s);
    }



    .nav_toggle_icon{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: var(--s0-75);
        /* height: var(--s0-375); */
        height: 0.35rem;
        transition: all 0.3s;
    }

    .nav_toggle.active .nav_toggle_icon {
        transform: translateX(0.1875rem)
    }

    .nav_menu_overlay {
        display: block;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        inset: 0;
        background-color: #101010f0;
        z-index: 999;
        backdrop-filter: blur(1px);
        transition: opacity 0.3s;
    }

    .nav_component:has(.nav_toggle.active) .nav_menu_overlay {
        opacity: 1;
        pointer-events: all;
    }

    .nav_toggle_text {
        height: 1em;
        overflow: hidden;
    }

    .nav_toggle_text > div {
        transition: transform 0.3s;
    }

    .nav_toggle.active .nav_toggle_text > div {
        transform: translateY(-1em);
    }

    .nav_toggle_icon span {
        transition: all 0.3s;
        width: var(--s0-75);
        height: 1.33px;
        background-color: var(--black);
    }

    /* .nav_toggle.active {
        background-color: var(--pink);
    } */

    .nav_toggle.active .nav_toggle_icon span:first-child {
        transform: rotate(45deg) translateY(0.1875rem);
    }

    .nav_toggle.active .nav_toggle_icon span:last-child {
        transform: rotate(-45deg) translateY(calc(-0.1875rem - 0.33px));
    }

    @media (pointer: fine) {
        .nav_toggle:hover, .nav_toggle:focus-visible {
            background-color: var(--pink);
        }
    }

    @media (pointer: coarse) {
        .nav_toggle:hover, .nav_toggle:focus-visible {
            background-color: var(--white);
        }
    }

    .plyr__volume input[data-plyr="volume"] {
        display: none;
        visibility: hidden;
    }

    .plyr__controls__item[data-plyr="pip"] {
        display: none;
        visibility: hidden;
    }

    .nav_component {
        position: relative
    }

    .nav_floating {
        position: fixed;
        top: var(--s0-5);
        right: calc(var(--page-padding) - var(--s0-5));
        z-index: 1000;
        background-color: var(--bg2);
        border-radius: var(--br1);
        backdrop-filter: blur(var(--s0-5));
        padding-right: var(--s1);
        padding-top: var(--s2);
        transition: all 0s;
        transform-origin: 100% 0;
        overflow: hidden;

        transform: scale(0) translate(-2rem, 1rem);
        height: 0;
    }

    .nav_top, .nav_bottom {
        flex-direction: column;
        padding-right: var(--s1)
    }

    .nav_top {
        padding-bottom: var(--s0-5);
        background-color: transparent;
    }

    .nav_bottom {
        padding-top: 1rem;
        padding-bottom: 1.125rem;
        background-color: transparent;
        gap: var(--s0-5);
        border-top: var(--px) solid var(--bc3);
        width: calc(100% - var(--s1));
    }

    .nav_link {
        padding-block: var(--s0-75);
        transition: transform 0s;
        font-size: var(--fs-m);
        padding-right: var(--s4);
        min-width: fit-content;
    }

    .nav_link_small {
        transition: transform 0s;
        font-size: var(--fs-s);
    }

    .nav_link.is-cta:not(.is-profile) {
        margin-top: 0;
        margin-right: 0;
        width: calc(100% - var(--s1));
        justify-content: center;
        margin-left: var(--s0-5);
        flex: 1
    }

    .signup_wrapper {
        margin-left: var(--s0-5);
        margin-top: var(--s0-5);
        border-top: var(--px) solid var(--bc3);
        border-left: none;
        margin-right: calc(var(--s1) * -1);
        padding-top: var(--s0-5);
        flex: 1;
        min-width: 12.5rem;
        align-items: center;
        justify-content: start;
        gap: var(--s0-5);
    }

    .nav_link.is-secondary {
        margin: 0;
        padding-inline: 0;
    }

    .player_wrapper {
        max-width: calc(100vw - 2* var(--page-padding));
    }

    .video_controls {
        gap: 0.375rem;
        max-width: 100vw;
        margin-inline: calc(var(--page-padding) * -1);
        padding-inline: var(--page-padding);
        overflow: scroll;
        padding-top: var(--s0-5);
    }

    .a-b-wrapper {
        gap: 0.375rem;
    }

    .video_controls.open {
        padding-top: 9.5rem;
        margin-top: -9rem;
        overflow: hidden;
    }
/* 
    .player_wrapper::before, .player_wrapper::after {
        content: "";
        position: absolute;
        left: calc(var(--page-padding)* -1);;
        bottom: 0;
        width: var(--page-padding);
        height: 2rem;
        background: linear-gradient(90deg, var(--bg1), transparent);
        z-index: 100;
    } */

    .player_wrapper::after {
        left: auto;
        right: calc(var(--page-padding)* -1);
        background: linear-gradient(270deg, var(--bg1), transparent);
    }

    .download_wrapper {
        padding-left: 0;
    }

    .download_wrapper h3 {
        display: none;
    }

    .video_controls > div {
        font-size: 0.75rem;
    }

    .video_controls svg {
        width: 0.75rem;
        height: 0.75rem;
    }

    .btn-toggle {
        height: 1.5rem;
        width: 2.25rem;
        min-width: 2.25rem;
    }

    .btn-toggle .toggle {
        height: 1.5rem;
        width: 1.5rem;
        margin-right: 0.75rem;
    }

    .btn-toggle.active .toggle {
        margin-left: 0.75rem;
    }

    .login_wrapper {
        padding: var(--s2) var(--s1-5);
    }

    .footer_layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--s2-5) var(--s1);
    }

    .footer_layout {
        padding: 0 var(--s1);
    }

    #playlist .playlist_item {
        width: 12rem;
        height: 10.25rem;
    }

    #playlist .playlist_item:hover, #playlist .playlist_item.current {
        width: calc(12rem - 0.75rem);
        height: calc(10.25rem - 0.75rem);
    }

    #performers {
        padding-inline: 0.25rem
    }

    .plyr #performers .timestamp_wrapper {
        top: 0.125rem;
    }

    .plyr #performers.paused .timestamp_wrapper {
        top: 0.25rem;
    }

    .timestamp_wrapper {
        max-width: 27.5vw;
    }

    #performers .timestamp_img {
        max-height: 20vw;
    }

    #performers.paused .timestamp_img {
        height: 100cqw;
    }

        .performer-info {
        display: flex;
        flex-direction: column;
    }

    

        .performer-image-wrapper {
        max-width: 50vw
    }

    .popover > .btn.is-round {
        top: var(--s0-75);
        right: var(--s0-75);
    }

    .profile-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--s2)
    }

    .profile-info, .profile-name {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .plan-wrapper, .profile-form {
        width: 100%;
    }

    .discord-buttons {
        width: 100%;
    }

    .plan_card {
        width: 100%;
    }

    .plans_wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--s1);
    }

    .plan_description{
        min-height: 0;
    }

}

@media screen and (max-width:425px) {
    :root{
        --page-padding: 0.75rem;   
        --fs-xl: var(--s2-5);
    }

    .nav_toggle {
        right: var(--s1);
    }

    .nav_floating {
        right: var(--s0-5);
    }

    #performers.paused .timestamp_img {
        height: 15vw;
    }

    #performers .timestamp_info span:nth-child(2) {
        display: none;
    }

    .timestamp_wrapper, .timestamp_info{
        max-width: 27.5vw;
    }

    #performers:not(:has(.timestamp_wrapper:nth-child(2))):not(:has(.timestamp_wrapper[data-position="middle"]))::after {
        max-width: 27.5vw;
    }


}