personal tumblr stylesheet. adds some icons (speech bubbles and a flashlight), rounds some corners; animates tumblr a bit. the plan is for eventual interactivity: each post is styled with a "door" and "doorstep" (X-bar, above window fold) for a background. clicking speech bubbles in tumblr's "goth rave" theme outlines the door, a talking door, o…

alt-blend-modes.css

/**
 * @description combine at will on tumblr dot com.
 * @usage
 * (mix|background)-blend-mode: normal;
 * (mix|background)-blend-mode: multiply;
 * (mix|background)-blend-mode: screen;
 * (mix|background)-blend-mode: overlay;
 * (mix|background)-blend-mode: darken;
 * (mix|background)-blend-mode: lighten;
 * (mix|background)-blend-mode: color-dodge;
 * (mix|background)-blend-mode: color-burn;
 * (mix|background)-blend-mode: hard-light;
 * (mix|background)-blend-mode: soft-light;
 * (mix|background)-blend-mode: difference;
 * (mix|background)-blend-mode: exclusion;
 * (mix|background)-blend-mode: hue;
 * (mix|background)-blend-mode: saturation;
 * (mix|background)-blend-mode: color;
 * (mix|background)-blend-mode: luminosity;
 */
body[class*="palette"] {
    background-blend-mode: luminosity !important;
    mix-blend-mode: luminosity !important;    
}

diet--tumblr--dashboard.css

/**
 * @appliesTo URL https://www.tumblr.com/dashboard??
 * @appliesTo URL https://www.tumblr.com/dashboard/following
 * @appliesTo URL https://www.tumblr.com/dashboard/stuff_for_you
 * @appliesTo URL https://www.tumblr.com/dashboard/hubs
 * @appliesTo URL https://www.tumblr.com/dashboard/blog_subs
 * @appliesTo URL https://www.tumblr.com/dashboard/trending
 * @appliesTo URLsStartingWith https://www.tumblr.com/reblog
 * @appliesTo URLsStartingWith https://www.tumblr.com/blog
 * @appliesTo URLsStartingWith https://www.tumblr.com/edit
 * @appliesTo URLsStartingWith https://www.tumblr.com/new/text
 */

/* @descriptions hides tumblr from itself. vying for dashboard and "for you" page.
 * these selectors may break other pages.
 */

main > div:nth-child(1),
main > div:not([data-timeline="/v2/timeline?which=trending"]):not([data-timeline="/v2/timeline?which=blog_subscriptions"]):not([data-timeline="/v2/timeline/hubs"]):not([data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"]):nth-child(3) {
    display: none !important;
}
/*
main > div:not([aria-hidden]):nth-child(4) {
    display: none !important;
}
*/

#base-container > div > div > div aside {
    display: none;   
}

disable-bg.css

#tumblr {
    background-image: none !important;
}
#tumblr:after {
    background-image: none !important;
}

figure-overlap-fix.css

/* @description quick hack for when a post has only one image <figure> and other elements of the page are overlapping.
 * sometimes people will make single image posts with a caption and it will crash into the above byline. this is a separate
 * stylesheet to use in stylish for such occasions. (it's rare so i'm suggesting this stylesheet to be toggle-able.)
 */
figure img {
    margin-top: 5vw !important;   
}
figure:after {
    content: ' ' !important;
	display: block !important;
	height: 5vw !important;
    padding-top: 1vw !important;
    border-top: 3px double rgba(100, 100, 100, 0.4) !important;
}

glass-animate.css

#glass-container button {
    transform: scale(1.5);
}

#glass-container button > * > img {
    transform: scale(1);
    animation: ease-in-out infinite alternate;
    animation-name: anim;
    animation-duration: 6s;
}

@-webkit-keyframes anim {
    0% {
      margin-top: 2vw;
      transform: translate3d(100px, 0, 0);
    }
    100% {
      margin-top: -2vw;
      transform: translate3d(0, 0, 100px);
    }
}

glass-maximizer.css

#glass-container button {
    /*min-width: 100%;*/
    width: 100%;
}
#glass-container button > * > img {
    object-fit: cover;
    width: 100%;
}
#glass-container div div div {
    margin: 0;
    padding: 0;
}
#glass-container div div div > * img { }
#glass-container div div div > * > * { }
#glass-container div div div > * > * > * { }
#glass-container div div div > * > * > img {
    outline: 3px double rgba(0, 0, 0, 0.85);
}

grid-mode.css

/* @description tumblr in grid mode */
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2),
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2),
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2),
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2),
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2),
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { 
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-column-gap: 6.5vw;
    grid-row-gap: 6.5vw;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > *,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > *,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > *,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > *,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > *,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > * { 
    min-width: 25vw;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:hover {
  animation-name: none;
}

I-tumblr-dot-com--only3-homepage__reversed__.css

/* @description tumblr in columnar mode (but reversed) */
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { 
   flex-direction: row-reverse;
}

html:focus div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2),
html:active div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2),
html:hover div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { 
   flex-direction: row !important;
}

/* EOF */

icons.css

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) p:hover:before,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) p:hover:before,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) p:hover:before,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) p:hover:before,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) p:hover:before,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) p:hover:before {
    opacity: 0.6;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) p:before,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) p:before,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) p:before,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) p:before,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) p:before,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) p:before {
    content: '🌿';
    display: inline-block;
    transform: scale(1.3);
    position: absolute;
    width: 2vw;
    height: 2vw;
    left: -2vw;
    /*outline: 3px solid rgba(100, 100, 100, 0.3);*/
    padding: 3vw;
    z-index: 10000;
    opacity: 0.3;
    background-blend-mode: luminosity !important;
    mix-blend-mode: luminosity !important;   
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 8s;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:before,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:before,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:before,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:before,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:before,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:before {
    content: "✋🏾";
    display: inline-block;
    width: 10vw;
    height: 10vh;
    position: absolute;
    font-size: 4rem;
    left: 0;
    z-index: 9999;
    opacity: 0.5;
    transform: rotate(-45deg);
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:after {
    content: "🥃";
    content: "☕️";
    display: inline-block;
    width: 10vw;
    height: 10vh;
    position: absolute;
    font-size: 4rem;
    left: -5vw;
    margin-top: -1vw;
    z-index: 9999;
    opacity: 0.5;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:after {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    animation: ease-in-out infinite alternate;
    animation-name: upup;
    animation-duration: 2s;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:active:after,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:active:after,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:active:after,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:active:after,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:active:after,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:active:after {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    animation: ease-in-out infinite alternate;
    animation-name: upup;
    animation-duration: 2s;
}

/* @description filler. */
[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2):after {
    padding-right: 10vw;
    content: '⑇';
    font-size: 100vw;
    display: block;
    opacity: 0.4;
    color: rgba(255, 255, 255, 0.4);
    filter: grayscale(100%);
    width: 10vw;
    height: 10vw;
    animation: ease-in-out infinite alternate;
    animation-name: fade;
    animation-duration: 4s;
}

[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2):hover:after {
    opacity: 1;
}

/* ## utils */
@-webkit-keyframes revhoverbit {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        transform: translate3d(0px, 5px, 0px);
    }
}

@-webkit-keyframes hoverbit {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-5%);
    }
}

@-webkit-keyframes hoverbit2 {
    0% {
      top: 0vw;
    }
    100% {
      top: -1vw;
    }
}

@-webkit-keyframes fade {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

@-webkit-keyframes fadein {
    0% {
      opacity: 0.8;
    }
    100% {
      opacity: 1;
    }
}

@-webkit-keyframes livrespairs {
    0% {
      opacity: 0.35;
      transform: translate3d(-10px, 0, -5px);
    }
    100% {
      opacity: 0.85;
      transform: translate3d(0, -5px, -5px);
    }
}

@-webkit-keyframes upup {
    0% {
      /*
      opacity: 0.85;
      transform: translate3d(15px, 0, 0);*/
      filter: invert(0);
    }
    100% {
      filter: invert(100%);
      /*
      opacity: 1;
      transform: translate3d(0, 5px, 5px);*/
    }
}

@-webkit-keyframes rotate {
    0% {
      opacity: 0.85;
      transform: translate3d(15px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 5px, 5px);
    }
}

revert.css

/* @description obviously. */
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2),
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2),
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2),
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2),
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2),
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { 
   display: flex;
   flex-direction: column;
   flex-wrap: inherit;
}

sharpen-bg.css

