/********** COLOUR SCHEMES **********/

:root {
    /* variable sizes */
    --avatar-width:36px;
    --topbar:72px;
    /* color mixs for adaptive design */
    --links:color-mix(in srgb, var(--text) 50%, var(--posts) 50%);
    --card:color-mix(in srgb, var(--text) 10%, var(--posts) 90%);
    --sidebar-card:color-mix(in srgb, var(--background) 85%, var(--sidebar-text) 15%);
    --sidebar-borders:color-mix(in srgb, var(--background) 85%, var(--sidebar-text) 15%);
    /* tumblr accent colours */
    --blue:#00b8ff;
    --purple:#7c5cff;
    --pink:#ff61ce;
    --red:#ff4930;
    --orange:#ff8a00;
    --yellow:#e8d73a;
    --green:#01cf35;
    color:var(--text);
    background-color:var(--background);
    font-family:var(--body-font);
    font-size:var(--font-size);
    line-height:1.6;
}

:root:has(body.tumblr) {
    --background:#001935;
    --posts:#ffffff;
    --text:#000000;
    --sidebar-text:#ffffff;
    --borders:#dedede;
}

:root:has(body.light) {
    --background:#ffffff;
    --posts:#ffffff;
    --text:#0f1419;
    --sidebar-text:#0f1419;
    --borders:#d1dbdf;
    --sidebar-borders:#d1dbdf;
}

:root:has(body.dim) {
    --background:#15202b;
    --posts:#15202b;
    --text:#e6e9ea;
    --sidebar-text:#e6e9ea;
    --borders:#38444d;
    --sidebar-borders:#38444d;
}

:root:has(body.dark) {
    --background:#000000;
    --posts:#000000;
    --text:#e7e9ea;
    --sidebar-text:#e7e9ea;
    --borders:#2f3336;
    --sidebar-borders:#2f3336;
}

/********** THE BASICS **********/

* {
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
}

body.active {
    height:100%;
    overflow:hidden;
}

a {
    color:var(--links);
    text-decoration:none;
    transition:all 0.25s ease-in-out;
}

a:hover {
    color:var(--accent);
    transition:all 0.25s ease-in-out;
}

p {
    max-width:calc(100%);
    text-overflow:ellipsis;
    overflow:hidden;
    margin-block-start:var(--post-padding)!important;
    margin-block-end:var(--post-padding)!important;
}

h1, h2, h3, h4, h5, h6 {
    font-size:1rem;
    font-weight:600;
    line-height:normal;
    margin:var(--post-padding) 0;
}

h1 {
    font-size:1.5rem;
    font-family:var(--header-font);
}

h2 {
    font-size:1.3rem;
}

h3 {
    font-size:1.2rem;
}

hr {
    border:none;
    box-shadow:0;
    margin:0;
    width:100%;
    border-top:1px solid var(--borders);
}

code {
    font-size:0.9rem;
    font-family:'Geist Mono', monospace;
    font-weight:500;
    background:color-mix(in srgb, var(--text) 10%, transparent 90%);
    border:1px solid var(--borders);
    border-radius:4px;
    padding:1px 4px;
}

small {
    font-size:0.9rem;
}

ul, ol {
    list-style-position:inside;
    padding:0;
    margin:var(--post-padding) 0;
}

ol {
    list-style-type:none;
}

ol li {
    counter-increment:section;
}

ol li:before {
    font-family:'Geist Mono', monospace;
    content:counter(section, decimal)".";
    margin-right:0.25rem;
}

blockquote {
    width:fit-content;
    padding:0 var(--post-padding);
    border:1px solid var(--borders);
    border-radius:var(--corner-rounding);
    margin:var(--post-padding) 0;
}

blockquote > p:first-of-type,
blockquote > p:last-of-type {
    margin-block-start:calc(var(--post-padding) / 1.25)!important;
    margin-block-end:calc(var(--post-padding) / 1.25)!important;
}

blockquote > div {
    margin:calc(var(--post-padding) / 1.25) 0;
}

::marker, ol li:before {
    color:var(--accent);
}

::-webkit-selection { background:var(--accent); color:var(--posts); }
::-moz-selection{ background:var(--accent); color:var(--posts); }
::selection { background:var(--accent); color:var(--posts); }

.vignette, #vignette {
    opacity:0;
}

.lightbox-image, #tumblr_lightbox img {
    box-shadow:none!important;
    border-radius:0!important;
    border:1px solid var(--borders)!important;
    border-width:1px!important;
    max-width:none;
}

