@font-face { 
    font-family: bierstadt; 
    src: url('/static/bierstadt.ttf'),local('Arial'),local('system-ui'); 
    font-style: normal;
}

body {
    background-color: var(--primary-bg);
    font-size:clamp(0.9rem,1.05vw,1.1rem);
    line-height: 1.6;
    color: #FFFFFF;
    font-family: bierstadt, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',Arial, sans-serif;
    margin:0px;
    -webkit-tap-highlight-color:transparent;
    --subtle-font:#BFBFBF;
    --primary-bg:#111315;
    --secondary-bg:#1A1C1E;
    --tertiary-bg:#25282B;
    --accent-clr:#FF4C53;
    --popup-clr:#090A0B;
}

@keyframes page_show {
    from{
        opacity: 0;
        transform: translateY(0.6em);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.hidden{
    display: none !important;
}

#navigation_loading_bar{
    position:fixed;
    inset:0;
    height:0.3em;
    background-color: var(--tertiary-bg);
    z-index: 3;
    display: none;
}

#navigation_loading_bar::after{
    content:"";
    animation:page_loading_bar 15s cubic-bezier(.04,.7,0,1.02);
    animation-fill-mode: forwards;
    position: absolute;
    inset:0;
    width:0;
    background-color: var(--accent-clr);
}


@media (display-mode: window-controls-overlay){
    #navigation_loading_bar{
        left: env(titlebar-area-x, 0);
        width: env(titlebar-area-width, 100vw);
    }
}


@keyframes page_loading_bar {
    0%{
        width:0%;
    }
    100%{
        width:95%
    }
}


@media (max-width:700px){
    @keyframes page_show {
        from{
            opacity: 0.7;
        }
        to{
            opacity: 1;
        }
    }
}


/* scroll bar styling */
/* i know it might not make sense for it to go here as it isnt navigation but nav is on all pages */


::-webkit-scrollbar {
    width: 10px;
    height:10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--secondary-bg);
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #555557;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #444447;
}

@media (max-width:700px){
    ::-webkit-scrollbar {
        width: 3px;
        height:3px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
        border-radius: 1px;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
        border-radius: 1px;
    }
}




#top_navbar{
    width:100vw;
    height:min(7rem,19vh);
    background-image:linear-gradient(rgba(17, 19, 21,1) 10%, rgba(17, 19, 21,0.7) 60%, transparent 100%);
    position: fixed;
    top:0;
    left:0;
    z-index:2;
    pointer-events: none;
    contain: paint;
}

#top_navbar > *{
    pointer-events: all;
}

#top_navbar > div:not([id="window_drag_area"]){
    margin:auto;
    margin-top: 0.5em;
    width:calc(100vw - 16vw);
    height:min(3.5rem,15vw);
    display: grid;
    grid-template-areas: 'back icon search profile';
    grid-template-columns: max-content max-content auto max-content;
    grid-template-rows: 100%;
    align-items: center;
    justify-content:stretch;
}

#top_nav_back_button{
    grid-area: back;
    height:2.2em;
    margin-right: 1em;
    border-radius: 50%;
    padding:0.3em;
    transition: background-color 0.2s;
    cursor: pointer;
    aspect-ratio: 1 /1;
}

#top_nav_back_button:hover{
    background-color: rgba(255,255,255,0.1);
}

#top_nav_icon_link{
    display: block;
    height:100%;
    width: max-content;
    grid-area: icon;
}

#top_nav_icon{
    object-fit: contain;
    object-position: 0% 0%;
    max-width:100%;
    max-height:100%;
    padding:0.5em;
    box-sizing: border-box;
    margin:auto 0;
}

#top_nav_right_content{
    height:100%;
    grid-area: profile;
    display: flex;
}

#top_nav_notifications{
    height:100%;
    padding:0.6em;
    box-sizing: border-box;
    margin:auto 0.5em;
    cursor: pointer;
    display: none;
    border-radius: 0.3em;
    aspect-ratio: 1 /1 ;
}

