@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
:root {
	--accent: #f80;
	--min-wrapper-width: 1000px;
	--modal-background: #fff;
	--soft-background: #eee;
	--accent-background: #ddd;
	--text: #000;
	--header: #aaa;
	--header-accent: #444;
	--section-bg: rgba(128,128,128,.15);
	--button-bg: #08f;
	--button-hover: #f80;
	--favorite: #8bf;
}
* { margin: 0; padding: 0; direction: ltr; }
body { background: url(bg-1.jpg) repeat-x; font-size: 13px; font-family: 'Fira Sans', sans-serif; overflow-y: scroll; color: var(--text);}
a { text-decoration: none; color: #46a; }
a:hover { color: #22a; }
h1 { font-weight: normal; font-size: 21px; margin-top: 15px; color: var(--header); padding: 0 5px; }
h1 span { color: var(--header-accent); }
h1 sub { font-style: normal; text-transform: capitalize; font-size:80%;vertical-align: baseline;color:#666;}
h2 { font-weight: normal; font-size: 18px; }
input, select { padding: 5px; margin:2px;}
textarea { padding: 5px; }
fieldset { border: none; }
input[type=submit], input[type=button], button { padding: 10px 20px; background: var(--button-bg); color: #fff;
	border: none; transition: background .5s; cursor: pointer; position: relative; overflow: hidden; }
button { padding-left: 40px; }
button s { position: absolute; filter: invert(1); left: 18px; top: 10px ; }
input[type=submit]:hover, input[type=button]:hover, button:hover { background: var(--button-hover); }
button[type=submit] { transition: padding-left .5s; }
button[type=submit]:focus { padding-left: 40px; }
#content button[type=submit]::before { content: ''; display: inline-block; width: 16px; height: 16px; border: 3px solid rgba(0,0,0,.3);
	border-top-color: #fff; border-radius: 50%; position: absolute; margin: -5px; animation: spin 2s linear infinite;
	left: -45px; transition: left .5s; }
#content button[type=submit]:active::before { left: 15px; }
input[type=text][readonly], textarea[readonly] { background: var(--soft-background); color: #888; border: 1px solid #888; }
input[type=submit][readonly], input[type=button][readonly], input[type=image][readonly],
	button[type=submit][disabled] { background: #888 !important; color: fff; cursor:default;}
button[type=submit][disabled] { cursor: not-allowed;}
input[type=submit].inline { padding: 6px 10px; }
#content #thumbs2 form li { display: block; }
label[for] { display: inline; }
.error { color: #f00; }
hr { border:none;border-top: 1px solid rgba(128,128,128,.3);}

#wrapper { margin: 0 auto; max-width: 1920px; min-width: var(--min-wrapper-width); }
header {position: fixed; width: 100%; background-color: rgba(255,255,255,.6); left: 0;
	z-index: 3; backdrop-filter: blur(0px); }
header > div { min-width: var(--min-wrapper-width); max-width: 1920px; margin: 0 auto; }
#header { height: 150px; background: url(header-1.jpg) no-repeat -85px 0; }
header > div > a { position: relative; opacity: 0; left: 30px; }
#header > a { position: relative; top: 110px; left: 30px; }
#header > a img, header > div > a > img { height: 32px; transition: background .5s; }
#header > a img:hover { background: rgba(255,255,255,.3); }
#nav-buttons { padding: 0 6px; max-width: 1920px; margin-right: 170px; white-space: nowrap;
	z-index: 9; float: right; }
#nav-buttons li { display: inline-block; line-height: 30px; color: var(--text); position: relative; }
#nav-buttons a { display: inline-block; padding: 2px; }
#nav-buttons a:hover { background: rgba(255,255,255,.6); }
/*#header li:before { content: "| " }*/
#nav-buttons li:first-child:before, #header li:last-child:before { content: ""; }
#header .notification { display: inline-block; background: rgba(192,0,0,.8); width: 16px; line-height: 16px;
	border-radius: 6px; color: #fff; text-align: center; font-size: 10px; top: 25px; right: -4px; position: absolute;
	font-weight: bold; z-index: 4; }
#header .notification.muted { background: rgba(64,64,64,.6)}
#leaderboard { float: right; right: 0; width: 728px; height: 90px; margin: 5px; margin-top: 45px; clear: right; }
#skyscraper { float: right; width: 160px; height: 600px; margin: 5px; margin-top: 55px; }
#body { padding: 6px 5px; margin-right: 170px; background: url(header-1.jpg) no-repeat -85px -150px; position: relative; }
#search { position: absolute; right: 0; top: 10px; height: 30px; padding: 5px 0; }
#search a img { width: 28px; height: 28px; margin-bottom: -9px; opacity: .6; }
#search a img:hover { opacity: 1; }
#search input { padding: 5px 10px; font-size: 14px; }
#search input[type=text] { border-radius: 15px; border: 1px solid rgba(128,128,128,.5); transition: border .5s;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.1); }
#search input[type=text]:hover { border-color: rgba(128,128,128,1); }
#search button[type=submit] { padding: 7px 13px; font-size: 14px; opacity: .6;
	border-left: 1px solid rgba(128,128,128,.5);
	position: absolute; top: 5px; right: 0px; background: var(--section-bg); border-radius: 0 15px 15px 0; }
#search button[type=submit] s { position: static; filter: none; margin-bottom: -5px; }
#search button[type=submit]:hover { background: rgba(128,128,128,.2); }
#search input[type=reset] { font-size: 14px; opacity: 0; border: none; background: transparent; pointer-events: none;
	position: absolute; top: 5px; right: 40px; transition: opacity .5s; cursor: pointer; }
#search.active input[type=reset] { opacity: .4; pointer-events: all; }
#search input[type=reset]:hover { opacity: .6; }

#search a { font-size: 8pt; margin-right: 5px; }
#search #tagme { position: absolute; right: 45px; top: 15px; pointer-events: all; transition: opacity .5s; }
#search #tagme s { opacity: .4; }
#search #tagme s:hover { opacity: .6; }
#search.active #tagme { opacity: 0; pointer-events: none; }

#tabs { height: 25px; margin-top: -25px; }
#tabs li { display: block; float: left; margin: 0 5px; margin-top: 5px; height: 25px; }
#tabs li.active {  background: var(--soft-background); }
#tabs li a { display: block; line-height: 25px; font-size: 13px; color: #048; padding: 0 10px; transition: all .5s;
	text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff; font-weight: bold; text-transform: uppercase;
}
#tabs li.active a { text-shadow: none; color: #036; }
#tabs li a:hover { text-shadow: none; background: rgba(255,255,255,.6); color: #024; }
#tabs span { font-size: 80%; font-weight: 100; }

footer { clear: both; line-height: 40px;
	padding: 0 5px; color: var(--text); margin: 10px -10px -5px -5px; min-height: 100px; background: var(--section-bg); }
#language-form, #theme-form, #collapse-toggle-wrapper { float: right; margin: 0 2px; }
#collapse-toggle-wrapper input[type=checkbox] { opacity: 0; }
#collapse-toggle-wrapper .toggle span:before { top: 6px; }

#social-buttons { display: inline-block; margin-right: 10px; }
#footer-socials li { display: inline-block; padding: 0; border-bottom: none; }
#footer-socials a { /* background: rgba(128,128,128,.2); */ display: inline-block; padding: 5px 10px 5px 5px; border-radius: 20px;
	max-height: 23px; }
#footer-socials s { position: relative; top: -2px; margin-right: 3px; }
#footer-socials span { position: relative; top: -8px; }

#content { float: left; width: 79.6%; padding-top: 40px; }
#content h3 { font-size: 11pt; font-weight: normal; padding: 1em 5px 0 5px; color: #aaa; }
#content h3 a { font-size: 11pt; font-weight: bold; color: #3B5998; }
#content p { padding: 5px; }