body[class*="palette"] {
    /* Keyword values */
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: smooth;
    image-rendering: crisp-edges;
    image-rendering: pixelated;

    /* Global values */
    image-rendering: inherit;
    image-rendering: initial;
    image-rendering: revert;
    image-rendering: revert-layer;
    image-rendering: unset;

    image-rendering: auto !important;
}

tumblr--attr--data-id.css

/* @description attr(data-id) */
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div {
    position: relative;
}
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:before {
    content: attr(data-id);
    display: inline-block;
    width: 10vw;
    height: 2vw;
    color: rgba(240, 0, 190, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;  
}

tumblr--fixes.css

/* @description i'm keeping these "fixes" as a separate file as a testament of how much a fucking idiot i am and how 
 * time-consuming this shit can be for fucking idiots who can't just use their voice to cover their own ass actually. */
:not([data-id]) [style*="opacity: 1"] [style*="blog-title"] {
    left: auto !important;
}

[data-testid="tag-link"] > div {
    margin: 0 auto 2vw !important;
}

/* @desc meta-naming, etc. */

/* @desc for all parents with specific children */
.A:has(~ .B) {}
/* @description if a direct descendant exists ... */
.A:has(> .B) {}
/* @desc for all siblings for parent as opposed to another parent */
.A:has(+ .B) {}
/* @desc for all parents, according to class name token A */
.A:has(.B) {
    outline: 3px solid gold;   
}

/* @note turn on layout.css.has-selector.enabled */
*:has(*) {
    /*outline: 3px solid gold;*/
}

body * {
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);   
}

svg {
  filter: drop-shadow(1px 1px 0.5px rgba(1, 0, 0, 0.35));
}
svg:after {
    content: '.';
    display: inline-block;
    width: 2vw;
    height: 2vw;
}

[aria-modal="true"]:has([role]) {
    background-color: rgba(0, 0, 0, 0.5) !important;   
}

[aria-label*="Restore timeline"] span {
    color: rgba(0, 150, 255, 1) !important;
}

*[rel]:active,
*[rel]:focus,
*[rev]:active,
*[rev]:focus,
*[role]:active,
*[role]:focus,
*[type]:active,
*[type]:focus,
*[aria-label]:active,
*[aria-label]:focus,
*[title]:active,
*[title]:focus,
*[href]:active,
*[href]:focus { 
  outline: 3px solid rgba(0, 150, 255, 1) !important;  
}

*[required]:active,
*[required]:focus { 
  outline: 3px dotted rgba(255, 150, 0, 1) !important;  
}


*[aria-label]:hover {
  outline: 3px dotted rgba(100, 5, 130, 0.85) !important;  
  filter: hue-rotate(180deg);
}

[aria-label*="Discard"] * {
    color: rgba(255, 30, 0, 0.25) !important;  

}
[aria-label*="Discard"]:hover * {
    color: rgba(255, 30, 0, 1) !important;  
}


[aria-label*="Cancel"] * {
    color: rgba(200, 200, 200, 0.25) !important;  
}
[aria-label*="Cancel"]:hover * {
    color: rgba(200, 200, 200, 1) !important;  
}

*[aria-label]:visited {
  outline: 3px dotted rgba(100, 150, 30, 0.4) !important;  
}

caption, figcaption, cite, dt, button,
time, data, label, input, textarea, th, select, option {
    color: rgba(0, 150, 255, 1) !important;   
}

/* @description tooltips */

[aria-label="Explore"]:hover:after {
    position: absolute;
    content: attr(aria-label);
    content: '🔎 ẻ̡̧͎͕̙̜̹͇̞̩͚̆̃̏̀̂̏̂̌̽͂̔ͅx̧̧̢̛̟̬̻̼͓̣̠̟̜̝͖̙̯͎̲̭̼̠̣̜́͑̍̿̓̏͑̄̊̉̔̉̅͐̽́̅̎͗͌̕̕͞͝ͅͅp̧̲̫̺̹̝̺̮̝̫̲͔̖̏̋̋̏̌̄͗̽̓̄̍̍̐̈́͘͢͜͢͢͞͞l̛̛̞̖̦̥̦̰̰͎͓̹̯͍̺͈͇̬̗̪̳̠̼̪̳͎̰̣̤̤̯̱̭̫̂͒̅̏͌͒͌͊̍̓͋͗̉̽̅̽̓̆̍͆̒͑͒̈͛͐̕̚͟͠͞͠͡ͅỏ̧̡͕̟̖̭̰̬̮͇͔̤̞̟̳̜͓̼̜͕̤͕̘̳̩̆̉̅͑̑̔́͛̓̇̓͒̆̍̍͑̾͌̐̆̎̏̾̕̕͜r̢̧̮̝̺̤̬̺̪͉̠̭̦̩̬͕̥̼̪̲̗͓̐̽̄̂͌̊̓̓̉̾̍̌̇͒͆͑̽͐̂̋̕͘̕͟ę̧̡̛̮͈͖͖̤͇̱̘͕͇̥̙̥͖͚̜̞̬̭͉̰͑͋̓̽̀̌͛͌̓́̂̿̾̌̆̔̎̾̉̅̕͘͜͜͡͝͡͞ͅ';
    display: block;
    width: 2vw;
    height: 2vw;
    top: 0.5vw;
    right: 2vw;
    animation: ease-in-out infinite alternate;
    animation-name: upup;
    animation-duration: 2s;
    z-index: 100000 !important;
}

/* @description fixes like 3 problems between 5 different elements. 5 birds, 3 stones. */
a {
    border-radius: 0 !important;
}


ul [aria-label],
aside {
    opacity: 0.4 !important;
}

ul [aria-label]:hover,
aside:hover {
    opacity: 1 !important;
}

/*
div[data-timeline] > div:nth-child(2) {
    border-right: 200vw solid rgba(0, 0, 0, 0.2);
}
*/

/*
div[data-timeline] > div:nth-child(2):after {
    content: '    🌱  🌳🌳 🌳🌳 🌳🌳🌳 🌳🌳🌳 🌲   🌲 \
   🌲 🍃      🍃 \
    🌱 🌳 🌲  🍃  🌿 \
  🌱 🌳  🌲 🍃     🌿 \
       🌳 🌲   🌿 🌱🌱🌱🌱🌱 🌱🌱🌱🌱🌱 \
   🍃  🌲  🍃  🌳 🌲 \
   🌿 🌱    🌿 \
   🌳 🌲 🍃  🌳 🌲 🍃 \
          🌿 🌱 🌳 🌲 \
        🍃  🌳 🌲 🌲🌲🌲 🌲🌲🌲 🌲🌲    🌲 \
   🌲 🍃      🍃 \
    🌱 🌳 🌲  🍃  🌿 \
  🌱 🌳  🌲 🍃     🌿 \
       🌳 🌲   🌿 🌱🌱🌱🌱🌱 🌱🌱🌱🌱🌱 \
   🍃  🌲  🍃  🌳 🌲 \
    🌱 🌳 🌲  🍃  🌿 \
  🌱 🌳  🌲 🍃     🌿 \
       🌳 🌲   🌿 🌱🌱🌱🌱🌱 🌱🌱🌱🌱🌱 \
   🍃  🌲  🍃  🌳 🌲 \
   🌿 🌱    🌿 \
   🌳 🌲 🍃  🌳 🌲 🍃 \
          🌿 🌱 🌳 🌲 \
        🍃  🌳 🌲 🌲🌲🌲 🌲🌲🌲 🌲🌲    🌲 \
   🌲 🍃      🍃 \
    🌱 🌳 🌲  🍃  🌿 \
  🌱 🌳  🌲 🍃     🌿 \
       🌳 🌲   🌿 🌱🌱🌱🌱🌱 🌱🌱🌱🌱🌱 \
   🍃  🌲  🍃  🌳 🌲 \
   🌿 🌱    🌿 \
   🌳 🌲 🍃  🌳 🌲 🍃 \
          🌿 🌱 🌳 🌲 \
      🌱 🌳 🌲🌲🌲🌲🌲 🌲🌲🌲 🌲🌲'; 
    display: block;
    height: 50vw;
    width: 100vw;
    font-size: 10vw;
    opacity: 0.25;
    z-index: 0;
    transform: translateX(2vw) rotate3d(10, 3, 13, -10deg) scale(1.2);
    position: absolute;
    filter: hue-rotate(120deg);
}
*/

tumblr--hidden-posts.css

[data-id="702120181040840705"] {
    /*display: none !important;*/
    opacity: 0.1 !important;
}