#top_nav_notifications:hover{
    background-color: rgba(255,255,255,0.1);
}

#top_nav_pfp_parent{
    display: flex;
    transition: background-color 0.2s;
    border-radius: 0.3em;
    cursor: pointer;
    height:100%;
}

#top_nav_pfp{
    height:100%;
    flex:0;
    padding:0.5em;
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer; 
    aspect-ratio: 1 / 1;
}

#top_nav_pfp_username{
    margin:auto 0;
    margin-left: 0.5em;
    line-height: 1.3;
    font-size: 0.9em;
    min-width: 6em;
    max-width: 14em;
}

#top_nav_pfp_username > div:nth-child(1){
    text-overflow: ellipsis;
    word-wrap: nowrap;
    overflow: hidden;
}

#top_nav_pfp_username > div:nth-child(2){
    font-size: 0.8em;
    color:var(--subtle-font);    
    cursor: pointer;
    width:max-content
}

#top_nav_pfp_username > div:nth-child(2):hover{
    text-decoration: underline;
}

#top_nav_pfp_expand{
    height:60%;
    margin: auto 0;
    margin-right: 0.5em;
    aspect-ratio: 1 / 1;
}

@media (max-width:800px){
    #top_nav_pfp_expand,
    #top_nav_pfp_username{
        display: none;
    }
}

@media (min-width:799px){
    #top_nav_pfp_parent:hover{
        background-color: rgba(255,255,255,0.1);
    }
    #top_nav_pfp{
        margin-right: -0.5em;
    }
}

#top_nav_sign_in{
    padding:0.3em 1em;
    border-radius: 0.5em;
    background-color: var(--accent-clr);
    height:max-content;
    margin: auto;
    color:white;
    text-decoration: none;
    grid-area: profile;
}

#top_nav_search_bar_full{
    flex:1;
    height:calc(100% - 0.8em);
    grid-area: search;
}

#top_nav_search_bar{
    border-radius: 0.3em;
    height:100%;
    max-width: 23rem;
    background-color: var(--secondary-bg);
    padding:min(0.5rem,2vh);
    box-sizing: border-box;
    margin:auto 2em;
    display: flex;
    gap:1em;
}

#top_nav_search_bar > img{
    height:1.2em;
    margin:auto 0;
    margin-left:0.5em;
    cursor: pointer;
    aspect-ratio: 1 /1;
}

#top_nav_search_bar > input{
    all:initial;
    background-color: initial;
    border: none;
    flex:1;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    height:100%;
}

#top_nav_search_bar > input::placeholder{
    color:var(--subtle-font)
}

#top_nav_search_bar > input:focus{
    outline: none;
}


@media (max-width:700px){
    #top_navbar > div:not([id="window_drag_area"]):not([class=search_bar_open]){
        grid-template-areas: 'search icon profile';
        grid-template-columns: max-content auto max-content;
        justify-content:space-between;
    }
    #top_nav_back_button{
        display: none;
        visibility:hidden;
        margin:0;
        position: fixed;
    }
    #top_nav_search_bar > input{
        display: none;
    }
    #top_nav_search_bar > img{
        height:100%;
        margin:0;
    }
    #top_nav_search_bar{
        height:100%;
        padding:min(0.8rem,8vh);
        border-radius: 100vmax;
        box-sizing: border-box;
        margin:auto 0;
        margin-right: 0.5em;
        display: flex;
        gap:1em;
    }
    #top_nav_icon{
        margin:auto;
    }

    div[class=search_bar_open] #top_nav_icon_link{
        display: none;
    }
    div[class=search_bar_open] #top_nav_search_bar{
        border-radius:1.2em;
    }
    div[class=search_bar_open] #top_nav_search_bar > input{
        display: inline;
    }
}





#side_navbar_parent{
    position: fixed;
    left:0;
    top:0;
    height:100vh;
    background-color: var(--primary-bg);
    z-index:1;
    contain: paint;
}