.ac_results { margin-left: 10px; z-index: 9; }
.ac_results ul { border: 1px solid #444; text-align: left; background: var(--modal-background); }
.ac_results li { display: block; padding: .2em; cursor: default; }
.ac_results a { padding: 2px 1em; display: block; padding: .2em; }
.ac_results strong { font-weight: bold; }
.ac_results span { color: #777; }
.ac_results a:hover, .ac_over { background: var(--soft-background); }

#tag-input {  position:relative;}
#tag-input input { width: 100%;border-radius:0 16px 16px 0; border:1px solid #888;}
#tag-input input+button[type=submit] { padding:22px;width:16px;height:16px;background:none;filter:invert(1);
  position:absolute;right:0;top:0;margin: -2px -5px 0 0;opacity:0;transition: opacity 1s;}
#tag-input input+button[type=submit].active { opacity:.6;}
#tag-input input+button[type=submit]:focus { padding-left:20px;}
#tag-input input+button:hover { background:none;}

.autocomplete-suggestions { font-family:Tahoma;background: var(--modal-background); box-shadow: 1px 1px 3px rgba(0,0,0,.4);
	transition: all .3s; border-radius: 5px; max-height: 600px; overflow: hidden; z-index: 99; }
.autocomplete-suggestions li { display: flex; padding: 0; cursor: pointer; white-space: nowrap; padding: 2px 0; position:relative;}
.autocomplete-suggestions li .suggestion { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: baseline;
	line-height:2em;}
.autocomplete-suggestions li .suggestion s { opacity: .9; margin: 5px; position:relative;top:3px;flex-shrink:0;}
.autocomplete-suggestions li b { margin-right: 5px; font-weight: normal; }
.autocomplete-suggestions li em { font-weight: bold; font-style: normal;}
.autocomplete-suggestions li u { text-decoration: none; font-size: 90%; margin: 0 5px 0 auto; opacity:.6;max-width:40%;}
.autocomplete-suggestions li i { font-style: normal; font-size: 90%; margin-left: 5px; }
.autocomplete-suggestions li i em { color: var(--text); }
.autocomplete-suggestions li a.button { width: 12px; padding: 8px; }
.autocomplete-suggestions li a.open-tag { opacity: 0; position: absolute;right:0;margin-bottom:-5px;}
.autocomplete-suggestions li:hover a.open-tag { position:static;right:auto;opacity: 1; }
.autocomplete-suggestions li a:hover, .autocomplete-suggestions li > s:hover { opacity: 1; }
.autocomplete-suggestions li.highlight { background: rgba(128,128,128,.3); }
.autocomplete-suggestions li.highlight s { opacity: 1; }
.autocomplete-suggestions .suggest-del, .autocomplete-suggestions li.exists u { color: #800; }
.autocomplete-suggestions p { padding:3px; font-style: italic; background: var(--section-bg);}
.autocomplete-suggestions.hidden { opacity: 0; pointer-events: none; max-height: 0; }
.autocomplete-thumbnail { position: absolute; z-index:99; cursor:pointer;width:100px;height:100px;border-radius:8px;
	background-size:cover;background-position:center 30%;}
.autocomplete-loading { display: inline-block; position: absolute; z-index: 5; width: 14px; height: 14px; border-radius: 50%;
	border: 3px solid rgba(128,128,128,.5); border-bottom-color: transparent; animation: spin 1s infinite linear; opacity: 0;
	pointer-events: none;}

.autocomplete-username { position:fixed;background:var(--modal-background);z-index:3;opacity:0;transition: opacity 1s;}
html .autocomplete-username ul {margin-left:0;}
html .autocomplete-username li { display:block; margin:0;}
.autocomplete-username li.active,.autocomplete-username li:hover { background: var(--section-bg);cursor:pointer;font-weight:bold;}
.autocomplete-username.active { opacity:1;}

.breadcrumbs > * { position: relative; text-align: center; padding: 2px 10px; margin: 2px 0 2px 0px;
	line-height: 20px; display: inline-block; z-index: 1; transition: all .3s;}
#content .breadcrumbs > * { background: none; }
#content .breadcrumbs > *:first-child { background: #acf; margin-right: 3px; border-radius: 5px 0 0 5px;}
#content .breadcrumbs > *:first-child:before,#content .breadcrumbs > *:first-child:after { left: 3px; border-radius: 5px 0 0 5px;}
.breadcrumbs > *:before { content: '';   position: absolute;   top: 0;left: 0;height:50%;width: 100%;
	background: #acf;   transform: skew(20deg, 0deg); z-index: -1; transition: background .3s;}
.breadcrumbs > *:after { content: ''; position: absolute; left: 0; bottom: 0; height:50%;width: 100%;
	background: #acf; transform: skew(-20deg, 0deg); z-index: -1; transition: background .3s;}
#content .breadcrumbs > *:first-child:hover, .breadcrumbs > *:hover:before, .breadcrumbs > *:hover:after { background: #357; color: #acf;}

.pagination { text-align: center; margin: 20px; clear: left; }
.pagination span { margin: 0 auto; }
.pagination a { padding: 10px; background: var(--button-bg); color: #fff; font-size: 10pt; transition: all .5s; }
.pagination a:hover { background: var(--button-hover); text-decoration: none; }
a[rel=start] { background: #aaa; }

#browse-filters { padding: .5em; border-bottom: 1px solid #ccc; margin: 1em 0; clear: left; }
#browse-filters a, #more-filters a { padding: 5px; transition: background .4s; }
#browse-filters a:hover { background: rgba(0,128,255,.4); }
#browse-filters a.active { border-bottom: 3px solid #369;}

.swatch { width: 5px; height: 5px; display: inline-block; opacity: .4; outline: 1px solid transparent;
	border: 1px solid transparent; position: relative; top: 0px; }
.swatch.active { outline: 1px solid #000; border: 1px solid #fff; }
.swatch:hover { opacity: 1; outline: 1px solid #000; }

a.active { background: rgba(0,128,255,.3);  }
#thumbs { margin: 5px; }
#thumbs li { display: block; height: 262px; clear: left; }
#thumbs li li { height: 75px; padding: 2px; border: 1px solid #e0e0e0; clear: none; }
#thumbs li li a, .smallthumbs a { height: 75px; width: 75px; display: block; background-position: center 20%;
	border-radius: 5px; }
.tags, .tags a { font-size: 9pt; }

.smallthumbs { height: 88px; overflow: hidden; }
#menu .smallthumbs { margin: 0 5px; }
.smallthumbs li { height: 75px; width: 75px; margin: 2px 2px 0 0; border-radius:5px; display:inline-block;
	padding: 2px; background: var(--modal-background); box-shadow:1px 1px 3px rgba(0,0,0.3);}
.smallthumbs .active { box-shadow:none;}
.smallthumbs .active a { opacity: 1; }
#content .smallthumbs li:hover, #menu .smallthumbs li:hover { position:relative;top:-1px;left:-1px;}

/* carousel */
.carousel { position: relative; width:100%;}
.carousel ul { overflow: hidden; white-space: nowrap; padding: 0 0px;}
.carousel ul::-webkit-scrollbar {display: none }
.carousel::after { background: linear-gradient(to left, #eee, transparent); right: 0px; left: auto; top: 0px; z-index: 2; }
.carousel li { display: inline-block; background: var(--section-bg); margin: 3px; color: #fff; padding:3px; white-space: normal;
	overflow: hidden; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0,0,0,.3); text-align:center;min-width:60px;max-width:100px;
	transition:background .4s;position:relative;}
.carousel.thumbs li { height: 160px; }
.carousel li .loaded { opacity:1; }
.carousel li:hover .thumb { opacity:.4;}
.carousel a s { position:relative;top:3px;}
.carousel li:hover, .carousel .more a:hover { background: rgba(128,128,128,.3); }
.carousel a { color: var(--text); }
.carousel p { max-height: 30px; overflow:hidden;}
.carousel li i { position:absolute;left:50%;top:60px; display:block; transform:translateX(-50%); font-size:24pt;text-shadow:1px 1px 3px #000;
  border-radius:50%;text-align:center;font-style:normal; pointer-events:none;opacity:0; transition: opacity .5s;}
.carousel li:hover i { opacity:1;}
.carousel div { height: 120px; width: 100%; background-size:cover; background-position: center 0; border-radius: 8px;
	opacity:0; transition:all 1s;}
.carousel .more { background: none; box-shadow: none; }
.carousel .more a { background: var(--section-bg); display:inline-block;width:60px;height:60px;border-radius:50%;position:relative;
	top:50px;box-shadow:1px 1px 3px rgba(0,0,0,.3);}
.carousel .more a s { position:relative;top:15px;opacity:.6;}

#show-all-button-container { text-align:center;position:relative;}
#show-all-button-container:before, #show-all-button-container:after { content: '';width:calc(50% - 70px);position:absolute;
	border-top:1px solid #ddd;left: 0;top:50%;}
#show-all-button-container:after { left: auto; right:0;}
#show-all-children { display:inline-block; background: var(--soft-background); padding: 5px 10px; border-radius: 10px;
	transition: background .2s;z-index:1;position:relative;}
#show-all-children:hover { background: #ddd; }

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); }
}

@keyframes gradientProgression {
    0% { background-position: 0px 1000px }
    100% { background-position: 0px -200px }
}

#thumbs2 { margin-top: 1em; text-align: center; }
#thumbs2.small-thumbs { display: flex; flex-wrap: wrap; justify-content: space-evenly; }
#thumbs2.small-thumbs li { display:block; width: 260px; height: 280px; text-align: center;
	transition: transform .2s; position: relative;flex:1;padding:10px;}
#thumbs2.small-thumbs.force-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 5px;  }
#thumbs2 li { transition: transform .3s; }
#thumbs2 a img, #thumbs3 a img { position: relative; border-radius: 5px; }
#thumbs2 a img { border-radius: 6px; border: 4px solid #fff; }
#thumbs3 a img { padding: 0; background: none; }
/* fav button */
#thumbs2 a.fav, a.fav-button, #thumbs3 a.fav { display: block; position: absolute; bottom: -5px; left: -5px; font-size: 90%; width: 40px;
	height: 40px; line-height: 40px; cursor: pointer; color: #fff; transition: opacity .5s; opacity: 0; border-radius: 50%; z-index: 2;
	text-align: center; }

#thumbs2 a.previous, #thumbs3 a.previous, #thumbs2 a.next, #thumbs3 a.next { position: absolute; top: 50%; right: 10px; padding: 5px; border-radius: 50%;
	background: rgba(255,255,255,.5); z-index: 1; cursor:pointer; opacity:0;transition: opacity .4s;box-shadow: 1px 1px 3px rgba(0,0,0,.6);}
#thumbs2 a.previous, #thumbs3 a.previous { right: auto; left: 10px; }
#thumbs2 a.previous s, #thumbs3 a.previous s { transform: rotate(180deg);}
#thumbs2 .child-counter, #thumbs3 .child-counter { position: absolute;bottom:10px;left:50%;margin-left:-20px;width:40px;background:rgba(0,0,0,.7);color:#fff;
	padding: 5px;border-radius:5px;font-style:normal;}
