/* Main style v.16.5.4
Mini CSS framework: main.css + auto.css (color-theme-name.css)
Responsive, mainly class-based */



/* Main */
* { color-scheme: light dark; } /* view-source:about:blank, fixed blink */

:root{
/* .brand - link, accent color
 * use: c4, red, orange, yellow, green, blue, indigo, violet
*/
--brandColor: color-mix(in srgb, var(--blue) 80%, var(--green));

--bodyPadding: 3vw;
--inputHeight: 45px;
--fontSize: 14px;

--wrapper: 540px;
--wrapper2: 700px;
--wrapper3: 900px;
--wrapper4: 100%;

--wrapperTv: 100%;
--wrapperXl: 490px;
--wrapperL: 430px;
--wrapperM: 330px;
--wrapperS: 230px;
--wrapperXs: 160px;

--padding: 5px;
--padding2: 10px;
--padding3: 15px;
--padding4: 30px;

--borderRadius: 3px;
--borderRadius2: 5px;
--borderRadius3: 15px;
--borderRadius4: 30px;

--itemHeight: 30px;
--itemHeight2: 45px;
--itemHeight3: 50dvh;
--itemHeight4: 100dvh;
/*mobile w: 500 (real by stats: 360) */
}

html, body, a, input, button, textarea, pre, code, select{
/* https://twitter.com# */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 'Roboto', Helvetica, Arial, sans-serif;

font-style: normal;
font-size: 13.4px; font-size: 14px; font-size: 0.96em;
text-decoration: none;
/*testme delme letter-spacing: 0.16px;*/
/*hyphens: auto;*/
overflow-wrap: break-word;
/*word-break: break-all;*/
}

/*@media (hover: none) {
html, body, a, input, button, textarea, pre, code{
font-size: 1em;
}}*/

/*@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }*/
html, body { margin: 0 auto; padding: 0; }
body {
padding: 0 var(--bodyPadding);
display: flex;
flex-basis: auto;
flex-basis: 100%;
flex-direction: column;
min-height: 100vh;

min-height: 100dvh; height: 100%;
/*min-height: -webkit-fill-available;*/
}

html {
position: relative;
overflow-y: scroll;
/*height: -webkit-fill-available*/
}

.content, .contentCenter,
.postContent, .postContentCenter { flex: 1 0 auto; }
.page { min-height: 100vh; }

.contentCenter, .postContentCenter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*height: 100vh;*/
}

header, footer {
flex-shrink: 0;
width: 100%;
}

.h1 { font-size: 1.40em; }
.h2 { font-size: 1.35em; }
.h3 { font-size: 1.25em; }
.h4 { font-size: 1.15em; }
.h5 { font-size: 1.11em; }
.h6 { font-size: 1.1em; }

input[type="submit"], input[type="button"], input[type="text"], input[type="search"], textarea, input[type="email"], input[type="password"], form button, .submit{
width: 100%;
/*delme min-inline-size: 100%;*/
min-height:  var(--inputHeight);
margin: 0px;
margin-top: 1px;
margin-bottom: 1px;
/*box-shadow: 4px 4px var(--d2);*/
vertical-align: top; /*https://stackoverflow.com/questions/3453959/how-do-i-fix-inconsistent-textarea-bottom-margin-in-firefox-and-chrome#*/
display: block;
padding: var(--padding2);
}
input[type="submit"], .submit { text-align: center; }
input[type="button"] { cursor: pointer; }

select, input[type="color"], input[type="date"], input[type="number"], input[type="time"], input[type="reset"], input[type="datetime-local"], input[type="file"], input[type="month"], input[type="tel"], input[type="url"], input[type="week"] {
margin-top: 1px;
margin-bottom: 1px;
/*min-height: 15px; testme delme*/
min-height: var(--inputHeight);
display: inline-flex;
vertical-align: middle;
/*min-block-size: var(--inputHeight);
min-inline-size: 45px;*/
line-height: var(--inputHeight);
padding: 0 var(--padding2);
box-sizing: border-box; 
}