#side_navbar{
    position: relative;
    top:4rem;
    height:calc(100vh - 4rem);
    padding:0.5em;
    transition: width 0.1s, margin-left 0.4s;
    overflow: hidden;
    margin-left:var(--sidebar-margin-left,1.5em);
}

.sidebar_options{
    height:2em;
    display: flex;
    border-radius: 1.5em;
    padding:0.3em;
    color:white;
    text-decoration: none;
    margin: 1em 0;
    display: flex;
    overflow: hidden;
    align-items: center;
}

#sidebar_editor > div{
    display: none;
    animation: editor_options_expand 0.2s;
}

@keyframes editor_options_expand{
    from{
        height:0;
    }
    to{
        height:5em;
    }
}

.sidebar_open #sidebar_editor:hover > div{
    display: block;
}

#sidebar_editor:hover > .sidebar_options{
    margin-bottom:0.3em;   
}

.sidebar_editor_options{
    padding-left:3.3em;
    margin: 0.3em 0;
    min-width: 8rem;
    color:var(--subtle-font)
}

.sidebar_options:hover,
.sidebar_options:focus{
    outline: none;
    background-color: var(--tertiary-bg);
}

.sidebar_options_selected,
.sidebar_options_selected:hover{
    background-color: var(--accent-clr);
}

.sidebar_options > img{
    height:100%;
    aspect-ratio: 1 / 1;
}


.sidebar_options > span{
    margin:auto 1em;
    display: none;
    min-width: 8rem;
}

.sidebar_open .sidebar_options > span{
    display: inline;
}




#navbar_bottom{
    position: fixed;
    bottom:0.8em;
    left:0.8em;
    right:0.8em;
    background-color: rgb(0, 0, 0,0.8);/*#1B1D1F;*/
    height:3.7rem;
    display: none;
    padding:0.8em;
    box-sizing: border-box;
    z-index:2;
    border-radius: 0.5em;
    backdrop-filter: blur(6px);
    contain: paint;
}

#navbar_bottom > a{
    height:100%;
    margin:auto;
    display: inline-block;
}

#navbar_bottom > a > img{
    height:100%;
    aspect-ratio: 1 / 1;
}

.nav_profile_option{
    border-radius: 50%;
    box-sizing: border-box;
}



#navbar_account_popup_parent{
    background-color: transparent;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    z-index: 3;
    display: none;
}

#navbar_account_popup{
    position: absolute;
    top:calc(3.5rem + 0.2rem);
    right:7vw;
    width:23em;
    background-color: var(--popup-clr);
    border: 3px solid var(--primary-bg);
    border-radius: 0.8em;
    font-size: 1rem;
    animation: navbar_popup_appear 0.2s;
    transform-origin: top right;
    transform: translateX(-100%);
}


#nav_popup_profile_pic_parent{
    margin:1em;
    margin-bottom: 0;
}

#nav_popup_profile_pic_parent > a{
    position: relative;
    display: block;
    width:35%;
    margin:0 auto;
    line-height: 1;
}

#nav_popup_profile_pic_parent > a:hover::after{
    content: "";
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    inset:0;
    border-radius: 100vmax;
}

#verified{
    vertical-align: middle;
}

#nav_popup_profile_pic_edit{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:30%;
    display: none;
    z-index: 1;
}

a:hover > #nav_popup_profile_pic_edit{
    display: unset;
}

#nav_popup_profile_pic{
    width:100%;
    border-radius: 50%;
    height:100%;
    aspect-ratio: 1 /1;
}

#nav_popup_username{
    text-align: center;
    font-size: 1.2em;
}

#nav_popup_stats{
    display: flex;
    padding:0.5em 0.5em;
    border-bottom: 1px solid var(--primary-bg);
}

#nav_popup_stats > *{
    color:var(--subtle-font);
    text-align: center;
    margin: 0.25em;
    flex-basis: 33%;
    flex-grow: 1;
}

#nav_popup_stats > div > div{
    font-size: 1.5em;
}

#nav_popup_stats > a > img{
    height:2.3em;
}

#nav_popup_stats > a{
    border-radius: 0.5em;
    text-decoration: none;
    line-height: 1.1;
}