#thumbs2 li:hover a.previous,#thumbs3 li a.previous, #thumbs2 li:hover a.next,#thumbs3 li a.next {opacity:1;}
#thumbs3 a.fav { position: relative; left: 50%; margin-top: -25px; margin-left: -20px; opacity: 1; }
#thumbs2 a.fav s, #thumbs3 a.fav s { position: absolute; top: 0; background: url(https://s1.zerochan.net/fav4.png) no-repeat center / cover;
	left: 0; z-index: 1; width: 40px; height: 40px; }
#thumbs2 a.fav b, #thumbs3 a.fav b { z-index: 3; position: relative;}
#thumbs3 a.fav:hover s { opacity: 1; }
#thumbs2 .is-fav a.fav { opacity: 1;/* filter: hue-rotate(0deg) saturate(160%) brightness(200%); transform: scale(1.2); color:#404;*/}
#thumbs2.gallery-fav-indicators a.fav { opacity: 1;}
#thumbs2 a.fav:hover, #thumbs3 a.fav:hover { animation: pulse 1s infinite; filter: none; }
#thumbs2 a.fav:focus, #thumbs3 a.fav:focus { animation: halo 1s; }
/* source/tags/etc status indicators */
#thumbs2 span { position: absolute; width: 12px; top: 5px; right: 5px; opacity: .8; padding: 5px 8px 5px 2px;
	border-radius: 15px; text-align: center; transition: background .5s; color: #fff; }
#thumbs2 li:hover span { background: rgba(0,0,0,.9); }
#thumbs2 span > i { opacity: 0; transition: opacity .5s; font-style: normal; position: relative; left: 3px;}
#thumbs2 li:hover span > i { opacity: 1; }
#thumbs2 span s { opacity: 0; }
#thumbs2 .insufficient { opacity: 1; color: var(--text); filter: invert(13%) sepia(49%) saturate(7325%) hue-rotate(2deg) brightness(100%) contrast(116%); }
#thumbs2 .link { }
#thumbs2 .no-source, #thumbs3 .no-source { opacity: 1; filter: invert(19%) sepia(91%) saturate(7287%) hue-rotate(358deg) brightness(111%) contrast(113%); }
#thumbs2 .has-source, #thumbs3 .has-source { filter: invert(47%) sepia(80%) saturate(1067%) hue-rotate(82deg) brightness(119%) contrast(126%); }
/*
#thumbs2 .multiple img { position:absolute;top:0px;transition:all 1s;z-index:2;}
#thumbs2 .multiple .child-image { opacity:0;}
*/
#thumbs2 li:hover a.fav, #thumbs3 li:hover a.fav, #thumbs2 li:hover span > * { opacity: 1; }
#thumbs2.medium-thumbs a.thumb, #thumbs3 a.thumb { display: block; }
#thumbs2.small-thumbs a.thumb { display: inline-block; line-height: 0; }

#thumbs2 .blacklist, #thumbs3 .blacklist { pointer-events: none; }
#thumbs2 .blacklist .thumb, #thumbs3 .blacklist .thumb { overflow: hidden; }
#thumbs2 .blacklist img, #thumbs3 .blacklist img { filter: blur(15px); }
#thumbs2 .blacklist p { display: none; }
.thumbnail-notice { position: absolute; top: 50%; left: 0; color: #fff; width: 100%; pointer-events: none;
		font-size: 11pt; font-weight: normal; text-shadow: 1px 1px 2px #000;
		text-align: center; white-space: nowrap; }

#thumbs2 p { font-size: 8pt; color: #444; background: var(--soft-background); display: inline-block; padding: 5px; transition: all .5s; border-radius: 5px;
position: absolute; bottom: 0px; right: 0px; transform: rotate(-5deg); color: #888; /*box-shadow: 1px 1px 2px rgba(0,0,0,.5); */}
#thumbs2 p:hover { background: #def; transform: scale(1.2) rotate(-5deg); }
#thumbs2 p:hover a { color: #048; }
#thumbs2.gallery-labels-indicators li p { opacity: 0 !important; /* fuck*/ }
/*#thumbs2 li:nth-child(odd) a img:hover { transform: scale(1.02) rotate(-2deg); }*/
#thumbs2 input[type=checkbox], #thumbs3 input[type=checkbox], #thumbs4 input[type=checkbox] { display: none; }
#thumbs2 input[type=checkbox]+a::after, #thumbs3 input[type=checkbox]+a::after { content: '?'; right: 0px; top: 0px;
	position: absolute; z-index: 4; color: var(--accent); border: 3px solid var(--accent); opacity: 0; width: 20px;
	line-height: 20px; border-radius: 10px; transition: all .5s; text-align: center; background: var(--modal-background);
	font-size:300%;font-weight:bold;}
#thumbs2.medium-thumbs input[type=checkbox]+a::after { right: -7px; }
#thumbs3 input[type=checkbox]+a::after { right: 0px;}
#thumbs2 input[type=checkbox]:checked+a::after, #thumbs3 input[type=checkbox]:checked+a::after { opacity: 1; }
#thumbs2 input[type=checkbox]:checked+a img,
#thumbs3 input[type=checkbox]:checked+a img { border-color: var(--accent); border-style: solid; opacity: 1; border-top-right-radius: 10px;}
#thumbs2 a { color: #048; position: relative; border-radius: 6px; }
#thumbs2 a s { opacity: 1; } /* why less than 1? */
#thumbs2 li:hover p { opacity: 1; }
#thumbs2 li:hover a { font-style: normal; text-decoration: none; }
#thumbs2.medium-thumbs, #thumbs3 { column-width: 220px; }
#thumbs2.medium-thumbs li { display: block; /* width: 248px; */ break-inside: avoid; position: relative; margin: 20px 5px; }
#thumbs2.medium-thumbs li:first-child { margin-top: 0; }
#thumbs3 li, #thumbs2 li img  { box-shadow: 2px 2px 4px rgba(0,0,0,.1); }
#thumbs3 li, #thumbs3 img, #thumbs2 li img { transition: all .5s; }
#thumbs3 li { border-radius:15px; display: block; padding-bottom: 10px; margin-bottom: 15px; background: var(--section-bg);
	break-inside: avoid; }