/* fix */
textarea { padding: var(--padding2); }
input[type=search], select, select option{
-webkit-appearance: none;
}
input[type="color"]{ padding: 5px; }
input[type="number"]{ line-height: 0; }
input[type=checkbox],  input[type="reset"] { cursor: pointer; margin: 0; padding: 5px; line-height: normal; }
textarea { outline-color: transparent; outline-style: none; resize: vertical; }
input[type=submit], .submit { cursor:pointer;  }
td { padding: 5px; }



/* class */
.post {
/* use with .postContent (wrapper) */
/*display: block;*/
width: 100%;
max-width: 100%;
margin: 0 auto;
overflow: auto;
padding: var(--padding3);

/* new in test */
display: flex;
flex-basis: auto;
flex-basis: 100%;
flex-direction: column;

/*height: 100%;
min-height: 100%;delme*/
height: auto;
min-height: auto;
/* fix test */
/*overflow: visible;*/
}

/* pre for post */
.pre iframe, .pre video, .pre audio { display: block;  margin: 11px auto; width: 100%; max-width: 100%; }
.pre .img {  display: inline-block; max-width: 100%; margin: 11px auto; margin-bottom: 0;  }

.postFooter {
display: grid;
grid-template-columns: 1fr 30%;
grid-gap: 1%;
text-align: right;
align-items: self-end;
align-items: stretch;
flex-shrink: 0;
padding-top: calc(var(--padding) / 2);
}
.postFooter2 { grid-template-columns: 1fr; }

.postFooter a, .postFooter2 a {
display: inline-block;
padding: var(--padding);
padding-left: 0;
margin-right: calc(var(--padding) * 2);
}
.postFooter a:last-child, .postFooter2 a:last-child { margin-right: 0; }

@media(max-width: 300px) { .postFooter { grid-template-columns: 1fr;} }

.postFooter .tagList { align-self: end; }

.logo, .logo2{
position: relative;
border-radius: 50%;
display: inline-flex;
vertical-align: middle;
text-align: center;
padding: 1px;
border: 2px dashed color-mix(in srgb, var(--brand) 50%, transparent);
}

.logo2 { width: 26px; height: 26px; }

.logo, .logo2 {
transition: transform 250ms ease-in-out;
animation: mAni 500ms 0s, mAniBlink 500ms .5s;
opacity: 1;
}

.logo:hover, .logo2:hover{
transform: rotate(360deg);
}

@media (prefers-reduced-motion) {
.logo:hover, .logo2:hover{ border-color: var(--c); }
}

@media (prefers-reduced-motion: no-preference) {
@keyframes mAni {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}

@keyframes mAniBlink {
from{ border: 2px solid color-mix(in srgb, var(--brand) 100%, transparent); }
to { border: 2px solid color-mix(in srgb, var(--brand) 20%, transparent); }
}
}

.tagList, .tagList2 {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}

.tagList a, .tagList2 a { margin: 1px; }
.tag, .tag2, .button, .submit {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
padding: .20em .5em;
width: auto;
min-width: 40px;
max-width: 100%;
overflow-wrap: anywhere;
white-space: normal;
word-break: break-word;
}

.button {
padding: .7em 1.2em;
margin-top: 1px;
margin-bottom: 1px;
}
.submit { width: 100%; }

.tag2 { padding: .3em .8em; }
/*@media (any-pointer: coarse) { .tag { padding: .3em .8em; } }*/

/* ico2 - for img */
.ico, .ico2 {
opacity: 0.9;
margin-right: 5px;
text-align: center;
display: inline-flex;
justify-content: center;
filter: grayscale(20%);
}
.ico, .ico2 { justify-content: end; display: inline-block; vertical-align: middle; height: auto; }

.ico2 {
/*filter: brightness(90%);*/
font-size: xx-small;
}
.ico2 { margin-right: 0; }

.ico:hover, .ico2:hover {
filter: grayscale(0%);
filter: brightness(100%);
}

@media (hover: none) {

.scrollX {
overflow: hidden;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}

.scrollX::-webkit-scrollbar { width: 0px; display: none; }
}