#nav_popup_stats > a:hover,
#nav_popup_stats > a:focus{
    background-color: var(--primary-bg);
}

#account_popup_notifications{
    border-bottom: 1px solid var(--primary-bg);
    display: flex;
    align-items: center;
    padding:0.5em;
    gap:0.5em;
    cursor: pointer;
}

#account_popup_notifications:hover{
    background-color: rgba(255,255,255,0.05);
}

#account_popup_notifications span{
    margin-right:auto;
    color: var(--subtle-font);
}

#account_popup_notifications img{
    height:2em;
}


#navbar_popup_buttons{
    text-align: center;
    padding:0.5em;
    color:var(--subtle-font);
}

.navbar_popup_button{
    border-radius: 0.5em;
    display: inline-block;
    border:2px solid var(--primary-bg);
    padding:0.2em 1em;
    margin:0.2em;
    cursor: pointer;
    text-decoration: none;
    color:inherit;
}

#navbar_popup_links{
    text-align: center;
    display: flex;
    align-items: center;
    place-content: center;
    margin-bottom: 1em;
}

#navbar_popup_links > a{
    text-decoration: none;
    color:var(--subtle-font);
    padding:0.1em 0.5em;
    border-radius: 0.5em;
}

#navbar_popup_links > a:hover,
#navbar_popup_links > a:focus{
    outline: none;
    background-color: #292B2F;
}

#navbar_popup_links > span{
    width:4px;
    height:4px;
    display: inline-block;
    background-color: var(--subtle-font);
    border-radius: 50%;
}

@keyframes navbar_popup_appear {
    0% {
        opacity: 0;
        transform: translateX(-100%) scale(80%);
    }
    50%{
        opacity: 1;
    }
    80%{
        transform: translateX(-100%) scale(102%);
    }
    100%{
        opacity: 1;
        transform: translateX(-100%) scale(100%);
    }
}

@keyframes navbar_popup_appear2 {
    0% {
        opacity: 0;
        transform:scale(80%);
    }
    50%{
        opacity: 1;
    }
    80%{
        transform: scale(102%);
    }
    100%{
        opacity: 1;
        transform: scale(100%);
    }
}



#navigation_notifications_bg{
    position:fixed;
    inset:0;
    z-index: 3;
    display:none;
    font-size: 0.9em;
}

#navigation_notifications_parent{
    width:min(24em, 80%);
    position:absolute;
    top:4em;
    right:6em;
    background-color: var(--popup-clr);
    border-radius: 0.3em;
    animation: navbar_popup_appear2 0.2s;
    transform-origin: top center;
}

#navigation_notifications_parent h1,
#navigation_notifications_parent h2,
#navigation_notifications_parent h3{
    font-weight: inherit;
    margin:0;
}

#navigation_notifications_parent h1{
    display: inline;
    font-size:inherit;
}

#navigation_notifications_parent > div:first-child{
    display:flex;
    padding:0.3em 0.4em 0 0.4em;
    align-items: center;
}

#navigation_notifications_parent .notification-tabs-bar{
    flex:1;
    display:flex;
    gap:1em;
}

#navigation_notifications_parent .notification-tabs-bar > div{
    color:var(--subtle-font);
    border-bottom: 2px solid transparent;
    padding:0.5em 0.8em;
    cursor: pointer;
}

#navigation_notifications_parent .notification-tabs-bar > div.selected{
    color:white;
    border-bottom: 2px solid var(--accent-clr);
}

#navigation_notifications_parent > div:first-child > button{
    background-color: transparent;
    border:none;
    font-family: inherit;
    font-size: inherit;
    color:var(--accent-clr);
    cursor: pointer;
    border-radius: 0.3em;
}

#navigation_notifications_parent > div:first-child > button:hover{
    background-color: rgba(255,255,255,0.2);
}

#navigation_notifications,
#navigation_notifications_read{
    max-height: 30em;
    overflow-y: auto;
    overflow-x: hidden;
}