[data-id="685158170980679680"] {
    opacity: 0.1 !important;
}

tumblr--self.css

/* @description move the generic interface elements around for less doomfalling.
 * for https://holoentropic.tumblr.com/* with stylish or [custom-style-script]'s css feature.
 *
 * []: https://mybrowseraddon.com/custom-style-script.html
 */

/**
 * @description inner background for page pagination.
 */
#pagination a {
    opacity: 1 !important;
}

#pagination .bg,
span[class="bg"]{
    opacity: 1 !important;
}

.tmblr-iframe.tmblr-iframe--unified-controls.tmblr-iframe--loaded.iframe-controls--desktop.tmblr-iframe--below-header,
.nav-wrapper {
    z-index: 100 !important;
    position: absolute !important;
}

[href*="prev"]
[href*="next"],
[rel*="prev"],
[rel="next"],
[class="next"],
[class="previous"],
[class="prev"],
button[aria-label="Prev"],
button[aria-label="Previous"]
button[aria-label="Next"] {
    position: fixed !important;
    right: 1vw !important;
    top: 5vw !important;    
    opacity: 1;
    z-index: 99999999 !important;
}

[href*="prev"]:hover,
[href*="next"]:hover,
[rel*="prev"]:hover,
[rel="next"]:hover,
[class="previous"]:hover,
[class="prev"]:hover,
[class="next"]:hover,
button[aria-label="Prev"]:hover,
button[aria-label="Previous"]:hover,
button[aria-label="Next"]:hover {
    filter: invert(100%) !important;
    opacity: 1;
}

[href*="prev"] > *,
[rel="prev"] > *,
[href*="next"] > *,
[rel="next"] > *,
[class="previous"] > *,
[class="prev"] > *,
[class="next"] > *,
button[aria-label="Prev"] > *,
button[aria-label="Previous"] > *,
button[aria-label="Next"] > * {
    cursor: help; /* fallback if grab cursor is unsupported */
    cursor: help;
    cursor: -moz-help;
    cursor: -webkit-help;
    opacity: 1;
}

/** @description . */

[href*="next"] > *:after,
[rel="next"] > *:after,
[class="next"] > *:after,
button[aria-label="Next"] > *:after {
    opacity: 1;
    content: '🔮';
    display: inline-block;
    position: absolute;
    left: 1vw;
    top: 0vw;
    font-size: 12vw;
    line-height: 0;
    z-index: -1;
    color: rgba(0, 0, 0, 1);
    animation: ease-in-out;
    animation-name: fadeto;
    animation-duration: 2s;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
[href*="next"] > *:active:after,
[rel="next"] > *:active:after,
[class="next"] > *:active:after,
button[aria-label="Next"] > *:active:after {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    outline: 3px dashed gold !important;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
    filter: drop-shadow(0 0 0.75rem crimson);
    /*mix-blend-mode: luminosity;*/
}

[href*="next"]:after,
[rel="next"]:after,
[class="next"]:after,
button[aria-label="Next"]:after {
    content: '⎘' !important;
    display: inline-block  !important;
    position: absolute  !important;
    left: 1vw  !important;
    top: 0vw  !important;
    line-height: 0  !important;
    z-index: -1  !important;
    color: rgba(0, 0, 0, 0.2)  !important;
    font-size: 12vw  !important;
    text-shadow: 0 0 0.1rem rgba(20, 200, 255, 0.75), 0 0 0.1rem rgba(255, 255, 255, 1)  !important;
}
[href*="next"]:hover:after,
[rel="next"]:hover:after,
[class="next"]:hover:after,
button[aria-label="Next"]:hover:after {
    color: rgba(255, 255, 255, 1) !important;
    text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1)  !important;
    animation: ease-in-out infinite alternate;
    animation-name: hoverbit2;
    animation-duration: 2s;
}

[href*="previous"],
[rel="previous"],
[href*="prev"],
[rel="prev"],
[class="prev"],
[class="previous"],
button[aria-label="Prev"],
button[aria-label="Previous"] {
    position: absolute !important;
    z-index: 9999 !important;
    left: 1vw !important;
    top: 5vw !important;
}

[href*="previous"]:hover,
[rel="previous"]:hover,
[href*="prev"]:hover,
[rel="prev"]:hover,
[class="prev"]:hover,
[class="previous"]:hover,
button[aria-label="Prev"]:hover,
button[aria-label="Previous"]:hover {
    filter: invert(100%) !important !important;
}
[href*="previous"] > *,
[rel="previous"] > *,
[href*="prev"] > *,
[rel="prev"] > *,
[class="prev"] > *,
[class="previous"] > *,
button[aria-label="Previous"] > *,
button[aria-label="Previous"] > * {
    cursor: help !important; /* fallback if grab cursor is unsupported */
    cursor: help !important;
    cursor: -moz-help !important;
    cursor: -webkit-help !important;
}
/* @description previous door */
[href*="previous"] > *:after,
[rel="previous"] > *:after,
[href*="prev"] > *:after,
[rel="prev"] > *:after,
[class="prev"] > *:after,
[class="previous"] > *:after,
button[aria-label="Previous"] > *:after {
    content: '🚪' !important;
    display: inline-block !important;
    position: absolute !important;
    left: 1vw !important;
    top: 0vw !important;
    line-height: 0 !important;
    z-index: -1 !important;
    color: rgba(0, 0, 0, 1) !important;
    font-size: 12vw !important;
    animation: ease-in-out !important;
    animation-name: fadeto !important;
    animation-duration: 2s !important;
    cursor: move !important; /* fallback if grab cursor is unsupported */
    cursor: grab !important;
    cursor: -moz-grab !important;
    cursor: -webkit-grab !important;
}
[href*="previous"] > *:active:after,
[rel="previous"] > *:active:after,
[href*="prev"] > *:active:after,
[rel="prev"] > *:active:after,
[class="prev"] > *:active:after,
[class="previous"] > *:active:after,
button[aria-label="Previous"] > *:active:after {
    cursor: grabbing !important;
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
    outline: 3px dashed gold !important;
    animation: ease-in-out infinite alternate !important;
    animation-name: livrespairs !important;
    animation-duration: 2s !important;
    filter: drop-shadow(0 -6mm 4mm rgb(210, 0, 160)) !important;
}
[href*="previous"]:after,
[rel="previous"]:after,
[href*="prev"]:after,
[rel="prev"]:after,
[class="prev"]:after,
[class="previous"]:after,
button[aria-label="Prev"]:after,
button[aria-label="Previous"]:after {
    content: '⎌' !important;
    display: inline-block !important;
    position: absolute !important;
    left: 1vw !important;
    top: 0vw !important;
    line-height: 0 !important;
    z-index: -1 !important;
    color: rgba(0, 0, 0, 0.2) !important;
    font-size: 12vw !important;
    text-shadow: 0 0 0.1rem rgba(200, 20, 255, 0.75), 0 0 0.1rem rgba(255, 255, 255, 1) !important;
}
[href*="previous"]:hover:after,
[rel="previous"]:hover:after,
[href*="prev"]:hover:after,
[rel="prev"]:hover:after,
[class="prev"]:hover:after,
[class="previous"]:hover:after,
button[aria-label="Prev"]:hover:after,
button[aria-label="Previous"]:hover:after {
    color: rgba(255, 255, 255, 0.5) !important;
    text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1) !important;
    animation: ease-in-out infinite alternate !important;
    animation-name: hoverbit2 !important;
    animation-duration: 2s !important;
}

/* EOF */

/* ## utils */

