/* 04:55 09.11.2023 */
/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}

* {box-sizing: border-box;}

body {	 
background: url('alphabg3.png') #3c3c3c fixed;
font-family: 'Noto Sans', Verdana, sans-serif;	
margin: 0;}

body.imgdark {background: url('tlooo2.jpg') fixed;}


.prapor {background: url('prapor-ua.png') no-repeat; 
z-index: 1; 
position: fixed; 
left: -67px; 
top: -67px; 
height:231px;
width:231px;}  

a:link { color: #16b2da; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 500ms;}
a:visited { color: #16b2da; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 500ms;}
a:hover { color: #c1c1c1; text-decoration: overline; transition: cubic-bezier(.44,.97,.95,.32) 500ms; }

a:link.pages  {color: #7d99af;}
a:visited.pages {color: #7d99af;}
a:hover.pages { color: #c1c1c1; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 550ms; }

.job a:link { color: #7d99af; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 900ms;}
.job a:visited { color: #7d99af; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 900ms;}
.job a:hover { color: #afafaf; text-decoration: underline; transition: cubic-bezier(.44,.97,.95,.32) 900ms; }

a:link.nav { color: #36967F; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 400ms;}
a:visited.nav { color: #36967F; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 400ms;}
a:hover.nav { color: #afafaf; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 400ms; }

a:link.all { color: #F36223; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 400ms;}
a:visited.all { color: #F36223; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 400ms;}
a:hover.all { color: #afafaf; text-decoration: none; transition: cubic-bezier(.44,.97,.95,.32) 400ms; }
  
#logo {
background-image: url(blogo-mainte.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
position:relative;
transition: cubic-bezier(.44,.97,.95,.32) 5s; 
margin: 13px auto 13px auto;
height:150px;
width:150px;
}
#logo:hover {background-image: url(blogo-mainterb.svg); transition: cubic-bezier(.25,.78,.34,.17) 5s;  transform: rotate(360deg); }

#blog{
position:relative;
max-width:900px;
margin: 15px auto;  
}
img {max-width:100%; position:relative; margin: 17px auto; display: block;}
img[data-lity]{cursor: pointer;}

/* emoji */
img.emo {display: inline-block; height: 16px; margin: 0 2px -2px 2px;}
img.emo16 {display: inline-block; height: 16px; margin: 0 2px -2px 2px; border-radius: 16px;}
.color16 {display: inline-block; height: 16px; width:16px; margin: 0 2px -2px 2px; border-radius: 16px;}
.orange {background: orange;}

[class ^= "ji"] {display: inline-block!important; height: 16px!important; margin: 0 2px -2px 2px; max-width:100%!important;}
.w16 {width: 16px;}
.r16 {border-radius: 16px;}
.b16 {box-sizing: border-box; border: solid 1px rgba(125,125,125,0.5);}
.ji-16 {border-radius: 16px;}
.ji-2{border-radius: 2px;}
.ji-3{border-radius: 3px;}
.ji-dym {border-radius: 50% 20% / 10% 40%;}
.ji-long {background-color: rgba(11,90,125,.8); border-radius: 15% 35% 70% 50%; width: 16px; }
.ji-50 {border-radius: 0% 0% 50% 50%;}
.ji-5050 {border-radius: 50%;}
.ji-glo {border-radius: 0px 0px 75% 0px / 0px 0px 25% 0px;}

/*#Blog*/

#blog p {color: #aeaeae; font-weight:500; font-size: 17px; line-height: 1.3; margin: 17px auto; hyphens: auto;
padding-top: 3px; text-align: justify;}

#blog h1 {
color: #98a3af; 
font-size: 24px; 
line-height: 1.3; 
margin: 17px auto;
text-align: left; 
text-indent: 0px; 
font-weight: 600;
transition: cubic-bezier(.25,.78,.34,.17) .9s;
}

#blog h1:hover {color: #aeaeae; }

article {padding-bottom: 7px; margin-bottom:28px; border-bottom: 5px dotted #454545;}

article h3 {color: #9a9; font-size: 13px; line-height: 14px;}
article h3 span {border: dotted 1px rgba(100,120,100,.2); background-color: rgba(200,200,200,.1); padding-right: 7px; border-radius: 10px 2px 2px 10px; transition: cubic-bezier(.25,.78,.34,.17) .9s; display: inline-block;}
article h3:hover span {border-radius: 1px; border: dotted 1px rgba(100,120,100,.7); color: #bbb; padding-left: 7px;}

article .date {color: #389863; transition: cubic-bezier(.25,.78,.34,.17) .9s;}
article .date:hover {color: mediumseagreen; transition: cubic-bezier(.25,.78,.34,.17) .9s;}

span.gloo {color: #888}

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin: 10px 0 10px 0;
}
.video iframe,  
.video object,  
.video embed, 
.video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border:none;
}

small {font-size: 14px; color: grey;}
em {font-style: italic;}
strong, b {font-weight:500;}
mark {background: rgba(19,140,10,.15); border: 1px solid rgba(110,110,111,.20); color: #47A76A; padding:0 3px 2px 3px;border-radius:3px;position:relative;margin:0 1px;font-size:90%; line-height:.7;vertical-align: 1px;}

footer {margin-top: 58px; margin-bottom: 17px;}

/*bottom-naviga*/
.paginas {
height:auto; 
font-size: 33px;
word-spacing: 10px; 
text-align: center; 
margin: 30px auto; 
clear: both; 
display: block;
color: dimgray;
vertical-align: baseline;
}

.job {    
max-width:630px;
position:relative;	
margin: 35px auto 0px auto;    
text-align:center;
z-index:55557;
color: #648289;
font-weight:600;
clear:both;
}

#blog .drewo, #blog .q {text-align: center!important;  color: #367451; font-size:17px; line-height:1.5;}
#blog .drewo:after, #blog .q:after {content: '\f18c'; font-family: fontawesome; font-weight: normal;}

#blog .c {text-align: center!important;  color: #9b6451; font-size:17px; line-height:1.5;}
#blog .c:after {content: '\f0f4'; font-family: fontawesome; font-weight: normal;}

#blog .uf {text-align: center;  color: #0F5959; background: rgba(139,57,72,.05); border-radius: 25px; font-size:16px; line-height:1;}
#blog .uf:after {content: '···'; font-family: consolas, monospace; font-weight: normal;}

        
pre {
font-family: 'IBM Plex Mono', Consolas, monospace; 
margin: 15px 0px;
padding:20px;
border: dashed 1px #454;
font-size: 14px; 
color: #a0bca0;
line-height: 1.2;
white-space: pre-wrap; 
background:rgba(60,68,60,.15)}

code{
font-family: 'IBM Plex Mono', Consolas, monospace; 
background: rgba(255,255,255,.10); 
color: #ccc; 
border: 1px solid rgba(200,200,203,.15); 
padding: 0 1px;
margin: 0 3px 0 3px;
border-radius: 1px;
}

q {
background: rgba(0,30,20,.15); 
font-family: Georgia, 'Liberation Serif', 'Times New Roman', serif; 
padding: 0 1px; 
border-radius: 1px; 
border: 1px solid rgba(1,1,11,.10); 
}

q:before {
content: '\f10e';
color: #436660;
font-family: fontawesome;
font-size: 12px; 
vertical-align: top;
margin: 0px 5px 0px 2px;
}

blockquote {
font-family: 'Georgia', 'Liberation Serif', 'Times New Roman', serif;
padding: 12px 12px 12px 51px;
margin: 16px auto;
border: 1px solid rgba(42,120,120,.40);
border-radius: 5px;
line-height: 1.3;
color: #9f9f9f;
word-spacing: 2px;
text-align:justify;
min-height:35px;
hyphens: auto;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 45 45'%3E%3Ctitle%3E quote%3C/title%3E%3Cpath d='m42.5 6.9c0-1.9-1.5-3.4-3.4-3.4l-11.1 0c-1.9 0-3.4 1.5-3.4 3.4l0 13.6c0 1.9 1.5 3.4 3.4 3.4l5.5 0c0.9 0 1.7 0.8 1.7 1.7 0 0.3-0.1 0.5-0.1 0.5-1.2 4.1-4.4 7.4-8.4 8.9l0 0c-1.2 0.5-2.1 1.7-2.1 3.1 0 1.9 1.5 3.4 3.4 3.4 0.5 0 0.9-0.1 1.3-0.3l0.2-0.1C37.1 38.3 42.5 30.9 42.5 22.2l0-15.3zm-22.1 0c0-1.9-1.5-3.4-3.4-3.4l-11.1 0C4 3.5 2.5 5 2.5 6.9l0 13.6c0 1.9 1.5 3.4 3.4 3.4l5.5 0c0.9 0 1.7 0.8 1.7 1.7 0 0.3-0.1 0.5-0.1 0.5-1.2 4.1-4.4 7.4-8.4 8.9l0 0C3.4 35.5 2.5 36.7 2.5 38.1c0 1.9 1.5 3.4 3.4 3.4 0.5 0 0.9-0.1 1.3-0.3l0.2-0.1C15 38.3 20.4 30.9 20.4 22.2l0-15.3z' style='fill-opacity:0.5;fill:%232A6868'/%3E%3C/svg%3E") no-repeat left 8px  bottom 50%;
}
#blog blockquote p {color: #9f9f9f; font-size: 15px; }

/*------------spoiler--------------------------------------------------------------------------------*/

 #blog .spoiler .spoiler_body p {color:#b5b5b5; font-size:15px;}
.spoiler > input + label {font-style: italic; font-size:17px; color:#b2b8bf;} 
.spoiler > input + label:after{content: "+";float: right;}
.spoiler > input:checked + label:after{content: "–";float: right;}
.spoiler > input{display:none;}
.spoiler label:hover {cursor:pointer;}
.spoiler > input + label , .spoiler > .spoiler_body {margin: 0px auto; border:1px dotted #7f7f7f; padding:5px 15px; overflow: hidden; width:100%; box-sizing: border-box; display: block;}
.spoiler > input + label + .spoiler_body{display:none;}
.spoiler > input:checked + label + .spoiler_body{display: block;}
.spoiler > .spoiler_body {padding:5px 15px; border-top: none;}


/*=====Native spoiler ------------------- details summary=====*/
details {margin:14px 0; outline:none; border: 1px solid rgba(100,100,100,0.2); clear: both;}
summary {
background:#414141;
padding: 5px;
padding-left:0;
outline:none; 
cursor: pointer;
color: rgba(180,180,180,.8);
font-weight:bold;
font-size: 90%;
list-style: none;
}
summary:hover{color:#cacacf; background:transparent;}
details p, details pre {margin:8px auto; padding: 0px 12px;}

details p:first-of-type{margin-top: 12px;}
summary span:after {
margin-left: 7px;
content: '\f0a7';
color: rgba(190,190,200,.8);
font-family: fontawesome;
transition:400ms;
font-weight:normal;
font-size: 100%;
}
summary:before {
margin: 0 5px;
content: '\f0a4';
color: rgba(150,150,150,.8);
font-family: fontawesome;
transition:400ms;
font-weight:normal;
font-size: 100%;
}
summary:focus:before{
content: '\f00d';
color: rgba(120,120,120,.8);
font-family: fontawesome;
transition:400ms;
}
summary:focus{color: rgba(180,180,170,.5);}
summary::-webkit-details-marker {display: none}
summary::-moz-details-marker {display: none}
summary::-details-marker {display: none}


/*----@Media----------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {.prapor {left: -75px; 
top: -75px; }  #blog .spoiler .spoiler_body p {font-size:14px;}
.spoiler > input + label {font-size:15px;} }

@media screen and (max-width: 1010px) {
#blog p {font-size: 15px} 
#blog h1 {font-size: 18px} 
body {padding-left: 35px; padding-right: 35px;} 
}
@media screen and (min-width: 1139px) {#blog p {font-size: 18px} #blog {max-width:960px;} #blog h1 {font-size: 24px}}
@media screen and (min-width: 1910px) {#blog p {font-size: 19px} #logo {height:177px; width:177px;} #blog {max-width:1024px;} #blog h1 {font-size: 25px} .prapor {left: -57px; 
top: -57px; } article h3 {font-size: 14px;} }
@media screen and (min-width: 2210px) {#blog p {font-size: 20px} #blog {max-width:1124px;} #blog h1 {font-size: 27px} article h3 {font-size: 15px;}}