#navigation_no_notifications{
    text-align: center;
    padding: 4em
}

#navigation_no_notifications img{
    height: 4em;
}

#navigation_no_notifications h2{
    font:inherit;
    font-size: 1.2em;
}

#navigation_no_notifications p{
    font:inherit;
    color:var(--subtle-font);
    max-width: 12em;
    margin: 0 auto;
}

.navigation_notification{
    padding: 0.5em;
    border-top: 1px solid var(--secondary-bg);
    cursor: pointer;
    border-radius: 0.3em;
}

.navigation_notification:hover{
    background-color: rgba(255,255,255,0.02);
}

.notification_main_content{
    display:flex;
}
 
.notification_main_content > img{
    height:4em;
    width:4em;
    object-fit: cover;
}

.notification_main_content > div{
    width:100%;
    padding-inline: 0.5em;
    box-sizing: border-box;
}

.notification_main_content > div > div{
    display: flex;
}

.notification_main_content > div > div > h2{
    flex:1;
}

.notification_main_content > div > div > span{
    color:var(--subtle-font)
}

.notification_main_content h3{
    color:var(--subtle-font);
    width:100%;
    font-size: inherit;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.notification_main_content h2{
    font-size: 1.1em;
}

.notification_options{
    display:flex;
    gap: 0.5em;
    font-size: 1.1em;
    padding:0.3em 0em;
    color:var(--accent-clr);
    line-height: 1;
}

.notification_options > div{
    padding:0.4em 0.8em;
    border-radius: 0.2em;
}

.notification_options > div:hover{
    background-color: rgba(255,255,255,0.2);
}

@media (max-width: 700px){
    #navigation_notifications_bg{
        background-color: rgba(0,0,0,0.5);
    }
    #navigation_notifications_parent{
        inset:0;
        top:auto;
        width:100%;
        padding-bottom: 3em;
        background-color: var(--primary-bg);
        min-height: 50%;
    }

    #navigation_notifications{
        max-height: 70vh;
        background-color: var(--secondary-bg);
        margin:0.5em;
        border-radius: 0.3em;
    }

    .navigation_notification{
        border-top: 1px solid var(--tertiary-bg);
    }

    #navigation_notifications_parent > div:first-child{
        padding-top:1em
    }
    #navigation_notifications_parent > div:first-child > h1{
        font-size: 1.2em;
    }
}




@media (max-width: 700px) {
    #navbar_bottom{
        display:flex;
    }

    #side_navbar{
        display: none;
    }

    #top_navbar > div:not([id="window_drag_area"]){
        width:95%;
    }
    #navbar_account_popup_parent{
        background-color: rgba(0,0,0,0.5);
    }

    #navbar_account_popup{
        bottom:0;
        top:auto;
        left:0;
        right:auto;
        width:100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border:none;
        padding-bottom: 4rem;
        transform: translateX(0);
        background-color: var(--secondary-bg);
        --primary-bg:var(--tertiary-bg);
    }
    @keyframes navbar_popup_appear {
        from {
            opacity: 0;
            transform: translateY(1em);
        }
        to{
            opacity: 1;
            transform: translateY(0);
        }
    } 
    @keyframes navbar_popup_appear2 {
        from {
            opacity: 0;
            transform: translateY(1em);
        }
        to{
            opacity: 1;
            transform: translateY(0);
        }
    } 
}

#window_drag_area{
    display:none;
}

@media (display-mode: window-controls-overlay){
    #top_navbar > div:not([id="window_drag_area"]){
        padding-top: 2em;
    }
    #window_drag_area{
        width:100%;
        /* inset:0; */
        height:calc(min(3.5rem,15vw) + env(titlebar-area-height, 2rem));
        position:absolute;
        display: block;
        pointer-events: none;
        -webkit-app-region: drag;
        app-region: drag;
    }
    main{
        --page-margin:8em;
    }
    #top_nav_back_button,
    #top_nav_icon_link,
    #top_nav_search_bar,
    #top_nav_right_content{
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }
    @media (min-width:1400px){
        #top_navbar > div:not([id="window_drag_area"]){
            top: env(titlebar-area-y, 0);
            width: min(calc(100% - calc(calc(100% - env(titlebar-area-width, 100%)) * 2)),calc(100% - 16vw));
            transition: width 0.2s;
            -webkit-app-region: drag;
            app-region: drag;
            padding-top: 0;
        }
        #window_drag_area{
            height:min(3.5rem,15vw);
        }

        main{
            --page-margin:var(--page-margin, 6em);
        }
    }
}