@-webkit-keyframes fadeto {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

/* EOF */

tumblr--shuffle-1.css

[data-id*="19"] { order: 1; }
[data-id*="28"] { order: 2; }
[data-id*="37"] { order: 3; }
[data-id*="46"] { order: 4; }
[data-id*="55"] { order: 5; }
[data-id*="64"] { order: 6; }
[data-id*="73"] { order: 7; }
[data-id*="82"] { order: 8; }
[data-id*="91"] { order: 9; }

tumblr--shuffle-2.css

[data-id*="71"] { order: 1; }
[data-id*="82"] { order: 2; }
[data-id*="81"] { order: 3; }
[data-id*="82"] { order: 4; }
[data-id*="84"] { order: 5; }
[data-id*="59"] { order: 6; }
[data-id*="04"] { order: 7; }
[data-id*="50"] { order: 8; }
[data-id*="00"] { order: 9; }

/* @description generated using some scripting and Mersenne Twister 19937 from random-js. */
[data-id*="56477"] { order: 1; }
[data-id*="92258"] { order: 2; }
[data-id*="99116"] { order: 3; }
[data-id*="6724"] { order: 4; }
[data-id*="9692"] { order: 5; }
[data-id*="9316"] { order: 6; }
[data-id*="44875"] { order: 7; }
[data-id*="7015"] { order: 8; }
[data-id*="99873"] { order: 9; }

tumblr-hide-name.css

/**
 * @description i don't need to see my display name on my own internal 
 * blog admin posts page. i know what page i'm on. it's unnecessary redundance.
 */
a[data-login-wall-blog-name="holoentropic"] {
    display: none;
}

tumblr-tabpanel.css

/**
 * @description improves usability of the "activity" dropdow menu for tumblr dot com.
 *
 * 1. removes display name information of persons (reason: don't show too much
 *    all the time. we'll get the rest of the info. on the "all activity" page.)
 * 2. makes image under view appear like a repeated background image. this should 
 *    improve recognizability, because currently the image-as-icon is so small i 
 *    can hardly recognize it. it's confusing, so i've increased its size and repeated
 *    it.
 *    3. added a label on hover for the menu item.
 */
[aria-label="Activity"]:hover:after {
    content: '📌';
    display: block;
    position: absolute;
    left: -4vw;
    bottom: -2vw;
    height: 2vw;
    width: 2vw;
}
[aria-label="Activity"]:hover:before {
    content: attr(aria-label);
    display: block;
    position: absolute;
    left: -2vw;
    bottom: -2vw;
    height: 2vw;
    width: 2vw;
    background: rgba(0, 0, 0, 0.5);
    font-variant: small-caps;
    text-transform: lowercase;
}

[role="tabpanel"] [role="link"]:before {
    content: '📌';
    display: block;
    position: absolute;
    right: 1vw;
    bottom: 2vw;
    height: 2vw;
    width: 2vw;
    z-index: 9001;
    transform: scale(3);
}
[role="tabpanel"] [role="link"] {
    display: flex;
    flex-direction: row;
    outline: 0px solid gold;
    width: 27vw;
    position: absolute;
    left: -26vw;
    height: 7vw;
    top: -3vw;
    z-index: -1 !important;
    background-size: auto;
    background-position: center;
    background-repeat: space;
}

/*
[role="tabpanel"]:has([href*="holoentropic"]) [role] {
    outline: 2px solid gold;   
    content: '🔗';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 2vw;
    width: 2vw;
    z-index: 9001;
}
*/

/* EOF */

tumblr-🗺-next.css

button[aria-label="Next"] > *:after {
    content: '🌐';
    content: '🗺';
}

tumblr.css

/**
 * @name personal-tumblr-userstyle
 * @version 0.0.0-novel.0
 * @version 0.0.0-novel.0
 * @author aha <patagnome@proton.me>
 * @license wtfpl, version 2
 * @description extended homepage edits to subs, tags, trending, "for you" landing pages, and finally for the
 * dashboard. i think the other landing pages are good for now
 * @note i don't know your setup so plan the animations accordingly.
 * @appliesTo https://www.tumblr.com/*
 */

div div:has([aria-label="Restore timeline to what it was when you last viewed it"]) {
    z-index: 10;
}

[aria-modal="true"] div div div div div {
    margin: 0 auto;
    max-width: 75vw !important;

}

[aria-modal="true"] button *,
[aria-modal="true"] [aria-label] * {
    color: rgba(0, 230, 100, 1) !important;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35)) hue-rotate(100deg);
}

[aria-modal="true"] button,
[aria-modal="true"] [aria-label] {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35)) hue-rotate(100deg);
    color: white !important;
}

[aria-modal="true"] div {
}
[aria-modal="true"] {
    max-width: 75vw !important;
	margin: 0 auto !important;
    width: 100vw;
}

/* @description remove the ads on personal dashboard pages */
.moatContainer {
  display: none !important;
}

/* @description a bit of adjustment */
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:last-child,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:last-child,
div[data-timeline="/v2/timeline/hubs"] > div:last-child,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:last-child,
div[data-timeline="/v2/timeline?which=trending"] > div:last-child,
div[data-timeline="/v2/timeline/dashboard"] > div,
div[data-timeline="/v2/timeline/dashboard"] > div:last-child {
    /*margin-top: 5rem !important;*/
    margin-right: 2vw !important;

    /*outline: 3px solid gold;*/
}

/* @todo saving changes "next" to the content set here */
div[data-timeline="/v2/timeline/dashboard"] > *:last-child:after {
    content: '🔮';
    display: inline-block;
    position: absolute;
    left: 1vw; 
    bottom: 0vw;
    font-size: 12vw;
    line-height: 0;
    z-index: 100;
}

/* @description tumblr in columnar mode */

[id="base-container"]  {
    width: 100vw !important;    
}

[id="base-container"] div,
[id="base-container"] main {
    max-width: 100vw !important;    
}

[data-testid="scroll-container"] > div > div {
    flex-direction: row !important;
}

[data-testid="scroll-container"] header {
    min-width: 50vw;    
}

[data-timeline*="posts"] > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
    "a a b a"
    ". d d b"
    "c e e c";”
}

@-webkit-keyframes livrespairs-0 {
    0% {
      opacity: 0.35;
      transform: translate3d(-10px, 0, -5px);
    }
    100% {
      opacity: 0.85;
      transform: translate3d(0, -5px, -5px);
    }
}

@-webkit-keyframes livrespairs-1 {
    0% {
      opacity: 0.35;
      transform: translate3d(-10px, 0, -5px);
    }
    100% {
      opacity: 0.85;
      transform: translate3d(0, -5px, -5px);
    }
}


@-webkit-keyframes livrespairs-2 {
    0% {
      opacity: 0.35;
      transform: translate3d(-10px, 0, -5px);
    }
    100% {
      opacity: 0.85;
      transform: translate3d(0, -5px, -5px);
    }
}



@-webkit-keyframes livrespairs-3 {
    0% {
      opacity: 0.35;
      transform: translate3d(-10px, 0, -5px);
    }
    100% {
      opacity: 0.85;
      transform: translate3d(0, -5px, -5px);
    }
}


@-webkit-keyframes livrespairs-4 {
    0% {
      opacity: 0.35;
      transform: translate3d(-10px, 0, -5px);
    }
    100% {
      opacity: 0.85;
      transform: translate3d(0, -5px, -5px);
    }
}

@-webkit-keyframes livrespairs-5 {
    0% {
      opacity: 0.35;
      transform: translate3d(-10px, 0, -5px);
    }
    100% {
      opacity: 0.85;
      transform: translate3d(0, -5px, -5px);
    }
}


[data-timeline*="posts"] > *:nth-child(1):hover {
    grid-area: a;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs-0;
    animation-duration: 2s;
}


[data-timeline*="posts"] > *:nth-child(1):hover {
    grid-area: a;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs-1;
    animation-duration: 2s;
}


[data-timeline*="posts"] > *:nth-child(1):hover {
    grid-area: b;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs-2;
    animation-duration: 2s;
}


[data-timeline*="posts"] > *:nth-child(1):hover {
    grid-area: c;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs-3;
    animation-duration: 2s;
}


[data-timeline*="posts"] > *:nth-child(1):hover {
    grid-area: d;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs-4;
    animation-duration: 2s;
}


[data-timeline*="posts"] > *:nth-child(1):hover {
    grid-area: e;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs-5;
    animation-duration: 2s;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2),
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2),
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2),
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2),
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2),
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { 
    width: 100%;
    position: absolute;
    left: 6.5vw !important;
    height: 100% !important;
    
    display: flex;
    flex-direction: row;
    flex-wrap: inherit;
    gap: 4vw;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
}

/* @description constrain each post */
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div {
    width: calc(50% - 20px) !important;
    padding: 10px !important;
}

/* @description sets 'em to a circle with visible overflow to see the content */
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) *,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) *,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) *,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) *,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) *,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) * {
    border-top-right-radius: 1000vw !important;
    border-top-left-radius: 1000vw !important;
    overflow: visible !important;
    z-index: 1 !important;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) p:hover,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) p:hover,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) p:hover,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) p:hover,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) p:hover,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) p:hover {
    z-index: 100000 !important;
    position: relative !important;
}
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) [aria-label="Image"],
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) [aria-label="Image"],
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) [aria-label="Image"],
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) [aria-label="Image"],
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) [aria-label="Image"],
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) [aria-label="Image"] {
    /*
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    z-index: -1;
    */
    margin-top: -5.375vw;
    animation: ease-in;
    animation-name: fadein;
    animation-duration: 2s;
}

