/* ---------- ROOT VARIABLES ---------- */

:root {
    --fsz: {select:Font Size}; /* font size */
    --psz: {select:Post Size}; /* post width */
    --sbw: {select:Sidebar Width}; /* sidebar width */
}

:root {
    --ft: "Helvetica Neue","HelveticaNeue", Helvetica, Arial, sans-serif; /* body font */
    --mw: calc( var(--psz) + var(--sbw) + 144px); /* main width */
    /* POST COLORS */
    --txt: #444444; /* text color */
    --bqc: #dcdcdc; /* blockquote color */
    --pgr: #a8b1ba; /* post gray color */
    --pdg: #818b98; /* post dark gray color */
    --pgh: rgba(130,139,152,.9); /* post gray hover color */
    --qbg: #eceef0; /* question background */
    --qtxt: #566167; /* question text */
    /* COLOR SCHEME COLORS */
    --bgc: #2c4762; /* background color */
    --gdc: #3a5976; /* gradient color */
    --lfd: #1e3249; /* loading feed background color */
    --sbt: rgba(255,255,255,0.69); /* sidebar text */
    --sbt2: rgba(255,255,255,0.37); /* sidebar text 2 */
    --sbt3: #879cb1; /* sidebar text 3 */
    --sbb: rgba(0,0,0,0.18); /* sidebar border color */
    --sbg: rgba(255,255,255,0.05); /* sidebar background */
    --sbgh: rgba(255,255,255,0.07); /* sidebar background hover */
    --btn: linear-gradient(180deg, rgba(114,175,204,1) 0%, rgba(103,165,193,1) 50%, rgba(95,159,189,1) 50%,rgba(84,149,179,1) 100%); /* button gradient */
    --btnb: rgba(0,0,0,0.65); /* button border */
}

/* ---------- COLOR SCHEMES ---------- */

body.mod {
    background: var(--bgc);
    --bgc: #021935;
    --gdc: rgba(255,255,255,0.05);
    --btn: #01b8ff;
    --lfd: #021935;
}