/* PWA install chip */
#install_PWA_chip{
    display:flex;
    position: fixed;
    right:1em;
    bottom:1em;
    background-color: var(--accent-clr);
    border-radius: 0.3em;
    align-items: center;
    padding: 0.2em 0.4em;
    transition: width 1s;
    cursor: pointer;
    z-index:2;
    font-size: 1.1em;
}

#install_PWA_chip > img{
    height: 2em;
}

#install_PWA_chip > div{
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    width:0;
    transition: width 0.4s, padding 0.4s;
}

.expanded_PWA_chip{
    width:7em !important;
    padding-right: 0.5em;
    padding-left:0.2em;
}

#install_PWA_chip:hover > div{
    width:7em;
    padding-right: 0.5em;
    padding-left:0.2em;
}

@media (max-width:700px){
    #install_PWA_chip{
        display:none;
    }
}

#play-store-prompt{
    background-color: rgba(0,0,0,0.4);
    inset:0;
    position:fixed;
    z-index:3;
    display:flex;
}

#play-store-prompt > div{
    margin: auto auto 0 auto;
    width: 30em;
    background-color: var(--primary-bg);
    text-align: center;
    border-radius: 0.5em 0.5em 0 0;
    padding:1.5em 4em;
    padding-top: 3em;
    box-sizing: border-box;
}

#play-store-prompt .app-icons{
    display:flex;
    gap:1em;
    justify-content: center;
}

#play-store-prompt .app-icons > img{
    height:4em;
}

#play-store-prompt button{
    font:inherit;
    border: none;
    color:inherit;
    background-color: transparent;
    padding:0.5em 0.8em;
    border-radius: 0.3em;
    display: block;
    width:100%;
    margin-top:0.5em;
}

#play-store-prompt button.filled{
    background-color: var(--accent-clr);
}

#play-store-prompt button a{
    color:inherit;
    text-decoration: none;
}

#play-store-prompt h2{
    font:inherit;
    font-size: 1.3em;
    margin: 0.5em
}

#play-store-prompt p{
    color:var(--subtle-font);
    max-width: 20em;
    margin:0;
    margin:auto;
}

@media (max-width:35em){
    #play-store-prompt > div{
        width:100%;
    }
}


main{
    margin-top:var(--page-margin, 6em) !important;
}

@media(min-width:701px){
    main{
        --page-margin:var(--page-margin, 6em);
    }
    #ad_block_message ~ .page.active > main{
        --page-margin:0 !important;
    }
}

/* styling for the anti ad block message */

#ad_block_message{
    display:flex;
    align-items: center;
    background-color: var(--accent-clr);
    border-radius: 0.3em;
    padding:0.5em 1em;
    margin:0 auto;
    margin-bottom: 20px;
    margin-top:var(--page-margin, 6em);
    gap: 1em;
    max-width:80vw;
}

#ad_block_message > div:first-child{
    flex:1;
}

#ad_block_message a{
    color:white;
}

#ad_block_message button{
    font-size: inherit;
    font-family: inherit;
    color:inherit;
    border:none;
    cursor: pointer;
    padding:0.5em 1em;
    background-color: #FF6970;
    border-radius: 0.3em;
}

#ad_block_message button:hover{
    background-color: #FF797F;
}

#ad_block_message button > a{
    text-decoration: none;
}

@media (max-width:700px){
    #ad_block_message{
        flex-direction: column;
        margin-left: 0.5em;
        margin-right: 0.5em;
        margin-top:0;
        max-width:none;
    }
}