#thumbs3 li:hover { background: rgba(128,128,128,.3);}
/* #thumbs3 li a:first-child, #thumbs3 li input+a { display: block; } */
#thumbs3 li img { box-sizing: border-box; }
#thumbs3 li .thumb, #thumbs3 li img {border-radius:15px 15px 0 0;}
#thumbs3 li img, #thumbs2.medium-thumbs li img { width: 100%; height: auto; display: block; }
#thumbs3 li:hover, #thumbs2.medium-thumbs li img:hover { box-shadow: 2px 2px 4px rgba(0,0,0,.3); }
#thumbs2.medium-thumbs input[type=checkbox] { display: none; position: absolute; left: 10px; top: 10px; }
#thumbs3 p .highlight { font-size: 130%; }
#thumbs3 .user { position: absolute; top: 15px; left: 8px; background: rgba(215,215,215,.8); border-radius: 15px;opacity:0;
	transition:all .3s;}
#thumbs3 li:hover .user { opacity:1;}
#thumbs3 .user img { border-radius: 50%; opacity: 1; width: 35px; height: 35px; display: inline-block;
	margin: -12px 5px -13px -5px; }
#thumbs3 .user:hover { transform:scale(1.1);}

/* fade in load */
#thumbs2 a.thumb, #thumbs3 a.thumb { animation: scrollBackground 2s infinite linear;
	background-size: 2000px 2000px; background-position: 0 0; }
#thumbs2 img, #thumbs3 img  { opacity: 0; transition: opacity 1s; }
#thumbs2 .loaded, #thumbs3 .loaded { opacity: 1; }

@keyframes scrollBackground {
  0% { background-position: top left; }
  100% { background-position: bottom right;  }
}

#thumbs4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
#thumbs4 li { display: block; transition: transform .5s; position: relative;box-shadow:3px 3px 5px rgba(0,0,0,.4);
	background:rgba(128,128,128,.2);border-radius: 8px; }
#thumbs4 li a.thumb { width: auto; height: 360px; display: block; background-size: auto 480px; background-position: center 30%;
	position: relative; border-radius: 8px; transition: background .4s; }
#thumbs4 a.thumb:hover { background-size: auto 520px; }
#thumbs4 p { transition: all .3s; position: absolute; background: var(--soft-background); z-index:1;width:calc(100% - 10px);}
#thumbs4 li:hover p { opacity: 1;}
#thumbs4 .uploader, #thumbs4 .fav-wrapper, #thumbs4 .tag { position: absolute;background:rgba(0,0,0,.5);padding:5px;
	line-height:20px;border-radius:5px;height:20px;}
#thumbs4 a {color:#fff;}
#thumbs4 .uploader { top: 5px; left: 5px; opacity:0; transition: opacity .3s;}
#thumbs4 .upload { filter:invert(1);margin-bottom:-4px;}
#thumbs4 li:hover .uploader { opacity: 1;}
#thumbs4 .fav-wrapper { bottom: 5px; left: 5px; color: #fff; }
#thumbs4 .unsubscribe { filter: brightness(500%); }
#thumbs4 .tag { bottom: 5px; right: 5px; }
#thumbs4 s { opacity: .6; margin-bottom: -6px; }

#content #tags li { display: block; width: 49%; float: left; padding: 10px 0 0 .5%; }
#content #tags li li { width: 75px; padding: 2px; }

#massmod { margin-bottom: 10px; }
#mass-tools { margin-top: 20px;display:flex;justify-content:space-between;background: var(--soft-background); }
#mass-tools > * { margin: 5px;padding:5px;}
#preview-list { flex-grow: 1;background:rgba(128,128,128,.2);}
#mass-tools input[name=delete] { color: #f88; background: #400; transition: all .5s; }
#mass-tools input[name=delete]:hover { background: #800; color: #fcc; }
#fixed-toolbar-wrapper { position:relative; padding-right:40px; }
#fixed-toolbar-wrapper input[type=checkbox] { opacity:0;}
#mass-actions { display: flex; flex-direction: column}
#mass-tools.fixed { position: fixed; bottom: 0; left: 0; right: 0;z-index:9;}

#suggestions { padding: 10px; line-height: 28px; }
#suggestions > span { padding: 8px; border-radius: 20px; white-space: nowrap; box-shadow: 1px 1px 3px rgba(0,0,0,.3); }
#suggestions a { font-weight: bold; font-style: italic; }
#suggestions a img { width: 22px; position: relative; top: 8px; margin-right: 5px;  }
#suggestions a span { font-weight: normal; font-style: normal; }

#children { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
#children > li { display: block; height: 100px; transition: background 1s; border: 1px solid transparent;
	background: var(--section-bg);border-radius:8px;overflow:hidden;}
#children > li:hover { background: rgba(128,128,128,.3);}
#children .thumb { width: 75px; height: 100px; float: left; background-size: 150px 150px; transition: all .3s;
	margin: 0 10px 0 5px; background-image: url(75/default.png); background-position: center 20%; border-radius:8px;
	background-size:auto 150px;background-repeat:no-repeat;}
#children .thumb { background-color: var(--section-bg); }
#children li:hover .thumb { background-size: auto 200px; }
#children li s.subscribe { position:relative;top:4px;}
#children em { padding-top: 5px; display: block; font-weight: bold; font-style: normal; font-size: 120%;margin-bottom:2px;}
#children b { font-size:120%; color:#777;margin-bottom:10px;display:block;}
#children li ul { margin-top:10px;}
#children li li { color: #888; padding:2px;display:block;}

#children-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;}
#children-grid li { display: block; overflow: hidden;position:relative;box-shadow:3px 3px 5px rgba(0,0,0,.2);
	border-radius:8px;}
#children-grid div { border-radius:8px; background-position: center 855px; transition:background .2s;}
#children-grid li:hover div { background-position: center 700px; }
#children-grid li p { padding: 10px; padding-top: 5px;}
#children-grid s { position:absolute; bottom: 72px; left: 5px;opacity:1;}
#children-grid s.subscribe { bottom: 50px;right: 5px;left:auto;}
#children-grid .thumb {border-radius:10px 10px 0 0; height: 240px; display: inline-block; width: 100%;
	background-size: auto 240px; background-position: center 10%; transition: background .3s; background-repeat: no-repeat;}
#children-grid li:hover .thumb { background-size: auto 360px; }
#children-grid .thumb+p { height: 50px; }

.tree { }
.tree li { margin-left: 50px; display: block; position: relative; }
.tree li a:hover { background: var(--section-bg);}
/*
.tree li::before { content: ''; position: absolute; top: calc(-100% + 20px); left: -30px; border: 1px solid #000; border-width: 0 0 1px 1px;
	height: 100%; width: 40px; pointer-events: none; }
*/
.tree li em { position: absolute; left: -35px; border: 1px solid #777; border-width: 0 0 1px 1px;
	height: 100%; width: 40px; pointer-events: none; border-radius: 0 0 0 10px;}