/*
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div *
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div *,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div *,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div *,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div *,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div * {
    border-bottom: 10vh groove rgba(40, 20, 180, 0.5) !important;
    opacity: 1 !important;
    animation: ease-in-out infinite alternate !important;
    animation-name: revhoverbit !important;
    animation-duration: 2s !important;
    z-index: 9999 !important;
*/

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:after,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:after {
    /*border-bottom: 10vh groove rgba(40, 20, 180, 0.5) !important;*/
    opacity: 1 !important;
    animation: ease-in-out infinite alternate !important;
    animation-name: revhoverbit !important;
    animation-duration: 2s !important;
    z-index: 9999 !important;
    width: 100%;
}

/* @description dungeon mode. */
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div {
    /* only animate the first few */
}

/**
 * @description fade animation setup. uncomment below.
 */

/*
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(2),
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(2),
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(2),
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(2),
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(2),
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(2) {
    animation: ease-in-out infinite alternate;
    animation-name: fade;
    animation-duration: 12s;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(1),
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(1),
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(1),
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(1),
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(1),
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(1) {
    animation: ease-in-out infinite alternate;
    animation-name: fade;
    animation-duration: 12s;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(3),
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(3),
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(3),
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(3),
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(3),
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(3) {
    animation: ease-in-out infinite alternate;
    animation-name: fade;
    animation-duration: 12s;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(4),
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(4),
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(4),
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(4),
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(4),
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(4) {
    animation: ease-in-out infinite alternate;
    animation-name: fade;
    animation-duration: 12s;
}

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(5),
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(5),
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(5),
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(5),
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(5),
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(5) {
    animation: ease-in-out infinite alternate;
    animation-name: fade;
    animation-duration: 12s;
}
*/

div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div > *:last-child > *:after,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div > *:last-child > *:after,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div > *:last-child > *:after,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div > *:last-child > *:after,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div > *:last-child > *:after,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div > *:last-child > *:after {
    display: block;
    content: '⏣ \
      ⎔ \
      ⌬ \
      ⏣ \
      ⎔ \
      ⌬ \
      ⏣ \
      ⎔ \
      ⌬ \
      ⏣ \
      ⎔ \
      ⌬ \
      ⏣ \
      ⎔ \
      ⌬';
    width: 10vw;
    height: 10vw;
    position: absolute;
    left: 0;
    bottom: -20vh;
    z-index: 9999 !important;
    color: rgba(250, 200, 250, 0.15);
}
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div > *:last-child:hover > *:after,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div > *:last-child:hover > *:after,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div > *:last-child:hover > *:after,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div > *:last-child:hover > *:after,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div > *:last-child:hover > *:after,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div > *:last-child:hover > *:after {
    color: rgba(250, 200, 250, 0.75);
}

div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div {
    background: linear-gradient(135deg, #171717 25%, transparent 25%) -62px 0/ 124px 124px, linear-gradient(225deg, rgba(23,23,23,0.5) 25%, transparent 25%) -62px 0/ 124px 124px, linear-gradient(315deg, #171717 25%, transparent 25%) 0 0/ 124px 124px, linear-gradient(45deg, rgba(23,23,23,0.5) 25%, #030303 25%) 0 0/ 124px 124px;
    background-color: #030303;
}

div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div {
    position: relative;
}

/* @todo */
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) *:hover *:after,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) *:hover *:after,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) *:hover *:after,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) *:hover *:after,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) *:hover *:after,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) *:hover *:after {
    opacity: 1;
}

/* @description removes header bg for each poster */
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) header,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) header,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) header,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) header,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) header,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) header {
    background: none !important;   
}

/* @description door animation */
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:hover,
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:hover {
  animation: ease-in-out infinite alternate;
  animation-name: hoverbit;
  animation-duration: 2s;
  z-index: 9999 !important;
}

/* @description move the generic interface elements around for less doomfalling */
button[aria-label="Next"] {
    position: absolute !important;
    z-index: 9999 !important;
    right: 1vw !important;
    top: 5vw !important;    
}

button[aria-label="Next"]:hover {
    filter: invert(100%) !important;
}

button[aria-label="Next"] > *,
button[aria-label="Next"] > * {
    cursor: help; /* fallback if grab cursor is unsupported */
    cursor: help;
    cursor: -moz-help;
    cursor: -webkit-help;
}
button[aria-label="Next"] > *:after {
    content: '🔮';
    display: inline-block;
    position: absolute;
    left: 1vw;
    top: 0vw;
    font-size: 12vw;
    line-height: 0;
    z-index: -1;
    color: rgba(0, 0, 0, 1);
    animation: ease-in-out;
    animation-name: fade;
    animation-duration: 2s;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
button[aria-label="Next"] > *:active:after {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    outline: 3px dashed gold !important;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
    filter: drop-shadow(0 0 0.75rem crimson);
    /*mix-blend-mode: luminosity;*/
}

button[aria-label="Next"]:after {
    content: '⎘';
    display: inline-block;
    position: absolute;
    left: 1vw;
    top: 0vw;
    line-height: 0;
    z-index: -1;
    color: rgba(0, 0, 0, 0.2);
    font-size: 12vw;
    text-shadow: 0 0 0.1rem rgba(20, 200, 255, 0.75), 0 0 0.1rem rgba(255, 255, 255, 1);
}
button[aria-label="Next"]:hover:after {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1);
    animation: ease-in-out infinite alternate;
    animation-name: hoverbit2;
    animation-duration: 2s;
}

button[aria-label="Prev"],
button[aria-label="Previous"] {
    position: absolute !important;
    z-index: 9999 !important;
    left: 1vw !important;
    top: 5vw !important;
}

button[aria-label="Prev"]:hover,
button[aria-label="Previous"]:hover {
    filter: invert(100%) !important;
}
button[aria-label="Previous"] > *,
button[aria-label="Previous"] > * {
    cursor: help; /* fallback if grab cursor is unsupported */
    cursor: help;
    cursor: -moz-help;
    cursor: -webkit-help;
}
/* @description previous door */
button[aria-label="Previous"] > *:after {
    content: '🚪';
    display: inline-block;
    position: absolute;
    left: 1vw;
    top: 0vw;
    line-height: 0;
    z-index: -1;
    color: rgba(0, 0, 0, 1);
    font-size: 12vw;
    animation: ease-in-out;
    animation-name: fade;
    animation-duration: 2s;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
button[aria-label="Previous"] > *:active:after {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    outline: 3px dashed gold !important;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
    filter: drop-shadow(0 -6mm 4mm rgb(210, 0, 160));
}

button[aria-label="Prev"]:after,
button[aria-label="Previous"]:after {
    content: '⎌';
    display: inline-block;
    position: absolute;
    left: 1vw;
    top: 0vw;
    line-height: 0;
    z-index: -1;
    color: rgba(0, 0, 0, 0.2);
    font-size: 12vw;
    text-shadow: 0 0 0.1rem rgba(200, 20, 255, 0.75), 0 0 0.1rem rgba(255, 255, 255, 1);
}
button[aria-label="Prev"]:hover:after,
button[aria-label="Previous"]:hover:after {
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1);
    animation: ease-in-out infinite alternate;
    animation-name: hoverbit2;
    animation-duration: 2s;
}

/* @description intent-revealing eventual interactivity */
article > header + div > div > div > span > div > div > * {
    opacity: 0.5 !important;
    overflow: visible !important;
}

article > header + div > div > div > span > div > div *:focus,
article > header + div > div > div > span > div > div *:active,
article > header + div > div > div > span > div > div > *:hover {
    opacity: 1 !important;
    /*cursor: url(https://black-mode.surge.sh/hiking_4899543.png) auto auto !important;*/
    cursor: pointer !important;
    overflow: visible !important;
}

/* @todo find element with overflow of the containing post and 
 * set to visible since the flashlight appears outside its box model
 * @description added a flashlight graphic on hover of a post */