/* Ads */
.ads { }
.adsHeader { display: inline-block; text-align: right;
border: 1px solid var(--d);
float: right;
padding: 0px 5px;
margin-left: 3px;
border-radius: var(--borderRadius);
}
.adsHeader a { font-size: x-small; }
.adsBody { display: block;  padding: 0px 5px; }
.adsCode { text-align: left; display: inline-block; max-width: 100%; }




/* Class 2 */
.wrapper, .wrapper2, .wrapper3, .wrapper4, .wrapperTv, .wrapperXl, .wrapperL, .wrapperM, .wrapperS, .wrapperXs {  width: 100%; margin: 0 auto; }
.wrapper { max-width: var(--wrapper);  }
.wrapper2 { max-width: var(--wrapper2); }
.wrapper3 { max-width: var(--wrapper3);  }
.wrapper4 { max-width: var(--wrapper4);  }

.wrapperTv { max-width: var(--wrapperTv); }
.wrapperXl { max-width: var(--wrapperXl);  }
.wrapperL { max-width: var(--wrapperL);  }
.wrapperM { max-width: var(--wrapperM);  }
.wrapperS { max-width: var(--wrapperS);  }
.wrapperXs { max-width: var(--wrapperXs);  }

.op { opacity: 0.88; } 
.op:hover { opacity: 1; }
.op2 { opacity: 0.2; }
.op2:hover { opacity: 1; }

.center, .center2, .center3, .center4 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: safe center;
align-self: safe center;
align-content: center;

margin: auto;
left: 0;
right: 0;
}

.center2 { min-height: 40vh; }
.center3 { min-height: 50vh; }
.center4 { min-height: 100vh; }

.left { text-align: left; justify-content: left; margin-left: 0; }
.right { text-align: right; justify-content: right; margin-right: 0; }

.balance { text-wrap: balance; }

.box { box-sizing: border-box; }
.padding { padding: var(--padding); }
.padding2 { padding: var(--padding2); }
.padding3 { padding: var(--padding3); }
.padding4 { padding: var(--padding4); }
.padding1Px { padding: 1px; }
.paddingList { padding-bottom: var(--padding); }
.padding2List { padding-bottom: var(--padding2); }
.padding3List { padding-bottom: var(--padding3); }
.padding4List { padding-bottom: var(--padding4); }
.padding1PxList { padding-bottom: 1px; }

.margin { margin: var(--padding); }
.margin2 { margin: var(--padding2); }
.margin3 { margin: var(--padding3); }
.margin4 { margin: var(--padding4); }
.margin1Px { margin: 1px; }
.marginList { margin-bottom: var(--padding); }
.margin2List { margin-bottom: var(--padding2); }
.margin3List { margin-bottom: var(--padding3); }
.margin4List { margin-bottom: var(--padding4); }
.margin1PxList { margin-bottom: 1px; }

.inputHeight { min-height: var(--inputHeight); }
.itemHeight { min-height: var(--itemHeight); }
.itemHeight2 { min-height: var(--itemHeight2); }
.itemHeight3 { min-height: var(--itemHeight3); }
.itemHeight4 { min-height: var(--itemHeight4); }

.w100 { width: 100%; }
.h100 { height: 100%; }
.w50 { width: 50%; }
.h50 { height: 50%; }

.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}

.sameSize { aspect-ratio: 1 / 1; }

.capitalize::first-letter, .capitalize a::first-letter { text-transform: capitalize; }
.uppercase, .uppercase a { text-transform: uppercase; }
.lowercase, .lowercase a { text-transform: lowercase; }