.tmblr-lightbox, #tumblr_lightbox {
    background-color:color-mix(in srgb, transparent 50%, var(--posts) 50%)!important;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.iframe-controls--phone-mobile {display: none!important;}
.tmblr-iframe-pushdown {padding-top: 0!important;} 
.tmblr-iframe--app-cta-button {display: none!important;}

.tmblr-iframe-compact .tmblr-iframe--unified-controls {
    margin:8px;
    z-index:9999;
}

/********** TOPBAR NAVIGATION **********/

.topbar {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    position:sticky;
    top:0;
    height:var(--topbar);
    color:var(--sidebar-text);
    background-color:var(--background);
    border-bottom:1px solid var(--sidebar-borders);
    z-index:999;
}

.topbar svg {
    display:flex;
    align-items:center;
    gap:calc(var(--post-padding) / 2);
    flex-shrink:0;
    width:2rem;
    height:2rem;
    stroke-width:1.5;
    color:var(--sidebar-text);
    margin:calc(var(--post-padding) / 2);
    border-radius:var(--corner-rounding);
    transition: all 0.25s ease-in-out;
}

.topbar a:hover svg {
    color:var(--accent);
    transition: all 0.25s ease-in-out;
}

#topbar-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:calc(var(--sidebar-width) + var(--margins) + var(--post-width));
}

.search {
    display:flex;
    align-items:center;
    gap:calc(var(--post-padding) / 2);
    width:100%;
    max-width:300px;
    color:var(--sidebar-text);
    background-color:var(--sidebar-card);
    padding:calc(var(--post-padding) / 2);
    border:1px solid var(--sidebar-borders);
    border-radius:100px;
    margin:0;
    margin-left:auto;
}

.search:has(input:focus) {
    color:var(--sidebar-text);
    border-color:var(--accent);
}

.search .material-symbols-rounded {
    font-size:1.4rem;
}

.query {
    outline:0;
    width:100%;
    font-family:inherit;
    font-weight:600;
    color:var(--sidebar-text);
    background-color:transparent;
    border:0;
    padding:0;
    transition:0.25s ease-in-out;
    margin:0;
}

::-webkit-input-placeholder {color:var(--sidebar-text);}
input:focus::-webkit-input-placeholder {color:transparent;}

.menu {
    display:none;
    align-items:center;
    justify-content:center;
    width:var(--topbar);
    height:var(--topbar);
}

.menu .material-symbols-rounded {
    font-size:1.8rem;
}

.menu .menu-open,
.active .menu .menu-close {
    display:block;
}

.menu .menu-close,
.active .menu .menu-open {
    display:none;
}

/********** PAGE CONTAINER **********/

#layout {
    display:flex;
    gap:var(--margins);
    width:fit-content;
    min-height:calc(100vh - (var(--margins) * 2));
    padding:var(--margins) 0;
    border-radius:var(--corner-rounding);
    margin:0 auto;
}

/********** ASIDE **********/

aside {
    width:var(--sidebar-width);
}

.sidebar {
    display:flex;
    flex-direction:column;
    gap:var(--post-padding);
    position:sticky;
    top:calc(var(--margins) + var(--topbar));
}

.sidebar hr {
    border-color:var(--sidebar-borders);
}

nav {
    display:flex;
    flex-direction:column;
    gap:calc(var(--post-padding) / 4);
}

nav a span {
    display:flex;
    align-items:center;
    gap:calc(var(--post-padding) / 2);
    width:fit-content;
    color:var(--sidebar-text);
    padding:calc(var(--post-padding) / 2);
    border-radius:100px;
}

nav a:hover span {
    color:var(--sidebar-text);
    background-color:var(--sidebar-card);
}