body.dark {
    --bgc: #111111;
    --gdc: #222222;
    --sbt3: #888888;
    --sbg: rgba(255,255,255,0.08);
    --sbgh: rgba(255,255,255,0.11);
    --btn: linear-gradient(180deg, #666 0%, #5a5a5a 50%, #555 50%, #505050 100%);
    --lfd: #111111;
}

body.pic {
    background-color: #000;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    --bgc: rgba(0,0,0,0.7);
    --gdc: rgba(0,0,0,0.7);
    --sbg: rgba(0,0,0,0.7);
    --sbgh: rgba(0,0,0,0.9);
    --sbt2: rgba(255,255,255,0.5); 
    --sbt3: #888888; 
    --lfd: #000000;
}

body.g1 {
    background-image: url('https://static.tumblr.com/zgb0z1w/Rpzrsevro/galaxy-1.jpg');
}

body.g2 {
    background-image: url('https://static.tumblr.com/zgb0z1w/67trsevs0/galaxy-2.jpg');
}

body.g3 {
    background-image: url('https://static.tumblr.com/zgb0z1w/hnprsevst/galaxy-3.jpg');
}

body.drw {
    background-image: url('https://static.tumblr.com/zgb0z1w/oIcrsevt7/doctor-who.jpg');
}

body.shr {
    background-image: url('https://static.tumblr.com/zgb0z1w/nYFrsevtl/sherlock.jpg');
}

body.spn {
    background-image: url('https://static.tumblr.com/zgb0z1w/jN1rsevty/supernatural.jpg');
}

body.upl {
    background-image: url('{image:Background}') !important;
}

/* ---------- TUMBLR CONTROLS ---------- */

.tmblr-iframe--unified-controls {
    position: absolute !important;
    right: calc(50% - (var(--mw) / 2) - 10px) !important;
    top: 11px !important;
}

/* ---------- BODY ---------- */

body {
    margin: 0;
    background-attachment: scroll;
    font-family: var(--ft);
    font-size: var(--fsz);
    line-height: 1.4;
    color: var(--txt);
    background-color: var(--bgc);
    background: linear-gradient(var(--gdc) 0%, var(--bgc) 553px);
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
}

/* ---------- HEADER ---------- */

header {
    width: var(--mw);
    padding: 0 20px;
    margin: 15px auto 12px auto;
}

.logo img {
    width: 196px;
}

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

.body-container {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: stretch;
    min-height: 100vh;
}

main {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 0 auto;
    width: var(--mw);
    padding: 20px;
    border-radius: 15px;
    background: var(--bgc);
}

/* ---------- SIDEBAR ---------- */

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

a.button, .sidebar-about {
    border: 1px var(--sbb) solid;
    border-radius: 6px;
    padding: 8px 13px 8px 10px;
    background: var(--sbg);
    color: var(--sbt);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
    margin-bottom: 15px;
}

/* about section */

.sidebar-about {
    font-size: calc(var(--fsz) - 2px);
    color: var(--sbt3);
}

.about-title {
    font-weight: bold;
    margin-bottom: 2px;
    font-size: calc(var(--fsz) + 2px);
    color: var(--sbt);
}

.sidebar-about a {
    text-decoration: underline;
}

.sidebar-about > * {
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
}

.sidebar-about > *:first-child {
    margin-top: 0;
    margin-block-start: 0;
}

.sidebar-about > *:last-child {
    margin-bottom: 0;
    margin-block-end: 0;
}

/* buttons */

a.button {
    display: block;
    font-weight: bold;
    overflow: hidden;
}

a.button:hover {
    background: var(--sbgh);
}

a.button:active {
    background: rgba(0,0,0,0.06);
    box-shadow: 0 0 2px rgb(0 0 0 / 25%);
}

a.button.follow-button {
    background: var(--btn);
    color: #fff;
    border: 1px var(--btnb) solid;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
}

a.button.follow-button:hover {
    opacity: 0.9;
}

.button-section a.button:first-child {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%);
}

