From 78e5a2b5fa6ff64ea9ae5b44bf57eb471a0a5cc3 Mon Sep 17 00:00:00 2001 From: Devishi Ranjan Date: Thu, 14 Nov 2024 09:52:30 -0500 Subject: [PATCH] T14: Improve transition/sizing for lightbox images --- theme14/theme14.css | 17 ++++++++--------- theme14/theme14.min.css | 2 +- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/theme14/theme14.css b/theme14/theme14.css index aa31162a..db669377 100644 --- a/theme14/theme14.css +++ b/theme14/theme14.css @@ -155,6 +155,7 @@ button[disabled] { cursor: initial } } } } +img.lightboxable { cursor: pointer } #lightbox { border: none; background: none; @@ -185,6 +186,11 @@ button[disabled] { cursor: initial } cursor: pointer; box-shadow: 0 0 1em var(--black); display: block; + max-width: calc(100vw - 10em); + max-height: 90vh; + width: auto; + height: auto; + transition-property: none; &.left, &.right { position: fixed; @@ -199,18 +205,11 @@ button[disabled] { cursor: initial } } &.left { right: var(--positioning); - transition: right; + transition-property: right; } &.right { left: var(--positioning); - transition: left; - } - - &.center { - max-width: calc(100vw - 10em); - max-height: 90vh; - width: auto; - height: auto; + transition-property: left; } } } diff --git a/theme14/theme14.min.css b/theme14/theme14.min.css index ef26b064..ec1448b4 100644 --- a/theme14/theme14.min.css +++ b/theme14/theme14.min.css @@ -1 +1 @@ -:root{--ssjyp-blue:#0179f9;--white:#f2f3f3;--lightgray:#a5a6a7;--darkgray:#54595d;--darkgrayblue:#4a4d63;--darkestgray:#22272b;--black:#1b1517;--darkblue:#0d1a32;--darkblue-variant:#172039;--darkblue-hover:#363650;--darkblue-active:#5f5f6d;--mediumblue:#015e97;--mediumblue-darken:#063b5d;--lightblue:#38b4fe;--lightblue-lighten-1:#5fb1e0;--lightblue-lighten-2:#7bc3eb;--lightblue-darken:#286381;--red:#f54034;--darkred:#98110c;--green:#13dd67;--header-height:4em;--footer-height:8.5em}body{background-color:var(--ssjyp-blue);flex-direction:column;height:100vh;font-family:"Source Sans 3",sans-serif;display:flex}.visuallyhidden,#skip:not(:focus-within,:focus){font-size:1px;position:fixed;top:-100rem}#skip{position:absolute;top:.5em;left:50%;transform:translate(-50%)}.button-outline,.button-solid-blue,.button-solid-gray{color:var(--white);cursor:pointer;text-align:center;padding:.75em 1em;line-height:1;text-decoration:none}button[disabled]{cursor:initial}.button-outline{background-color:var(--mediumblue);border:.1875em solid var(--lightblue)}.button-outline:not([disabled]):active{background-color:var(--mediumblue-darken);border-color:var(--mediumblue)}.button-solid-blue{background-color:var(--lightblue);border:none}.button-solid-blue:not([disabled]):hover,.button-solid-blue:not([disabled]):focus{background-color:var(--lightblue-lighten-1)}.button-solid-blue:not([disabled]):active{background-color:var(--lightblue-lighten-2)}.button-solid-gray{background-color:var(--darkgray);cursor:initial;border:none}.bronze{color:#fe9500!important}.silver{color:#c8cde1!important}.gold{color:#fee822!important}.platinum{color:#5cedfd!important}.master{color:#df81ff!important}.modal{background-color:var(--darkblue);color:var(--white);--modal-border:.1em solid var(--darkgrayblue);border:none;width:80vw;padding:1em 1.25em}.modal::backdrop{background-color:var(--ssjyp-blue);background-image:var(--bg-img);background-size:cover;background-position:var(--bg-position,center)}.modal a:not([class*=button]){color:var(--lightblue);text-underline-offset:.2em}.modal a:not([class*=button]):not(:hover,:focus){text-decoration:none}.modal>header{border-block-end:var(--modal-border);--closebtn-size:4.5em;grid-template-columns:minmax(0,var(--closebtn-size))1fr var(--closebtn-size);align-items:center;padding-block:0 .25em;display:grid}.modal>header h2{text-align:center;grid-column:2;margin:0;font-size:2.9em;font-weight:400;line-height:1}.modal>header .closemodal{color:var(--white);cursor:pointer;background:0 0;border:none;grid-column:3}.modal>header .closemodal:hover,.modal>header .closemodal:focus{color:var(--lightgray)}.modal>header .closemodal:active{color:var(--darkgrayblue)}.modal>header .closemodal i{font-size:4em}.modal>footer{border-block-start:var(--modal-border);padding-block-start:1em}.modal>footer .closemodal{margin-inline:auto;padding:1em 9vw;font-size:1.6em;display:block}#lightbox{background:0 0;border:none;padding:0;overflow:visible}#lightbox::backdrop{background-color:rgb(from var(--darkblue)r g b/.9)}#lightbox .closemodal{color:var(--white);cursor:pointer;background:0 0;border:none;padding:0;position:fixed;top:min(1em,2.5vh);right:min(1em,2.5vw)}#lightbox .closemodal:hover,#lightbox .closemodal:focus{color:var(--lightgray)}#lightbox .closemodal:active{color:var(--darkgrayblue)}#lightbox .closemodal i{font-size:4em}#lightbox img{cursor:pointer;box-shadow:0 0 1em var(--black);display:block}#lightbox img.left,#lightbox img.right{--positioning:calc(100vw - 2em);position:fixed;top:50%;transform:translateY(-50%)}:is(#lightbox img.left,#lightbox img.right):hover{--positioning:calc(100vw - 3em);transition-duration:.2s}#lightbox img.left{right:var(--positioning);transition:right}#lightbox img.right{left:var(--positioning);transition:left}#lightbox img.center{width:auto;max-width:calc(100vw - 10em);height:auto;max-height:90vh}.tmblr-iframe--unified-controls{top:5em!important;right:1em!important}.tippy-box[data-theme~=ssrg]{background-color:var(--darkblue);color:var(--white);filter:drop-shadow(0 0 .25em rgb(from var(--white)r g b/.5))}.tippy-box[data-theme~=ssrg][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--darkblue)}.tippy-box[data-theme~=ssrg][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--darkblue)}.tippy-box[data-theme~=ssrg][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--darkblue)}.tippy-box[data-theme~=ssrg][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--darkblue)}#phead{height:var(--header-height);background-color:var(--darkblue);display:flex}.avatar{--size:3.25em;width:var(--size);height:var(--size);border:.15em solid var(--white);border-radius:100%}#userbadge{cursor:pointer;text-align:start;background:0 0;border:none;border-radius:0;flex-grow:1;align-items:center;gap:.6em;padding:0 1.3em;display:flex}#userbadge:hover,#userbadge:focus{background-color:var(--darkblue-hover)}#userbadge:active{background-color:var(--darkblue-active)}#userbadge .text{font-size:1.3em;line-height:1.2}#userbadge .text *{margin:0}#userbadge .username{color:var(--white);font-size:1.1em;font-weight:400}#userbadge .league{color:var(--lightgray)}#userprofile dd{margin-inline-start:0}#userprofile .profilesection{background-color:var(--darkestgray);--border:.1em solid rgb(from var(--white)r g b/.25);margin:1em}#userprofile #about{background-color:var(--accent)}#userprofile .cards{padding:.5em 1em;display:grid}#userprofile .cards p{margin:0}#userprofile .cards .card{color:rgb(from var(--white)r g b/.9);font-size:1.4em;position:relative}#profilename{grid-template-columns:auto 1fr;align-items:center;column-gap:.6em;padding-block:1em;display:grid}#profilename .avatar{grid-row:1/span 2}#profilestatus,#profilefavcard{grid-template-rows:auto 1fr;row-gap:.8em;padding-block:.75em;display:grid}:is(#profilestatus,#profilefavcard) .title{line-height:1}:is(#profilestatus,#profilefavcard) .text{color:var(--lightgray);font-size:.8em}#profilefavcard{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;align-items:center;padding-block:.5em;display:grid}#profilefavcard .title{padding-block-start:.25em}#profilefavcard .text{padding-block-end:.3125em}#profilefavcard img{object-fit:contain;grid-area:1/2/span 2;max-width:6em;max-height:4.35em}#profilebanner{object-fit:cover;object-position:var(--profile-banner-position);width:100vw;height:42.8571vw;display:block}#desc{min-height:30vh;padding:1em;font-size:1.4em}#desc .title{margin:0;line-height:1}#desc .text{color:var(--lightgray);font-size:.8em}#desc .text>*{margin-block:0}#desc .text>*+*{margin-block-start:.6em}.weeklytop5{padding:.5em;font-size:1.15em}.weeklytop5 h3{color:var(--lightblue);margin:0 0 .6em;font-size:1em;font-weight:400}.weeklytop5 a{text-decoration:none;display:block}.weeklytop5 a:hover,.weeklytop5 a:focus{background-color:rgb(from var(--darkgray)r g b/.5)}.weeklytop5 a:active{background-color:var(--darkgray)}.weeklytop5 a+a{border-block-start:var(--border)}.weeklytop5 a[href] figure:after{content:"";color:var(--lightgray);grid-area:1/3/span 2;font-size:1.8em;display:block;font-family:Phosphor!important}.weeklytop5 figure{grid-template-columns:auto 1fr auto;align-items:center;gap:0 .5em;margin:0;padding:.6em;display:grid}.weeklytop5 img,.weeklytop5 svg{color:var(--lightgray);--size:2.5em;width:var(--size);height:var(--size);border:.1em solid var(--darkgray);background-color:var(--darkgray);grid-row:1/span 2}.weeklytop5 figcaption{line-height:1;display:contents}.weeklytop5 .name{color:var(--white);grid-column:2;font-size:.9em}.weeklytop5 .score{grid-column:2}#resourcenav{background-color:var(--darkblue-variant);padding-block:.75em;display:flex}#resourcenav:is(.ask,.submit,.random,.archive):not(.empty){padding-inline:1.5em .6em}#resourcenav a{color:var(--white);background-color:var(--darkblue);justify-content:space-between;align-items:center;gap:.3em;min-width:9em;height:100%;padding:0 .6em;font-size:1.2em;text-decoration:none;display:inline-flex}#resourcenav a+a{margin-inline-start:.6em}#resourcenav a:hover,#resourcenav a:focus{background-color:var(--darkblue-hover)}#resourcenav a:active{background-color:var(--darkblue-active)}#resourcenav a i[class^=ph]{font-size:1.65em}#resourcenav a.current-page{position:relative}#resourcenav a.current-page:after{content:"";--size:1em;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);border-radius:100%;padding:.3em;font-size:.6em;display:block;position:absolute;top:-.1em;left:-.15em;font-family:Phosphor-Fill!important}#moreinfo{--spacing:.5em;justify-content:center;align-items:center;gap:var(--spacing);background-color:var(--darkblue-variant);cursor:pointer;border:0;flex-direction:column;width:5.75vw;min-width:3.5em;margin:0;padding:0;display:flex}#moreinfo:hover,#moreinfo:focus{background-color:var(--darkblue-hover)}#moreinfo:active{background-color:var(--darkblue-active)}#moreinfo:before{box-sizing:content-box;height:var(--spacing);border-block:solid}#moreinfo:after{border-block-end:solid}#moreinfo:before,#moreinfo:after{content:"";border-color:var(--darkgrayblue);width:2em;display:block}#moreinfopopover{z-index:101;top:var(--header-height);border:none;margin:0;margin-inline-start:auto;padding:0;right:0}#moreinfopopover .contentitem{background-color:var(--darkblue);color:var(--white);text-align:center;padding:.75em 1em;font-size:1.1em;text-decoration:none;display:block}#moreinfopopover .contentitem i{display:none}#moreinfopopover a.contentitem:hover,#moreinfopopover a.contentitem:focus{background-color:var(--darkblue-hover)}#moreinfopopover a.contentitem:active{background-color:var(--darkblue-active)}#moreinfopopover a.contentitem.current-page:before{content:"";--size:1em;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);border-radius:100%;padding:.3em;font-size:.6em;display:inline-block;font-family:Phosphor-Fill!important}#main{background-image:var(--bg-img);background-size:cover;background-position:var(--bg-position,center);flex-direction:column;flex-grow:1;padding-block-end:var(--footer-height);display:flex;position:relative}#main:before{content:"";pointer-events:none;z-index:2;background-image:linear-gradient(90deg,#00000080 1em,#0000 6em);width:10em;height:100%;transition-property:opacity,width;transition-duration:.3s;position:absolute;top:0;left:0}#main:has(#scrolltostart.disabled):before{opacity:0;width:0}#mainhead{box-sizing:content-box;z-index:3;gap:1em;height:2.35rem;padding:1.5em 1.5em .75em;display:flex}#opensearch{box-shadow:1px 1px var(--lightgray);color:var(--mediumblue);cursor:pointer;background-color:#fff;border:none;padding:0 .6em;line-height:1}#opensearch:hover,#opensearch:focus{background-color:var(--white)}#opensearch:active{box-shadow:inset 1px 1px var(--lightgray)}#search{grid-template-columns:1fr auto 1fr;gap:1em;margin:2em 1em 1em;display:grid}#search *{font-size:1.2em}#search #q{border:.1em solid var(--lightblue);background-color:rgb(from var(--mediumblue)r g b/.2);color:var(--white);text-align:center;border-radius:5em;grid-column:2;min-width:25vw;padding:.75em}#search button[type=submit]{grid-column:3;justify-self:start;font-size:1.2em}#search button[type=submit][disabled]{color:var(--white);cursor:initial;text-align:center;background-color:var(--darkgray);border:none;padding:.75em 1em;line-height:1;text-decoration:none}#pagetitle{margin:0;font-size:1em;font-weight:400}#pagetitle .label{backdrop-filter:blur(3px);background-color:rgb(from var(--black)r g b/.6);color:var(--white);border:.1em solid var(--lightgray);border-radius:0;align-items:center;gap:.4ch;height:100%;padding:0 .6em;display:flex}#pagetitle .label+.label{display:none}#pagetitle button.label{cursor:pointer}#pagetitle button.label:hover,#pagetitle button.label:focus{background-color:#000000b3}#pagetitle button.label:active{background-color:#000c}#pagetitle button.label:after{content:"";color:var(--white);margin-inline-start:.2ch;font-size:1.2em;display:block;font-family:Phosphor-Bold!important}#pagetitle .tag:before{content:"#"}#pagetitle .search_query:before{content:"“"}#pagetitle .search_query:after{content:"”"}#tagordering .orderlinks{justify-content:center;gap:1em;margin:1em 2vw 0;display:flex}#tagordering a{font-size:1.2em;display:block}#tagordering .button-solid-blue{position:relative}#tagordering .button-solid-blue:after{content:"";--size:1em;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);border-radius:100%;padding:.3em;font-size:.6em;display:block;position:absolute;top:-.1em;right:-.15em;font-family:Phosphor-Fill!important}#posts{scrollbar-width:none;flex-grow:1;align-self:center;align-items:center;gap:2em;width:min-content;max-width:100vw;margin:1em auto;padding-block:1.1em;padding-inline:2em;display:flex;overflow-x:scroll}.blanknotice{background-color:var(--accent);color:var(--white);text-align:center;justify-content:center;align-items:center;width:20em;height:20em;padding:1em;line-height:1.5;display:flex}.blanknotice .search_query:before{content:"“"}.blanknotice .search_query:after{content:"”"}.noscriptenabled~.blanknotice{display:none}#scrolltostart{color:var(--lightgray);z-index:3;align-items:center;padding:1rem;font-size:7em;line-height:1;text-decoration:none;transition:opacity .3s,color .2s;display:flex;position:absolute;top:calc(50% - 1.8rem);left:-2rem;transform:translateY(-50%)}#scrolltostart:not(.disabled){cursor:pointer}#scrolltostart:not(.disabled):hover,#scrolltostart:not(.disabled):focus{color:var(--white)}#scrolltostart.disabled{opacity:0;pointer-events:none}#scrolltostart i:last-child{position:absolute;left:.275em}.post{color:var(--white);scrollbar-width:none;flex-shrink:0;width:15em;height:21.75em;transition-property:scale,margin-inline;transition-duration:.2s}.post:has(.postcard:hover,.postcard:focus){margin-inline:.75em;scale:110%}.post .postcontent{display:none}.postcard{border:1px solid var(--lightgray);background:rgb(from var(--black)r g b/.6);color:inherit;cursor:pointer;--max-top-width:12.75rem;grid-template-rows:1fr auto;width:100%;height:100%;padding:0;display:grid}.postcard .top{background-color:var(--accent);flex-direction:column;align-items:center;height:100%;padding:1em 0;display:flex;position:relative}.postcard .top img,.postcard .top svg{width:var(--max-top-width);height:var(--max-top-width);object-fit:cover;margin-block-end:auto;display:block}.postcard .top svg{color:var(--white);background-color:#000;padding:3em}.postcard:hover .top:after{content:"";color:#fff;background-color:var(--red);top:calc(var(--max-top-width) - 1.1em);left:calc(var(--max-top-width) - .4em);box-shadow:1px 1px var(--darkred),.1em .1em .25em rgb(from var(--black)r g b/.6);border-radius:100%;justify-content:center;align-items:center;padding:.15em .2em .2em .15em;font-size:2em;line-height:1;display:flex;position:absolute;font-family:Phosphor-Light!important}.postcard .posttitle,.postcard .subtitle{width:var(--max-top-width);text-align:center;white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}.postcard .posttitle{font-size:1.4em;font-weight:375}.postcard .subtitle{font-size:1.2em;font-weight:350}.postcard .bottom{color:var(--lightblue);text-align:start;margin:0;padding:.5em .25em}.postcard .bottom i{border:1px solid var(--lightblue);border-radius:100%;padding:.05em;font-size:2em;display:inline-block}#postviewer[open]{grid-template-rows:auto 1fr auto;gap:.2em;display:grid}#postviewer[open]>footer{flex-wrap:wrap;justify-content:center;align-items:center;gap:1em;display:flex}#postviewer[open]>footer a,#postviewer[open]>footer button{font-size:1.2em;display:block;padding-inline:2em!important}#postviewer[open]>footer a:not([href]),#postviewer[open]>footer button[disabled]{color:var(--white);cursor:initial;text-align:center;background-color:var(--darkgray);border:none;padding:.75em 1em;line-height:1;text-decoration:none}.postcontent{overflow-y:scroll}.postcontent>*{max-width:33.75rem;margin:auto}.postcontent.filtered>:not(:first-child){display:none}.postcontent>header,.postcontent>footer{text-align:center;justify-content:center;align-items:center;padding-block:.8em;display:flex}:is(.postcontent>header,.postcontent>footer):empty{display:none}.postcontent>header{border-block-end:var(--modal-border);flex-wrap:wrap;gap:.1em 1em;position:relative}.postcontent>footer{border-block-start:var(--modal-border);flex-direction:column;gap:1em}.postcontent>footer *{margin:0}.postcontent *+.bodyitem .user{border-block-start:var(--modal-border)}.postcontent .rounds{flex-wrap:wrap;justify-content:center;align-items:center;gap:.6em;display:flex}.postcontent .rounds img{font-size:.75em;display:block}.postcontent .rounds a:is(:hover,:focus-within),.postcontent .rounds button:is(:hover,:focus-within){text-decoration:none}:is(.postcontent .rounds a:is(:hover,:focus-within),.postcontent .rounds button:is(:hover,:focus-within)) img{box-shadow:0 0 .2em .1em rgb(from var(--white)r g b/.5)}:is(.postcontent .rounds a:is(:hover,:focus-within),.postcontent .rounds button:is(:hover,:focus-within)) i{box-shadow:inset 0 0 .2em .1em rgb(from var(--lightblue)r g b/.75),0 0 .2em .1em rgb(from var(--white)r g b/.1)}.postcontent .rounds i{border:1px solid var(--lightblue);--size:2.6em;width:var(--size);height:var(--size);border-radius:100%;justify-content:center;align-items:center;display:flex}.postcontent .rounds i:before{font-size:1.8em}.postcontent .rounds .tagtoggle{color:var(--lightblue);cursor:pointer;background:0 0;border:none;border-radius:100%;padding:0}.postcontent .rounds .tagtoggle:not(.hidden) i{background-color:rgb(from var(--lightblue)r g b/.25)}#pinnedpost{--size:fit-content;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);cursor:help;border-radius:100%;padding:.2em;display:flex;position:absolute;top:calc(100% - .65em);right:.3em}.customlike{position:relative}.like_button,.like_button iframe{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}.like_button.liked~.to-like,.like_button:not(.liked)~.to-unlike{display:none}footer .tags{word-break:break-word;flex-wrap:wrap;justify-content:center;gap:.1em .6em;display:flex}footer .tags.hidden:not(:has(.notecount)){display:none}footer .tags.hidden:has(.notecount) a:not(.notecount){display:none}footer .tags .notecount{font-weight:600}.filter{text-align:center;padding:2em}.filter p{margin:0}.filter .tags{margin:1em}.filter .tag{color:var(--lightblue)}.filter button{text-transform:uppercase;font-size:1.2em}.bodyitem .user{border-block-end:.1em solid rgb(from var(--darkgrayblue)r g b/.25)}.bodyitem .user.deactivated .name:after{content:"(deactivated)";opacity:.8;color:var(--lightgray);margin-inline-start:.2em}.bodyitem .user a{justify-content:center;align-items:center;gap:.5em;padding:.5em 1em;font-size:1.2em;display:flex}.bodyitem .user a .avatar{flex-shrink:0;font-size:.75em}.bodyitem .user .badges{--size:.875rem;height:var(--size);flex-grow:1;align-items:center;gap:.15rem;display:flex}.bodyitem .user .badges span{max-width:var(--size);height:var(--size);flex-grow:1;position:relative}.bodyitem .user .badges span:not(:last-child) img{position:absolute;left:0}.bodyitem .user .badges img{width:var(--size);height:var(--size);max-width:unset;filter:drop-shadow(0 0 .1em rgb(from var(--white)r g b/.5));display:block}.bodyitem .ask{border:.1em solid var(--lightblue);margin-block-start:1rem;margin-inline:.5rem;padding-inline:1em}.bodyitem .ask:last-child{margin-block-end:1rem}.bodyitem .ask .user a{gap:.2em;text-decoration:none}.bodyitem .ask .user a :first-child{margin-inline-end:.3em}.bodyitem .ask .user a :last-child{color:var(--white)}.bodyitem .ask .user a:is(:hover,:focus) .name{text-decoration:underline}.bodyitemcontent{padding-block:1rem}.bodyitemcontent>:first-child{margin-block-start:0!important}.bodyitemcontent>*{margin-block:1rem}.bodyitemcontent>:last-child{margin-block-end:0!important}.bodyitemcontent .heading2{font-size:1.4em;font-weight:600}.bodyitemcontent a:not([class*=button]){color:var(--green);text-underline-offset:.2em}.bodyitemcontent a:not([class*=button]):not(:hover,:focus){text-decoration:none}.bodyitemcontent a.readmore{text-transform:uppercase;max-width:10em;margin-inline:auto;font-size:1.2em;display:block}.bodyitemcontent hr.readmore{border:none;border-block-start:.1em dotted var(--darkgrayblue);max-width:60%;margin-block:1.5em;position:relative}.bodyitemcontent hr.readmore:after{text-transform:lowercase;color:var(--darkgrayblue);background-color:#0d1a32;padding:.5em;font-style:italic;line-height:1;position:absolute;top:-1.1em;left:50%;transform:translate(-50%)}.postcontent .body .heading1{font-size:1.75em;font-weight:600}.postcontent .body .heading1 a:not([class*=button]){color:var(--green);text-underline-offset:.2em}.postcontent .body .heading1 a:not([class*=button]):not(:hover,:focus){text-decoration:none}.postcontent .body .poll .question{color:rgb(from var(--white)r g b/.75);margin-block:0 .5em;font-size:1.5em}.postcontent .body .poll .option{color:inherit;grid-template-columns:2.5em 1fr;gap:.4em;margin-block:.5em;text-decoration:none;display:grid}.postcontent .body .poll .option p{margin:0}.postcontent .body .poll .icon{place-self:center end;position:relative}.postcontent .body .poll .icon:before{content:"";--size:1em;width:var(--size);height:var(--size);border:.125em solid rgb(from var(--lightgray)r g b/.5);display:block}.postcontent .body .poll .ph{font-size:2.25em;position:absolute}.postcontent .body .poll .option:not(:hover) .ph{display:none}.postcontent .body .poll:not(.complete) .ph{bottom:-.05em;left:-.2em}.postcontent .body .poll.complete .option{opacity:.6}.postcontent .body .poll.complete .option p{text-decoration:line-through .1em;text-decoration-color:rgb(from var(--white)r g b/.5)}.postcontent .body .poll.complete .ph{top:50%;left:50%;transform:translate(-50%,-50%)}.postcontent .body .poll .results,.postcontent .body .poll .timeleft{margin-block-start:.75em;display:block}.postcontent .body .poll .timeleft{color:var(--lightgray);font-style:italic}.postcontent .body .npf-link-block{border:.1em solid var(--green);border-radius:0;margin-inline:.5em}.postcontent .body .npf-link-block a{color:var(--green)}.postcontent .body .npf-link-block .poster{border-block-end:.1em solid var(--green)}.postcontent .body .npf-link-block .poster:before{opacity:.6}.postcontent .body .npf_indented{border-inline-start:.1em solid var(--lightblue);margin-inline-start:.95em;padding-inline-start:.95em}.postcontent .body img{max-width:100%;height:auto;display:block}.postcontent .body figure{margin-inline:0}.postcontent .body .row{--grid-spacing:min(.2em,1vw);gap:var(--grid-spacing);margin-block:var(--grid-spacing);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.postcontent .body .row figure{flex-direction:column;margin:0;display:flex}.postcontent .body .row img{object-fit:cover;width:100%;height:100%}.postcontent .body .video,.postcontent .body iframe{width:100%;min-height:20vh;max-height:65vh;margin-inline:auto;display:block}.postcontent .body iframe{margin-block:0}.audiowrapper{background-color:var(--accent);color:var(--white);flex-direction:column;display:flex}.audiowrapper .top{justify-content:center;align-items:center;gap:1em;padding:1em 2em;display:flex}.audiowrapper .hasart{background-position:50%;background-repeat:no-repeat;background-size:cover}.audiowrapper .hasart .top{backdrop-filter:blur(1em);background-color:rgb(from var(--black)r g b/.6)}.audiowrapper .albumart{--size:5em;max-height:var(--size);border-radius:100%;max-width:var(--size)!important}.audiowrapper .textinfo{flex-direction:column;align-self:center;gap:.4em;line-height:1;display:flex}.audiowrapper .textinfo:empty{display:none}.audiowrapper .trackname{font-weight:700}.audiowrapper .artist,.audiowrapper .album{font-size:.875em}.audiowrapper .bottom{grid-template-columns:1fr auto 1fr;align-items:center;gap:1em;padding:.75em 1em;display:grid}.audiowrapper .bottom .total.time{justify-self:end}.audiowrapper .buttons{text-align:center;justify-content:center;align-items:center;gap:.5em;line-height:1;display:flex}.audiowrapper .buttons button{--size:2em;width:var(--size);height:var(--size);cursor:pointer;font:inherit;color:inherit;background-color:#0000;border:none;border-radius:100%;justify-content:center;align-items:center;font-size:1.25em;display:flex}.audiowrapper .buttons button:hover{color:rgb(from var(--white)r g b/.5);text-shadow:0 0 var(--green)}.audiowrapper .buttons button.active{color:var(--green)}.audiowrapper .buttons .playpause{background-color:var(--white);color:var(--accent);margin-inline:.25em}.audiowrapper .buttons .playpause:hover{color:var(--accent);text-shadow:unset;background-color:var(--green);background-image:linear-gradient(rgb(from var(--white)r g b/.75),rgb(from var(--white)r g b/.75))}.audiowrapper audio,.audiowrapper audio.playing~.bottom .buttons .play,.audiowrapper audio:not(.playing)~.bottom .buttons .pause,.audiowrapper .volume.active .mute,.audiowrapper .volume:not(.active) .unmute,.audiowrapper .loop.active .repeat,.audiowrapper .loop:not(.active) .unrepeat{display:none}.seekbar{background-color:rgb(from var(--white)r g b/.15);-webkit-appearance:none;--progress-bg:var(--green);width:100%;height:.5em;margin:0;position:relative}.seekbar:focus{outline:none}.seekbar:before{content:"";background-color:var(--progress-bg);width:var(--progress-width);cursor:pointer;height:100%;display:block;position:absolute;top:0;left:0}.seekbar::-webkit-slider-runnable-track{cursor:pointer;background:0 0;border:0;width:100%;height:100%}.seekbar::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;border:0;width:0;height:0}.seekbar::-moz-range-track{cursor:pointer;background:0 0;border:0;width:100%;height:100%}.seekbar::-moz-range-thumb{cursor:pointer;border:0;width:0;height:0}.seekbar::-moz-range-progress{background-color:var(--progress-bg);height:100%}.seekbar::-ms-track{color:#0000;cursor:pointer;background:0 0;border-width:0;border-color:#0000;width:100%;height:100%}.seekbar::-ms-fill-lower{background:var(--progress-bg);border:0}.seekbar::-ms-fill-upper{background:0 0;border:0}.seekbar::-ms-thumb{cursor:pointer;border:0;width:0;height:0;margin-top:0}.mediawrapper{padding-block:1rem}.mediawrapper>:first-child{margin-block-start:0!important}.mediawrapper>:last-child{margin-block-end:0!important}.mediawrapper .heading1{text-align:center}#notes h3{text-transform:uppercase;text-align:center;margin-block-end:.25em;font-size:2em;font-weight:400}#notes ol{margin:0 0 .5em;padding:0;list-style-type:""}#notes li{border-block-start:var(--modal-border);grid-template-columns:auto 1fr;gap:0 1em;padding:.25em 1em;line-height:1.2;display:grid}#notes li.more_notes_link_container{padding:0;display:block}#notes .avatar_frame{grid-row:1/span 2}#notes .avatar{display:block}#notes .action{display:contents}#notes .action>a:first-child{align-self:center;padding-block-start:.15em;font-size:1.3em}#notes .acted{color:var(--lightgray);grid-row:2}#notes a:not(:hover,:focus){color:inherit}#notes .more_notes_link,#notes .notes_loading{text-align:center;text-transform:uppercase;padding:.5em 1em;font-size:1.3em;display:block}#notes blockquote,#notes .answer_content{border-inline-start:.1em solid var(--darkgray);grid-column:1/span 2;margin-block:.5em;margin-inline:1.575em 0;padding-block:.25em;padding-inline-start:2.575em}#notes blockquote a{color:var(--green)}#pfoot{height:var(--footer-height);z-index:3;background-color:rgb(from var(--black)r g b/.6);backdrop-filter:blur(3px);--size:23.5em;grid-template-columns:var(--size)1fr var(--size);width:100vw;display:grid;position:fixed;bottom:0;left:0}#pagination{background-color:var(--darkblue);color:var(--white);flex-direction:column;grid-column:1;gap:.5em;padding:.5em .6em;display:flex}#pagination .text{flex-grow:1;justify-content:space-between;align-items:center;margin:0;font-size:1.25em;display:flex}#pagination .pagecount{text-transform:uppercase}#pagination .pagelinks{grid-template-columns:1fr 1fr;gap:.6em;display:grid}#pagination a{padding-block:.95em;font-size:1.3em;display:block}#pagination a:not([href]),#pagination a:not([href]):is(:hover,:focus,:active){background-color:var(--darkgray);cursor:unset}#pages{max-height:var(--footer-height);--max-card-width:5.5em;grid-column:2;gap:.25em;padding:.5em;display:flex}#pages a{filter:drop-shadow(0 0 .25em rgb(from var(--white)r g b/.75));max-width:var(--max-card-width);flex-grow:1;min-width:1em;transition-property:max-width,filter;transition-duration:.2s;position:relative}#pages a:not(:hover){filter:drop-shadow(-.1em 0 .25em rgb(from var(--white)r g b/.25))}#pages a:not(:hover):not(:last-child){max-width:max(1em,calc(var(--max-card-width) - 1em))}#pages a:not(:hover):not(:last-child) img,#pages a:not(:hover):not(:last-child) svg{position:absolute;top:0;left:0}#pages a.current-page:after{color:var(--white);content:"";--size:1em;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);border-radius:100%;padding:.3em;font-size:.6em;display:block;position:absolute;top:-.1em;left:-.15em;font-family:Phosphor-Fill!important}#pages img,#pages svg{max-width:var(--max-card-width);object-fit:contain;width:auto;height:100%}#footright{color:var(--white);flex-direction:column;grid-column:3;display:flex}#footright .text{background-color:var(--black);justify-content:center;align-items:center;gap:1em;margin:0;padding:1em;line-height:1;display:flex}#footright svg{--size:1.25em;width:var(--size);height:var(--size)}#home{text-transform:uppercase;flex-grow:1;justify-content:center;align-items:center;padding-block:.5rem;font-size:2.75em;display:flex}@media (min-width:70em){#userprofile .cards{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}#userprofile .cards .card{--card-spacing:.6em}#userprofile .cards .card:has(+.card){margin-inline-end:var(--card-spacing)}#userprofile .cards .card+.card{padding-inline-start:var(--card-spacing)}#userprofile .cards .card+.card:before{content:"";border-inline-start:var(--border);height:calc(100% - 1em);position:absolute;top:.5em;left:-.05em}#desc{grid-template-columns:14vw 1fr;display:grid}#desc .title{--desc-spacing:.75em;border-inline-end:var(--border);margin-inline-end:var(--desc-spacing);padding-inline-end:var(--desc-spacing)}}@media (max-width:70em){#userprofile .cards .card+.card:before{content:"";border-block-start:var(--border);width:calc(100% - 1em);position:absolute;top:-.05em;left:.5em}#desc .title{--desc-spacing:.75em;border-block-end:var(--border);margin-block-end:var(--desc-spacing);padding-block-end:var(--desc-spacing)}} \ No newline at end of file +:root{--ssjyp-blue:#0179f9;--white:#f2f3f3;--lightgray:#a5a6a7;--darkgray:#54595d;--darkgrayblue:#4a4d63;--darkestgray:#22272b;--black:#1b1517;--darkblue:#0d1a32;--darkblue-variant:#172039;--darkblue-hover:#363650;--darkblue-active:#5f5f6d;--mediumblue:#015e97;--mediumblue-darken:#063b5d;--lightblue:#38b4fe;--lightblue-lighten-1:#5fb1e0;--lightblue-lighten-2:#7bc3eb;--lightblue-darken:#286381;--red:#f54034;--darkred:#98110c;--green:#13dd67;--header-height:4em;--footer-height:8.5em}body{background-color:var(--ssjyp-blue);flex-direction:column;height:100vh;font-family:"Source Sans 3",sans-serif;display:flex}.visuallyhidden,#skip:not(:focus-within,:focus){font-size:1px;position:fixed;top:-100rem}#skip{position:absolute;top:.5em;left:50%;transform:translate(-50%)}.button-outline,.button-solid-blue,.button-solid-gray{color:var(--white);cursor:pointer;text-align:center;padding:.75em 1em;line-height:1;text-decoration:none}button[disabled]{cursor:initial}.button-outline{background-color:var(--mediumblue);border:.1875em solid var(--lightblue)}.button-outline:not([disabled]):active{background-color:var(--mediumblue-darken);border-color:var(--mediumblue)}.button-solid-blue{background-color:var(--lightblue);border:none}.button-solid-blue:not([disabled]):hover,.button-solid-blue:not([disabled]):focus{background-color:var(--lightblue-lighten-1)}.button-solid-blue:not([disabled]):active{background-color:var(--lightblue-lighten-2)}.button-solid-gray{background-color:var(--darkgray);cursor:initial;border:none}.bronze{color:#fe9500!important}.silver{color:#c8cde1!important}.gold{color:#fee822!important}.platinum{color:#5cedfd!important}.master{color:#df81ff!important}.modal{background-color:var(--darkblue);color:var(--white);--modal-border:.1em solid var(--darkgrayblue);border:none;width:80vw;padding:1em 1.25em}.modal::backdrop{background-color:var(--ssjyp-blue);background-image:var(--bg-img);background-size:cover;background-position:var(--bg-position,center)}.modal a:not([class*=button]){color:var(--lightblue);text-underline-offset:.2em}.modal a:not([class*=button]):not(:hover,:focus){text-decoration:none}.modal>header{border-block-end:var(--modal-border);--closebtn-size:4.5em;grid-template-columns:minmax(0,var(--closebtn-size))1fr var(--closebtn-size);align-items:center;padding-block:0 .25em;display:grid}.modal>header h2{text-align:center;grid-column:2;margin:0;font-size:2.9em;font-weight:400;line-height:1}.modal>header .closemodal{color:var(--white);cursor:pointer;background:0 0;border:none;grid-column:3}.modal>header .closemodal:hover,.modal>header .closemodal:focus{color:var(--lightgray)}.modal>header .closemodal:active{color:var(--darkgrayblue)}.modal>header .closemodal i{font-size:4em}.modal>footer{border-block-start:var(--modal-border);padding-block-start:1em}.modal>footer .closemodal{margin-inline:auto;padding:1em 9vw;font-size:1.6em;display:block}img.lightboxable{cursor:pointer}#lightbox{background:0 0;border:none;padding:0;overflow:visible}#lightbox::backdrop{background-color:rgb(from var(--darkblue)r g b/.9)}#lightbox .closemodal{color:var(--white);cursor:pointer;background:0 0;border:none;padding:0;position:fixed;top:min(1em,2.5vh);right:min(1em,2.5vw)}#lightbox .closemodal:hover,#lightbox .closemodal:focus{color:var(--lightgray)}#lightbox .closemodal:active{color:var(--darkgrayblue)}#lightbox .closemodal i{font-size:4em}#lightbox img{cursor:pointer;box-shadow:0 0 1em var(--black);width:auto;max-width:calc(100vw - 10em);height:auto;max-height:90vh;transition-property:none;display:block}#lightbox img.left,#lightbox img.right{--positioning:calc(100vw - 2em);position:fixed;top:50%;transform:translateY(-50%)}:is(#lightbox img.left,#lightbox img.right):hover{--positioning:calc(100vw - 3em);transition-duration:.2s}#lightbox img.left{right:var(--positioning);transition-property:right}#lightbox img.right{left:var(--positioning);transition-property:left}.tmblr-iframe--unified-controls{top:5em!important;right:1em!important}.tippy-box[data-theme~=ssrg]{background-color:var(--darkblue);color:var(--white);filter:drop-shadow(0 0 .25em rgb(from var(--white)r g b/.5))}.tippy-box[data-theme~=ssrg][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--darkblue)}.tippy-box[data-theme~=ssrg][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--darkblue)}.tippy-box[data-theme~=ssrg][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--darkblue)}.tippy-box[data-theme~=ssrg][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--darkblue)}#phead{height:var(--header-height);background-color:var(--darkblue);display:flex}.avatar{--size:3.25em;width:var(--size);height:var(--size);border:.15em solid var(--white);border-radius:100%}#userbadge{cursor:pointer;text-align:start;background:0 0;border:none;border-radius:0;flex-grow:1;align-items:center;gap:.6em;padding:0 1.3em;display:flex}#userbadge:hover,#userbadge:focus{background-color:var(--darkblue-hover)}#userbadge:active{background-color:var(--darkblue-active)}#userbadge .text{font-size:1.3em;line-height:1.2}#userbadge .text *{margin:0}#userbadge .username{color:var(--white);font-size:1.1em;font-weight:400}#userbadge .league{color:var(--lightgray)}#userprofile dd{margin-inline-start:0}#userprofile .profilesection{background-color:var(--darkestgray);--border:.1em solid rgb(from var(--white)r g b/.25);margin:1em}#userprofile #about{background-color:var(--accent)}#userprofile .cards{padding:.5em 1em;display:grid}#userprofile .cards p{margin:0}#userprofile .cards .card{color:rgb(from var(--white)r g b/.9);font-size:1.4em;position:relative}#profilename{grid-template-columns:auto 1fr;align-items:center;column-gap:.6em;padding-block:1em;display:grid}#profilename .avatar{grid-row:1/span 2}#profilestatus,#profilefavcard{grid-template-rows:auto 1fr;row-gap:.8em;padding-block:.75em;display:grid}:is(#profilestatus,#profilefavcard) .title{line-height:1}:is(#profilestatus,#profilefavcard) .text{color:var(--lightgray);font-size:.8em}#profilefavcard{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;align-items:center;padding-block:.5em;display:grid}#profilefavcard .title{padding-block-start:.25em}#profilefavcard .text{padding-block-end:.3125em}#profilefavcard img{object-fit:contain;grid-area:1/2/span 2;max-width:6em;max-height:4.35em}#profilebanner{object-fit:cover;object-position:var(--profile-banner-position);width:100vw;height:42.8571vw;display:block}#desc{min-height:30vh;padding:1em;font-size:1.4em}#desc .title{margin:0;line-height:1}#desc .text{color:var(--lightgray);font-size:.8em}#desc .text>*{margin-block:0}#desc .text>*+*{margin-block-start:.6em}.weeklytop5{padding:.5em;font-size:1.15em}.weeklytop5 h3{color:var(--lightblue);margin:0 0 .6em;font-size:1em;font-weight:400}.weeklytop5 a{text-decoration:none;display:block}.weeklytop5 a:hover,.weeklytop5 a:focus{background-color:rgb(from var(--darkgray)r g b/.5)}.weeklytop5 a:active{background-color:var(--darkgray)}.weeklytop5 a+a{border-block-start:var(--border)}.weeklytop5 a[href] figure:after{content:"";color:var(--lightgray);grid-area:1/3/span 2;font-size:1.8em;display:block;font-family:Phosphor!important}.weeklytop5 figure{grid-template-columns:auto 1fr auto;align-items:center;gap:0 .5em;margin:0;padding:.6em;display:grid}.weeklytop5 img,.weeklytop5 svg{color:var(--lightgray);--size:2.5em;width:var(--size);height:var(--size);border:.1em solid var(--darkgray);background-color:var(--darkgray);grid-row:1/span 2}.weeklytop5 figcaption{line-height:1;display:contents}.weeklytop5 .name{color:var(--white);grid-column:2;font-size:.9em}.weeklytop5 .score{grid-column:2}#resourcenav{background-color:var(--darkblue-variant);padding-block:.75em;display:flex}#resourcenav:is(.ask,.submit,.random,.archive):not(.empty){padding-inline:1.5em .6em}#resourcenav a{color:var(--white);background-color:var(--darkblue);justify-content:space-between;align-items:center;gap:.3em;min-width:9em;height:100%;padding:0 .6em;font-size:1.2em;text-decoration:none;display:inline-flex}#resourcenav a+a{margin-inline-start:.6em}#resourcenav a:hover,#resourcenav a:focus{background-color:var(--darkblue-hover)}#resourcenav a:active{background-color:var(--darkblue-active)}#resourcenav a i[class^=ph]{font-size:1.65em}#resourcenav a.current-page{position:relative}#resourcenav a.current-page:after{content:"";--size:1em;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);border-radius:100%;padding:.3em;font-size:.6em;display:block;position:absolute;top:-.1em;left:-.15em;font-family:Phosphor-Fill!important}#moreinfo{--spacing:.5em;justify-content:center;align-items:center;gap:var(--spacing);background-color:var(--darkblue-variant);cursor:pointer;border:0;flex-direction:column;width:5.75vw;min-width:3.5em;margin:0;padding:0;display:flex}#moreinfo:hover,#moreinfo:focus{background-color:var(--darkblue-hover)}#moreinfo:active{background-color:var(--darkblue-active)}#moreinfo:before{box-sizing:content-box;height:var(--spacing);border-block:solid}#moreinfo:after{border-block-end:solid}#moreinfo:before,#moreinfo:after{content:"";border-color:var(--darkgrayblue);width:2em;display:block}#moreinfopopover{z-index:101;top:var(--header-height);border:none;margin:0;margin-inline-start:auto;padding:0;right:0}#moreinfopopover .contentitem{background-color:var(--darkblue);color:var(--white);text-align:center;padding:.75em 1em;font-size:1.1em;text-decoration:none;display:block}#moreinfopopover .contentitem i{display:none}#moreinfopopover a.contentitem:hover,#moreinfopopover a.contentitem:focus{background-color:var(--darkblue-hover)}#moreinfopopover a.contentitem:active{background-color:var(--darkblue-active)}#moreinfopopover a.contentitem.current-page:before{content:"";--size:1em;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);border-radius:100%;padding:.3em;font-size:.6em;display:inline-block;font-family:Phosphor-Fill!important}#main{background-image:var(--bg-img);background-size:cover;background-position:var(--bg-position,center);flex-direction:column;flex-grow:1;padding-block-end:var(--footer-height);display:flex;position:relative}#main:before{content:"";pointer-events:none;z-index:2;background-image:linear-gradient(90deg,#00000080 1em,#0000 6em);width:10em;height:100%;transition-property:opacity,width;transition-duration:.3s;position:absolute;top:0;left:0}#main:has(#scrolltostart.disabled):before{opacity:0;width:0}#mainhead{box-sizing:content-box;z-index:3;gap:1em;height:2.35rem;padding:1.5em 1.5em .75em;display:flex}#opensearch{box-shadow:1px 1px var(--lightgray);color:var(--mediumblue);cursor:pointer;background-color:#fff;border:none;padding:0 .6em;line-height:1}#opensearch:hover,#opensearch:focus{background-color:var(--white)}#opensearch:active{box-shadow:inset 1px 1px var(--lightgray)}#search{grid-template-columns:1fr auto 1fr;gap:1em;margin:2em 1em 1em;display:grid}#search *{font-size:1.2em}#search #q{border:.1em solid var(--lightblue);background-color:rgb(from var(--mediumblue)r g b/.2);color:var(--white);text-align:center;border-radius:5em;grid-column:2;min-width:25vw;padding:.75em}#search button[type=submit]{grid-column:3;justify-self:start;font-size:1.2em}#search button[type=submit][disabled]{color:var(--white);cursor:initial;text-align:center;background-color:var(--darkgray);border:none;padding:.75em 1em;line-height:1;text-decoration:none}#pagetitle{margin:0;font-size:1em;font-weight:400}#pagetitle .label{backdrop-filter:blur(3px);background-color:rgb(from var(--black)r g b/.6);color:var(--white);border:.1em solid var(--lightgray);border-radius:0;align-items:center;gap:.4ch;height:100%;padding:0 .6em;display:flex}#pagetitle .label+.label{display:none}#pagetitle button.label{cursor:pointer}#pagetitle button.label:hover,#pagetitle button.label:focus{background-color:#000000b3}#pagetitle button.label:active{background-color:#000c}#pagetitle button.label:after{content:"";color:var(--white);margin-inline-start:.2ch;font-size:1.2em;display:block;font-family:Phosphor-Bold!important}#pagetitle .tag:before{content:"#"}#pagetitle .search_query:before{content:"“"}#pagetitle .search_query:after{content:"”"}#tagordering .orderlinks{justify-content:center;gap:1em;margin:1em 2vw 0;display:flex}#tagordering a{font-size:1.2em;display:block}#tagordering .button-solid-blue{position:relative}#tagordering .button-solid-blue:after{content:"";--size:1em;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);border-radius:100%;padding:.3em;font-size:.6em;display:block;position:absolute;top:-.1em;right:-.15em;font-family:Phosphor-Fill!important}#posts{scrollbar-width:none;flex-grow:1;align-self:center;align-items:center;gap:2em;width:min-content;max-width:100vw;margin:1em auto;padding-block:1.1em;padding-inline:2em;display:flex;overflow-x:scroll}.blanknotice{background-color:var(--accent);color:var(--white);text-align:center;justify-content:center;align-items:center;width:20em;height:20em;padding:1em;line-height:1.5;display:flex}.blanknotice .search_query:before{content:"“"}.blanknotice .search_query:after{content:"”"}.noscriptenabled~.blanknotice{display:none}#scrolltostart{color:var(--lightgray);z-index:3;align-items:center;padding:1rem;font-size:7em;line-height:1;text-decoration:none;transition:opacity .3s,color .2s;display:flex;position:absolute;top:calc(50% - 1.8rem);left:-2rem;transform:translateY(-50%)}#scrolltostart:not(.disabled){cursor:pointer}#scrolltostart:not(.disabled):hover,#scrolltostart:not(.disabled):focus{color:var(--white)}#scrolltostart.disabled{opacity:0;pointer-events:none}#scrolltostart i:last-child{position:absolute;left:.275em}.post{color:var(--white);scrollbar-width:none;flex-shrink:0;width:15em;height:21.75em;transition-property:scale,margin-inline;transition-duration:.2s}.post:has(.postcard:hover,.postcard:focus){margin-inline:.75em;scale:110%}.post .postcontent{display:none}.postcard{border:1px solid var(--lightgray);background:rgb(from var(--black)r g b/.6);color:inherit;cursor:pointer;--max-top-width:12.75rem;grid-template-rows:1fr auto;width:100%;height:100%;padding:0;display:grid}.postcard .top{background-color:var(--accent);flex-direction:column;align-items:center;height:100%;padding:1em 0;display:flex;position:relative}.postcard .top img,.postcard .top svg{width:var(--max-top-width);height:var(--max-top-width);object-fit:cover;margin-block-end:auto;display:block}.postcard .top svg{color:var(--white);background-color:#000;padding:3em}.postcard:hover .top:after{content:"";color:#fff;background-color:var(--red);top:calc(var(--max-top-width) - 1.1em);left:calc(var(--max-top-width) - .4em);box-shadow:1px 1px var(--darkred),.1em .1em .25em rgb(from var(--black)r g b/.6);border-radius:100%;justify-content:center;align-items:center;padding:.15em .2em .2em .15em;font-size:2em;line-height:1;display:flex;position:absolute;font-family:Phosphor-Light!important}.postcard .posttitle,.postcard .subtitle{width:var(--max-top-width);text-align:center;white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}.postcard .posttitle{font-size:1.4em;font-weight:375}.postcard .subtitle{font-size:1.2em;font-weight:350}.postcard .bottom{color:var(--lightblue);text-align:start;margin:0;padding:.5em .25em}.postcard .bottom i{border:1px solid var(--lightblue);border-radius:100%;padding:.05em;font-size:2em;display:inline-block}#postviewer[open]{grid-template-rows:auto 1fr auto;gap:.2em;display:grid}#postviewer[open]>footer{flex-wrap:wrap;justify-content:center;align-items:center;gap:1em;display:flex}#postviewer[open]>footer a,#postviewer[open]>footer button{font-size:1.2em;display:block;padding-inline:2em!important}#postviewer[open]>footer a:not([href]),#postviewer[open]>footer button[disabled]{color:var(--white);cursor:initial;text-align:center;background-color:var(--darkgray);border:none;padding:.75em 1em;line-height:1;text-decoration:none}.postcontent{overflow-y:scroll}.postcontent>*{max-width:33.75rem;margin:auto}.postcontent.filtered>:not(:first-child){display:none}.postcontent>header,.postcontent>footer{text-align:center;justify-content:center;align-items:center;padding-block:.8em;display:flex}:is(.postcontent>header,.postcontent>footer):empty{display:none}.postcontent>header{border-block-end:var(--modal-border);flex-wrap:wrap;gap:.1em 1em;position:relative}.postcontent>footer{border-block-start:var(--modal-border);flex-direction:column;gap:1em}.postcontent>footer *{margin:0}.postcontent *+.bodyitem .user{border-block-start:var(--modal-border)}.postcontent .rounds{flex-wrap:wrap;justify-content:center;align-items:center;gap:.6em;display:flex}.postcontent .rounds img{font-size:.75em;display:block}.postcontent .rounds a:is(:hover,:focus-within),.postcontent .rounds button:is(:hover,:focus-within){text-decoration:none}:is(.postcontent .rounds a:is(:hover,:focus-within),.postcontent .rounds button:is(:hover,:focus-within)) img{box-shadow:0 0 .2em .1em rgb(from var(--white)r g b/.5)}:is(.postcontent .rounds a:is(:hover,:focus-within),.postcontent .rounds button:is(:hover,:focus-within)) i{box-shadow:inset 0 0 .2em .1em rgb(from var(--lightblue)r g b/.75),0 0 .2em .1em rgb(from var(--white)r g b/.1)}.postcontent .rounds i{border:1px solid var(--lightblue);--size:2.6em;width:var(--size);height:var(--size);border-radius:100%;justify-content:center;align-items:center;display:flex}.postcontent .rounds i:before{font-size:1.8em}.postcontent .rounds .tagtoggle{color:var(--lightblue);cursor:pointer;background:0 0;border:none;border-radius:100%;padding:0}.postcontent .rounds .tagtoggle:not(.hidden) i{background-color:rgb(from var(--lightblue)r g b/.25)}#pinnedpost{--size:fit-content;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);cursor:help;border-radius:100%;padding:.2em;display:flex;position:absolute;top:calc(100% - .65em);right:.3em}.customlike{position:relative}.like_button,.like_button iframe{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}.like_button.liked~.to-like,.like_button:not(.liked)~.to-unlike{display:none}footer .tags{word-break:break-word;flex-wrap:wrap;justify-content:center;gap:.1em .6em;display:flex}footer .tags.hidden:not(:has(.notecount)){display:none}footer .tags.hidden:has(.notecount) a:not(.notecount){display:none}footer .tags .notecount{font-weight:600}.filter{text-align:center;padding:2em}.filter p{margin:0}.filter .tags{margin:1em}.filter .tag{color:var(--lightblue)}.filter button{text-transform:uppercase;font-size:1.2em}.bodyitem .user{border-block-end:.1em solid rgb(from var(--darkgrayblue)r g b/.25)}.bodyitem .user.deactivated .name:after{content:"(deactivated)";opacity:.8;color:var(--lightgray);margin-inline-start:.2em}.bodyitem .user a{justify-content:center;align-items:center;gap:.5em;padding:.5em 1em;font-size:1.2em;display:flex}.bodyitem .user a .avatar{flex-shrink:0;font-size:.75em}.bodyitem .user .badges{--size:.875rem;height:var(--size);flex-grow:1;align-items:center;gap:.15rem;display:flex}.bodyitem .user .badges span{max-width:var(--size);height:var(--size);flex-grow:1;position:relative}.bodyitem .user .badges span:not(:last-child) img{position:absolute;left:0}.bodyitem .user .badges img{width:var(--size);height:var(--size);max-width:unset;filter:drop-shadow(0 0 .1em rgb(from var(--white)r g b/.5));display:block}.bodyitem .ask{border:.1em solid var(--lightblue);margin-block-start:1rem;margin-inline:.5rem;padding-inline:1em}.bodyitem .ask:last-child{margin-block-end:1rem}.bodyitem .ask .user a{gap:.2em;text-decoration:none}.bodyitem .ask .user a :first-child{margin-inline-end:.3em}.bodyitem .ask .user a :last-child{color:var(--white)}.bodyitem .ask .user a:is(:hover,:focus) .name{text-decoration:underline}.bodyitemcontent{padding-block:1rem}.bodyitemcontent>:first-child{margin-block-start:0!important}.bodyitemcontent>*{margin-block:1rem}.bodyitemcontent>:last-child{margin-block-end:0!important}.bodyitemcontent .heading2{font-size:1.4em;font-weight:600}.bodyitemcontent a:not([class*=button]){color:var(--green);text-underline-offset:.2em}.bodyitemcontent a:not([class*=button]):not(:hover,:focus){text-decoration:none}.bodyitemcontent a.readmore{text-transform:uppercase;max-width:10em;margin-inline:auto;font-size:1.2em;display:block}.bodyitemcontent hr.readmore{border:none;border-block-start:.1em dotted var(--darkgrayblue);max-width:60%;margin-block:1.5em;position:relative}.bodyitemcontent hr.readmore:after{text-transform:lowercase;color:var(--darkgrayblue);background-color:#0d1a32;padding:.5em;font-style:italic;line-height:1;position:absolute;top:-1.1em;left:50%;transform:translate(-50%)}.postcontent .body .heading1{font-size:1.75em;font-weight:600}.postcontent .body .heading1 a:not([class*=button]){color:var(--green);text-underline-offset:.2em}.postcontent .body .heading1 a:not([class*=button]):not(:hover,:focus){text-decoration:none}.postcontent .body .poll .question{color:rgb(from var(--white)r g b/.75);margin-block:0 .5em;font-size:1.5em}.postcontent .body .poll .option{color:inherit;grid-template-columns:2.5em 1fr;gap:.4em;margin-block:.5em;text-decoration:none;display:grid}.postcontent .body .poll .option p{margin:0}.postcontent .body .poll .icon{place-self:center end;position:relative}.postcontent .body .poll .icon:before{content:"";--size:1em;width:var(--size);height:var(--size);border:.125em solid rgb(from var(--lightgray)r g b/.5);display:block}.postcontent .body .poll .ph{font-size:2.25em;position:absolute}.postcontent .body .poll .option:not(:hover) .ph{display:none}.postcontent .body .poll:not(.complete) .ph{bottom:-.05em;left:-.2em}.postcontent .body .poll.complete .option{opacity:.6}.postcontent .body .poll.complete .option p{text-decoration:line-through .1em;text-decoration-color:rgb(from var(--white)r g b/.5)}.postcontent .body .poll.complete .ph{top:50%;left:50%;transform:translate(-50%,-50%)}.postcontent .body .poll .results,.postcontent .body .poll .timeleft{margin-block-start:.75em;display:block}.postcontent .body .poll .timeleft{color:var(--lightgray);font-style:italic}.postcontent .body .npf-link-block{border:.1em solid var(--green);border-radius:0;margin-inline:.5em}.postcontent .body .npf-link-block a{color:var(--green)}.postcontent .body .npf-link-block .poster{border-block-end:.1em solid var(--green)}.postcontent .body .npf-link-block .poster:before{opacity:.6}.postcontent .body .npf_indented{border-inline-start:.1em solid var(--lightblue);margin-inline-start:.95em;padding-inline-start:.95em}.postcontent .body img{max-width:100%;height:auto;display:block}.postcontent .body figure{margin-inline:0}.postcontent .body .row{--grid-spacing:min(.2em,1vw);gap:var(--grid-spacing);margin-block:var(--grid-spacing);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.postcontent .body .row figure{flex-direction:column;margin:0;display:flex}.postcontent .body .row img{object-fit:cover;width:100%;height:100%}.postcontent .body .video,.postcontent .body iframe{width:100%;min-height:20vh;max-height:65vh;margin-inline:auto;display:block}.postcontent .body iframe{margin-block:0}.audiowrapper{background-color:var(--accent);color:var(--white);flex-direction:column;display:flex}.audiowrapper .top{justify-content:center;align-items:center;gap:1em;padding:1em 2em;display:flex}.audiowrapper .hasart{background-position:50%;background-repeat:no-repeat;background-size:cover}.audiowrapper .hasart .top{backdrop-filter:blur(1em);background-color:rgb(from var(--black)r g b/.6)}.audiowrapper .albumart{--size:5em;max-height:var(--size);border-radius:100%;max-width:var(--size)!important}.audiowrapper .textinfo{flex-direction:column;align-self:center;gap:.4em;line-height:1;display:flex}.audiowrapper .textinfo:empty{display:none}.audiowrapper .trackname{font-weight:700}.audiowrapper .artist,.audiowrapper .album{font-size:.875em}.audiowrapper .bottom{grid-template-columns:1fr auto 1fr;align-items:center;gap:1em;padding:.75em 1em;display:grid}.audiowrapper .bottom .total.time{justify-self:end}.audiowrapper .buttons{text-align:center;justify-content:center;align-items:center;gap:.5em;line-height:1;display:flex}.audiowrapper .buttons button{--size:2em;width:var(--size);height:var(--size);cursor:pointer;font:inherit;color:inherit;background-color:#0000;border:none;border-radius:100%;justify-content:center;align-items:center;font-size:1.25em;display:flex}.audiowrapper .buttons button:hover{color:rgb(from var(--white)r g b/.5);text-shadow:0 0 var(--green)}.audiowrapper .buttons button.active{color:var(--green)}.audiowrapper .buttons .playpause{background-color:var(--white);color:var(--accent);margin-inline:.25em}.audiowrapper .buttons .playpause:hover{color:var(--accent);text-shadow:unset;background-color:var(--green);background-image:linear-gradient(rgb(from var(--white)r g b/.75),rgb(from var(--white)r g b/.75))}.audiowrapper audio,.audiowrapper audio.playing~.bottom .buttons .play,.audiowrapper audio:not(.playing)~.bottom .buttons .pause,.audiowrapper .volume.active .mute,.audiowrapper .volume:not(.active) .unmute,.audiowrapper .loop.active .repeat,.audiowrapper .loop:not(.active) .unrepeat{display:none}.seekbar{background-color:rgb(from var(--white)r g b/.15);-webkit-appearance:none;--progress-bg:var(--green);width:100%;height:.5em;margin:0;position:relative}.seekbar:focus{outline:none}.seekbar:before{content:"";background-color:var(--progress-bg);width:var(--progress-width);cursor:pointer;height:100%;display:block;position:absolute;top:0;left:0}.seekbar::-webkit-slider-runnable-track{cursor:pointer;background:0 0;border:0;width:100%;height:100%}.seekbar::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;border:0;width:0;height:0}.seekbar::-moz-range-track{cursor:pointer;background:0 0;border:0;width:100%;height:100%}.seekbar::-moz-range-thumb{cursor:pointer;border:0;width:0;height:0}.seekbar::-moz-range-progress{background-color:var(--progress-bg);height:100%}.seekbar::-ms-track{color:#0000;cursor:pointer;background:0 0;border-width:0;border-color:#0000;width:100%;height:100%}.seekbar::-ms-fill-lower{background:var(--progress-bg);border:0}.seekbar::-ms-fill-upper{background:0 0;border:0}.seekbar::-ms-thumb{cursor:pointer;border:0;width:0;height:0;margin-top:0}.mediawrapper{padding-block:1rem}.mediawrapper>:first-child{margin-block-start:0!important}.mediawrapper>:last-child{margin-block-end:0!important}.mediawrapper .heading1{text-align:center}#notes h3{text-transform:uppercase;text-align:center;margin-block-end:.25em;font-size:2em;font-weight:400}#notes ol{margin:0 0 .5em;padding:0;list-style-type:""}#notes li{border-block-start:var(--modal-border);grid-template-columns:auto 1fr;gap:0 1em;padding:.25em 1em;line-height:1.2;display:grid}#notes li.more_notes_link_container{padding:0;display:block}#notes .avatar_frame{grid-row:1/span 2}#notes .avatar{display:block}#notes .action{display:contents}#notes .action>a:first-child{align-self:center;padding-block-start:.15em;font-size:1.3em}#notes .acted{color:var(--lightgray);grid-row:2}#notes a:not(:hover,:focus){color:inherit}#notes .more_notes_link,#notes .notes_loading{text-align:center;text-transform:uppercase;padding:.5em 1em;font-size:1.3em;display:block}#notes blockquote,#notes .answer_content{border-inline-start:.1em solid var(--darkgray);grid-column:1/span 2;margin-block:.5em;margin-inline:1.575em 0;padding-block:.25em;padding-inline-start:2.575em}#notes blockquote a{color:var(--green)}#pfoot{height:var(--footer-height);z-index:3;background-color:rgb(from var(--black)r g b/.6);backdrop-filter:blur(3px);--size:23.5em;grid-template-columns:var(--size)1fr var(--size);width:100vw;display:grid;position:fixed;bottom:0;left:0}#pagination{background-color:var(--darkblue);color:var(--white);flex-direction:column;grid-column:1;gap:.5em;padding:.5em .6em;display:flex}#pagination .text{flex-grow:1;justify-content:space-between;align-items:center;margin:0;font-size:1.25em;display:flex}#pagination .pagecount{text-transform:uppercase}#pagination .pagelinks{grid-template-columns:1fr 1fr;gap:.6em;display:grid}#pagination a{padding-block:.95em;font-size:1.3em;display:block}#pagination a:not([href]),#pagination a:not([href]):is(:hover,:focus,:active){background-color:var(--darkgray);cursor:unset}#pages{max-height:var(--footer-height);--max-card-width:5.5em;grid-column:2;gap:.25em;padding:.5em;display:flex}#pages a{filter:drop-shadow(0 0 .25em rgb(from var(--white)r g b/.75));max-width:var(--max-card-width);flex-grow:1;min-width:1em;transition-property:max-width,filter;transition-duration:.2s;position:relative}#pages a:not(:hover){filter:drop-shadow(-.1em 0 .25em rgb(from var(--white)r g b/.25))}#pages a:not(:hover):not(:last-child){max-width:max(1em,calc(var(--max-card-width) - 1em))}#pages a:not(:hover):not(:last-child) img,#pages a:not(:hover):not(:last-child) svg{position:absolute;top:0;left:0}#pages a.current-page:after{color:var(--white);content:"";--size:1em;width:var(--size);height:var(--size);background:linear-gradient(to bottom right,hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)),var(--ssjyp-blue),hsl(from var(--ssjyp-blue)calc(h + 10)calc(s + 30)calc(l - 10)));box-shadow:-1px 0 2px #00000080,inset 1px 1px 2px hsl(from var(--ssjyp-blue)calc(h - 5)s calc(l + 20)/.2);border-radius:100%;padding:.3em;font-size:.6em;display:block;position:absolute;top:-.1em;left:-.15em;font-family:Phosphor-Fill!important}#pages img,#pages svg{max-width:var(--max-card-width);object-fit:contain;width:auto;height:100%}#footright{color:var(--white);flex-direction:column;grid-column:3;display:flex}#footright .text{background-color:var(--black);justify-content:center;align-items:center;gap:1em;margin:0;padding:1em;line-height:1;display:flex}#footright svg{--size:1.25em;width:var(--size);height:var(--size)}#home{text-transform:uppercase;flex-grow:1;justify-content:center;align-items:center;padding-block:.5rem;font-size:2.75em;display:flex}@media (min-width:70em){#userprofile .cards{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}#userprofile .cards .card{--card-spacing:.6em}#userprofile .cards .card:has(+.card){margin-inline-end:var(--card-spacing)}#userprofile .cards .card+.card{padding-inline-start:var(--card-spacing)}#userprofile .cards .card+.card:before{content:"";border-inline-start:var(--border);height:calc(100% - 1em);position:absolute;top:.5em;left:-.05em}#desc{grid-template-columns:14vw 1fr;display:grid}#desc .title{--desc-spacing:.75em;border-inline-end:var(--border);margin-inline-end:var(--desc-spacing);padding-inline-end:var(--desc-spacing)}}@media (max-width:70em){#userprofile .cards .card+.card:before{content:"";border-block-start:var(--border);width:calc(100% - 1em);position:absolute;top:-.05em;left:.5em}#desc .title{--desc-spacing:.75em;border-block-end:var(--border);margin-block-end:var(--desc-spacing);padding-block-end:var(--desc-spacing)}} \ No newline at end of file