.tree li a { display: inline-flex; border-radius: 20px; padding-right: 15px; }
.tree li b { display: inline-block; width: 35px; height: 35px; background-size: cover; border-radius: 50%;
	position: relative; z-index: 1; background-color: #888; }
.tree li span { padding: 5px; line-height: 25px; }
.tree li i { padding: 5px; margin: 5px; font-style: normal; background-color: rgba(128,128,128,.2);
	color: var(--text); border-radius:  5px; }
.tree li s.subscribe { position:relative;top:3px;}

#menu-collapsed { width: 1%; float: right; border-left: 1px solid #e0e0e0; }
#menu-collapsed a { display: block; height: 50px; }
#menu { width: 20%; float: right; padding-top: 40px; margin: 10px 0; font-size: 9pt; }
@media (max-width: 1800px) { #menu { width: 25%; } #content { width: 74.6%; } }
@media (max-width: 1400px) { #menu { width: 30%; } #content { width: 69.6%; } }
#menu h2 { margin: 15px 5px 0 5px; border-bottom: 1px dotted #def; text-align: right; }
#menu h2, #menu h2 * { font: 12pt Trebuchet MS; color: #439; }
#menu h2 a:hover { color: var(--button-bg); }
#menu h2 span { color: #777; }
#menu ul { margin: 0 5px; }
#menu form li { display: block; }
/*#menu li { padding: 6px; display: block; }*/
#menu .bb li { border-bottom: none; display: list-item; margin-left: 10px; }
/* #menu li a { font-size: 10pt; } */
#menu form { background: var(--section-bg); padding: 5px; margin: 5px; border-radius: 8px; }
#menu label { display: block; font-weight: bold; margin-top: 1em; }
#menu label[for] { display: inline; font-weight: normal; }
#menu input[type="text"], #menu textarea { width: calc(100% - 12px); padding: 4px; margin: 3px 0; }
#menu p { margin: 1em 5px; }
#menu #rectangle { margin: 10px 5px; }
#menu .smallthumbs li { border-radius: 7px; }

/* icon css sprite */
s { background-image: url(https://s1.zerochan.net/css_sprites.png?1); display: inline-block;
	width: 50px; height: 50px; text-decoration: none; }
s.tiny { background-size: calc(12px * 10) calc(12px * 10); width: 12px; height: 12px; }
s.small { background-size: calc(16px * 10) calc(16px * 10); width: 16px; height: 16px; }
s.medium { background-size: calc(22px * 10) calc(22px * 10); width: 22px; height: 22px; }
s.large { background-size: calc(32px * 10) calc(32px * 10); width: 32px; height: 32px; }

s.binoculars { background-position: -0% -0%; }
s.block { background-position: -100% -0%; }
s.copy { background-position: -200% -0%; }
s.discord { background-position: -300% -0%; }
s.fav { background-position: -400% -0%; }
s.instagram { background-position: -500% -0%; }
s.paste { background-position: -600% -0%; }
s.safe-rating { background-position: -700% -0%; }
s.upload { background-position: -800% -0%; }
s.outfit { background-position: -900% -0%; }

s.group { background-position: -0% -100%; }
s.profile { background-position: -100% -100%; }
s.darkmode { background-position: -200% -100%; }
s.secure { background-position: -300% -100%; }
s.game { background-position: -400% -100%; }
s.left { background-position: -500% -100%; }
s.patreon { background-position: -600% -100%; }
s.search { background-position: -700% -100%; }
s.comment { background-position: -800% -100%; }
s.dice { background-position: -900% -100%; }

s.trash { background-position: -0% -200%; }
s.deviantart { background-position: -100% -200%; }
s.goback { background-position: -200% -200%; }
s.unsafe-rating, s.ecchi { background-position: -300% -200%; }
s.google { background-position: -400% -200%; }
s.link { background-position: -500% -200%; }
s.notification, s.notifications { background-position: -600% -200%; }
s.series { background-position: -700% -200%; }
s.weibo { background-position: -800% -200%; }
s.download { background-position: -900% -200%; }

s.edit { background-position: -0% -300%; }
s.eyes { background-position: -100% -300%; }
s.subscribe { background-position: -200% -300%; }
s.unsubscribe { background-position: -300% -300%; }
s.character { background-position: -400% -300%; }
s.lofter { background-position: -500% -300%; }
s.patreon3 { background-position: -600% -300%; }
s.settings { background-position: -700% -300%; }
s.youtube, s.vtuber { background-position: -800% -300%; }
s.logout { background-position: -900% -300%; }

s.gumroad { background-position: -0% -400%; }
s.source, s.source-copyright { background-position: -100% -400%; }
s.hair { background-position: -200% -400%; }
s.history { background-position: -300% -400%; }
s.hierarchy { background-position: -400% -400%; }
s.login { background-position: -500% -400%; }
s.mobile { background-position: -600% -400%; }
s.register { background-position: -700% -400%; }
s.report { background-position: -800% -400%; }
s.desktop { background-position: -900% -400%; }

s.admin { background-position: -0% -500%; }
s.mangaka, s.media { background-position: -100% -500%; }
s.meta { background-position: -200% -500%; }
s.movie { background-position: -300% -500%; }
s.multiple { background-position: -400% -500%; }
s.mal { background-position: -500% -500%; }
s.pinterest { background-position: -600% -500%; }
s.forum { background-position: -700% -500%; }
s.zerochan { background-position: -800% -500%; }
s.filter { background-position: -900% -500%; }

s.pixiv { background-position: -0% -600%; }
s.share { background-position: -100% -600%; }
s.new-window { background-position: -200% -600%; }
s.message { background-position: -300% -600%; }
s.star { background-position: -400% -600%; }
s.reddit { background-position: -500% -600%; }
s.right { background-position: -600% -600%; }
s.star-empty { background-position: -700% -600%; }
s.reddit2 { background-position: -800% -600%; }
s.swipe { background-position: -900% -600%; }

s.studio { background-position: -0% -700%; }
s.theme { background-position: -100% -700%; }
s.update { background-position: -200% -700%; }
s.tumblr { background-position: -300% -700%; }
s.x-com { background-position: -400% -700%; }
s.add { background-position: -500% -700%; }
s.select { background-position: -600% -700%; }
s.reply { background-position: -700% -700%; }
s.facebook { background-position: -800% -700%; }
s.ai { background-position: -900% -700%; }

s.bluesky { background-position: -0% -800%; }
s.check { background-position: -100% -800%; }
s.quote { background-position: -200% -800%; }
s.twitter { background-position: -300% -800%; }

@keyframes halo {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0, 0.4); }
  100% { box-shadow: 0 0 0 30px rgba(0,0,0, 0); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader { display: inline-block; border: 3px solid rgba(128,128,128,.3) !important; border-top: 3px solid #fff !important;
	border-radius: 50%; width: 12px; height: 12px; margin: 1px; animation: spin 2s linear infinite; }

p a.subscribe {  background: #048;display: flex;padding: 3px;cursor: pointer;transition: all .3s;
	vertical-align: middle; white-space: nowrap;overflow: hidden;position: relative; }
p a.subscribe:hover { background: var(--button-bg); animation: halo .7s; }
p a.subscribe s { filter: invert(1); opacity: .8; }
p a.subscribe b, .subscribe i { flex: 1; line-height: 32px; text-align: center; font-weight: bold; color: #fff;
	transition: opacity 1s; }
p a.subscribe i { flex: none; width: 40px; border-left: 1px solid rgba(0,0,0,.3); font-style: normal; }
p a.subscribe:hover b { }

.loading span { width: 4px !important; height: 4px; }
.loading b { opacity: 0; }

#description { max-height: 600px; margin:5px; overflow: hidden; position: relative; clear: left; background: var(--section-bg);border-radius:8px;
	transition: max-height .8s;}
#description p { margin: 10px;line-height: 1.4em; }
#description .fade { position: absolute; bottom: 0; width: 100%; height: 120px;
	z-index: 9; cursor:pointer;}
#description.full { max-height: 1999px;}
#description.full .fade { opacity: 0;pointer-events: none;}
#description-rollout-button { position:absolute;bottom:0px;z-index:11;margin-left: 48%; cursor: pointer;
	opacity: .5; transition: all .5s; padding:10px;}
#description-rollout-button s { transform: rotate(90deg); }
#description.full+#description-rollout-button { bottom: -30px;}
#description.full+#description-rollout-button s { transform: rotate(-90deg); }

.tag-admin-notice { background: #f8f8f8; padding: 10px; text-align: center; line-height: 1.5em; border-radius:8px;}
.tag-admin-notice a { white-space: nowrap; }

/* Tags */
.tags li { position: relative; font-size: 9pt; color: #444; display: inline-block; padding: 0 10px 4px 0px; margin: 3px;
	border-radius: 15px; transition: all .1s; border: 1px solid transparent; }
.tags li s { margin: -1px 0 -2px 8px; position: relative; top: 5px; /*border-radius: 13px;*/ }
.tags li u { width: 25px; height: 25px; background-size: cover; background-position: center 30%; display: inline-block;
	border-radius:50%;margin:0px 5px -8px -5px;}
.tags li.expired { opacity: 0; }
.tags li.fav { /*box-shadow: 1px 1px 3px rgba(0,0,0,.6); */ border: 1px solid rgba(128,128,128,.5); }
.tags li.primary-tag {/* no style at the moment, look at the breadcrumbs lol */ }
.tags li.auto { }
.tags li.editable:hover { margin-right: -11px; padding-right: 24px; z-index: 1; }
.tags li.editable.haspri:hover { margin-left: -11px; padding-left: 14px; }
.del-link, .pri-link { display: inline-block; opacity: 0; pointer-events: none; transition: all .4s; z-index: 1;
	position: absolute; top: 4px; transform:scale(1.3); }
.pri-link { left: 8px; cursor: pointer; }
.del-link { right: 8px; cursor: pointer; }
.tags li:hover .del-link, li:hover .pri-link { opacity: .8; pointer-events: all; }
.tags li:hover .pri-link:hover, li:hover .del-link:hover { opacity: 1; transform:scale(1.6); }

#tags .delete-highlight { border: 1px solid rgba(255,0,0,.6); }
#tags .filter { font-weight: bold; border: 1px solid rgba(0,0,0,.2); }
#tags .unhighlight { opacity: .6; }

/* new tag plus button */
#menu #user-suggest-tag { cursor: pointer; display: inline-flex;}
#menu #user-suggest-tag form, #user-suggest-tag form * { display: inline; background: none; border: none; padding: 0; margin: 0; }
#user-suggest-tag form { position: absolute; }
#user-suggest-tag input[type=text] { width: 0px; opacity: 0; transition: all .5s; margin: 0 10px -4px 0; }
#user-suggest-tag input[type=text].active { width: 300px; opacity: 1; }

#tag-discussions > ul > li { display: block; margin-top: 20px; background: rgba(128,128,128,.05); border-radius: 10px;
	padding: 10px 0; }
#menu #tag-discussions ul li { border-bottom: none; }
#tag-discussions .comment-wrapper, #tag-discussions li > form { display: block; margin: 0 10px 10px 10px; margin-left: 60px; position: relative;
	background: var(--section-bg); padding: 10px; border-radius: 10px; box-shadow: 1px 1px 1px rgba(0,0,0,.1); }