.notAllow { cursor: not-allowed; }
.pointer, .click { cursor: pointer; }
.block { display: block; }
.none { display: none; }
.flex { display: flex; }
.inline { display: inline; }
.inlineBlock { display: inline-block; }
.inlineFlex { display: inline-flex; }
.none { display: none; }
.zero { margin: 0; padding: 0; }
.tLeft { text-align: left; }
.tCenter { text-align: center; }
.tRight { text-align: right; }
.b, .b a, .bold, .bold a { font-weight: bold; }
.normal, .normal a { font-weight: normal; font-size: unset; }
.unser, .unser a { font-size: unset; }
.medium, .medium a { font-size: medium; }
.large, .large a { font-size: large; }
.larger, .larger a { font-size: larger; }
.xLarge, .xLarge a { font-size: x-large; }
.xxLarge, .xxLarge a { font-size: xx-large; }
.xxxLarge, .xxxLarge a { font-size: xxx-large; }
.small, .small a { font-size: small; }
.smaller, .smaller a { font-size: smaller; }
.xSmall, .xSmall a { font-size: x-small; }
.xxSmall, .xxSmall a { font-size: xx-small; }
.em { font-style: italic; }
.oblique { font-style: oblique; }
.clear { clear: both; }
.scroll {
/*overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;*/
display: block;
max-height: 100vh;
overflow-x: hidden;
overflow-y: auto;
scroll-padding-top: 16px;
}
.scroll2 { max-height: 200vh; }

.break { overflow: hidden; white-space: normal; word-break: break-word; overflow-wrap: break-word; }
.break2 { overflow: hidden; white-space: normal; word-break: break-all; }
.borderRadius { border-radius: var(--borderRadius); }
.borderRadius2 { border-radius: var(--borderRadius2); }
.borderRadius3 { border-radius: var(--borderRadius3); }
.borderRadius4 { border-radius: var(--borderRadius4); }



/* Colors (colors from variables in the theme) */
:root{
--brand: color-mix(in srgb, var(--brandColor) 70%, var(--c4));
--brand2: color-mix(in srgb, var(--brandColor) 35%, var(--c4));
}

body{ background-color: var(--bg); color: var(--c3); }

a { color: var(--c2); }
a:hover { color: var(--c4); } 