article > header + div > div > div > span > div > div > *:hover:after {
    background-image: url(https://black-mode.surge.sh/flashlight.png) !important;
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    content: ' ';
    width: 10vw;
    height: 10vw;
    position: absolute;
    filter: invert(100%);
    right: -2vw;
    margin-top: -3vw;
    opacity: 0.7;
    z-index: 9999 !important;
    overflow: visible !important;
    animation: ease-in-out infinite alternate;
    animation-name: hoverbit;
    animation-duration: 2s;
}

/* @description note count fixes */
span[data-testid="noteCountTotal"] {
    width: 7.5vw;
    position: absolute;
    left: -3.5vw;   
    z-index: 100000 !important;
    background: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    filter: blur(1px);
    border: 1px solid rgba(255,255,255,0.25);
}

/* @todo */
[data-testid="noteCountTotal"] *:hover *:after {
    opacity: 1;
    z-index: 100000 !important;
}

/* @description note count styles */
span[data-testid="noteCountTotal"]:hover {
    color: #1F41DD;
    outline: 3px dotted rgba(0, 0, 0, 0.25);
    animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    filter: blur(0);
}

span[data-testid="noteCountTotal"] {
	color: rgba(0, 0, 0, 0.25);
	display: block;
    background-image: repeating-conic-gradient(#333 0% 25%, #111 0% 50%);
    background-position: 0 0, 5px 10vw;
    background-size: 118px 118px;
    background-color: #111;
    
    border-left: 3px dotted rgba(0, 0, 0, 0.25);
    padding: 1rem;
	border-bottom: 3px double rgba(0, 0, 0, 0.25);
	outline: 3px dotted rgba(0, 0, 0, 1);
}
span[data-testid="noteCountTotal"]:before {
    content: ' ';
    width: 2vw;
    height: 2vw;
    display: inline-block;
    position: absolute;
    background-image: url(https://black-mode.surge.sh/OFF2-F.GIF);
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: color-dodge !important;
    mix-blend-mode: luminosity !important;   
    background-position: 0 0;
    left: -1.05vw;
    z-index: -1;
    transform: scale(2);
    opacity: 0.2;
    animation: ease-out infinite alternate;
    animation-name: fade;
    animation-duration: 6s;
    transform: scale(0.85);
}
span[data-testid="noteCountTotal"]:after {
    content: ' ';
    width: 2vw;
    height: 2vw;
    display: inline-block;
    position: absolute;
    background-image: url(https://black-mode.surge.sh/NEON-HLP.GIF);
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: color-dodge !important;
    mix-blend-mode: luminosity !important;   
    background-position: 0 0;
    right: -1vw;
    bottom: 0;
    z-index: -1;
    transform: scale(2);
    opacity: 0.2;
    animation: ease-in infinite alternate;
    animation-name: fade;
    animation-duration: 10s;
    transform: scale(0.75);
}

@keyframes glitch-color {
   0% {
      transform: translate(0);
   }

   20% {
      transform: translate(-2px, 2px);
   }

   40% {
      transform: translate(-2px, -2px);
   }

   60% {
      transform: translate(2px, 2px);
   }

   80% {
      transform: translate(2px, -2px);
   }

   to {
      transform: translate(0);
   }
}

/* @description ??? */

[role="progressbar"] {
    display: none !important;
}

/* @description fixing the position of the aside "radar" and admin tasks for eventual 
 * interactivity (hovering raises z-index to enable interaction).
 */
aside:has([aria-label="Check out these blogs"]) {  
    position: fixed;
    height: 50%;
    overflow-y: scroll;
    outline: 1px solid golid !important;
    width: 35vw !important;
    right: 0 !important;
    top: 1vw !important;
}

aside:hover {
    z-index: 10051 !important;  
}
aside article {
    left: 10% !important;   
}
aside aside {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.4);
    top: 55%;
    height: 45%;
    width: 100%;
    overflow-y: scroll;
}

/* ## utils */
@-webkit-keyframes revhoverbit {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        transform: translate3d(0px, 5px, 0px);
    }
}

@-webkit-keyframes hoverbit {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-5%);
    }
}

@-webkit-keyframes hoverbit2 {
    0% {
      top: 0vw;
    }
    100% {
      top: -1vw;
    }
}