#tag-discussions .body { transition: all .4s; line-height: 1.6em; }
#tag-discussions .comment-wrapper form { position: absolute; opacity: 0; pointer-events: none; transition: all .4s; }
#tag-discussions textarea { width: calc(100% - 40px); height: calc(100% - 35px);
	min-height: 30px; }
#tag-discussions li.edit .comment-wrapper form { opacity: 1; pointer-events: all; position: static; }
#tag-discussions li.edit .body { opacity: 0; pointer-events: none; position: absolute; }
#tag-discussions .cancel { margin: 5px; cursor: pointer; opacity: .5;font-size: 150%; }
#tag-discussions .cancel:hover { opacity: 1; }
#tag-discussions a.tag { display: block; font-size: 120%; margin: 10px; font-weight: bold; }
#tag-discussions li li { position: relative; display:block; }
#tag-discussions .reply-to-label { position: absolute; right: 0; top: -40px; width: calc(100% - 120px); }
#tag-discussions li form { display: flex; }
#tag-discussions li li.reply { margin-top: 50px; }
#tag-discussions li .avatar { float: left; }
#tag-discussions li .username { margin-left: 10px; font-weight: bold; }
#tag-discussions input[type=text], #tag-discussions textarea { width: calc(100% - 120px); }
#tag-discussions input[type=submit] { }
#tag-discussions .reply-to-label { background: var(--section-bg); border-radius: 10px; }