hr{ border: 1px solid var(--d2); border-bottom:1px solid var(--l); }
/*::selection { background: darkorange; color: #fff; }*/
::selection { background: color-mix(in srgb, var(--brandColor) 50%, #fff); color: #000; }
mark { font-weight: bold;}

input, input:focus, textarea, select, button, input[type="file"] { 
border: 1px solid var(--d3); background: var(--l2); color: var(--c3); border-radius: var(--borderRadius); }
input:hover, textarea:hover, select:hover, button:hover, input[type="file"]:hover {  background: var(--l3); }

input[type="submit"],  form button[type="submit"], .submit/*, form button, input[type="button"]*/ {  border: 1px solid var(--d3); background: var(--d); color: var(--c2); border-radius: var(--borderRadius); }
input[type="submit"]:hover, form button[type="submit"]:hover, form button:hover, .submit:hover, input[type="button"]:hover { background: var(--d2); color: var(--c3); }


input[type="range"], progress { width: 100%; max-width: 100%; margin: 0; }
input[type="number"]{ padding: 5px; }

::placeholder, input::-webkit-input-placeholder, .placeholder { font-size: small; color: var(--c); }
input, progress, select { accent-color: var(--brand);  }

[contenteditable]:focus { outline: solid var(--brand); }


form fieldset { border: 1px solid var(--d3); }

.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
.shadow2 { box-shadow: 0 3px 5px rgba(0,0,0,0.12), 0 3px 4px rgba(0,0,0,0.24); }

.c { color: var(--c); }
.c2 { color: var(--c2); }
.c3 { color: var(--c3); }
.c4 { color: var(--c4); }

/* rC - reverse c  (new) */
.rC { color: var(--rC); }
.rC2 { color: var(--rC2); }
.rC3 { color: var(--rC3); }
.rC4 { color: var(--rC4); }

/* .bgColor, .lightColor (new) */
.brand, .brand button{ color: var(--brand); }
.brand2 { color: var(--brand2); }
.brand:hover, .brand button:hover { color: var(--brand2); }
.bgBrand, .lightBrand { background: var(--brand); }
.bgBrand2, .lightRrand:hover { background: var(--brand2); }

.red { color: var(--red); } .red2 { color: var(--red2); }
.red:hover { color: var(--red2); }
.bgRed, .lightRed { background: var(--red); }
.bgRed2, .lightRed:hover { background: var(--red2); }

.orange{ color: var(--orange); } .orange2 { color: var(--orange2); }
.orange:hover { color: var(--orange2); }
.bgOrange, .lightOrange { background: var(--orange); }
.bgOrange2, .lightOrange:hover { background: var(--orange2); }

.yellow { color: var(--yellow); } .yellow2 { color: var(--yellow2);}
.yellow:hover { color: var(--yellow2); }
.bgYellow, .lightYellow { background: var(--yellow); }
.bgYellow2, .lightYellow:hover { background: var(--yellow2); }

.green { color: var(--green); } .green2 { color: var(--green2); }
.green:hover { color: var(--green2); }
.bgGreen, .lightGreen { background: var(--green); }
.bgGreen2, .lightGreen:hover { background: var(--green2); }

.blue { color: var(--blue); } .blue2 { color: var(--blue2); }
.blue:hover { color: var(--blue2); }
.bgBlue, .lightBlue { background: var(--blue); }
.bgBlue2, .lightBlue:hover { background: var(--blue2); }

.indigo{ color: var(--indigo); } .indigo2 { color: var(--indigo2); }
.indigo:hover { color: var(--indigo2); }
.bgIndigo, .lightIndigo { background: var(--indigo); }
.bgIndigo2, .lightIndigo:hover { background: var(--indigo2); }

.violet { color: var(--violet); } .violet2 { color: var(--violet2); }
.violet:hover { color: var(--violet2); }
.bgViolet, .lightViolet { background: var(--violet); }
.bgViolet2, .lightViolet:hover { background: var(--violet2); }

.gray, .grey { color: var(--c); }
.bgGray, .bgGrey, .lightGray, .lightGrey { background: var(--c); }
.bgGray2, .bgGrey2, .lightGray:hover, .lightGrey:hover { background: var(--c2); }

.active { color: var(--c) !important; }
.active2 { color: var(--c4) !important; }
:root{ --gray: var(--c); --grey: var(--c); }
.active:hover, .gray:hover, .grey:hover { color: var(--c4); filter: grayscale(0%); }

.border, .borderList { border: 1px solid color-mix(in srgb, var(--d3) 70%, transparent); }
.border2, .border2List { border: 1px dashed color-mix(in srgb, var(--d3) 70%, transparent); }
.border3, .border3List { border: 1px solid var(--d3); }
.border4, .border4List {  border: 1px dashed var(--d3);  }


.borderList, .border2List, .border3List, .border4List  { margin-bottom:  -1px; }


.bg { background: var(--l); }
.bgList, .light { background: var(--l); }
.bgList:nth-child(2n), .light:hover { background: var(--l2); }
.bg:hover, .bgList:hover { background: color-mix(in srgb, var(--l) 90%, var(--l4)); }
.bgList:nth-child(2n):hover { background: color-mix(in srgb, var(--l2) 90%, var(--l4)); }

.bg2, .bg2List, .light2 { background: var(--l2); }
.bg2List:nth-child(2n), .light2:hover, .light3{ background: var(--l3); }
.bg2:hover, .bg2List:hover { background: color-mix(in srgb, var(--l2) 90%, var(--l4)); }
.bg2List:nth-child(2n):hover { background: color-mix(in srgb, var(--l3) 90%, var(--l4)); }

.bg3, .bg3List, .light3 { background: var(--l3); }
.bg3List:nth-child(2n), .light3:hover, .light4{ background: var(--l4); }
.bg3:hover, .bg3List:hover { background: color-mix(in srgb, var(--l3) 90%, var(--l4)); }

.bg4, .bg4List, .light4:hover { background: var(--l4); }


.bgD { background: var(--d); }
.bgDList, .dark { background: var(--d); }
.bgDList:nth-child(2n), .dak:hover { background: var(--d2); }
.bgD2, .bgD2List, .dark2 { background: var(--d2); }
.bgD2List:nth-child(2n), .dark2:hover, .dark3{ background: var(--d3); }
.bgD3, .bgD3List, .dark3 { background: var(--d3); }
.bgD3List:nth-child(2n), .dark3:hover, .dark4{ background: var(--d4); }
.bgD4, .bgD4List, .dark4:hover { background: var(--d4); }

.highlight { background: var(--l4) !important; color: var(--c4) !important; }
.highlight:hover { background: var(--l4); color: var(--c4) !important; }
.highlight2, .highlight2:hover { background: color-mix(in srgb, var(--orange) 50%, #fff) !important; color: #000 !important; }




.borderBottomBrand { border-bottom: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); }
.borderBottomRed { border-bottom: 2px solid color-mix(in srgb, var(--red) 50%, transparent); }
.borderBottomOrange { border-bottom: 2px solid color-mix(in srgb, var(--orange) 60%, transparent); }
.borderBottomYellow { border-bottom: 2px solid color-mix(in srgb, var(--yellow) 60%, transparent); }
.borderBottomGreen { border-bottom: 2px solid color-mix(in srgb, var(--green) 60%, transparent); }
.borderBottomBlue { border-bottom: 2px solid color-mix(in srgb, var(--blue) 65%, transparent); }
.borderBottomIndigo { border-bottom: 2px solid color-mix(in srgb, var(--indigo) 60%, transparent); }
.borderBottomViolet { border-bottom: 2px solid color-mix(in srgb, var(--violet) 60%, transparent); }
.borderBottomGray { border-bottom: 2px solid color-mix(in srgb, var(--gray) 60%, transparent); }
.borderBottomTransparent { border-bottom: 2px solid transparent; }

.firstLetterBold::first-letter,
.firstLetterBold a::first-letter {
font-weight: bold;
padding-right: .3px;
display: block;
}



/* Print */

@media print {
/* https://developer.mozilla.org/docs/Web/CSS/CSS_media_queries/Printing */
.navTop, footer, nav {
display: none;
}
}



/* Fix */
* { box-sizing: border-box; }

del a { text-decoration: line-through; }

/*h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
word-break: break-all;
}
h1, h2, h3, h4, h5, h6, .bold, .b, b { letter-spacing: 0.25px; }test and dellme*/

@media(max-width: 200px) { div, input, textarea, a{ word-break: break-all; } }

.sup { vertical-align: super; vertical-align: top; font-weight: 600; }
.sub { vertical-align: sub; }
.textTop { vertical-align: text-top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.top { vertical-align: top; }
.pre{ white-space: pre-wrap; word-wrap: break-word; line-height: normal; }

button { cursor: pointer; }

/*textarea:focus {outline: none;}*/
form { margin: 0 auto; padding: 0; width: 100%; }
/*br, hr { clear: both; }*/
svg, form, iframe, video, audio, img, hr, table{ max-width:100%; }
svg, img { height: auto;  display: inline-block; }

@media(max-width: 395px) {
.m, .m2 { display: block !important; width: 100%; max-width: 100%; padding: 0; }
.m2 { display: block; position: relative; }
}

.over, .over a{
overflow: hidden;
white-space: nowrap;
/* display: inline-flex; display: block; display: inline-block; */display: inline-block;
max-width: 100%;
text-overflow: ellipsis;
}

iframe { border: none; }
img { overflow: hidden; font-size: calc(100% - 30%); }

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { width: 100px; }
/*::-webkit-scrollbar-corner { background: transparend; }*/

html { scrollbar-width: thin; }

input:focus{ outline: none }

.logo2 { margin-right: 5px; }
input[type="color"], form button { vertical-align: middle; min-height: var(--inputHeight); }


html{ overflow-x: hidden; } /* fix PWA  */



/* Other */

/* fix in main.js */
@media (prefers-color-scheme: dark) {
.reduceLight { filter: brightness(70%); }
}

.reduceLight2 { filter: brightness(70%); }