@-webkit-keyframes fade {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

@-webkit-keyframes fadein {
    0% {
      opacity: 0.8;
    }
    100% {
      opacity: 1;
    }
}

@-webkit-keyframes livrespairs {
    0% {
      opacity: 0.35;
      transform: translate3d(-10px, 0, -5px);
    }
    100% {
      opacity: 0.85;
      transform: translate3d(0, -5px, -5px);
    }
}

@-webkit-keyframes upup {
    0% {
      /*
      opacity: 0.85;
      transform: translate3d(15px, 0, 0);*/
      filter: invert(0);
    }
    100% {
      filter: invert(100%);
      /*
      opacity: 1;
      transform: translate3d(0, 5px, 5px);*/
    }
}

@-webkit-keyframes rotate {
    0% {
      opacity: 0.85;
      transform: translate3d(15px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 5px, 5px);
    }
}

/* @description hiding and hacking up the "check out these blogs" callout so that it only 
 * shows three without the arrows. i'll find a solution later. */
[data-timeline] [style*="opacity: 0."] {
    display: none !important;
}

[aria-label="Scroll carousel left"],
[aria-label="Scroll carousel right"] {
    display: none !important;
}

[style="opacity: 1;"] * {
   background: none !important;   
}

[style="opacity: 1;"] > * > * {
   background: none !important;
}

[style="opacity: 1;"] > * {
    background: none !important;
    margin-right: 4vw !important;
}
/*
[style="opacity: 1;"] {
    float: left;
    clear: left;
}
[style="opacity: 1;"]:nth-child(1) > * {
    position: absolute;
    left: 0;
    margin-top: 4rem;
}*/

[data-testid="tag-link"] {
}

[href="/blog/holoentropic/activity"] {
    overflow: visible;   
    padding-left: 2vw;
}
[href="/blog/holoentropic/activity"]:before {
    content: '✖';
    position: absolute;
    margin-left: -2vw;
}

[href="/blog/holoentropic/drafts"] {
    overflow: visible;   
    padding-left: 2vw;
}
[href="/blog/holoentropic/drafts"]:before {
    content: '📒';
    position: absolute;
    margin-left: -2vw;
}

[href="/blog/holoentropic/queue"] {
    overflow: visible;   
    padding-left: 2vw;
}
[href="/blog/holoentropic/queue"]:before {
    content: '⏲';
    position: absolute;
    margin-left: -2vw;
}

[href="/blog/holoentropic/blaze"] {
    overflow: visible;   
    padding-left: 2vw;
}
[href="/blog/holoentropic/blaze"]:before {
    content: '🎟';
    position: absolute;
    margin-left: -2vw;
}

[href="/blog/holoentropic/gifts"] {
    overflow: visible;   
    padding-left: 2vw;
}
[href="/blog/holoentropic/gifts"]:before {
    content: '📦';
    position: absolute;
    margin-left: -2vw;
}

[href="/mega-editor/published/holoentropic"] {
    overflow: visible;   
    padding-left: 2vw;
}
[href="/mega-editor/published/holoentropic"]:before {
    content: '✍🏽';
    position: absolute;
    margin-left: -2vw;
}

[href="/settings/blog/holoentropic"] {
    overflow: visible;   
    padding-left: 2vw;
}
[href="/settings/blog/holoentropic"]:before {
    content: '🏭';
    position: absolute;
    margin-left: -2vw;
}


[href="/blog/holoentropic"] {
    overflow: visible;   
    padding-left: 2vw;
}
[href="/blog/holoentropic"]:before {
    content: '⎈';
    position: absolute;
    margin-left: -2vw;
}

[href="/blog/holoentropic/followers"] {
    overflow: visible;   
    padding-left: 2vw;
}
[href="/blog/holoentropic/followers"]:before {
    content: '👾';
    position: absolute;
    margin-left: -2vw;
}

/* @description default bg */
body[class*="palette--"]:not([class*="cybernetic"]):after {
    content: ' ';
    width: calc(100% * 4);
    height: calc(100% * 4);
    display: block;
    background-image: url(https://black-mode.surge.sh/FNRQmaOXIAcvhVy.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    position: absolute;
    top: -50%;
}

/* @description other bgs */
body[class*="palette--lowContrastClassic"]:after {
    background-image: url(https://black-mode.surge.sh/trainz.jpg);
    background-repeat: repeat;
    background-size: cover !important;
}

body[class*="palette--ghost"]:after {
    background-image: none !important;
}

body[class*="palette--ghost"] {
    background-image: url(https://black-mode.surge.sh/FXriMcyVUAAnrsu.png);
    background-repeat: repeat !important;
    background-size: cover !important;
}

body[class*="palette--dark"]:after {
    background-image: url(https://black-mode.surge.sh/FXriMcyVUAAnrsu.png);
    background-repeat: no-repeat;
    background-size: contain !important;
}

body[class*="palette--cement"] {
    background-image: none !important;
}

body[class*="palette--canary"]:after {
    background-image: none !important;
}

body[class*="palette--cement"]:after {
    background-image: url(https://black-mode.surge.sh/Fb6hNw7WAAYp4h6.jpg) !important;
    background-size: cover !important;
    background-repeat: no-repeat;
    width: calc(100% * 4);
    height: calc(100% * 4);
}

body[class*="palette--canary"]:after {
    background-image: url(https://black-mode.surge.sh/Fb6hNw7WAAYp4h6.jpg) !important;
    background-size: contain !important;
    background-repeat: repeat;
    width: calc(100% * 4);
    height: calc(100% * 4);
}

body[class*="palette--true"]:after,
body[class*="palette--true"]:after {
    background-image: none !important;
}
body[class*="palette--true"],
body[class*="palette--true"] {
    background-image: url(https://black-mode.surge.sh/abalakin_-_return.jpg);
    background-repeat: no-repeat !important;
    background-size: 450% !important;
}

body[class*="palette--snow"]:after,
body[class*="palette--snow"]:after {
    background-image: none !important;
}
body[class*="palette--snow"],
body[class*="palette--snow"] {
    background-image: url(https://black-mode.surge.sh/Untitled.png);
    background-size: cover !important;
}

body[class*="palette--cybernetic"] {
    overflow: visible;
}

html {
    background-color: transparent !important;
}

/*
 * @description background-blend-mode means nothing here.
 */
*:has([class*="palette--cybernetic"]),
body:has([class*="palette--cybernetic"]) {
    background-color: transparent !important;
}

body[class*="palette--cybernetic"] * {
    background-color: transparent !important;
}

body[class*="palette--cybernetic"]:before {

    background-color: transparent !important;
    /*background-image: url(https://black-mode.surge.sh/fc5f1febeb2f5f83.png) !important;*/
    background-image: url(https://black-mode.surge.sh/tumblr_1b8cd67f6a9542cb27360bab5a34318e_4bc87e44_1280.jpg) !important;

    background-repeat: no-repeat;
    background-size: contain !important;
    /*mix-blend-mode: pulse-lighter;*/
    
    /* light */
    
    /*
    mix-blend-mode: lighten;
    mix-blend-mode: exclusion;
    mix-blend-mode: pulse-lighter;
    */
    
    /*
    mix-blend-mode: difference;
    */
    display: block;
    content: ' ';
    background-size: 100% !important;
    width: 100%;
    height: 100%;
    bottom: 0;
    position: fixed;
}

body[class*="palette--vampire"]:after {
    background-image: url(https://black-mode.surge.sh/FN0uhzeUcAEE5eL.jpg);
    background-image: url(https://black-mode.surge.sh/97b6c51ddf48c0d0.png) !important;
    background-repeat: repeat;
    background-size: contain !important;
    width: calc(100% * 3.25);
    height: calc(100% * 3.25);
}

html,
body[class*="palette--vampire"] {
}

/* @description weird stuff happening */
* a:hover:before,
* a:visited:before,
* a:active:before,
* a:focus:before {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: ' ';
    outline: 3px dashed gold;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
}
* a:hover:after,
* a:visited:after,
* a:active:after,
* a:focus:after {
   outline: 25px dotted rgba(200, 20, 140, 0.25) !important; 
}

/* @description clicking and dragging off an element for no reason is good and 
 * fine. now you've got a floating orb matrix
 **/
* a:hover:after,
* a:visited:after,
* a:active:after,
* a:focus:after {
    content: ' ';
    z-index: 10000 !important;
    display: inline-block;
    position: absolute;
    width: 5vw;
    height: 5vw;
    animation: ease-in-out infinite alternate;
    animation-name: rotate;
    animation-duration: 2s;
}

::selection {
   color: rgba(255, 255, 255, 1.0);
   background-color: rgba(0, 150, 255, 1);
}

/* @description fixing the adspace visual layout */
div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div {
    display: flex;
    flex-direction: column;
    text-align: center;
}

div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div > * {
    width: 100% !important;
}

div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div > div {
    /*margin-left: 2.5vw;*/
}

div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div [style="opacity: 1;"] > div {
    width: 100%;
}

div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div [style="opacity: 1;"] {
    /*outline: 2px solid gold;*/
    /*margin-right: 2vw;*/
}

div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] div [style="opacity: 1;"] [style*="blog-title"] * {
    /*outline: 10px solid pink;*/
}

/* @description different doors */
[data-id*="19"] { background: repeating-linear-gradient(transparent, transparent 8px, #957541 8px, #957541 12px, transparent 12px, transparent 16px, #957541 12px, #957541 32px, transparent 32px, transparent 36px, #957541 36px, #957541 40px, transparent 40px, transparent 64px), repeating-linear-gradient(90deg, transparent, transparent 8px, #957541 8px, #957541 12px, transparent 12px, transparent 16px, #957541 12px, #957541 32px, transparent 32px, transparent 36px, #957541 36px, #957541 40px, transparent 40px, transparent 64px), #1e2c12 !important;
background-blend-mode: multiply  !important;
background-color: #1e2c12 !important; }

[data-id*="28"] { background-image: radial-gradient(circle at center center, #f5bf13, #5d5a7e), repeating-radial-gradient(circle at center center, #f5bf13, #f5bf13, 32px, transparent 64px, transparent 32px) !important;;
background-blend-mode: multiply !important;;
background-color: #5d5a7e !important; }

[data-id*="28"] { background: radial-gradient(circle, transparent 20%, #fecb2f 20%, #fecb2f 80%, transparent 80%, transparent) 0% 0% / 74px 74px, radial-gradient(circle, transparent 20%, #fecb2f 20%, #fecb2f 80%, transparent 80%, transparent) 37px 37px / 74px 74px, linear-gradient(#ed8a12 8.5px, transparent 8.5px) 0px -4.25px / 37px 37px, linear-gradient(90deg, #ed8a12 8.5px, #fecb2f 8.5px) -4.25px 0px / 37px 37px #fecb2f;
    background-color: #fecb2f; }

[data-id*="37"] { background-image: repeating-conic-gradient(from 30deg, #745686 0% 60deg, #0829c2 0% 120deg) !important;
background-size: 32px 55px !important;
background-color: #0829c2 !important; }

[data-id*="46"] { background-image:  repeating-radial-gradient(circle at 0 0, transparent 0, #0956ed 32px), repeating-linear-gradient(#466c63, #466c63) !important;
background-color: #0956ed !important; }

[data-id*="55"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, #9f93e3 32px, #9f93e3 64px) !important;
background-color: #a359a1 !important; }

[data-id*="64"] { background-image: linear-gradient(#e2f1b0 2px, transparent 2px), linear-gradient(to right, #e2f1b0 2px, transparent 2px) !important;
background-size: 32px 32px !important;
background-color: #672119 !important; }

[data-id*="73"] { background-image:  linear-gradient(30deg, #ea7db9 12%, transparent 12.5%, transparent 87%, #ea7db9 87.5%, #ea7db9), linear-gradient(150deg, #ea7db9 12%, transparent 12.5%, transparent 87%, #ea7db9 87.5%, #ea7db9), linear-gradient(30deg, #ea7db9 12%, transparent 12.5%, transparent 87%, #ea7db9 87.5%, #ea7db9), linear-gradient(150deg, #ea7db9 12%, transparent 12.5%, transparent 87%, #ea7db9 87.5%, #ea7db9), linear-gradient(60deg, rgba(234,125,185,0.5) 25%, transparent 25.5%, transparent 75%, rgba(234,125,185,0.5) 75%, rgba(234,125,185,0.5)), linear-gradient(60deg, rgba(234,125,185,0.5) 25%, transparent 25.5%, transparent 75%, rgba(234,125,185,0.5) 75%, rgba(234,125,185,0.5)) !important;
background-size: 64px 112px !important;
background-position: 0 0, 0 0, 32px 56px, 32px 56px, 0 0, 32px 56px !important;
background-color: #1c0b9c !important; }

[data-id*="82"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, #9f93e3 32px, #9f93e3 64px) !important;
background-color: #a359a1 !important; }

[data-id*="91"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, #9f93e3 32px, #9f93e3 64px) !important;
background-color: #a359a1 !important; }

[data-id*="71"] { background: repeating-radial-gradient(circle, transparent, transparent 11.2px, #575b9c 11.2px, #575b9c 14.4px), repeating-radial-gradient(circle, transparent, transparent 11.2px, #032ec3 11.2px, #032ec3 14.4px), #7f9761 !important;
background-size: 64px 64px !important;
background-position: 0 0, 32px 32px, 64px 32px !important;
background-color: #7f9761 !important; }

[data-id*="82"] { background: repeating-radial-gradient(circle, transparent, transparent 11.2px, #575b9c 11.2px, #575b9c 14.4px), repeating-radial-gradient(circle, transparent, transparent 11.2px, #032ec3 11.2px, #032ec3 14.4px), #7f9761 !important;
background-size: 64px 64px !important;
background-position: 0 0, 32px 32px, 64px 32px !important;
background-color: #7f9761 !important; }

/* @description ORANGE */
[data-id*="564"],
[data-id*="922"],
[data-id*="991"],
[data-id*="672"],
[data-id*="969"],
[data-id*="931"],
[data-id*="448"],
[data-id*="701"],
[data-id*="991"],
[data-id*="992"],
[data-id*="993"],
[data-id*="994"],
[data-id*="995"],
[data-id*="996"],
[data-id*="997"],
[data-id*="998"] { background: radial-gradient(circle, transparent 20%, #fecb2f 20%, #fecb2f 80%, transparent 80%, transparent) 0% 0% / 74px 74px, radial-gradient(circle, transparent 20%, #fecb2f 20%, #fecb2f 80%, transparent 80%, transparent) 37px 37px / 74px 74px, linear-gradient(#ed8a12 8.5px, transparent 8.5px) 0px -4.25px / 37px 37px, linear-gradient(90deg, #ed8a12 8.5px, #fecb2f 8.5px) -4.25px 0px / 37px 37px #fecb2f !important;
    background-color: #fecb2f !important; }

/* @description moar reset */

/* @todo obviously */
div[style*="title"] * {
    background-color: none !important;      
}
div[style*="title"] > * > * {
    background-color: none !important;      
}
div[style*="title"] > * > * > * {
    background-color: none !important;      
}
div[style*="background"] * {
    background-color: none !important;      
}
div[style*="background"] > * > * {
    background-color: none !important;      
}
div[style*="background"] > * > * > * {
    background-color: none !important;      
}

* > * * {
    /*background-color: none !important; */     
}

[class*="chiclet-wrapper"] {
    padding-bottom: 2vw !important;      
}
[data-testid="tag-link"] > * {
    padding-bottom: 4vw !important;   
    margin-bottom: 2vw !important;   
}
[data-testid="tag-link"]:before,
[data-testid="tag-link"]:after {
    /*
    border-top-right-radius: 1000vw !important;
    border-top-left-radius: 1000vw !important;
    border-bottom-right-radius: 1000vw !important;
    border-bottom-left-radius: 1000vw !important;
    */
}

[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div div {
    /*display: flex;*/
}

[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div *:after,
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div *:before,
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div * {
    /*outline: 3px solid gold;*/
    /*opacity: 0.8;*/
}
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div *:after,
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div *:before,
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div * {
    /*opacity: 1;*/
}

/*
button figure:before {
    display: block;
    width: 100%;
    height: 3vw;
    position: absolute;
    z-index: 999;
    content: ' ';
    outline: 1px solid gold;
}

button figure:before {
    outline: 1px solid green !important;
}

button figure:before {
    outline: 1px solid red !important;
}*/

figure:active,
figure:focus,
figure:visited,
figure:hover {
    overflow: hidden !important;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}

[sizes*="100vw,"] {
    /*background-color: none !important;*/
}
[sizes*="100vw,"]:first-child {
}
[sizes*="100vw,"]:last-child {
}

/* @descriptions ads???*/
[style*="blog-title"] {
    left: 3vw;
}
[style*="blog-title"] > *:first-child * {
    background-color: transparent !important;   
}

body {
    image-rendering: auto !important;
}

[data-timeline]:not([data-timeline="/v2/timeline?which=crushes"]):not([data-timeline="/v2/timeline?which=popular_reblogs"]):not([data-timeline*="/v2/hubs"]):not([data-timeline="/v2/explore/recommended"]) div div div,
[data-timeline]:not([data-timeline="/v2/timeline?which=crushes"]):not([data-timeline="/v2/timeline?which=popular_reblogs"]):not([data-timeline*="/v2/hubs"]):not([data-timeline="/v2/explore/recommended"]) div div div div {
    border-bottom-right-radius: 1000vw !important;
    border-bottom-left-radius: 1000vw !important; 
}


/* EOF */

wide--disable-tumblr-color-palette-bg.css

#base-container > div {
    background: transparent !important;   
}

/*
--underlo: 7px;
*/
/** testing iMacros in combination with Stylish */

#base-container>DIV:nth-of-type(2)>DIV:nth-of-type(2)>DIV>MAIN>DIV:nth-of-type(2)>DIV:nth-of-type(2)>DIV:nth-of-type(18)>DIV>DIV>ARTICLE>DIV:nth-of-type(3)>FOOTER>DIV {
     outline: 10px dashed gold;
}

[data-timeline*="/v2/timeline/"] > div > div:not([id]) {
    outline: 3px groove rgba(255, 255, 255, 0.1);
    box-shadow: 10px 10px 1rem rgba(255, 255, 255, 0.1);
    min-width: 30vw;
}
/*
article [title="4 notes"]:after {
    content: '⌍';
    display: inline-block;
    position: absolute;
    width: 2vw;
    height: 2vw;
    left: auto;
    top: auto;
    
	padding-bottom: 1.5vw;

    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
}
article [data-testid="noteCountTotal"]:after:after {
    content: '⌍';
    display: inline-block;
    position: absolute;
    width: 2vw;
    height: 2vw;
    left: auto;
    top: auto;
    content: '⌍';
    display: inline-block;
    position: absolute;
    width: 2vw;
    height: 2vw;
    left: auto;
    top: auto;
	padding-bottom: 1.5vw;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
}
article [aria-label="Notes"]:after {
    content: '⌍';
    display: inline-block;
    position: absolute;
    width: 2vw;
    height: 2vw;
    left: auto;
    top: auto;
    padding-bottom: 1.5vw;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
}
article [data-testid="controlled-popover-wrapper"]:after {
    content: '⌍';
    display: inline-block;
    position: absolute;
    width: 2vw;
    height: 2vw;
    left: auto;
    top: auto;
    padding-bottom: 1.5vw;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
}
article [aria-label="Post Footer"]:after {
    content: '⌍';
    display: inline-block;
    position: absolute;
    width: 2vw;
    height: 2vw;
    left: auto;
    top: auto;
    padding-bottom: 1.5vw;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
}
article [role="contentinfo"]:after {
    content: '⌍';
    display: inline-block;
    position: absolute;
    width: 2vw;
    height: 2vw;
    left: auto;
    top: auto;
    padding-bottom: 1.5vw;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
}

article [role*="Posted by"]:after {
    content: '⌍';
    display: inline-block;
    position: absolute;
    width: 2vw;
    height: 2vw;
    left: auto;
    top: auto;
    padding-bottom: 1.5vw;
    animation: ease-in-out infinite alternate;
    animation-name: livrespairs;
    animation-duration: 2s;
}
*/
@-webkit-keyframes livrespairs {
    0% {
      opacity: 0.35;
      transform: translate3d(-10px, 0, -5px);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, -5px, -5px);
    }
}

yeah-zone.css

button[aria-label="Prev"] > *:after,
button[aria-label="Previous"] > *:after,
button[aria-label="Next"] > *:after {
  outline: 3px solid gold;
  animation: ease-in-out infinite alternate;
  animation-name: rev;
  animation-duration: 4s;
}

/* ## utils */
@-webkit-keyframes rev {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        transform: translate3d(0px, 2vw, 0px);
    }
}

if something is amiss, comments and questions are invited. otherwise, tumble on

updated --self to raise "next" and "previous" by any [stylesheet], [hyperlink], [type], or [aria] common features. so expect:

[class="next"],
[class="previous"],
[class="prev"],
[href*="next"],
[href*="previous"],
[href*="prev"],
[rel="next"],
[rel="prev"],
[rel="previous"],
*[aria-label="Next"],
*[aria-label="Previous"],
*[aria-label="Prev"] { /* ... */ }