.new-tag, .ambiguous-tag { position: fixed; z-index: 101; top: 40%; right: 30%; width: 400px; background: var(--modal-background); border-radius: 10px;
	box-shadow: 2px 2px 5px #000; padding: 5px; margin: -200px; }
.new-tag p, .ambiguous-tag p { padding: 10px; }
.new-tag a, .ambiguous-tag a { display: block; padding: 10px; cursor: pointer; }
.new-tag a:hover, .ambiguous-tag a:hover { background: rgba(128,128,128,.3); }
.newtag[data-index=1], .ambiguous-tag[data-index=1] { top: 41%; right: 30.5%; }
.newtag[data-index=2], .ambiguous-tag[data-index=2] { top: 42%; right: 31%; }
.newtag[data-index=3], .ambiguous-tag[data-index=3] { top: 43%; right: 31.5%; }
.newtag[data-index=4], .ambiguous-tag[data-index=4] { top: 44%; right: 32%; }

.new-tag-uploader b { font-size: 140%; }
.new-tag-uploader a { display: inline-block; padding: 5px; cursor: pointer; }
.new-tag-uploader a:hover { background: rgba(128,128,128,.2); }

li.mangaka, .breadcrumbs .mangaka:before, .breadcrumbs .mangaka:after  { background: #faa; } .mangaka, .mangaka a { color: #800; }
li.studio, .breadcrumbs .studio:before, .breadcrumbs .studio:after  { background: #fbb; } .studio,.studio a { color: #800; }
li.series, .breadcrumbs .series:before, .breadcrumbs .series:after { background: #def; } .series,.series a { color: #46a; }
li.movie, .breadcrumbs .movie:before, .breadcrumbs .movie:after { background: #def; }
li.game, .breadcrumbs .game:before, .breadcrumbs .game:after { background: #eaccff; } .game,.game a { color: #80f; }
li.character, li.group, .breadcrumbs .character:before, .breadcrumbs .character:after {
	background: #dfb; } .character,.character a, .group,.group a { color: #480; }
li.transformation { background: #ff8; }
li.theme, .breadcrumbs .theme:before, .breadcrumbs .theme:after { background: #ddd; } .theme,.theme a { color: #555; }
li.meta, .breadcrumbs .meta:before, .breadcrumbs .meta:after { background: var(--soft-background); } .meta,.meta a { color: #444; }
li.artbook { background: #cceaea; } .artbook,.artbook a { color: #066; }
li.vtuber, .breadcrumbs .vtuber:before, .breadcrumbs .vtuber:after { background: #daccff; } .vtuber,.vtuber a { color: #959; }
li.ecchi { background: #ecd; } .ecchi,.ecchi a { color: #806; }
li.source, .breadcrumbs .source:before, .breadcrumbs .source:after { background: #aee; } .source,.source a { color: #066; }
li.media, .breadcrumbs .media:before, .breadcrumbs .media:after { background: #fca; } .media,.media a { color: #630; }
li.source-copyright, .breadcrumbs .source-copyright:before, .breadcrumbs .source-copyright:after { background: #ade; } .source-copyright,.source-copyright a { color: #056; }
li.outfit, .breadcrumbs .outfit:before, .breadcrumbs .outfit:after { background: #eec; } .outfit,.outfit a { color: #664; }

li.mangaka:hover, .breadcrumbs .mangaka:hover:before, .breadcrumbs .mangaka:hover:after { background: #f8a; }
li.studio:hover, .breadcrumbs .studio:hover:before, .breadcrumbs .studio:hover:after  { background: #faa; }
li.series:hover, .breadcrumbs .series:hover:before, .breadcrumbs .series:hover:after { background: #acf; }
li.movie:hover, .breadcrumbs .movie:hover:before, .breadcrumbs .movie:hover:after  { background: #acf; }
li.game:hover, .breadcrumbs .game:hover:before, .breadcrumbs .game:hover:after  { background: #caf; } .game:hover a { color: #416; }
li.character:hover, li.group:hover, .breadcrumbs .character:hover:before, .breadcrumbs .character:hover:after { background: #be8; }
li.meta:hover, .breadcrumbs .meta:hover:before, .breadcrumbs .meta:hover:after  { background: #dddde8; }
li.theme:hover, .breadcrumbs .theme:hover:before, .breadcrumbs .theme:hover:after  { background: #ddd; } .theme:hover a { color: var(--text); }
li.artbook:hover { background: #b0dada; }
li.vtuber:hover, .breadcrumbs .vtuber:hover:before, .breadcrumbs .vtuber:hover:after  { background: #bfaeee; } .vtuber:hover a { color: #626; }
li.ecchi:hover { background: #fad; }
li.source:hover, .breadcrumbs .source:hover:before, .breadcrumbs .source:hover:after,
li.media:hover, .breadcrumbs .media:hover:before, .breadcrumbs .media:hover:after { background: #8dd; }
li.source-copyright:hover, .breadcrumbs .source-copyright:hover:before, .breadcrumbs .source-copyright:hover:after { background: #8cd; }
li.outfit:hover, .breadcrumbs .outfit:hover:before, .breadcrumbs .outfit:hover:after  { background: #e0e0ba; }


.mangaka s, .studio s { filter: invert(13%) sepia(49%) saturate(5325%) hue-rotate(2deg) brightness(131%) contrast(66%); }
.series s { filter: invert(28%) sepia(92%) saturate(681%) hue-rotate(175deg) brightness(104%) contrast(90%); }
.movie s { filter: invert(28%) sepia(92%) saturate(681%) hue-rotate(175deg) brightness(104%) contrast(90%); }
.game s { filter: invert(27%) sepia(100%) saturate(1487%) hue-rotate(239deg) brightness(83%) contrast(93%); }
.character s, .group s { filter: invert(51%) sepia(94%) saturate(5432%) hue-rotate(66deg) brightness(99%) contrast(101%); }
.theme s { filter: invert(59%) sepia(0%) saturate(0%) hue-rotate(135deg) brightness(92%) contrast(84%); }
.meta s { opacity: .3; }
.artbook s { filter: invert(75%) sepia(18%) saturate(747%) hue-rotate(131deg) brightness(60%) contrast(85%); }
.vtuber s { filter: invert(49%) sepia(12%) saturate(1206%) hue-rotate(236deg) brightness(92%) contrast(87%); }
.ecchi s { filter: invert(59%) sepia(63%) saturate(1144%) hue-rotate(293deg) brightness(88%) contrast(80%);}
.source s { filter: invert(80%) sepia(17%) saturate(1526%) hue-rotate(125deg) brightness(53%) contrast(80%); }
.source-copyright s { filter: invert(80%) sepia(17%) saturate(1526%) hue-rotate(145deg) brightness(53%) contrast(80%); }
.outfit s { filter: invert(62%) sepia(19%) saturate(802%) hue-rotate(21deg) brightness(81%) contrast(95%); }


.browsing-options { display: inline-block; padding: 5px 10px; border-radius: 15px; background: rgba(128,128,128,.2); }
.browsing-options:hover { background: rgba(128,128,128,.4); }
#search-within { display: none; clear: both; background: var(--section-bg); padding: 10px;  }

#posts { margin: 1em auto 5em auto; max-width: 800px; }
#posts > ul > li { margin-top: 2em; clear: left; display: block; }
#posts .post-avatar { float: left; width: 100px; text-align: center; }
#posts .post-body { margin-left: 100px; }
.bb { line-height:  1.6em; }

#posts li div:first-child span { color: #777; font-size: 11px; }
#posts .edit-post { display: none; margin: 5px 0; }
#posts .edit-post textarea { width: 100%; height: 100px; }
#comment-form { }
#comment-form textarea { width: 99%; }
#comment-form [contenteditable] { border: 1px solid #888; background: #fff;padding:5px;min-height:35px;}
#posts .bb { padding: 5px 5px 20px 10px; background: var(--section-bg); position: relative; border-radius: 8px; }
#posts .bb::before { content: ''; display: inline-block; position: absolute; width: 0; height: 0;
	border: 12px solid transparent; border-right-color: rgba(128,128,128,.1); top: 5px;
	left: -24px; }

#posts .reactions { background: var(--section-bg); display: inline-block; border-radius: 20px; position: relative;
	top: -15px; left: 30px; }
#posts .reactions b { display: inline-block; line-height: 25px; color: #888; font-weight: normal; }
#posts .reactions a { cursor: pointer; border-radius: 20px; display: none;
	padding: 3px; }
#posts .reactions:hover a { display: inline-block; }
#posts .reactions a:hover { background: rgba(0,128,255,.2); }
#posts .reactions .reacted { background: rgba(128,128,128,.2); display: inline-block; }

.posts .post-actions { float: right; opacity: 0; pointer-events: none; transition: all .3s; margin: -10px 30px 0px 10px;
	position: relative;z-index: 1;}
.posts .post-actions s { margin: 2px; cursor: pointer; opacity: .4; transition: all .3s; }
.posts .post-actions s:hover { opacity: .8; }
.posts li:hover .post-actions { opacity: 1; pointer-events: all;}
.posts s.reply { transform: scaleX(-1) rotate(90deg);}

#content .bb h3 { font-size: 130%; margin: 1em 0 0 0; font-weight: 700; color: var(--text); font-variant: small-caps;
	padding: 0; }
.bb blockquote { /*background: var(--section-bg); */ padding: 10px; margin: 10px 25px; font-style: italic;
	position: relative; background: rgba(128,128,128,.2);border-radius:10px;}
.bb blockquote:before { content: '\02EE'; position: absolute; font-size: 100px; color: rgba(128,128,128,.1);
	font-style: normal; top: 20px; right: 0;  }
.bb blockquote cite { display:block; color: #888; font-style: normal; background: rgba(128,128,128,.1); padding:3px; }
.bb blockquote cite:before { content: 'Quote by '; }
.bb ul { margin-left: 2em; }
/*
#posts blockquote { margin-left: 300px; }
#posts .bb ul { margin-left: 320px; list-style-type: square; }
*/
.user { background: var(--section-bg); border-radius: 20px; padding: 5px 10px 5px 5px; margin: 0 5px; white-space: nowrap;
	transition: background .5s; }
.user:hover { background: rgba(128,128,128,.3); }
.user img { height: 25px; border-radius: 50%; position: relative; margin: 0 5px -8px -5px; }
.avatar img { /* border: 1px solid #eee; */ max-width: 50px; max-height: 50px; border-radius: 50%; }
.avatar-large img { max-width: 256px; max-height: 256px; border-radius: 50%; }

#youtube-modal { position:fixed;top:0;left:0;width:100%;height:100%;display:flex;background-color:rgba(0,0,0,.5);
	justify-content: center;align-items: center;opacity:0;pointer-events:none;transition: opacity .5s;z-index:19;}
#youtube-modal.active {opacity:1;pointer-events:all;}
#youtube-modal div { position:relative;width:96%;max-height:96%;aspect-ratio:16/9;z-index:199;}
#youtube-modal p { padding:5px;color:#fff;text-align:center;font-size:110%;}
#youtube-modal div > a { position:absolute;top:-50px;right:0;font-size:250%;color:#fff;cursor:pointer;}
#youtube-modal iframe {width:100%;height:100%;border:none;position:relative;}

/* don't remove, actually in use */
#loader { display: none; position: fixed; width: 100%; height: 100%; background: #000; opacity: .6;
	top: 0; z-index: 99; background: #000; }
/* generic tooltip div, can be reused */
#tooltip { position: fixed; padding: 10px; width: 300px; background: var(--modal-background); box-shadow: 1px 1px 3px rgba(0,0,0,.6);
	opacity: 0; transition: all .4s; pointer-events: none;}
#tooltip.active { opacity: 1; pointer-events: all;}

#tooltip2 { position: fixed; z-index: 99; background: var(--modal-background); padding: 5px; text-align: left; opacity: 0; transition: opacity .4s;
	box-shadow: 1px 1px 3px #000; display: block; width: 250px; }
#tooltip2.primary-search { opacity: .9; cursor: pointer; }
#tooltip2.primary-search::before { content: "\2715"; float: right; padding: 5px; cursor: pointer; }
#tooltip2.primary-search::after { content: ''; background: var(--modal-background); width:20px; height: 20px; right: -10px; top: 20px; transform: rotate(45deg);
	display: inline-block; position: absolute; }
.close { position: absolute; top: 0; right: 0; display: inline-block; width: 20px; height: 20px; font-size: 120%;
	text-align: center; background: rgba(255,0,0,.25); cursor: pointer; color: #c00; }
.close:hover { color: #f00; background: rgba(255,0,0,.35); font-weight: bold; }

.dropdown { max-height:0; overflow: hidden;transition:max-height .5s;}
.dropdown.open { max-height:599px;}

#tag-tooltip { position: absolute; opacity: 0; width: 320px; z-index: 10; border-radius: 8px;
	transition: all .3s; box-shadow: 1px 1px 5px #000; pointer-events: none; padding:10px; }
#tag-tooltip a.action, #tag-tooltip a.message { float:right;margin:0px 10px;cursor:pointer;opacity:.6;}
#tag-tooltip a.action:hover {opacity:1;transform:scale(1.2);filter:invert(1) brightness(1.5);}
#tag-tooltip.active { opacity: 1; pointer-events: auto; }
#tag-tooltip a:hover { text-decoration: underline;}
#tag-tooltip .thumb { width: 100px; height: 100px; float:left;margin:-20px 10px -20px -40px;background-size:cover;
	background-position:center 20%;border-radius:50%;position:relative;z-index:9;background-color:#000;}
#tag-tooltip .title { margin: -10px -10px 10px -10px; border-radius:8px 8px 0 0;padding:5px 0 10px 0;}
#tag-tooltip .title a.header { padding:10px 10px 5px 0; font-size:140%;margin:10px 0;}
#tag-tooltip .title s { margin-bottom: -5px;}
#tag-tooltip s.small { margin-bottom:-2px;}
#tag-tooltip .stats { margin: -10px; text-align:right; opacity:.8; cursor:default;padding:5px 10px 10px 0;}
#tag-tooltip .body { line-height: 1.4em; max-height:400px; overflow:hidden;margin-top:20px;}
#tag-tooltip .thumbnails { display: flex; flex-wrap:wrap;clear:left;gap:5px;margin:10px 0 0 0;}
#tag-tooltip .thumbnails li {display:block; }
#tag-tooltip .thumbnails a { display:block; width:72px; height:72px; background-size:75px auto; background-position:center 30%;
	border-radius:5px; transition:background .3s, opacity 1s; border:1px solid transparent; opacity:0;}
#tag-tooltip .thumbnails .loaded { opacity:1;}
#tag-tooltip .thumbnails a:hover { background-size: 100px auto; border:1px solid #000; }

.admin, .admin * { color: #f88 !important; }
.admin a:hover { color: #f00 !important; }
#overlay-bg { position: absolute; width: 100%; top: 0; z-index: 10; opacity: .7; height: 1000px;
	background: #000; display: none; }
#overlay { position: absolute; width: 100%; top: 0; left: 50%; z-index: 11; display: none;
	width: 500px; padding: 20px; background: var(--modal-background); margin: 20px 0 20px -300px; }
.required { font-weight: bold; }
.required:after { content: " *"; font-weight: normal; color: #f00; }

.toggle-container { padding: 15px 50xp 15px 15px; }
.toggle { position: absolute; right: 10px; top: 5px; }
.toggle span { display: inline-block; width: 40px; height: 20px; background: linear-gradient(to bottom, #777, #999);
	border-radius: 10px; cursor: pointer; box-shadow: inset 2px 1px 2px rgba(0,0,0,.3); }
.toggle span:hover { background: linear-gradient(to bottom, #999, #bbb); }
.toggle span:before { position: absolute; content: ''; height: 15px; width: 15px; left: 3px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.4);
	top: 2px; background: linear-gradient(to bottom, #fff, #ccc); border-radius: 9px; transition: left .5s; }
input:checked + .toggle span { background: linear-gradient(to bottom, #08f, #4af); }
input:checked + .toggle span:hover { background: linear-gradient(to bottom, #4af, #8cf); }
input:checked + .toggle span:before { left: 22px; }

#mod-tools { visibility: hidden; clear: left; padding: 1em; background: #f0f0f0; }
#mod-tools:hover { visibility: visible; }

#large { text-align: center; }
#large .smallthumbs { width: 0; overflow: visible; z-index: 1; position: relative; }
#large .smallthumbs li { position:relative;}
#large .group-primary { position:absolute;right:0;top:0;width:16px;height:16px;background:#fff;border-radius:50%;
	border:1px solid #000;color:#000;}
#large .group-primary:hover { transform: scale(1.5);}
#large p { color: #aaa; }
#large p span { font-size: 10pt; }

@keyframes bounce {
	0%, 100% { transform: translateY(0) }
	25% { transform: translateX(-10px) }
	75% { transform: translateX(10px) }
}

#large a[rel=prev], #large a[rel=next] { position: relative; float: left; margin-right: -10%; width: 10%; z-index: 1; }
#large a[rel=next] { float: right; margin-left: -10%; margin-right: 0; }
#large a[rel=prev] b, #large a[rel=next] b { display: inline-block; width: 20px; height: 20px; border: 5px solid #000;
	opacity: .5; border-width: 5px 0 0 5px; transform: rotate(-45deg); }
#large a[rel=prev]:hover, #large a[rel=next]:hover { animation-name: bounce; animation-duration: 1s; animation-iteration-count: infinite;
	animation-timing-function: linear;}
#large a[rel=prev]:hover b, #large a[rel=next]:hover b { opacity: 1; }
#large a[rel=next] b { border-width: 5px 5px 0 0; transform: rotate(45deg); }

#fullMessage { margin: 5em 2em 10em 2em; text-align: center; padding: 0 10em; }

#mobile-link { position: fixed; z-index: 99; background: rgba(255,255,255,.3); width: 200px; height: 200px;
	left: 30px; bottom: 30px; padding: 40px; background-image: url(https://s1.zerochan.net/icons/phone.png);
	background-size: 180px; background-position: center; background-repeat: no-repeat; filter: invert(1);
	display:none;
}
@media screen and (max-width: 600px) {
  #mobile-link { display:block; }
}


#shoutbox { margin: 5px; }
#shoutbox dt { margin-top: .5em; color: #ccc; font-size: 10pt; padding: 5px 0; }
#shoutbox dt span { color :#ccc; font-size: 11px; }

#notifications { position: fixed; bottom: 10px; right: 10px; width: 250px; }
#notifications li { display: block; margin: 5px; background: rgba(0,0,0,.6); padding: 10px; color: #fff;
	height: 80px; z-index:20;position:relative;}
#notifications img { float: left; border: 1px solid #aaa; padding: 1px; height: 70px; margin-right: 10px; }

#notifications-link.active { background: rgba(128,128,128,.3); }
#notifications-floater { position: fixed; background: rgba(255,255,255,.6); backdrop-filter: blur(6px); width: 300px; z-index: 3; box-shadow: 2px 2px 5px rgba(0,0,0,.5);
	display: none; }
#notifications-floater::-webkit-scrollbar { width: 12px;}
#notifications-floater::-webkit-scrollbar-thumb { border-radius: 6px; }
/*
#notifications-floater::-webkit-scrollbar-track { background-color: #f1f1f1; }
#notifications-floater::-webkit-scrollbar-thumb:hover { background-color: #45a049; }
*/
#notifications-floater ul { max-height: calc(80vh); overflow: auto; margin-top: 5px; }
#notifications-floater li { display: flex; background: rgba(128,128,128,.2); padding: 5px; margin: 5px;
	border-radius: 10px; align-items: center; cursor: pointer; transition: background .3s; }
#notifications-floater li:hover { background: rgba(128,128,128,.3); }
#notifications-floater li > a { width: 75px; height: 75px; border-radius: 10px; background-size: cover;
	background-position: center 30%; }
#notifications-floater li > p { display: flex; align-items: center; flex-direction: column; padding: 5px; }
#notifications-floater li > p a { padding: 10px; }
#notifications-floater > p { padding: 5px; }
#notifications-floater > p a { display: inline-block; padding: 5px; background: rgba(0,128,255,.2); border-radius: 5px; }
#notifications-floater > p a:hover { background: rgba(0,128,255,.4); }
#notifications-floater s { margin: 0 5px -3px 0; opacity: .5; }

#browse-overlay { position: absolute; background: var(--modal-background); border-radius: 0 15px 15px 0; padding: 5px; z-index: 5;width:240px;
	transition:all .1s;border:3px solid #f80;}
#browse-overlay ul.tags {overflow:auto;}
#thumbs3 .show-tags { outline: 3px solid #f80;border-radius: 15px 0 0 15px;}
#thumbs3 .show-tags-left { outline: 3px solid #f80;border-radius: 0 15px 15px 0;}

/* #chat-overlay */
#overlay-threads { position: fixed; bottom: 0; right: 20px; }
#overlay-threads li { display:block; width: 60px; height: 60px; }
#overlay-threads li img { border-radius: 50%;}
#overlay-thread { position: fixed; bottom: 0; right: 80px; background: var(--modal-background); }
#thread-toggle { padding: 5px; display:block; }