.button-section a.button:not(:last-child) {
    border-bottom: 0;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.button-section a.button:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

a.button svg {
    margin-right: 2px;
    width: 18px;
    text-align: center;
}

/* suggested accounts */

.button.suggested-account {
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
}

.button.suggested-account img {
    height: 48px;
    width: 48px;
}

.button.suggested-account .account-info {
    width: calc(100% - 74px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    padding: 5px 13px;
}

.button.suggested-account .account-info h3,
.button.suggested-account .account-info h4 {
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.button.suggested-account .account-info h4 {
    font-size: calc(var(--fsz) - 3px);
    color: var(--sbt3);
    font-weight: 400;
    line-height: calc(var(--fsz) + 4px);
}

/* search bar */

form.sidebar-search input {
    display: block;
    color: var(--sbt);
    font-weight: bold;
    font-family: var(--ft);
    font-size: var(--fsz);
    padding: 0;
    border: 1px solid var(--sbb);
    background: transparent;
    border-radius: 6px;
    padding: 9px 40px 9px 9px;
    width: calc(100% - 51px);
    margin-bottom: 15px;
    box-shadow: 0 1px 0 rgb(255 255 255 / 7%), 0 1px 0 rgb(255 255 255 / 7%) inset;
}

form.sidebar-search input::placeholder {
    color: var(--sbt2);
}

form.sidebar-search input:focus-visible {
    outline: none !important;
}

form.sidebar-search button {
    float: right;
    background: transparent;
    border: none;
    margin-top: -50px;
    padding: 10px 13px 9px 5px;
    color: var(--sbt2);
    cursor: pointer;
}

/* sidebar footer */

.sidebar-footer {
    margin-top: 25px;
    font-size: calc(var(--fsz) - 3px);
    color: var(--sbt2);
    padding-left: 10px;
}

.sidebar-footer > * {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 6px;
}

/* ---------- POSTS ---------- */

section#posts {
    width: calc(var(--mw) - var(--sbw) - 20px);
}

article.post {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 20px;
    overflow: hidden;
}

.post-content {
    background: #fff;
    border-radius: 10px;
    flex-grow: 1;
    box-shadow: 0 1px 5px rgb(0 0 0 / 46%);
    max-width: var(--psz);
}

/* ---------- POST AVATAR ---------- */

.post-avatar {
    width: 64px;
    height: 64px;
    line-height: 0;
    background: rgba(0,0,0,0.45);
    box-shadow: 0 1px 5px rgb(0 0 0 / 46%);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.post-avatar img {
    height: 64px;
    width: 64px;
    border-radius: 6px;
}

.post-triangle {
    height: 0;
    width: 0;
    border: 10px transparent solid;
    border-right-color: #fff;
    margin-top: 22px;
    z-index: 2;
}

/* ---------- FAKE CREATE POST SECTION ---------- */

.create-post .post-content {
    padding: 0;
    max-width: calc(var(--psz) + 40px);
}

.post-type-nav {
    display: flex;
    flex-flow: row nowrap;
    padding: 5px 5px;
    line-height: 1;
}

.post-type-item {
    font-size: 16px;
    width: calc(100% / 7);
    text-align: center;
    color: var(--pdg);
    padding-bottom: 10px;
}

.post-type-item:not(:first-child):before {
    content: '';
    display: block;
    float: left;
    height: 100%;
    width: 1px;
    background: linear-gradient(180deg, #fff 0%, #ddd 50%, #fff 100%);
}

.post-type-icon {
    display: block;
    margin: 5px auto 2px auto;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.post-type-icon img {
    margin: 0 4px 0 -4px;
    width: 72px;
    height: auto;
}

.post-type-item:hover .post-type-icon {
    margin: 0 auto 7px auto;
}

/* ---------- POST CONTENT ---------- */

.post-content {
    padding: 15px 20px 20px;
}

.post-content a {
    text-decoration: underline;
}

.post-content p {
    margin-block-start: 1rem;
    margin-block-end: 1rem;
}

.post-content p:empty {
    display: none;
}

.post-content blockquote {
    margin: 10px 0 10px 10px;
    padding-left: 15px;
    border-left: solid 4px var(--bqc);
}

.post-content blockquote > *:first-child,
.post-content blockquote > .poll-post > *:first-child,
.post-content .question > *:first-child,
.post-content blockquote > p:first-child:empty + * {
    margin-top: 0 !important;
    margin-block-start: 0;
}

.post-content blockquote > *:last-child,
.reblog-item-body > *:last-child,
.post-content blockquote > .poll-post > *:last-child,
.post-content .question > *:last-child {
    margin-bottom: 0 !important;
    margin-block-end: 0;
}

ul {
    padding-inline-start: 32px!important;
}

ul li {
    padding-left: 8px;
}

/* ---------- POST HEADER ---------- */

.dog-ear {
    position: absolute;
    height: 15px;
    width: 15px;
    margin-top: -15px;
    margin-left: calc(var(--psz) + 5px);
    border-radius: 0 0 0 10px;
    background: linear-gradient(45deg, var(--bqc) 50%, var(--bgc) 50%);
    opacity: 0;
}

.post-content:hover .dog-ear {
    opacity: 1;
}

.post-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    color: var(--pgr);
    font-weight: 700;
    font-size: calc(var(--fsz) - 1px);
    margin-bottom: 15px;
}

.post-names {
    flex-shrink: 1;
}

article.post-link .post-header .post-names a:first-child {
    display: none;
}

.post-controls {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-self: flex-start;
}

.post-controls a {
    text-decoration: none;
}

a.post-notes {
    padding: 1px 5px;
    background: var(--pgr);
    color: #fff;
    border-radius: 2px;
}

.post-notes:hover {
    background: var(--pgh);
}

.post-controls .button {
    line-height: 0;
    margin-left: 18px;
}

.post-controls .button > *:not(.like_button.liked) {
    filter: contrast(0) sepia(41%) hue-rotate(175deg) saturate(0.7) brightness(1.2);
}

.post-controls .button > *:not(.like_button.liked):hover {
    filter: contrast(0) sepia(41%) hue-rotate(175deg) saturate(0.9)
}

body.index article.post-answer .post-controls .rblg {
    display: none;
}

/* ---------- REBLOG CHAINS ---------- */

.post-reblog-list {
    margin-top: 1rem;
}

.reblog-item-avatar img {
    height: 25px;
    width: 25px;
    border-radius: 3px;
    float: left;
    margin-right: 10px;
}

.reblog-item-username {
    height: 25px;
    font-weight: 700;
    line-height: 26px;
    font-size: 0.875em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.reblog-item-username a {
    text-decoration: none;
}

.post-content blockquote.reblog-item-body {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ---------- TEXT POSTS ---------- */

.post-content h1, .post-content h2 {
    font-weight: 700;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
}

.post-content h1 {
    font-size: 32px;
}

.post-content h2 {
    font-size: 25px;
}

/* ---------- MEDIA POSTS ---------- */

figure, figure > * {
    max-width: 100%;
    line-height: 0;
}

figure {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

p.tmblr-attribution {
    display: none;
}

.image-container {
    line-height: 0;
    margin-bottom: 15px;
}

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

p.link-excerpt {
    margin-top: -0.5rem;
}

/* npf links */

.post-content div.npf-link-block {
    border: none;
    border-radius: 0;
    margin: 1em 0;
}

.post-content div.npf-link-block .poster {
    background: none !important;
    height: auto;
    border-bottom: 0;
}

.post-content div.npf-link-block .poster:before {
    display: none;
}

.post-content div.npf-link-block .title {
    position: relative;
    text-align: left;
    color: inherit;
    width: 100%;
    padding: 0;
    font-size: 25px;
    font-weight: 700;
    text-decoration: underline;
}

.post-content div.npf-link-block .bottom {
    margin: 0.5rem 0 0 0;
    padding: 0;
    line-height: inherit;
}

.post-content div.npf-link-block .bottom .description {
    font-size: inherit;
    line-height: 1.4;
    max-height: none;
    overflow: visible;
}

.post-content div.npf-link-block .bottom .site-name {
    display: none;
}

/* ---------- QUOTE POSTS ---------- */

p.npf_quote, .post-content > .quote {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 23px;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
}

.quote.short {
    font-size: 32px;
}

.quote.long {
    font-size: 18px;
}

/* ---------- CHAT POSTS ---------- */

.post-content .chat, p.npf_chat {
    font-family: "consolas", monospace;
    line-height: 1.5;
}

.chat-label {
    font-weight: 700;
}

.chat-line:not(:last-child) {
    margin-bottom: 0.5em;
}

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

.audio-inline {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background: #f2f2f2;
    line-height: 0;
    padding-right: 20px;
}

.album-art {
    width: 64px;
    height: 64px;
    float: left;
    border-right: 15px #fff solid;
    margin-right: 15px;
}

.track-info {
    width: 100%;
}

.track-info span {
    display: block;
}

iframe.tumblr_audio_player {
    width: 100%;
}

iframe.spotify_audio_player {
    height: 152px;
    width: 100%;
}

iframe.soundcloud_audio_player {
    height: 172px;
    width: 100%;
}

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

.question {
    background: var(--qbg);
    padding: 15px 20px;
    border-radius: 8px;
    color: var(--qtxt);
    font-weight: 700;
    line-height: 1.3;
    font-size: 22px;
    margin-bottom: 19px;
}

.question::after {
    content: '';
    display: block;
    height: 0px;
    width: 0px;
    margin: 14px 0 -34px 10px;
    border: 10px solid;
    border-color: var(--qbg) transparent transparent;
}

div.asker {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0 0 15px 24px;
}

div.asker > .asker {
    text-decoration: none;
    font-size: 16px;
}

.asker img {
    height: 32px;
    width: 32px;
    border-radius: 2px;
    margin-right: 15px;
}

/* ---------- POLL POSTS ---------- */

.poll-post a.poll-row {
    background: var(--qbg);
    color: var(--qtxt);
    border-radius: 8px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

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

.post-meta {
    margin-top: 15px;
    margin-bottom: -5px;
    font-size: calc(var(--fsz) - 3px);
    color: var(--pgr);
    font-family: 'Lucida Grande', Verdana, sans-serif;
}

.post-meta a {
    text-decoration: none;
    margin-right: 10px;
}

a.post-source {
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    float: left;
}

a.post-source::after {
    content: '';
    height: calc(var(--fsz) * 1.4);
    width: 15px;
    float: right;
    margin-top: calc(var(--fsz) * -1.4);
    margin-left: -15px;
    position: relative;
    background: linear-gradient(90deg, transparent 0%, #fff 100%);
}

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

.notes-container {
    margin-left: 84px;
}

.notes-container .post-content {
    padding: 0;
    border-radius: 0;
    background: transparent;
    max-width: calc(var(--psz) + 40px);
    box-shadow: none;
}

.notes-container ol.notes {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    list-style-type: none;
}

.notes-container li.note {
    background: var(--gdc);
    color: var(--sbt2);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: calc(var(--fsz) - 2px);
    font-weight: 700;
    min-height: 24px;
    border: 1px var(--sbb) solid;
    width: calc(100% - 18px);
    padding: 8px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.notes-container li.note a.avatar_frame {
    line-height: 0;
    margin-right: 10px;
    align-self: flex-start;
}

.notes-container li.note a.avatar_frame img {
    height: 24px;
    width: 24px;
    border-radius: 2px;
}

.notes-container li.note span.action {
    max-width: calc(100% - 34px);
}

.notes-container li.note blockquote {
    width: 100%;
    border-color: rgba(255,255,255,0.1);
    padding-left: 20px;
    margin: 8px 0 2px 10px;
}

.notes-container li.note blockquote > *,
.notes-container li.note .answer_content {
    font-weight: 400;
    text-decoration: none;
}

.notes-container li.more_notes_link_container {
    font-size: var(--fsz);
    background: var(--btn);
    color: #fff;
    border: 1px solid var(--btnb);
    padding: 8px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.notes-container li.more_notes_link_container > * {
    width: 100%;
    text-decoration: none;
}

/* ---------- PAGES ---------- */

article.post:not(.has-date) .post-content h2 {
    margin-block-end: 0.5rem;
}

article.post:not(.has-date) .post-caption > *:first-child,
article.post:not(.has-date) .post-content > *:first-child {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

article.post:not(.has-date) .post-caption > *:last-child,
article.post:not(.has-date) .post-content > *:last-child {
    margin-block-end: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------- PAGINATION ---------- */

.pagination {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 40px 0 20px 84px;
}

.pagination a {
    display: block;
    border-radius: 6px;
    padding: 8px 15px;
    font-weight: bold;
    background: var(--btn);
    color: #fff;
    border: 1px solid var(--btnb);
    box-shadow: 0 0 2px rgb(0 0 0 / 25%);
    font-size: calc(var(--fsz) + 2px);
}

.pagination a:hover {
    opacity: 0.9;
}

.prev:not(:link), 
.next:not(:link) {
    visibility: hidden;
}

.post-feed[aria-busy="true"]::after {
    content: 'Loading more posts...';
    position: absolute;
    left: 0;
    width: 100%;
    margin-top: 10px;
    padding: 25px 0;
    background: var(--lfd);
    text-align: center;
    font-size: 32px;
    color: #fff;
    font-weight: 700;
}

body.endless-scroll .pagination {
    display: none;
}

/* back to top button */

#top {
    display: block;
    position: fixed;
    bottom: 15px;
    right: 15px;
    height: 25px;
    width: 25px;
    background: var(--gdc);
    padding: 15px;
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: pointer;
}

#top.show {
    opacity: 1;
    visibility: visible;
}