nav .material-symbols-rounded {
    font-size:1.9rem;
    padding:0;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

nav .link-title {
    font-size:1.3rem;
    line-height:normal;
    padding-right:calc(var(--post-padding) / 4);
}

.updates {
    color:var(--sidebar-text);
    background-color:var(--sidebar-card);
    border-radius:var(--corner-rounding);
}

.updates .title {
    font-size:1.3rem;
}

.updates-body {
    padding:0 var(--post-padding);
}

.updates-body a {
    color:var(--accent);
}

.updates-body a:hover {
    color:var(--accent);
    text-decoration:underline;
    text-decoration-color:var(--accent);
}

/********** MAIN CONTAINER **********/

main {
    display:flex;
    flex-direction:column;
    justify-items:center;
    width:var(--post-width);
    max-width:var(--post-width);
    gap:var(--margins);
}

/********** HEADER **********/

header {
    display:flex;
    flex-direction:column;
    gap:var(--post-padding);
    position:relative;
    max-width:var(--post-width);
    background-color:var(--posts);
    border:1px solid var(--borders);
    border-radius:var(--corner-rounding);
    padding-bottom:var(--post-padding);
    overflow:hidden;
}

header div[class^="profile-"]:not(.profile-header) {
    padding:0 var(--post-padding);
}

.profile-header {
    position:relative;
    width:100%;
    height:0;
    background-size:cover;
    background-position:center center;
}

.profile-avatar {
    line-height:0;
    width:128px;
    height:128px;
    background-color:var(--accent);
    background-size:cover;
    background-position:center center;
    border-radius:50%;
    object-fit:cover;
    overflow:hidden;
    margin-left:var(--post-padding);
    z-index:69;
}

.profile-buttons {
    position:absolute;
    right:0;
    bottom:calc((var(--post-padding) * -1) + -2.8rem);
}

.profile-buttons a {
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    height:2.8rem;
    min-width:2.8rem;
    color:var(--posts);
    background-color:var(--accent);
    border-radius:100px;
    padding:0 1rem;
}

.profile-buttons a:hover {
    background:var(--sidebar-card);
    color:var(--sidebar-text);
}

.profile-title {
    display:flex;
    align-items:center;
    gap:calc(var(--post-padding) / 4);
    font-size:1.4rem;
    font-weight:600;
    font-family:var(--header-font);
}

.profile-title span {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.profile-title .material-symbols-rounded {
    flex-shrink:0;
    color:var(--accent);
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.profile-name {
    color:var(--links);
    margin-top:0;
}

.profile-info {
    display:flex;
    flex-wrap:wrap;
    gap:calc(var(--post-padding) / 4) calc(var(--post-padding) / 1.5);
}

.profile-info .stat {
    display:flex;
    align-items:center;
    gap:calc(var(--post-padding) / 4);
}

.profile-info .stat .material-symbols-rounded {
    font-size:1.2rem;
}

.profile-info .stat span {
    line-height:normal;
}

.profile-info a {
    display:block;
    max-width:calc(var(--post-width) / 2);
    color:var(--accent);
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.profile-info a:hover {
    text-decoration:underline;
    text-decoration-color:var(--accent);
}

/********** POSTS CONTAINER **********/

section {
    display:grid;
    align-items:start;
    align-content:start;
    gap:var(--margins);
    flex:1 1;
    height:fit-content;
    width:auto;
    max-width:var(--post-width);
    margin:0;
    box-sizing:content-box;
}

/********** POSTS **********/

article {
    position:relative;
    background-color:var(--posts);
    border:1px solid var(--borders);
    border-radius:var(--corner-rounding);
    overflow:hidden;
}

article.pinned {
    border-color:var(--accent);
}

article .material-symbols-rounded {
    font-size:1.4rem;
}

/********** POSTS HEADER **********/

.post-header {
    display:flex;
    align-items:center;
    gap:calc(var(--post-padding) / 2);
    position:relative;
    width:100%;
    padding:var(--post-padding);
    border-bottom:1px solid var(--borders);
}

.post-header svg {
    flex-shrink:0;
    width:1.3rem;
    height:1.3rem;
}

.user-info {
    width:100%;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.user-info > div {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.date {
    line-height:normal;
    color:var(--links);
}

.date a {
    color:var(--text);
    font-weight:500;
}

.date a:hover {
    color:var(--accent);
}

.date a::after {
    content:'\00B7';
    color:var(--text);
    margin:0 0.25rem;
}

.date a::before {
    content:'@';
}

.pin {
    display:flex;
    align-items:center;
    flex-shrink:0;
    gap:0.5rem;
    color:var(--accent);
    font-weight:500;
    line-height:normal;
}

.pin .material-symbols-rounded {
    font-size:1.2rem;
    font-variation-settings: 'FILL' 1;
}

/********** POSTS BODY **********/

.user-icon {
    width:var(--avatar-width);
    height:var(--avatar-width);
    border-radius:50%;
}

.user {
    font-weight:600;
    line-height:normal;
}

.comment-header .user {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.comment {
    padding:0 var(--post-padding);
}

.comment:not(:last-of-type) {
    border-bottom: 1px solid var(--borders);
}

.comment-header {
    margin:var(--post-padding) 0;
}

.comment-header > a, .comment-header .question-header {
    display:flex;
    align-items:center;
    gap:1rem;
    width:fit-content;
}

.comment-header .user.deactivated:after {
    text-transform:lowercase;
    content:' ({block:English}Deactivated{/block:English}{block:German}Deaktiviert{/block:German}{block:French}Désactivé{/block:French}{block:Italian}Disattivato{/block:Italian}{block:Japanese}無効化{/block:Japanese}{block:Turkish}Kapatıldı{/block:Turkish}{block:Spanish}Desactivado{/block:Spanish}{block:Russian}Деактивировано{/block:Russian}{block:Polish}deaktywowano{/block:Polish}{block:PortuguesePT}Desativado{/block:PortuguesePT}{block:PortugueseBR}Desativado{/block:PortugueseBR}{block:Dutch}Gedeactiveerd{/block:Dutch}{block:Korean}사용 안 함{/block:Korean}{block:ChineseSimplified}已关闭{/block:ChineseSimplified}{block:ChineseTraditional}已停用{/block:ChineseTraditional}{block:ChineseHK}已停用{/block:ChineseHK}{block:Indonesian}Dinonaktifkan{/block:Indonesian}{block:Hindi}निष्क्रिय{/block:Hindi})';
    color:var(--links);
}

.comment-header .user.deactivated:hover {
    cursor:pointer;
}

.comment-body {
    margin:var(--post-padding) 0;
}

.comment-body a {
    color:var(--accent);
    overflow-wrap:anywhere;
}

.comment-body a:hover {
    color:var(--accent);
    text-decoration:underline;
    text-decoration-color:var(--accent);
}

/********** POST FOOTER **********/

.post-footer {
    margin-top:var(--post-padding);
}

.footer-tags {
    display:flex;
    flex-wrap:wrap;
    gap:0 calc(var(--post-padding) / 2);
    margin:var(--post-padding);
}

.footer-tags a {
    color:var(--accent);
}

.footer-tags a:hover {
    color:var(--accent);
    text-decoration:underline;
    text-decoration-color:var(--accent);
}

.post-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:calc(var(--post-padding) / 2);
    margin:var(--post-padding);
}

.post-controls > div:not(.share-link), .post-controls a {
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:0.25rem;
}

.post-controls .like-button {
    position:relative;
}

.post-controls .reply-button, .post-controls .reblog-button, .post-controls .like-button, .post-controls .notes-button, .post-controls .share-button {
    line-height:normal;
    color:var(--links);
    -webkit-transition: color 0.25s ease-in-out;
       -moz-transition: color 0.25s ease-in-out;
        -ms-transition: color 0.25s ease-in-out;
         -o-transition: color 0.25s ease-in-out;
            transition: color 0.25s ease-in-out;
}

.post-controls .reply-button a:hover {
    color:var(--blue);
}

.post-controls .reblog-button a:hover {
    color:var(--green);
}

.post-controls .like-button:hover {
    color:var(--red);
    -webkit-transition: all 0.25s ease-in-out;
       -moz-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
         -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
}

.post-controls .notes-button a:hover {
    color:var(--pink);
}

.post-controls .share-button a:hover {
    color:var(--purple);
}

.post-controls .reblog-button button, .post-controls .like-button button {
    background:transparent;
    border:none;
}

.post-controls .material-symbols-rounded {
    pointer-events:none;
}

.like_button {
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    background:black;
    opacity:0;
    overflow:hidden;
    z-index:2;
}

.like_button > iframe {
    display:block;
    width:100%;
    height:100%;
}

.like_button.liked + .material-symbols-rounded {
    color:var(--red)!important;
    font-variation-settings: 'FILL' 1;
}

.share-button {
    cursor:pointer;
    user-select:none;
}

.share-link {
    display:none;
    align-items:center;
    gap:calc(var(--post-padding) / 2);
    position:absolute;
    bottom:0;
    left:0;
    right:calc(var(--post-padding) * 2 + 1.4rem);
    width:-webkit-fill-available;
    max-height:-moz-available;
    max-height:-webkit-fill-available;
    font-size:0.9rem;
    font-family:'Geist Mono', monospace;
    background-color:var(--posts);
    padding:calc(var(--post-padding) / 1.5);
    border-top:1px solid var(--borders);
    border-right:1px solid var(--borders);
    border-top-right-radius:var(--corner-rounding);
    user-select:none;
    overflow-y:auto;
}

.share-link-inner {
    line-height:1;
    background-color:var(--card);
    padding:calc(var(--post-padding) / 2) calc(var(--post-padding) / 1.5);
    border:1px solid var(--borders);
    border-radius:100px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

.share-link.open {
    display:grid;
    grid-template-columns:auto 1.4rem;
}

.share-link span {
    cursor:copy;
}

/********** TEXT/NPF POSTS **********/

.title {
    font-size:1.5rem;
    font-weight:600;
    font-family:var(--header-font);
    margin:var(--post-padding);
}

.title a {
    color:var(--text);
}

.title a:hover {
    color:var(--accent);
}

.ask-block p.read_more_container {
    margin:0!important;
    margin-top:calc(var(--post-padding) / 2)!important;
}

a.read_more {
    color:var(--accent);
}

p.npf_quote {
    font-family:'Noto Serif', serif;
    font-size:1.2rem;
    font-weight:500;
}

p.npf_quirky {
    font-family:'Caveat';
    font-size:1.7rem;
    line-height:normal;
}

p.npf_chat {
    font-family:'Geist Mono', monospace;
}

.poll-post {
    display:flex;
    flex-direction:column;
    gap:calc(var(--post-padding) / 4);
    max-width:100%;
    border-radius:var(--corner-rounding);
    margin:var(--post-padding) 0;
    margin-bottom:calc(var(--post-padding) * 1.5);
}

.poll-post .poll-question {
    font-size:1rem;
    font-weight:normal;
    margin-top:0!important;
    margin-bottom:var(--post-padding);
}

.poll-post a.poll-row,
.poll-post .poll-see-results {
    display:block;
    min-height:initial;
    width:-webkit-fill-available;
    font-size:0.9rem;
    font-weight:500;
    line-height:inherit;
    text-align:center;
    color:var(--accent);
    background-color:transparent;
    padding:calc(var(--post-padding) / 3) calc(var(--post-padding) / 1.5);
    border-radius:100px;
    border:1px solid var(--accent);
    margin:0;
}

.poll-post a.poll-row:hover,
.poll-post .poll-see-results:hover {
    background-color:var(--sidebar-card);
    text-decoration:none;
}

.poll-post a.poll-row p,
.poll-post .poll-see-results {
    margin:0!important;
}

/********** PHOTO/PHOTOSET POSTS **********/

.legacy-photo img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    border:1px solid var(--borders);
    border-radius:var(--corner-rounding);
}

.legacy-photo, .legacy-photoset {
    margin:var(--post-padding);
}

[photoset-layout] {
    grid-gap:4px;
    border-radius:var(--corner-rounding);
}

[photoset-layout] div {
    cursor:pointer;
}

div[photoset-layout] {
    overflow:hidden;
}

img.post_media_photo {
    max-width:100%;
    line-height:0;
}

figure.tmblr-full {
    line-height:0;
    border:1px solid var(--borders);
    border-radius:0;
}

div.npf_row:first-of-type div.npf_col:first-of-type figure.tmblr-full {
    border-top-left-radius:var(--corner-rounding);
}

div.npf_row:first-of-type div.npf_col:last-of-type figure.tmblr-full {
    border-top-right-radius:var(--corner-rounding);
}

p + div.npf_row div.npf_col:only-of-type figure.tmblr-full {
    border-top-left-radius:var(--corner-rounding);
    border-top-right-radius:var(--corner-rounding);
}

p + div.npf_row div.npf_col:first-of-type figure.tmblr-full {
    border-top-left-radius:var(--corner-rounding);
}

p + div.npf_row div.npf_col:last-of-type figure.tmblr-full {
    border-top-right-radius:var(--corner-rounding);
}

div.npf_row:last-of-type div.npf_col:first-of-type figure.tmblr-full {
    border-bottom-left-radius:var(--corner-rounding);
}

div.npf_row:last-of-type div.npf_col:last-of-type figure.tmblr-full {
    border-bottom-right-radius:var(--corner-rounding);
}

div.npf_row:has(+ p) div.npf_col:first-of-type figure.tmblr-full {
    border-bottom-left-radius:var(--corner-rounding);
}

div.npf_row:has(+ p) div.npf_col:last-of-type figure.tmblr-full {
    border-bottom-right-radius:var(--corner-rounding);
}

span.tmblr-alt-text-helper {
    position:absolute;
    left:var(--post-padding)!important;
    bottom:var(--post-padding)!important;
    font-family:'Geist Mono', monospace;
    color:white!important;
    background-color:black!important;
    opacity:0.5!important;
    margin:0!important;
}

span.tmblr-alt-text-helper:hover {
    background-color:var(--accent)!important;
    opacity:1!important;
}

.post-content div.npf_row .npf_col figure p.tmblr-attribution,
.post div.npf_row .npf_col figure p.tmblr-attribution,
body div.npf_row .npf_col figure p.tmblr-attribution {
    text-align:right;
}

p.tmblr-attribution {
    position:absolute;
    bottom:0;
}

/********** LINK POSTS **********/

.link-block a.link {
    display:block;
    color:var(--text);
    border-radius:var(--corner-rounding);
    border:1px solid var(--borders);
    margin:var(--post-padding);
    overflow:hidden;
}

.link-block .poster {
    display:block;
    align-items:center;
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    background-clip:content-box;
    height:calc(var(--post-padding) * 2 + 1.8rem);
    position:relative;
    border:0;
}

.link-block .poster[style*="background-image"] {
    height:calc((var(--post-width) / 2) - (var(--post-padding) * 2));
}

.link-block .poster[style*="background-image"] .title {
    max-width:calc(var(--post-width) - (var(--post-padding) * 4));
}

.link-block .poster .title {
    position:absolute;
    bottom:var(--post-padding);
    left:var(--post-padding);
    max-width:calc(var(--post-width) - (var(--post-padding) * 6));
    font-size:0.8rem;
    font-weight:400;
    line-height:1;
    text-align:left;
    color:white!important;
    background-color:black!important;
    border-radius:100px;
    padding:0.5rem;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    margin:0;
}

.link-block .poster::after {
    content:'arrow_outward';
    font-family:'Material Symbols Rounded';
    font-size:1rem;
    line-height:1;
    position:absolute;
    top:var(--post-padding);
    right:var(--post-padding);
    color:white!important;
    background-color:black!important;
    border-radius:100px;
    padding:0.4rem;
    transition:all 0.25s ease-in-out;
}

.link-block .poster:before {
    content:'';
    display: block;
    background:transparent;
    height:100%;
    opacity:.4;
    position:absolute;
    width:100%;
    transition:all 0.25s ease-in-out;
}

.link-block a.link:hover .poster:before {
    background:var(--text);
    transition:all 0.25s ease-in-out;
}

div.npf-link-block {
    border:1px solid var(--borders);
    border-radius:var(--corner-rounding);
    margin:var(--post-padding) 0;
    overflow:hidden;
}

div.npf-link-block > a {
    color:var(--text);
}

div.npf-link-block:hover .poster:before {
    background:var(--text);
    transition:all 0.25s ease-in-out;
}

div.npf-link-block .poster {
    display:block;
    height:calc(var(--post-padding) * 2 + 1.8rem);
    border:0;
}

div.npf-link-block .poster[style*="background-image"] {
    height:calc((var(--post-width) / 2) - (var(--post-padding) * 2));
}

div.npf-link-block .poster::after {
    content:'arrow_outward';
    font-family:'Material Symbols Rounded';
    font-size:1rem;
    line-height:1;
    position:absolute;
    top:var(--post-padding);
    right:var(--post-padding);
    color:white!important;
    background-color:black!important;
    border-radius:100px;
    padding:0.4rem;
}

div.npf-link-block .poster:before {
    background:transparent;
    transition:all 0.25s ease-in-out;
}

div.npf-link-block .poster[style*="background-image"] .title {
    max-width:calc(var(--post-width) - (var(--post-padding) * 4));
}

div.npf-link-block .poster .title {
    bottom:var(--post-padding);
    left:var(--post-padding);
    max-width:calc(var(--post-width) - (var(--post-padding) * 6));
    font-size:0.8rem;
    line-height:1;
    text-align:left;
    color:white!important;
    background-color:black!important;
    border-radius:100px;
    padding:0.5rem;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    margin:0;
}

div.npf-link-block .bottom {
    display:none;
}

/********** AUDIO POSTS **********/

.spotify_audio_player,
.soundcloud_audio_player {
    width:100%;
    height:152px!important;
}

.legacy-audio {
    line-height:0;
    border:1px solid var(--borders);
    border-radius:var(--corner-rounding);
    overflow:hidden;
    margin:var(--post-padding);
}

.tumblr_audio_player {
    width:100%;
}

.tmblr-full:has(.audio-caption) {
    background-image:none!important;
    background-size:cover;
    background-position:center;
    border-radius:0;
    border:0;
    overflow:hidden;
    border-radius:var(--corner-rounding);
}

.tmblr-full .audio-caption {
    display:flex;
    align-items:center;
    backdrop-filter:blur(20px);
    padding-left:var(--post-padding);
    border-radius:var(--corner-rounding);
    border:1px solid var(--borders);
    overflow:hidden;
}

.tmblr-full > .audio-caption::before {
    display:flex;
    justify-content:center;
    content:'play_arrow';
    font-family:'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    width:30px;
    font-size:52px;
    flex-shrink:0;
    pointer-events:initial;
    margin-left:-3px;
}

.tmblr-full > .audio-caption.playing::before {
    content:'pause';
    font-family:'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    font-size:44px;
}

.tmblr-full > .audio-caption .audio-details {
    flex-shrink:1;
    width:100%;
    padding:0;
    padding-left:var(--post-padding);
}

.tmblr-full > .audio-caption .title,
.tmblr-full > .audio-caption .artist,
.tmblr-full > .audio-caption .album {
    font-size:100%;
    font-family:var(--body-font);
    line-height:normal;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    margin:0;
}

.tmblr-full > .audio-caption {
    pointer-events:none;
}

.tmblr-full > .audio-caption .album-cover {
    flex-shrink:0;
}

.tmblr-full > audio {
    display:none;
}

/********** VIDEO POSTS **********/

.legacy-video {
    margin:var(--post-padding);
}

.legacy-video, .tmblr-full > video {
    border-radius:var(--corner-rounding);
    border:1px solid var(--borders);
    overflow:hidden;
}

.tmblr-full:has(video) {
    border:0;
    border-radius:0;
}

.tumblr_video_container {
    width:auto!important;
    height:auto!important;
    max-width:100%;
}

/********** ASK POSTS **********/

#ask_form, #submit_form {
    margin-bottom:0;
}

:root:has(body.dark) #ask_form,
:root:has(body.dark) #submit_form {
    filter:invert(1);
}

.ask-block .comment-thread:has(.comment) {
    border-top:1px solid var(--borders);
}

.question-block {
    padding:var(--post-padding);
}

.question-block .user,
.answer-block .user {
    display:flex;
    align-items:center;
    gap:calc(var(--post-padding) / 2);
    margin-bottom:var(--post-padding);
}

.question-block .user span,
.answer-block .user span {
    display:flex;
    align-items:center;
    width:100%;
    height:var(--avatar-width);
    font-size:0.9rem;
    text-transform:lowercase;
    padding:0 calc(var(--post-padding) / 1.5);
    border:1px solid var(--borders);
    border-radius:100px;
}

.question-block .user span a {
    display:contents;
}

.question-block .user-icon[src*="anonymous_avatar_64"] {
    content:url(https://static.tumblr.com/gqzp46w/XXbt90v2z/circle_gray_gray_512.png);
}

.question-block iframe {
    max-width:100%;
}

.question-block .poll-post {
    background-color:var(--posts);
}

.question-block p:not(.read_more_container) {
    margin:0!important;
}

.question-block p:not(.read_more_container) + p:not(.read_more_container),
.question-block p:not(.read_more_container) + div,
.question-block p:not(.read_more_container) + figure,
.question-block div + p:not(.read_more_container),
.question-block div + div,
.question-block div + figure,
.question-block figure + p:not(.read_more_container),
.question-block figure + div,
.question-block figure + figure {
    margin-top:var(--post-padding)!important;
}

.answer-block {
    padding:0 var(--post-padding);
}

.answer-block .user {
    display:flex;
    align-items:center;
    gap:calc(var(--post-padding) / 2);
    line-height:normal;
}

/********** POST NOTES **********/

ol.notes { 
    width:auto;
    padding:0 var(--post-padding);
    margin:0;
}

ol.notes li:before {
    content:none;
}

ol.notes li .clear {
    display:none;
}

ol.notes li {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--post-padding);
    padding:var(--post-padding) 0;
    border-top:1px solid var(--borders);
}

ol.notes li .avatar_frame img {
    display:block;
    max-width:100%;
    height:auto;
    min-width:var(--avatar-width);
    max-height:var(--avatar-width);
    border-radius:50%;
}

ol.notes li span.action {
    max-width:calc(100% - ((var(--post-padding) * 4) + var(--avatar-width)));
    line-height:normal;
}

ol.notes li::after {
    content:'';
    width:1.2rem;
    height:1.2rem;
    font-size:1.2rem;
    font-family:'Material Symbols Rounded';
    line-height:normal;
    margin-left:auto;
}

ol.notes li.reblog.original_post::after {
    content:'person_edit';
    color:var(--purple);
}

ol.notes li.like::after {
    content:'favorite';
    color:var(--red);
}

ol.notes li.reblog::after {
    content:'repeat';
    color:var(--green);
}

ol.notes li.reply::after {
    align-items:flex-start;
    content:'maps_ugc';
    color:var(--blue);
}

ol.notes li.post_attribution::after {
    content:'add_photo_alternate';
    color:var(--pink);
}

ol.notes li blockquote {
    line-height:inherit;
    padding:calc(var(--post-padding) / 2);
}

ol.notes li blockquote,
ol.notes li.reply .answer_content {
    max-width:calc(100% - (var(--post-padding) * 2));
    line-height:normal;
    margin:0;
}

li.more_notes_link_container { 
    font-weight:600!important;
    text-align:left!important;
    padding:0;
}

/********** PAGINATION **********/

.pagination {
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    text-transform:capitalize;
}

.pagination a {
    display:flex;
    align-items:center;
    line-height:normal;
    font-weight:600;
    color:var(--posts);
    background-color:var(--accent);
    padding:calc(var(--post-padding) / 2) calc(var(--post-padding) / 1.5);
    border-radius:var(--corner-rounding);
}

.pagination a:hover[href] {
    color:var(--sidebar-text);
    background-color:var(--sidebar-card);
}

.pagination a:not([href]) {
    opacity:0.25;
    cursor:default;
}

.pagination .back::before,
.pagination .next::after {
    font-family:'Material Symbols Rounded';
    font-size:1.5rem;
    line-height:0;
}

.pagination .back::before {
    content:'chevron_backward';
    margin:0 0.5rem 0 -0.25rem;
}

.pagination .next::after {
    content:'chevron_forward';
    margin:0 -0.25rem 0 0.5rem;
}

/********** FOOTER **********/

footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--post-padding);
    color:var(--sidebar-text);
    font-family:'Geist Mono', monospace;
}

.credit {
    width:100%;
    max-width:var(--post-width);
    text-align:center;
    font-size:0.8rem;
}

.credit a {
    color:var(--sidebar-text);
    text-decoration-color:var(--sidebar-text);
    text-decoration:underline;
}

.credit a:hover {
    color:var(--links);
    text-decoration-color:var(--links);
}

/********** TOOLTIPS **********/

.tooltip {
    max-width:250px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    color:var(--sidebar-text);
    background-color:var(--sidebar-card);
    font-size:0.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05rem;
    line-height:1;
    padding:0.8rem 1rem;
    margin:0.5rem;
    border-radius:50px;
}

.tooltip:not(.active) {
    display:none;
}

/********** RESPONSIVE BREAKPOINTS **********/

@media only screen and (max-width:1024px) { 
    aside {
        width:auto;
    }
    
    nav .link-title {
        display:none;
    }
    
    .hide, .updates {
        display:none;
    }
    
    nav {
        gap:calc(var(--post-padding) / 2);
    }
}

@media only screen and (max-width:768px) {     
    #layout {
        gap:0;
        padding:0;
        padding-bottom:var(--post-padding);
        margin:0 auto;
    }
    
    aside {
        display:none;
        position:fixed;
        bottom:0;
        width:100%;
        top:var(--topbar);
        background-color:var(--background);
        padding:calc(var(--post-padding) / 2);
        z-index:99;
    }
    
    .active aside {
        display:block;
    }
    
    .search {
        max-width:100%;
        margin-right:auto;
        margin-left:0;
    }
    
    .menu {
        display:flex;
    }
    
    nav .link-title {
        display:block;
    }
    
    header {
        border-top:0;
    }
    
    .profile-info a {
        max-width:calc(var(--post-width) / 1.5);
    }
    
    header, article {
        border-radius:0;
        border-left:0;
        border-right:0;
    }
    
    .link-block .poster[style*="background-image"],
    div.npf-link-block .poster[style*="background-image"] {
        height:calc((var(--post-width) / 2) - var(--post-padding));
    }
    
    .pagination {
        padding:0 var(--post-padding);
    }
}