:root{
--bg:#fff;
--text:#222;
--primary:#04c;
--primary-hover:#039;
--border:#ccc;
--border2:#666;
--box-bg:#f8f9fa;
--error:#d32f2f;
--accent:#fc0;
--highlight:#e6f7ff;
--radius:7px;
}
[data-theme='dark']{
--bg:#121212;
--text:#e0e0e0;
--primary:#9cf;
--primary-hover:#38f;
--border:#666;
--border2:#ccc;
--box-bg:#1e1e1e;
--error:#ef5350;
--accent:#ffeb3b;
--highlight:#333;
}
[id] {
  scroll-margin-top: 4.5em;
}
html,body{
overscroll-behavior:none;
margin:0;
padding:0 5px 40px 5px;
font-family:system-ui,-apple-system,Verdana,Arial,sans-serif;
font-size:130%;
line-height:1.6;
background:var(--bg);
color:var(--text);
}
#header{
position:sticky;
top:0;
align-items:center;
padding:5px;
border-bottom:1px solid var(--border);
background:var(--box-bg);
color:var(--text);
z-index:2;
}
.y{background:#ffa}
form{display:inline}

.logo{color:#ff0;font-weight:bold;-webkit-text-stroke: 1px #666;}
.logo:hover{color:#ff0;text-decoration:underline}
.logo2{color:#0ff}
.logo3{color:#0f0}
.icon{
width:32px;
height:32px;
fill:currentColor;
vertical-align:middle;
cursor:pointer;
}

h1,h2,h3{
font-weight:400;
font-size:100%;
margin:.3em 0;
display:inline;
}
a{color:var(--primary);text-decoration:none}
.link{color:var(--primary);cursor:pointer}
a:hover,.link:hover{color:var(--primary-hover)}
.left{float:left;margin:2px}
.right{float:right}
.clear{clear:both}
.inline{display:inline}
.f80{font-size:70%;line-height:1.2em}
.f90{font-size:80%;line-height:1.3em}
.f130{font-weight:700;font-size:130%}
hr{border:0;border-bottom:1px solid var(--border)}
.bb,.ob{
display:inline-block;
border:1px solid var(--border);
border-radius:var(--radius);
margin:5px 2px;
padding:4px 9px;
}
.bb{background:#f2f2f2}
.bb:hover{background:#eee}
.ob,button{
background:var(--primary);
color:#fff;
border:none;
border-radius:var(--radius);
padding:6px 12px;
cursor:pointer;
}
.ob a,a.ob{color:#fff}
.ob a:hover,a.ob:hover{color:#ffa}
.ob:hover,button:hover{background:var(--primary-hover)}
.box,.ibox,.bbox,.hbox{
background:var(--box-bg);
border:1px solid var(--border);
border-radius:var(--radius);
padding:8px;
margin:6px 0;
}
.error{color:#c00}

.errorbox{
background:var(--error);
color:#fff;
border-radius:var(--radius);
padding:8px 10px;
margin:10px 0;
}
.input,select,textarea{
background:var(--box-bg);
color:var(--text);
border:1px solid var(--border);
padding:6px;
border-radius:var(--radius);
}
.input:focus,select:focus,textarea:focus{
border-color:var(--primary);
outline:none;
}
.center{text-align:center}
.none{display:none}
.margin20{margin:20px 0}
.pad{padding:10px 0}
#cookiediv{
position:fixed;
bottom:0;
left:0;
background:var(--box-bg);
border:2px solid var(--border);
padding:8px;
font-size:.9em;
border-radius:var(--radius);
z-index:1000;
}
.myModal{
position:fixed;
z-index:100000000;
width:100%;
height:100%;
top:0;
left:0;
overflow:auto;
text-align:center;
background:rgba(0,0,0,0.9);
}
.modalcontent{
display:inline-block;
text-align:left;
margin:5px 1%;
padding:8px;
max-width:99%;
border:1px solid var(--border2);
background:var(--bg);
border-radius:var(--radius);
}
.scrolldiv{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,210px));
gap:2px;
justify-content:center;
max-width:100%;
}
.scrolldiv div{
display:flex;
flex-direction:column;
align-items:center;
max-width:210px;
height:370px;
margin:1px;
font-size:70%;
line-height:1.25em;
overflow:hidden;
position:relative;
text-align:center;
}
.scrolldiv img{
display:block;
max-width:100%;
height:auto;
}
.scrolldiv .bb{
position:absolute;
top:-4px;
left:-1px;
padding:3px;
}
.scrolldiv a{color:#333}
@media(max-width:450px){
.scrolldiv{
grid-template-columns:repeat(2,1fr);
gap:1px;
}
.scrolldiv>div{
max-width:100%;
height:330px;
}
}
#gotop{position:fixed;bottom:5px;right:5px;z-index:2}
.mct,.mcb{
position:sticky;
float:right;
}
.mct{top:0;margin:-7px -7px 2px 2px!important}
.mcb{bottom:0;margin:2px -7px -7px 2px!important}
.mcl{margin:2px 2px -7px -7px!important}
#loader,#endmsg{
padding:20px;
text-align:center;
}
#loader{display:none}
#pages{
margin-top:10px;
display:flex;
justify-content:center;
align-items:center;
gap:6px;
flex-wrap:wrap;
}
.pg{
cursor:pointer;
padding:6px 10px;
border-radius:var(--radius);
}
input[type='checkbox']{
transform:scale(2);
-webkit-transform:scale(2);
margin-right:10px;
vertical-align:middle;
}
@keyframes blink{
0%{border-color:red}
20%{border-color:#00f}
40%{border-color:green}
60%{border-color:#ff0}
80%{border-color:purple}
100%{border-color:orange}
}
.blinkme{animation:blink 1s infinite}
@keyframes blinky{
0%,100%{background-color:#ff0}
50%{background-color:transparent}
}
.blnktxt{animation:blinky .7s infinite}
a.bb{color:var(--text)}
#search0{border-radius:var(--radius);padding:5px}
.w{white-space:nowrap}
.num{padding:0 15px;border-radius:50%;background:#000;color:#fff;display:inline-block}
[data-theme='dark'] .num{background:#fff;color:#000}
[data-theme='dark'] .y{background:#000;color:#ff0}
[data-theme='dark'] u:hover{color:#ffa}
[data-theme='dark'] .scrolldiv a{color:var(--text)}
[data-theme='dark'] .scrolldiv a:visited{color:var(--text)}
[data-theme='dark'] .bb{background:#333}
[data-theme='dark'] .ob{
background:#026;
border:1px solid #666;
}
[data-theme='dark'] .ob:hover{
background:#013;
}
[data-theme='dark'] .bb:hover{
background:#026;
}
[data-theme='dark'] .error{color:orange}