/* Standar CSS */ ::selection{color:#fff;background:var(--linkC)} *, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box} h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)} h1{font-size:1.9rem} h2{font-size:1.7rem} h3{font-size:1.5rem} h4{font-size:1.4rem} h5{font-size:1.3rem} h6{font-size:1.2rem} a{color:var(--linkC);text-decoration:none} a:hover{opacity:.9;transition:opacity .1s} table{border-spacing:0} iframe{max-width:100%;border:0;margin-left:auto;margin-right:auto} input, button, select, textarea{font:inherit;font-size:100%;color:inherit;line-height:normal;outline:0} input::placeholder{color:rgba(0,0,0,.5)} img{display:block;position:relative;max-width:100%;height:auto} svg{width:22px;height:22px;fill:var(--iconC)} svg.line, svg .line{fill:none!important;stroke:var(--iconC);stroke-linecap:round;stroke-linejoin:round; stroke-width:1} svg.c-1{fill:var(--iconCa)} svg.c-2{fill:var(--iconCs); opacity:.4} .hidden{display:none} .invisible{visibility:hidden} .clear{width:100%;display:block;margin:0;padding:0;float:none;clear:both} .fCls{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;transition:var(--trans-1);background:transparent;opacity:0;visibility:hidden} .free::after, .new::after{display:inline-block;content:'Free!';color:var(--linkC);font-size:12px;font-weight:400;margin:0 5px} .new::after{content:'New!'}
/* Main Element */ html{-webkit-scroll-behavior:smooth;scroll-behavior:smooth;overflow-x:hidden}body{position:relative;margin:0;padding:0!important;width:100%;font-family:var(--fontB),Arial,sans-serif;font-size:14px;color:var(--bodyC);background:var(--bodyB);-webkit-font-smoothing:antialiased}.secIn{margin:0 auto;padding:0 20px;max-width:var(--contentW)}
/* Notif Section */ .ntfC{display:flex;align-items:center;position:relative;min-height:var(--notifH); background:var(--notifU);color:var(--notifC); padding:10px 15px; font-size:13px; transition:var(--trans-1);overflow:hidden;border-radius:10px;margin:1em 0 0} .ntfC::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.15);display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .ntfC .secIn{width:100%; position:relative} .ntfC .c{display:flex;align-items:center} .ntfT{width:100%; padding-right: 15px; text-align:center} .ntfT a{color:var(--notifL); font-weight:700} .ntfI:checked ~ .ntfC{height:0;min-height:0; margin:0;padding:0; opacity:0;visibility:hidden} .ntfA{display:inline-flex;align-items:center;justify-content:center;text-align:initial} .ntfA >a{flex-shrink:0;white-space:nowrap;display:inline-block; margin-left:10px;padding:8px 12px;border-radius:3px; background:var(--notifL);color:#fffdfc; font-size:12px;font-weight:400; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);text-decoration:none}
/* Fixed/Pop-up Element */ .fixL{display:flex;align-items:center;position:fixed;left:0;right:0;bottom:0;margin-bottom:-100%;z-index:20;transition:var(--trans-1);width:100%;height:100%;opacity:0;visibility:hidden} .fixLi, .fixL .cmBri{width:100%;max-width:680px;max-height:calc(100% - 60px);border-radius:16px;transition:inherit;z-index:3;display:flex;overflow:hidden;position:relative;margin:0 auto;box-shadow:0 5px 30px 0 rgba(0,0,0,.05)} .fixLs{padding:60px 20px 20px;overflow-y:scroll;overflow-x:hidden;width:100%;background:var(--contentB)} .fixH, .mnH{display:flex;background:inherit;position:absolute;top:0;left:0;right:0;padding:0 10px;z-index:2} .fixH .cl{padding:0 10px;display:flex;align-items:center;justify-content:flex-end;position:relative;flex-shrink:0;min-width:40px} .fixH .c::after, .ntfC .c::after, .mnH .c::after{content:'\2715';line-height:18px;font-size:14px} .fixT::before{content:attr(data-text);flex-grow:1;padding:16px 10px;font-size:90%;opacity:.7} .fixT .c::before, .mnH .c::before{content:attr(aria-label);font-size:11px;margin:0 8px;opacity:.6} .fixi:checked ~ .fixL, #comment:target .fixL{margin-bottom:0;opacity:1;visibility:visible} .fixi:checked ~ .fixL .fCls, #comment:target .fixL .fCls, .BlogSearch input:focus ~ .fCls{opacity:1;visibility:visible;background:rgba(0,0,0,.2); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px)} .shBri{max-width:520px} .fnBr{max-width:480px}
/* Display Flex */ .bIc{display:flex;align-items:center}
/* Navbar */ .navbar{background:var(--navB);height:var(--navH);color:var(--navT);overflow:hidden} .navR .section{justify-content:flex-end} .navIn svg, header svg{width:20px;height:20px;fill:var(--navI); opacity:.8} .navIn svg.line{fill:none;stroke:var(--navI)} .navIn .section{display:flex;align-items:center;height:100%;position:relative;width:calc(100% + 14px);left:-7px;right:-7px} .navIn .section >*{margin:0 7px} .navIn .a{color:inherit} .navIn ul{list-style:none;margin:0;padding:0} .mLang{align-items:baseline;font-size:13px} .mLang, .mSoc{display:flex;position:relative;width:calc(100% + 14px);left:-7px;right:-7px} .mLang .a{width:30px;height:30px;display:flex;align-items:center;justify-content:center} .mLang .a::before{content:attr(data-text)} .mLang li.u{font-size:12px;text-transform:uppercase} .mLang li:not(:last-child){display:flex;align-items:center} .mLang li:not(:last-child)::after{content:'';height:14px; border-left:1px solid #999; margin:0 5px;opacity:.7; flex:0 0} .mLang span, .mSoc span{opacity:.5} .mSoc >*{position:relative} .mSoc svg{z-index:1} .mSoc svg{width:19px;height:19px;opacity:.8}
/* Header */ header{width:100%;z-index:10; position:-webkit-sticky;position:sticky;top:0;} header.stick{border-bottom:var(--headerL) solid var(--contentL)} header a{color:inherit} header svg{fill:var(--headerI)} header svg.line{fill:none;stroke:var(--headerI)} .headCn{position:relative;height:var(--headerH);color:var(--headerC);background:var(--headerB)} .headIn, .navIn{display:flex;justify-content:space-between;height:100%; position:relative} .headL{display:flex;align-items:center;min-width:200px;max-width: 300px ; /* change this to increase header title width */} .headP{display:flex} .headI{display:flex;align-items:center;justify-content:flex-end; height:100%} .headIc{font-size:11px;display:flex;list-style:none;margin:0;padding:0} .headIc >*{position:relative} .headIc svg{z-index:1} ul.headIc{position:relative;width:calc(100% + 14px);left:-7px;right:-7px;justify-content:flex-start;flex-direction:row-reverse} ul.headIc li{margin:0 2px} /* Header Widget */ .Header{background-repeat:no-repeat;background-size:100%;background-position:center} .Header img{max-width:160px;max-height:45px} .Header .headH{display:block;color:inherit;font-size:var(--headerT); font-weight:var(--headerW)} .Header .headH.hasSub{display:flex;align-items:baseline} .Header .headTtl{overflow:hidden;white-space:nowrap;text-overflow:ellipsis; display:block} .Header .headSub{margin:0 5px;font:400 11px var(--fontB); white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:60px;opacity:.6} .Header .headSub::before{content:attr(data-text)} /* Header Icon */ .tIc{width:30px;height:30px;justify-content:center} .tIc::after{content:'';background:var(--transB);border-radius:12px;position:absolute;left:0;right:0;top:0;bottom:0;transition:var(--trans-1);opacity:0;visibility:hidden} .tIc:hover::after{opacity:1;visibility:visible;transform:scale(1.3,1.3)} .tDL .d2, .drK .tDL .d1{display:none}
/* mainNav */ .mnBr ul, .topM ul{list-style:none;margin:0;padding:0} .mnMn svg, .tpMn svg{flex-shrink:0} .mnMn svg.d, .tpMn svg.d{width:14px;height:14px}
/* mainIn Section */ .mainIn{padding:20px 0 40px} .blogCont{flex:1 0; position:relative} .blogCont .section:not(.no-items), .blogCont .widget:not(:first-child), .adSticky:not(.no-items){margin-top:40px} .blogCont .section:first-child{margin-top:0} .blogAd .section:not(.no-items){margin-bottom:40px} .blogM{flex-wrap:wrap;justify-content:center} .blogIn{flex-grow:1} .sidebar{max-width:500px;margin:50px auto 0} .sideSticky, .adSticky{position:-webkit-sticky;position:sticky;top:calc(var(--headerH) + 10px)} .onPs .mainbar, .onBl .mainbar{max-width:var(--postW)} .onPg .mainbar{max-width:var(--pageW)} /* blogTopc and ToC */ .topM a{color:inherit} .tpMn .a, .tpMn ul li >*{display:flex;align-items:center;padding:8px 5px;border-radius:8px;position:relative;width:calc(100% + 20px);left:-10px;right:-10px;transition:var(--trans-1)} .tpMn .a >*{margin:0 5px} .tpMn .n, .tpMn ul li >*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 0 calc(100% - 64px)} .tpMn ul{margin-bottom:10px} .tpMn ul li >*{opacity:.8; padding:8px 10px} .tpMn ul li >*:hover{opacity:1} .tpMn .a:hover, .tpMn ul li a:hover{color:var(--linkC);background:rgba(0,0,0,.05)} .tpMn li.br::after{content:'';display:block;border-bottom:1px solid var(--contentL);margin:12px 0} .tpMn details summary{list-style:none;outline:none;cursor:default} .tpMn details summary::-webkit-details-marker{display:none} .tpMn details[open] svg.d{transform:rotate(180deg)} .tocI ol ol ol{display:none} .tocI ol{list-style:none;padding:0;margin:0; line-height:1.5em} .tocI ol{counter-reset:toc-count} .tocI ol ol, .tocI li:not(:last-child){margin-bottom:5px} .tocI li li:first-child{margin-top:5px} .tocI li{display:flex;flex-wrap:wrap; justify-content:flex-end} .tocI li::before{flex:0 0 23px; content:counters(toc-count,'.')'. ';counter-increment:toc-count} .tocI li a{flex:1 0 calc(100% - 23px)} .tocI li li::before{flex:0 0 28px; content:counters(toc-count,'.')} .tocI li li a{flex:1 0 calc(100% - 28px)} .tocI >ol >li >ol{flex:0 0 calc(100% - 23px)} .tocI >ol >li >ol ol{flex:0 0 calc(100% - 28px)} .tocI a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tocI a:hover{text-decoration:underline}
/* Footer */ footer{font-size:97%;line-height:1.8em; padding:25px 0 30px; border-top:var(--fotL) solid var(--contentL); color:var(--fotT); background:var(--fotB)} footer ul{list-style:none;margin:0;padding:0} footer a{color:inherit} .cdtIn{display:flex;align-items:center;justify-content:space-between; position:relative;width:calc(100%);left:0;right:0} .cdtIn >*{margin:0 0} .cdtIn .HTML{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .cdtIn .PageList{flex-shrink:0;position:relative} .cdtIn .mSoc{justify-content:flex-end} .fotCd{position:relative; display:inline} .fotCd .creator{opacity:0;position:absolute;left:0;bottom:-22px} .ftL{display:flex;align-items:center;justify-content:flex-end; position:relative;width:calc(100% + 8px);left:-4px;right:-4px} .ftL >*{margin:0 4px} .ftL svg{width:20px;height:20px;stroke:var(--fotT)} .ftL svg.u{width:14px;height:14px} @media screen and (min-width:641px){.ftL{display:none} .ftMn, .ftMn li{display:inline-flex;align-items:baseline} .ftMn >*:not(:last-child)::after{content:'\00B7';opacity:.7;margin:0 10px} .ftMn span{opacity:.6} .ftMn a{opacity:.8} .ftMn a:hover{color:var(--linkC)}} @media screen and (max-width:640px){.cdtIn{align-items:center} .cdtIn .PageList{margin-left:auto} .cdtIn .mSoc >*:nth-child(4){display:none} .ftMn{position:absolute;bottom:0;right:0;width:180px;background:var(--contentB);box-shadow:0 5px 25px -3px rgba(0,0,0,.1);font-size:14px;transition:var(--trans-1);border-radius:16px 16px 5px 16px;z-index:2;opacity:0;visibility:hidden} .ftMn li >*{display:block;padding:8px 15px; overflow:hidden;text-overflow:ellipsis; opacity:.8; line-height:normal} .ftMn li:first-child >*{padding-top:15px} .ftMn li:last-child >*{padding-bottom:15px} .ftI:checked ~ .ftMn, .ftI:checked ~ .fCls{opacity:1;visibility:visible;z-index:12} .ftI:checked ~ .fCls{z-index:11}}
/* Article*/ .onId .blogPts, .itemFt .itm{display:flex;flex-wrap:wrap;align-items:center;position:relative; width:calc(100% + 22px);left:-11px;right:-11px} .onId .blogPts >*, .itemFt .itm >*{flex:0 0 calc(50% - 22px);width:calc(50% - 22px); margin-bottom:0;margin-left:11px;margin-right:11px} .onId .blogPts{align-items:stretch} .onId .blogPts >*{margin-bottom:40px;padding-bottom:40px; position:relative} .onId .blogPts .nAd{padding-bottom:0} .onId .blogPts .pInf{position:absolute;bottom:0;left:0;right:0} .onId .blogPts.mty{display:block;width:100%;left:0;right:0} .onId .blogPts.mty .noPosts{width:100%;margin:0;padding:0} .blogPts .ntry.noAd .widget, .Blog ~ .HTML{display:none}
/* Blog title */ .blogTtl{font-size:14px; margin:0 0 30px;width:calc(100% + 16px);display:flex;align-items:center;justify-content:space-between;position:relative;left:-8px;right:-8px} .blogTtl .t, .blogTtl.hm .title{margin:0 8px;flex-grow:1} .blogTtl .t span{font-weight:400;font-size:90%; opacity:.7} .blogTtl .t span::before{content:attr(data-text)} .blogTtl .t span::after{content:''; margin:0 4px} .blogTtl .t span.hm::after{content:'/'; margin:0 8px} .blogTtl .g{position:relative;flex-shrink:0;margin:0 2px;font-size:12px} .blogTtl .g svg{width:20px;height:20px} /* Thumbnail */ .pThmb{flex:0 0 calc(50% - 12.5px);overflow:hidden;position:relative;border-radius:3px; margin-bottom:20px; background:var(--transB)} .pThmb .thmb{display:block;position:relative;padding-top:52.335%; color:inherit; transition:var(--trans-1)} .pThmb .thmb amp-img{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;max-height:108%;text-align:center;transform:translate(-50%, -50%)} .pThmb div.thmb span::before{content:attr(data-text); opacity:.7; white-space:nowrap} .pThmb:not(.nul)::before{position:absolute;top:0;right:0;bottom:0;left:0; transform:translateX(-100%); background-image:linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 20%, rgba(255,255,255,.6) 60%, rgba(255,255,255, 0)); animation:shimmer 2s infinite;content:''} .pThmb.iyt:not(.nul) .thmb::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,.4) url("data:image/svg+xml,") center / 35px no-repeat; opacity:0;transition:var(--trans-1)} .pThmb.iyt:not(.nul):hover .thmb::after{opacity:1} /* Sponsored */ .iFxd{display:flex;justify-content:flex-end;position:absolute;top:0;left:0;right:0;padding:10px 6px;font-size:13px;line-height:16px} .iFxd >*{display:flex;align-items:center;margin:0 5px;padding:5px 2.5px;border-radius:8px;background:var(--contentB);color:inherit;box-shadow:0 8px 25px 0 rgba(0,0,0,.1)} .iFxd >* svg{width:16px;height:16px;stroke-width:1.5;margin:0 2.5px;opacity:.7} .iFxd .cmnt{padding:5px;color:var(--bodyC)} .iFxd .cmnt::after{content:attr(data-text);margin:0 2.5px;opacity:.7} .drK .iFxd >* svg.line{stroke:var(--iconC)} /* Label */ .pLbls::before, .pLbls >*::before{content:attr(data-text)} .pLbls::before{opacity:.7} .pLbls a:hover{text-decoration:underline} .pLbls >*{color:inherit;display:inline; padding:3.5px 0} .pLbls >*:not(:last-child)::after{content:'/'} /* Profile Images and Name */ .im{width:35px;height:35px;border-radius:16px; background-color:var(--transB);background-size:100%;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center} .im svg{width:18px;height:18px;opacity:.4} .nm::after{content:attr(data-text)} /* Title and Entry */ .pTtl{font-size:1.2rem;line-height:1.5em} .pTtl.itm{font-size:var(--postT);font-family:var(--fontBa);font-weight:900; line-height:1.3em} .pTtl.itm.nSpr{margin-bottom:30px} .aTtl a:hover{color:var(--linkC)} .aTtl a, .pSnpt{color:inherit; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .pEnt{margin-top:40px; font-size:var(--postF);font-family:var(--fontBa); line-height:1.8em} /* Snippet, Description, Headers and Info */ .pHdr.nHdr{margin:0} .pHdr{width:calc(100% + 8px);position:relative;left:-4px;right:-4px;margin-bottom:3px; display:flex;align-items:center} .pHdr .aNm{flex-grow:1; opacity:.8;margin:0 2px; display:inline-flex;flex-wrap:wrap;max-width:calc(100% - 30px); line-height:25px} .pHdr .nm, .pHdr .pLbls{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0 2px; color:inherit} .pHdr .pLbls{opacity:.8} .pSml{font-size:96%} .pSnpt{-webkit-line-clamp:2;margin:10px 0 0;font-family:var(--fontBa);font-size:14px;line-height:1.6em; opacity:.7} .pDesc{font-size:16px;line-height:1.5em;margin:8px 0 25px;opacity:.7} .pInf{display:flex;align-items:baseline;justify-content:space-between; margin-top:10px} .pInf.nTm{margin:0} .pInf.nSpr .pJmp{opacity:1} .pInf.nSpr .pJmp::before{content:attr(aria-label)} .pInf.ps{justify-content:flex-start;align-items:center; margin-top:25px; position:relative;left:-4px;right:-4px;width:calc(100% + 8px)} .pInf.ps .pTtmp{opacity:1} .pInf.ps .pTtmp::before{content:attr(data-date) ' '} .pInf.ps .pTtmp::after{display:inline;line-height:1.5em} .pInf.ps.nul{display:none} .pInf .pIm{flex-shrink:0; margin:0 4px} .pInf .pNm{flex-grow:1;width:calc(100% - 108px);display:inline-flex;flex-wrap:wrap;align-items:baseline} .pInf .pNm.l{display:none} .pInf .pDr{opacity:.7;display:inline-block;margin:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%} .pInf .pDr >*:not(:first-child)::before{content:'\00B7';margin:0 5px} .pInf .pIn{display:inline} .pInf .nm{margin:0 4px} .pInf .n .nm::before, .pHdr .n .nm::before{content:attr(data-write) ' ';opacity:.7} .pInf .im{width:28px;height:28px} .aTtmp{opacity:.7} .aTtmp, .pJmp{overflow:hidden} .pTtmp::after, .pJmp::before, .iTtmp::before{content:attr(data-text); display:block;line-height:25px; white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .pJmp{display:inline-flex;align-items:center; opacity:0; transition:var(--trans-2)} .pJmp::before{content:attr(aria-label)} .pJmp svg{height:18px;width:18px;stroke:var(--linkC); flex-shrink:0} .ntry:hover .pJmp, .itm:hover .pJmp{opacity:1} /* Blog pager */ .blogPg{display:flex;flex-wrap:wrap;justify-content:space-between; font-size:90%;font-family:var(--fontB);line-height:20px; color:#fffdfc; margin:30px 0 40px; max-width:100%} .blogPg >*{display:flex;align-items:center; padding:10px 13px;margin-bottom:10px; color:inherit;background:var(--linkB); border-radius:3px} .blogPg >* svg{width:18px;height:18px; stroke:var(--darkT); stroke-width:1.5} .blogPg >*::before{content:attr(data-text)} .blogPg .jsLd{margin-left:auto;margin-right:auto} .blogPg .nwLnk::before, .blogPg .jsLd::before{display:none} .blogPg .nwLnk::after, .blogPg .jsLd::after{content:attr(data-text); margin:0 8px} .blogPg .olLnk::before{margin:0 8px} .blogPg .nPst, .blogPg .current{background:var(--contentL); color:var(--bodyCa)} .blogPg .nPst.jsLd svg{fill:var(--darkTa);stroke:var(--darkTa)} .blogPg .nPst svg.line{stroke:var(--darkTa)} /* Breadcrumb */ .brdCmb{margin-bottom:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brdCmb a{color:inherit} .brdCmb >*:not(:last-child)::after{content:'/'; margin:0 4px;font-size:90%;opacity:.6} .brdCmb >*{display:inline} .brdCmb .tl::before{content:attr(data-text)} .brdCmb .hm a{font-size:90%;opacity:.7}
/* Article Style */ .pS h1, .pS h2, .pS h3, .pS h4, .pS h5, .pS h6{margin:1.5em 0 18px; font-family:var(--fontBa);font-weight:900; line-height:1.5em} .pS h1:target, .pS h2:target, .pS h3:target, .pS h4:target, .pS h5:target, .pS h6:target{padding-top:var(--headerH);margin-top:0} /* Paragraph */ .pS p{margin:1.7em 0} .pIndent{text-indent:2.5rem} .onIt:not(.Rtl) .dropCap{float:left;margin:4px 8px 0 0; font-size:55px;line-height:45px;opacity:.8} .pS hr{margin:3em 0; border:0} .pS hr::before{content:'\2027 \2027 \2027'; display:block;text-align:center; font-size:24px;letter-spacing:0.6em;text-indent:0.6em;opacity:.8;clear:both} .pRef{display:block;font-size:14px;line-height:1.5em; opacity:.7;} /* Img and Ad */ .pS img{display:inline-block;border-radius:3px;height:auto !important} .pS img.full{display:block !important; margin-bottom:10px; position:relative; width:100%;max-width:none} .pS .widget, .ps .pAd >*{margin:40px 0} /* Note */ .note{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;font-family:var(--fontB);line-height:1.6em;border-radius:10px;overflow:hidden} .note::before{content:'';width:60px;height:60px;background:#81b4dc;display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .note::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .note.wr{background:#ffdfdf;color:#48525c} .note.wr::before{background:#e65151} .note.wr::after{content:'\0021'} /* Ext link */ .extL::after{content:''; width:14px;height:14px; display:inline-block;margin:0 5px; background: url("data:image/svg+xml,") center / 16px no-repeat} /* Scroll img */ .psImg{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center; margin:2em 0; position:relative;left:-7px;right:-7px; width:calc(100% + 14px)} .psImg >*{width:calc(50% - 14px); margin:0 7px 14px; position:relative} .psImg img{display:block} .scImg >*{width:calc(33.3% - 14px); margin:0 7px} .btImg label{position:absolute;top:0;left:0;right:0;bottom:0; border-radius:3px; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.6); transition:var(--trans-1); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); color:var(--darkT); font-size:13px;font-family:var(--fontB)} .hdImg .shImg{width:100%;margin:0; left:0;right:0; transition:var(--trans-1); max-height:0;opacity:0;visibility:hidden} .inImg:checked ~ .hdImg .shImg{max-height:1000vh;opacity:1;visibility:visible} .inImg:checked ~ .hdImg .btImg label{opacity:0;visibility:hidden} /* Post related */ .pRelate{margin:40px 0;padding:20px 0; border:1px solid #989b9f;border-left:0;border-right:0; font-size:14px;line-height:1.8em} .pRelate b{font-weight:400; margin:0;opacity:.8} .pRelate ul, .pRelate ol{margin:8px 0 0;padding:0 20px} /* Blockquote */ blockquote, .cmC i[rel=quote]{position:relative;font-size:.97rem; opacity:.8;line-height:1.6em;margin-left:0;margin-right:0;padding:5px 20px;border-left:2px solid var(--contentL)} blockquote.s-1, details.sp{font-size:.93rem; padding:25px 25px 25px 45px; border:1px solid #989b9f;border-left:0;border-right:0;line-height:1.7em} blockquote.s-1::before{content:'\201D';position:absolute;top:10px;left:0; font-size:60px;line-height:normal;opacity:.5} /* Table */ .ps table{margin:0 auto; font-size:14px;font-family:var(--fontB)} .ps table:not(.tr-caption-container){min-width:90%;border:1px solid var(--contentL);border-radius:3px;overflow:hidden} .ps table:not(.tr-caption-container) td{padding:16px} .ps table:not(.tr-caption-container) tr:not(:last-child) td{border-bottom:1px solid var(--contentL)} .ps table:not(.tr-caption-container) tr:nth-child(2n+1) td{background:rgba(0,0,0,.01)} .ps table th{padding:16px; text-align:inherit; border-bottom:1px solid var(--contentL)} .ps .table{display:block; overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth} /* Img caption */ figure{margin-left:0;margin-right:0} .ps .tr-caption, .psCaption, figcaption{display:block; font-size:14px;line-height:1.6em; font-family:var(--fontB);opacity:.7} /* Syntax */ .pre{background:var(--synxBg);color:var(--synxC); direction: ltr} .pre:not(.tb){position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:var(--fontC)} .pre pre{margin:0;color:inherit;background:inherit} .pre:not(.tb)::before, .cmC i[rel=pre]::before{content:'';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:var(--synxGray);font-size:10px;padding:0 10px;z-index:2;line-height:30px} .pre:not(.tb).html::before{content:'.html'} .pre:not(.tb).css::before{content:'.css'} .pre:not(.tb).js::before{content:'.js'} pre, .cmC i[rel=pre]{display:block;position:relative;font-family:var(--fontC);font-size:13px;line-height:1.6em;border-radius:3px;background:var(--synxBg);color:var(--synxC);padding:30px 20px 20px;margin:1.7em auto; -moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre} pre i{color:var(--synxBlue);font-style:normal} pre i.block{color:#fff;background:var(--synxBlue)} pre i.green{color:var(--synxGreen)} pre i.gray{color:var(--synxGray)} pre i.red{color:var(--synxOrange)} pre i.blue{color:var(--synxBlue)} code{display:inline;padding:5px;font-size:14px;border-radius:3px;line-height:inherit;color:var(--synxC);background:#f2f3f5;font-family:var(--fontC)} /* Multi syntax */ .pre.tb{border-radius:5px} .pre.tb pre{margin:0;background:inherit} .pre.tb .preH{font-size:13px;border-color:rgba(0,0,0,.05);margin:0} .pre.tb .preH >*{padding:13px 20px} .pre.tb .preH::after{content:'';font-size:10px;font-family:var(--fontC);color:var(--synxGray);padding:15px;margin-left:auto} .pre.tb >:not(.preH){display:none} .pS input[id*="1"]:checked ~ div[class*="C-1"], .pS input[id*="2"]:checked ~ div[class*="C-2"], .pS input[id*="3"]:checked ~ div[class*="C-3"], .pS input[id*="4"]:checked ~ div[class*="C-4"]{display:block} /* ToC */ .pS details summary{list-style:none;outline:none} .pS details summary::-webkit-details-marker{display:none} details.sp{padding:20px 15px} details.sp summary{display:flex;justify-content:space-between;align-items:baseline} details.sp summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer} details.sp[open] summary::after{content:attr(data-hide)} details.toc a:hover{text-decoration:underline} details.toc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit} details.toc ol{list-style:none;padding:0;margin:0; line-height:1.6em; counter-reset:toc-count} details.toc ol ol ol ol{display:none} details.toc ol ol, .tocIn li:not(:last-child){margin-bottom:5px} details.toc li li:first-child{margin-top:5px} details.toc li{display:flex;flex-wrap:wrap; justify-content:flex-end} details.toc li::before{flex:0 0 23px; content:counters(toc-count,'.')'. ';counter-increment:toc-count} details.toc li a{flex:1 0 calc(100% - 23px)} details.toc li li::before{flex:0 0 28px; content:counters(toc-count,'.')} details.toc li li a{flex:1 0 calc(100% - 28px)} details.toc li li li::before{flex:0 0 45px} details.toc li li li a{flex:1 0 calc(100% - 45px)} details.toc .toC >ol{margin-top:1em} details.toc .toC >ol >li >ol{flex:0 0 calc(100% - 23px)} details.toc .toC >ol >li >ol ol{flex:0 0 calc(100% - 28px)} details.toc .toC >ol >li >ol ol ol{flex:0 0 calc(100% - 45px)} /* Accordion */ .showH{margin:1.7em 0;font-size:.93rem;font-family:var(--fontB);line-height:1.7em} details.ac{padding:18px 0;border-bottom:1px solid var(--contentL)} details.ac:first-child{border-top:1px solid var(--contentL)} details.ac summary{font-weight:700;cursor:default; display:flex;align-items:baseline; transition:var(--trans-1)} details.ac summary::before{content:'\203A'; flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px; font-weight:400;font-size:1.33rem;color:inherit} details.ac[open] summary{color:var(--linkC)} details.ac:not(.alt)[open] summary::before{transform:rotate(90deg);padding:0 0 0 5px;justify-content:center} details.ac.alt summary::before{content:'\002B'; padding:0 2px} details.ac.alt[open] summary::before{content:'\2212'} details.ac .aC{padding:0 25px;opacity:.9} /* Tabs */ .tbHd{display:flex; border-bottom:1px solid var(--contentL);margin-bottom:30px;font-size:14px;font-family:var(--fontB);line-height:1.6em; overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch} .tbHd >*{padding:12px 15px; border-bottom:1px solid transparent; transition:var(--trans-1);opacity:.6;white-space:nowrap; scroll-snap-align:start} .tbHd >*::before{content:attr(data-text)} .tbCn >*{display:none;width:100%} .tbCn >* p:first-child{margin-top:0} .pS input[id*="1"]:checked ~ .tbHd label[for*="1"], .pS input[id*="2"]:checked ~ .tbHd label[for*="2"], .pS input[id*="3"]:checked ~ .tbHd label[for*="3"], .pS input[id*="4"]:checked ~ .tbHd label[for*="4"]{border-color:var(--linkB);opacity:1} .pS input[id*="1"]:checked ~ .tbCn div[class*="Text-1"], .pS input[id*="2"]:checked ~ .tbCn div[class*="Text-2"], .pS input[id*="3"]:checked ~ .tbCn div[class*="Text-3"], .pS input[id*="4"]:checked ~ .tbCn div[class*="Text-4"]{display:block} .tbHd.stick{position:-webkit-sticky;position:sticky;top:var(--headerH);background:var(--bodyB)} /* Split */ .ps .blogPg{font-size:13px; justify-content:center; position:relative;width:calc(100% + 8px);left:-4px;right:-4px} .ps .blogPg >*{padding:8px 15px;margin:0 4px 8px} /* Youtube fullpage */ .videoYt{position:relative;padding-bottom:56.25%; overflow:hidden;border-radius:5px} .videoYt iframe{position:absolute;width:100%;height:100%;left:0;right:0} /* Lazy Youtube */ .lazyYt{background:var(--synxBg);position:relative;overflow:hidden;padding-top:56.25%;border-radius:5px} .lazyYt img{width:100%;top:-16.84%;left:0;opacity:.95} .lazyYt img, .lazyYt iframe, .lazyYt .play{position:absolute} .lazyYt iframe{width:100%;height:100%;bottom:0;right:0} .lazyYt .play{top:50%;left:50%; transform:translate3d(-50%,-50%,0); transition:all .5s ease;display:block;width:70px;height:70px;z-index:1} .lazyYt .play svg{width:inherit;height:inherit; fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:8} .lazyYt .play .c{stroke:rgba(255,255,255,.85);stroke-dasharray:650;stroke-dashoffset:650; transition:all .4s ease-in-out; opacity:.3} .lazyYt .play .t{stroke:rgba(255,255,255,.75);stroke-dasharray:240;stroke-dashoffset:480; transition:all .6s ease-in-out; transform:translateY(0)} .lazyYt .play:hover .t{animation:nudge .6s ease-in-out;-webkit-animation:nudge .6s ease-in-out} .lazyYt .play:hover .t, .lazyYt .play:hover .c{stroke-dashoffset:0; opacity:.7;stroke:#FF0000} .nAmp .lazyYt{display:none} /* Button */ .button{display:inline-flex;align-items:center; margin:10px 0;padding:12px 15px;outline:0;border:0; border-radius:3px;line-height:20px; color:#fffdfc; background:var(--linkB); font-size:14px;font-family:var(--fontB); white-space:nowrap;overflow:hidden;max-width:320px} .button.ln{color:inherit;background:transparent; border:1px solid var(--bodyCa)} .button.ln:hover{border-color:var(--linkB);box-shadow:0 0 0 1px var(--linkB) inset} .btnF{display:flex;justify-content:center; margin:10px 0;width:calc(100% + 12px);left:-6px;right:-6px;position:relative} .btnF >*{margin:0 6px} /* Download btn */ .dlBox{max-width:500px;background:#f1f1f0;border-radius:10px;padding:12px;margin:1.7em 0; display:flex;align-items:center; font-size:14px} .dlBox .fT{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:45px;height:45px; padding:10px; background:rgba(0,0,0,.1);border-radius:5px} .dlBox .fT::before{content:attr(data-text);opacity:.7} .dlBox .fT.lazy{background-size:cover;background-position:center;background-repeat:no-repeat} .dlBox .fT.lazy::before{display:none} .dlBox a{flex-shrink:0;margin:0;padding:10px 12px;border-radius:5px;font-size:13px} .dlBox a::after{content:attr(aria-label)} .dlBox .fN{flex-grow:1; width:calc(100% - 200px);padding:0 15px} .dlBox .fN >*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dlBox .fS{line-height:16px;font-size:12px;opacity:.8} /* Icon btn */ .icon{flex-shrink:0;display:inline-flex} .icon::before{content:'';width:18px;height:18px;background-size:18px;background-repeat:no-repeat;background-position:center} .icon::after{content:'';padding:0 6px} .icon.dl::before, .drK .button.ln .icon.dl::before{background-image:url("data:image/svg+xml,")} .icon.demo::before{background-image:url("data:image/svg+xml,")} .icon.cart:before{background-image:url("data:image/svg+xml,")} .button.ln .icon.dl::before{background-image:url("data:image/svg+xml,")} /* Lightbox image */ .zmImg.s{position:fixed;top:0;left:0;bottom:0;right:0;width:100%;margin:0;background:rgba(0,0,0,.75); display:flex;align-items:center;justify-content:center;z-index:999; -webkit-backdrop-filter:saturate(180%) blur(15px); backdrop-filter:saturate(180%) blur(15px)} .zmImg.s img{display:block;max-width:92%;max-height:92%;width:auto;margin:auto;border-radius:10px;box-shadow:0 5px 30px 0 rgba(0,0,0,.05)} .zmImg.s img.full{left:auto;right:auto;border-radius:10px;width:auto} .zmImg::after{content:'\2715';line-height:16px;font-size:14px;color:#fffdfc;background:var(--linkB); position:fixed;bottom:-20px;right:-20px; display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%; transition:var(--trans-1);opacity:0;visibility:hidden} .zmImg.s::after{bottom:20px;right:20px;opacity:1;visibility:visible;cursor:pointer}
/* Article Style Responsive */ @media screen and (max-width: 640px){.pS img.full{width:calc(100% + 40px);left:-20px;right:-20px; border-radius:0} .note{font-size:13px} .scImg{flex-wrap:nowrap;justify-content:flex-start;position:relative;width:calc(100% + 40px);left:-20px;right:-20px;padding:0 13px; overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch} .scImg >*{flex:0 0 80%;scroll-snap-align:center} .ps .table{position:relative; width:calc(100% + 40px);left:-20px;right:-20px;padding:0 20px; display:flex}} @media screen and (max-width:500px){.hdImg{width:100%;left:0;right:0} .hdImg >*, .shImg >*{width:100%;margin:0 0 16px} .ps .tr-caption, .psCaption, figcaption{font-size:13px} .btnF >*{flex-grow:1;justify-content:center}.btnF >*:first-child{flex:0 0 auto} .dlBox a{width:42px;height:42px;justify-content:center} .dlBox a::after, .dlBox .icon::after{display:none} .pS .separator a{display:block!important;margin:0!important}}
/* Author profile */ .admPs{display:flex; max-width:480px;margin:30px 0; padding:12px 12px 15px; background:var(--contentB);border:1px solid var(--contentL);border-radius:8px; box-shadow:0 10px 25px -3px rgba(0,0,0,.1)} .admIm{flex-shrink:0; padding:5px 0 0} .admIm .im{width:34px;height:34px} .admI{flex-grow:1; width:calc(100% - 34px);padding:0 12px} .admN::before{content:attr(data-write) ' '; opacity:.7;font-size:90%} .admN::after{content:attr(data-text)} .admA{margin:5px 0 0; font-size:90%; opacity:.9;line-height:1.5em; /*display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden*/} /* Share btn */ .pSh{margin:15px 0;padding:18px 0;border:1px solid rgba(0,0,0,.05);border-left:0;border-right:0} .pShc{display:flex;align-items:center;flex-wrap:wrap; position:relative;width:calc(100% + 18px);left:-9px;right:-9px;font-size:13px;opacity:.8} .pShc::before{content:attr(data-text);margin:0 9px;flex-shrink:0} .pShc >*{margin:0 5px; display:flex;align-items:center; color:inherit} .pShc a::after{content:attr(data-text);margin:0 3px} .pShc svg, .cpL svg{width:18px;height:18px; margin:0 3px} .shL{position:relative;width:calc(100% + 20px);left:-10px;right:-10px;margin-bottom:20px;display:flex;flex-wrap:wrap;justify-content:center} .shL >*{margin:0 10px 20px;text-align:center} .shL >*::after{content:attr(data-text);font-size:90%;opacity:.7;display:block} .shL a{display:flex;align-items:center;justify-content:center;flex-wrap:wrap; width:65px;height:65px; color:inherit;margin:0 auto 5px;padding:8px;border-radius:26px;background:#f1f1f0} .shL svg{opacity:.8} .cpL{padding-bottom:15px} .cpL::before{content:attr(data-text);display:block;margin:0 0 15px;opacity:.8} .cpL svg{margin:0 4px;opacity:.7} .cpL input{border:0;outline:0; background:transparent;color:rgba(8,16,43,.4); padding:18px 8px;flex-grow:1} .cpL label{color:var(--linkC);display:flex;align-items:center;align-self:stretch; flex-shrink:0;padding:0 8px} .cpLb{display:flex;align-items:center;position:relative;background:#f1f1f0;border-radius:4px 4px 0 0;border-bottom:1px solid rgba(0,0,0,.25); padding:0 8px} .cpLb:hover{border-color:rgba(0,0,0,.42);background:#ececec} .cpLn span{display:block;padding:5px 14px 0;font-size:90%;color:#2e7b32; transition:var(--trans-1);animation:fadein 2s ease forwards; opacity:0;height:22px} /* Comments */ .pCmnts{margin-top:50px} .cmDis{text-align:center;margin-top:20px;opacity:.7} .cmMs{margin-bottom:20px} .cm iframe{width:100%} .cm:not(.cmBr) .cmBrs{background:transparent;position:relative;padding:60px 20px 0;width:calc(100% + 40px);left:-20px;right:-20px} .cmH h3.title{margin:0;flex-grow:1;padding:16px 10px} .cmH .s{margin:0 14px} .cmH .s::before{content:attr(data-text);margin:0 6px;opacity:.7;font-size:90%} .cmH .s::after{content:'\296E';line-height:18px;font-size:17px} .cmAv{flex-shrink:0;width:35px} .cmAv .im{width:35px;height:35px;border-radius:50%} .cmIn{flex-grow:1;width:100%;position:relative} .cmBd.del .cmCo{font-style:italic;font-size:90%;line-height:normal;border:1px dashed rgba(0,0,0,.2);border-radius:3px;margin:.5em 0;padding:15px;opacity:.7; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmHr{line-height:20px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmHr .d{font-size:90%;color:var(--darkTa)} .cmHr.a .n{display:inline-flex;align-items:center} .cmHr.a .n::after{content:'\2714';display:flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:8px;background:#519bd6;color:#fefefe;border-radius:50%;margin-left:3px} .cmCo{line-height:1.4em;opacity:.9} .cmCo img{margin-top:1em;margin-bottom:1em} .cmC i[rel=image]{font-size:90%; display:block;position:relative; min-height:50px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; margin:1em auto} .cmC i[rel=image]::before{content:'This feature isn\0027t available!';border:1px dashed rgba(0,0,0,.2);border-radius:3px;padding:10px;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;bottom:0;right:0;background:var(--contentB)} .cmC i[rel=pre], .cmC i[rel=quote]{margin-top:1em;margin-bottom:1em; font-style:normal;line-height:inherit;padding:20px; opacity:1} .cmC i[rel=pre]::before{display:block;width:auto} .cmC i[rel=pre]{text-align:left} .cmC i[rel=quote]{display:block;font-style:italic;font-size:inherit;padding:5px 15px} .cmAc{margin-top:10px} .cmAc a{font-size:90%;color:inherit;opacity:.7;display:inline-flex} .cmAc a::before{content:'\2934';line-height:18px;font-size:16px;transform:rotate(90deg)} .cmAc a::after{content:attr(data-text);margin:0 4px} .cmR{margin:10px calc(25px + 8px) 0} .cmRp ~ .cmAc, .cmBd.del ~ .cmAc, .onIt:not(.Rtl) .cmHr .date{display:none} .cmRi:checked ~ .cmRp .thTg{margin-bottom:0} .cmRi:checked ~ .cmRp .thTg::before{content:attr(aria-label)} .cmRi:checked ~ .cmRp .thCh, .cmRi:checked ~ .cmRp .cmR{display:none} .cmAl:checked ~ .cm .cmH .s::before{content:attr(data-new)} .cmAl:checked ~ .cm .cmCn >ol{flex-direction:column-reverse} .thTg{display:inline-flex;align-items:center;margin:15px 0 18px;font-size:90%} .thTg::after{content:'';width:20px;border-bottom:1px solid var(--widgetTac);opacity:.5;margin:0 10px} .thTg::before{content:attr(data-text);opacity:.7} .cmCn ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .cmCn li{display:block;padding-bottom:25px;position:relative} .cmCn li .cmRbox{margin-top:20px;flex-grow:1} .cmCn li li{padding-bottom:15px;display:flex;width:calc(100% + 8px);left:-4px;right:-4px} .cmCn li li:last-child{padding-bottom:0} .cmCn li li .cmAv{width:calc(25px + 8px);padding:0 4px} .cmCn li li .cmAv .im{width:25px;height:25px} .cmCn li li .cmIn{width:calc(100% - 25px - 8px);padding:0 4px} .cmHl li li .cmIn::before{content:'';border-left:1px solid var(--contentL);position:absolute;left:-18px;top:30px;height:calc(100% - 20px)} .cmHl li li:last-child .cmIn::before{height:100%} .cmHl.noNew li li:last-child .cmIn::before{height:calc(100% - 30px)} .cmHl li li .cmHr .d::before{content:'\00B7';display:inline-block;text-indent:2px;letter-spacing:4px} .cmHl >li:not(:last-child){padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid var(--contentL)} .cmHl >li >.cmAv{position:absolute} .cmHl >li >.cmIn >.cmBd .cmHr{height:36px;padding-left:calc(35px + 8px);margin-bottom:8px;display:flex;flex-direction:column;justify-content:center;line-height:normal} /* Comments Show/Hide */ #comment:target{margin:0;padding-top:60px} .cmSh:checked ~ .cmShw, .cmShw ~ .cm:not(.cmBr), #comment:target .cmShw, #comment:target .cmSh:checked ~ .cm:not(.cmBr){display:none} .cmSh:checked ~ .cm:not(.cmBr), #comment:target .cm:not(.cmBr), #comment:target .cmSh:checked ~ .cmShw{display:block} .cmBtn{display:block;margin:0;padding:20px;text-align:center;max-width:100%} .cmBtn.ln:hover{color:var(--linkB)} /* Comments Pop-up */ #comment:target .cmSh:checked ~ .cm.cmBr{bottom:-100%;opacity:0;visibility:hidden} #comment:target .cmSh:checked ~ .cm.cmBr .fCls{opacity:0;visibility:hidden} /* Swich Language */ .nLng .lnDef, .lnAlt{display:none} .nLng .lnAlt{display:block}
/* Widget Style */ .widget .imgThm{display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:108%; font-size:12px;text-align:center; transform:translate(-50%, -50%)} .widget .title{margin:0 0 25px; font-size:var(--widgetT);font-weight:var(--widgetTw);position:relative} .widget .title::after{content:'';display:inline-block;vertical-align:middle; width:var(--widgetTa); margin:0 10px;border-bottom:1px solid var(--widgetTac); opacity:.5} .widget input[type=text], .widget input[type=email], .widget input[type=tel], .widget textarea{display:block;width:100%;outline:0;border:0;border-bottom:1px solid rgba(0,0,0,.25);border-radius:4px 4px 0 0;background:#f3f3f4; padding:16px; line-height:1.6em; transition:var(--trans-1)} .widget input[type=text]:hover,.widget input[type=tel]:hover, .widget input[type=email]:hover, .widget textarea:hover{border-color:rgba(0,0,0,.42);background:#ececec} .widget input[type=text]:focus, .widget input[type=email]:focus, .widget input[type=tel]:focus, .widget textarea:focus, .widget input[data-text=fl], .widget textarea[data-text=fl]{border-color:var(--linkB);background:#ececec} .widget input[type=button], .widget input[type=submit]{display:inline-flex;align-items:center; padding:12px 30px; outline:0;border:0;border-radius:4px; color:#fffdfc; background:var(--linkB); font-size:14px; white-space:nowrap;overflow:hidden;max-width:100%} .widget input[type=button]:hover, .widget input[type=submit]:hover{opacity:.7}
/* Widget BlogSearch */ .BlogSearch{position:fixed;top:0;left:0;right:0;z-index:12} .BlogSearch form{position:relative} .BlogSearch input{position:relative;display:block;background:var(--srchB);border:0;margin-top:-100%;padding:10px 55px;width:100%;height:var(--headerH);transition:var(--trans-1);z-index:2} .BlogSearch input:focus{margin-top:0;box-shadow:0 10px 40px rgba(0,0,0,.2)} .BlogSearch input[type=search]::-ms-clear,.BlogSearch input[type=search]::-ms-reveal{display:none;appearance:none;width:0;height:0} .BlogSearch input[type=search]::-webkit-search-decoration, .BlogSearch input[type=search]::-webkit-search-cancel-button, .BlogSearch input[type=search]::-webkit-search-results-button, .BlogSearch input[type=search]::-webkit-search-results-decoration{display:none;-webkit-appearance:none;appearance:none} .BlogSearch input:focus ~ button.sb, .BlogSearch input:hover ~ button.sb{opacity:.9} .BlogSearch .sb{position:absolute;left:0;top:0;display:flex;align-items:center;padding:0 20px;z-index:3;opacity:.7;height:100%;background:transparent;border:0;outline:0;transition:var(--trans-2)} .BlogSearch .sb svg{width:18px;height:18px;stroke:var(--srchI)} .BlogSearch button.sb{left:auto;right:0;opacity:0} .BlogSearch button.sb::before{content:'\2715'} .mainWrp >:not(.header) .BlogSearch{margin:0} @media screen and (min-width:640px){.mainWrp >:not(.header) .BlogSearch{position:static} .mainWrp >:not(.header) .BlogSearch input{margin-top:0;padding:8px 36px;height:auto;font-size:13px;border:var(--srchL) solid var(--srchLc);border-radius:20px} .mainWrp >:not(.header) .BlogSearch .sb{padding:0 10px;font-size:12px} .mainWrp >:not(.header) .BlogSearch input:focus, .mainWrp >.header .BlogSearch input:focus{box-shadow:none} .mainWrp >:not(.header) .BlogSearch .fCls, .mainWrp >.header .BlogSearch .fCls{display:none} .mainWrp >.header .BlogSearch{position:absolute} .mainWrp >.header .BlogSearch input{background:var(--headerB);border-radius:0} .drK *.navIn .BlogSearch input{border-color:transparent} .drK .mainWrp >.header .BlogSearch input{background:var(--darkB)}}
/* Widget FeaturedPost */ .itemFt .itm >*:last-child{flex-grow:1}
/* Widget PopularPosts */ .itemPp{counter-reset:p-cnt} .itemPp .iCtnt{display:flex} .itemPp >*:not(:last-child){margin-bottom:20px} .itemPp .iCtnt::before{flex-shrink:0;content:'0' counter(p-cnt);counter-increment:p-cnt;width:25px;opacity:.6;font-size:85%;line-height:1.8em} .iInr{flex:1 0;width:calc(100% - 25px)} .iTtl{font-size:.95rem;font-weight:700;line-height:1.5em} .iTtmp{display:inline-flex} .iTtmp::after{content:'\2014';margin:0 5px; color:var(--widgetTac);opacity:.7} .iInf{margin:0 25px 5px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis; line-height:25px} .iInf .pLbls{display:inline;opacity:.8}
/* Widget Label */ /* List Label */ .wL ul{display:flex;flex-wrap:wrap; list-style:none;margin:0;padding:0; position:relative;width:calc(100% + 30px);left:-15px;right:-15px; font-size:13px} .wL li{width:calc(50% - 10px); margin:0 5px} .wL li >*{display:flex;align-items:baseline;justify-content:space-between; color:inherit;width:100%; padding:8px 10px;border-radius:4px;line-height:20px} .wL li >* svg{width:18px;height:18px;opacity:.8} .wL li >*:hover svg, .wL li >div svg{/*fill:var(--linkC) !important;*/stroke:var(--linkC)} .wL li >*:hover .lbC, .wL li >div .lbC{color:var(--linkC)} .wL .lbR{display:inline-flex;align-items:center} .wL .lbR .lbC{margin:0 5px} .wL .lbAl{max-height:0; overflow:hidden; transition:var(--trans-4)} .wL .lbM{display:inline-block; margin-top:10px;line-height:25px; color:var(--linkC)} .wL .lbM::before{content:attr(data-show)} .wL .lbM::after, .wL .lbC::after{content:attr(data-text)} .wL .lbM::after{margin:0 8px} .wL .lbT{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7} .wL .lbC, .wL .lbM::after{flex-shrink:0;font-size:12px;opacity:.7} .lbIn:checked ~ .lbAl{max-height:1000vh} .lbIn:checked ~ .lbM::before{content:attr(data-hide)} .lbIn:checked ~ .lbM::after{visibility:hidden} .wL.bg ul{width:calc(100% + 10px);left:-5px;right:-5px} .wL.bg li{margin-bottom:10px} .wL.bg li >*{background:#f6f6f6} /* Cloud Label */ .wL.cl{display:flex;flex-wrap:wrap} .wL.cl >*, .wL.cl .lbAl >*{display:block;max-width:100%} .wL.cl .lbAl{display:flex;flex-wrap:wrap} .wL.cl .lbC::before{content:'';margin:0 4px;flex:0 0} .wL.cl .lbN{display:flex;justify-content:space-between; margin:0 0 8px;padding:9px 13px; border:1px solid var(--contentL);border-radius:3px; color:inherit;line-height:20px} .wL.cl .lbN:hover .lbC, .wL.cl div.lbN .lbC{color:var(--linkB); opacity:1} .wL.cl .lbN:not(div):hover, .wL.cl div.lbN{border-color:var(--linkB)} .wL.cl .lbSz{display:flex} .wL.cl .lbSz::after{content:'';margin:0 4px;flex:0 0}
/* Widget ContactForm */ .ContactForm{max-width:500px; font-family:var(--fontB);font-size:14px} .cArea input[type=text], .cArea input[type=email], .cArea input[type=tel], .cArea textarea{padding:25px 16px 8px 16px} .cArea:not(:last-child){margin-bottom:25px} .cArea label{display:block;position:relative} .cArea label .n{display:block;position:absolute;left:0;right:0;top:0; color:rgba(8,16,43,.4);line-height:1.6em;padding:15px 16px 0;border-radius:4px 4px 0 0;transition:var(--trans-1)} .cArea label .n.req::after{content:'*';font-size:85%} .cArea textarea{height:100px} .cArea textarea:focus, .cArea textarea[data-text=fl]{height:200px} .cArea input:focus ~ .n, .cArea textarea:focus ~ .n, .cArea input[data-text=fl] ~ .n, .cArea textarea[data-text=fl] ~ .n{padding-top:5px;color:rgba(8,16,43,.7);font-size:90%;background:#ececec} .cArea .h{display:block;font-size:90%;padding:5px 16px 0;opacity:.7;line-height:normal} .nArea .contact-form-error-message-with-border{color:#d32f2f} .nArea .contact-form-success-message-with-border{color:#2e7b32}
/* Widget Sliders */ .sldO{position:relative;display:flex;overflow-y:hidden;overflow-x:scroll; scroll-behavior:smooth;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0; -ms-overflow-style: none} .sldO.no-items{display:none} .sldO.no-items + .section{margin-top:0} .sldO .widget:not(:first-child){margin-top:0} .sldO .widget{position:relative;flex:0 0 100%;width:100%;background:transparent; outline:0;border:0} .sldC{position:relative} .sldS{position:absolute;top:0;left:0;width:100%;height:100%;scroll-snap-align:center;z-index:-1} .sldIm{background-repeat:no-repeat;background-size:cover;background-position:center;background-color:var(--transB);display:block;padding-top:40%;border-radius:3px;color:#fffdfc;font-size:13px} .sldT{position:absolute;bottom:0;left:0;right:0;display:block;padding:20px; background:linear-gradient(0deg, rgba(30,30,30,.1) 0%, rgba(30,30,30,.05) 60%, rgba(30,30,30,0) 100%); border-radius:0 0 3px 3px} .sldS{animation-name:tonext, snap;animation-timing-function:ease;animation-duration:4s;animation-iteration-count:infinite} .sldO .widget:last-child .sldS{animation-name:tostart, snap} .Rtl .sldS{animation-name:tonext-rev, snap} .Rtl .sldO .widget:last-child .sldS{animation-name:tostart-rev, snap} .sldO:hover .widget .sldS, .Rtl .sldO:hover .widget .sldS, .sldO:focus-within .widget .sldS, .Rtl .sldO:focus-within .widget .sldS{animation-name:none} @media (prefers-reduced-motion:reduce){.sldS, .Rtl .sldS{animation-name:none}} @media screen and (max-width:640px){.sldO{width:calc(100% + 40px);left:-20px;right:-20px;padding:0 12.5px 10px} .sldO .widget{flex:0 0 90%;width:90%;margin:0 7.5px; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)} .sldT{padding:10px 15px} .sldIm{font-size:12px}}
/* Sticky Ad */ .ancrA{position:fixed;bottom:0;left:0;right:0;min-height:70px;max-height:200px;padding:5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1); transition:var(--trans-1);display:flex;align-items:center;justify-content:center;background:#fffdfc;z-index:50;border-top:1px solid var(--contentL)} .ancrC{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;border:1px solid var(--contentL);border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background:inherit} .ancrC::after{content:'\2715';line-height:18px;font-size:14px} .ancrCn{flex-grow:1;overflow:hidden;display:block;position:relative} .ancrI:checked ~ .ancrA{padding:0;min-height:0} .ancrI:checked ~ .ancrA .ancrCn{display:none}
/* Error Page */ .erroP{display:flex;align-items:center;justify-content:center;height:100vh;text-align:center;padding:0} .erroC{width:calc(100% - 40px);max-width:450px;margin:auto;font-family:var(--fontBa)} .erroC h3{font-size:1.414rem;font-family:inherit} .erroC h3 span:not(.e){position:relative} .erroC h3 span.e{display:block;font-size:140px;line-height:.8;margin-bottom:-1rem;color:#ebebf0} .erroC h3 span.e{animation:glitch 1s linear infinite} .erroC h3 span.e::before, .erroC h3 span.e::after{content:attr(title);position:absolute;left:0;right:0} .erroC h3 span.e::before{animation:glitchTop 1s linear infinite;clip-path:polygon(0 0, 100% 0, 100% 33%, 0 33%);-webkit-clip-path:polygon(0 0, 100% 0, 100% 33%, 0 33%)} .erroC h3 span.e::after{animation:glitchBotom 1.5s linear infinite;clip-path:polygon(0 67%, 100% 67%, 100% 100%, 0 100%);-webkit-clip-path:polygon(0 67%, 100% 67%, 100% 100%, 0 100%)} .erroC p{margin:30px 5%;line-height:1.6em;opacity:.7} .erroC .button{margin:0;padding-left:2em;padding-right:2em;font-size:14px}
/* Responsive */
@media screen and (min-width:897px){/* Header */ /* Delete this to enable search icon */ .headP{display:none} .headP::before{content:'';display:block;margin-left:15px} .headP .isMn, .headM .HTML + .PageList{display:none} /* mainIn */ .mainIn{padding-top:30px} .mainIn .secIn, .mainIn .secIn >*{display:flex} .blogTopc{flex:0 0 215px;width:215px} .blogTopc::after, .blogCont::before{content:'';flex:0 0 25px} .blogCont::after{content:'';display:block; position:absolute;top:-20px;left:0;right:0; width:calc(100% + 20px);height:calc(100% + 40px); background:rgba(0,0,0,.01); border-radius:20px;z-index:-1} .blogCont{width:calc(100% - 215px)} .blogIn{width:calc(100% - 25px)} .blogM{display:flex} .mainbar{flex:1 0 calc(100% - var(--sideW) - 25px);width:calc(100% - var(--sideW) - 25px); transition:var(--trans-2)} .sidebar{display:flex;flex:0 0 calc(var(--sideW) + 25px);width:calc(var(--sideW) + 25px); margin:0} .sidebar::before{content:'';flex:0 0 25px} .sidebar .sideIn{width:calc(100% - 25px)} .onPg .blogCont::before, .onPg .blogCont::after, .onHm .blogCont::before, .onHm .blogCont::after{display:none} /* mainNav */ .mnH{display:none} .mnMn svg:not(.d){display:none} .mnMn{display:flex;justify-content:flex-end;position:relative;width:calc(100% + 25px);left:-12.5px;right:-12.5px} .mnMn >li{display:inline-flex; align-items:center;margin:0 12.5px;position:relative; white-space:nowrap; height:var(--headerH)} .mnMn >li:hover ul{max-height:100vh; opacity:1;visibility:visible} .mnMn >li:last-child ul{left:auto;border-radius:16px 5px 16px 16px} .mnMn ul{display:block; position:absolute;top:calc(var(--headerH) - 15px);left:-15px;right:-15px; min-width:180px; max-height:0vh; background:var(--contentB); box-shadow:0 10px 20px -10px rgba(0,0,0,.1); border-radius:5px 16px 16px 16px; transition:var(--trans-1); opacity:0;visibility:hidden;z-index:1; overflow:hidden} .mnMn ul li >*{display:block;padding:8px 15px; overflow:hidden;text-overflow:ellipsis; opacity:.8} .mnMn ul li >*:hover{background:var(--transB)} .mnMn ul li:last-child >*{padding-bottom:15px} .mnMn .a{display:inline-flex;align-items:center} .mnMn .a:hover{color:var(--linkC)} .mnMn .a:hover::after{opacity:1} .mnMn .a::after{content:'';border-bottom:1px solid var(--linkC);position:absolute;bottom:-1px;left:0;right:0;opacity:0;transition:var(--trans-1)} .mnMn .drp .n::after{content:'';padding:0 3px;flex:0 0}}
@media screen and (min-width:768px){::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.35)}::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.35)}}
@media screen and (max-width:1100px) and (min-width: 897px){.pTtl{font-size:1.1rem} /* mainIn */ .mainIn .secIn, .mainIn .secIn >*{display:block} .blogTopc::after, .blogCont::before, .blogTopc .adSticky{display:none} .blogTopc, .blogCont{width:auto} .blogIn{width:100%}}
@media screen and (min-width:1101px){.tpC{display:none} .topM #HTML11{position:-webkit-sticky;position:sticky;top:calc(var(--headerH) + 10px)} .topM #HTML11 ~ .widget{visibility:hidden}}
@media screen and (max-width:1100px){.topM #HTML11 ~ .widget{display:none} .topM{position:fixed;top:0;bottom:0;left:-320px;width:80%;max-width:320px;transition:var(--trans-1);z-index:11} .topM .section{padding:30px 20px 20px;overflow-y:scroll;overflow-x:hidden; width:100%;max-height:100%} .tpMn .a, .tpMn ul li >*{padding-top:10px;padding-bottom:10px} .tpBr{width:100%;height:100%;position:relative;background:var(--contentB);box-shadow:0 5px 30px 0 rgba(0,0,0,.05);z-index:2} .tpBrs{width:100%;height:100%} .tpC{position:absolute;right:-45px;top:120px; transition:var(--trans-1);z-index:1} .tpC svg{width:20px;height:20px} .tpC svg.rad{width:20px;height:20px;position:absolute;left:-2px;top:-19px;fill:var(--contentB);transform:rotate(176deg);transition:inherit;z-index:1} .tpC svg.rad.in{top:auto;bottom:-19px;transform:rotate(-86deg)} .tpC label{display:flex;align-items:center;position:relative;justify-content:center;width:45px;height:40px;background:var(--contentB);transition:inherit;border-radius:0 20px 20px 0;box-shadow:0 5px 20px 0 rgba(0,0,0,.1)} .topI:checked ~ .topM{left:0;z-index:12} .topI:checked ~ .topM .tpC{right:-17.5px} .topI:checked ~ .topM .tpC svg.rad{visibility:hidden} .topI:checked ~ .topM .tpC label{border-radius:20px;width:40px;background:var(--linkB)} .topI:checked ~ .topM .tpC label svg{transform:rotate(180deg);stroke:var(--darkT)} .topI:checked ~ .topM .fCls{opacity:1;visibility:visible;background:rgba(0,0,0,.25)}}
@media screen and (max-width:896px){/* mainIn */ .mainbar{margin:0 auto} .blogTopc .adSticky{display:none} /* Header */ .headIn{padding:0} .headL{padding:0 0 0 20px;flex-grow:1;width:50%;max-width:none} .headR{padding:0 20px 0 0;flex-shrink:0} .headIc .isSrh{display:block} .headL .headN{width:100%} /* mainNav */ .headM{display:flex;justify-content:flex-end;position:fixed;left:0;right:0;top:0;bottom:0;z-index:20;transition:var(--trans-1);visibility:hidden;opacity:0; margin:0} .mnBr{width:85%;max-width:480px;height:100%;margin-right:-480px;transition:inherit;z-index:3;overflow:hidden;position:relative;box-shadow:0 5px 30px 0 rgba(0,0,0,.05)} .mnBrs{padding:50px 0 0;overflow-y:scroll;overflow-x:hidden;width:100%;height:100%; background:var(--contentB)} .mnH{padding:0;justify-content:flex-end} .mnH label{padding:15px 20px} .navi:checked ~ .mainWrp .header{z-index:13} .navi:checked ~ .mainWrp .headM{opacity:1;visibility:visible} .navi:checked ~ .mainWrp .headM .mnBr{margin-right:0} .navi:checked ~ .mainWrp .headM .fCls{opacity:1;visibility:visible;background:rgba(0,0,0,.2); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px)} .mnMen{padding:0 15px 20px} .mnMn svg{width:20px;height:20px;opacity:.8} .mnMn >li{position:relative} .mnMn >li.br::after{content:'';display:block;border-bottom:1px solid var(--contentL);margin:12px 5px} .mnMn li:not(.drp) .a:hover, .mnMn ul li a:hover, .mnMn li:not(.mr) .drpI:checked ~ .a{color:var(--linkC)} .mnMn li:not(.mr) .a::before, .mnMn .drp.mr li >*::before{content:'';position:absolute;top:0;bottom:0;left:0;border-left:1px solid var(--linkC);transition:var(--trans-1);opacity:0} .mnMn li:not(.drp) .a:hover::before, .mnMn li:not(.mr) .drpI:checked ~ .a::before, .mnMn .drp.mr li >*:hover::before{opacity:1} .mnMn li:not(.mr) ul{position:relative;padding-left:5px} .mnMn li:not(.mr) ul::before{content:'';display:block;position:absolute;top:0;bottom:0;border-left:1px solid var(--contentL);height:calc(100% - 19px)} .mnMn li ul{display:none;opacity:0;visibility:hidden} .mnMn li:not(.mr) li >*{padding:10px 15px;opacity:.8} .mnMn li:not(.mr) li{position:relative} .mnMn li:not(.mr) li::before{content:'';width:8px;border-bottom:1px solid var(--contentL);display:block;position:absolute;top:19px} .mnMn .a, .mnMn .drp.mr li >*{display:flex;align-items:center;padding:10px 15px;position:relative;width:calc(100% + 30px);left:-15px;right:-15px;transition:var(--trans-1)} .mnMn .a >*{margin:0 5px} .mnMn .a:hover svg:not(.d){fill:var(--linkC)} .mnMn .a:hover svg.line:not(.d){fill:none;stroke:var(--linkC)} .mnMn .n, .mnMn ul li >*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 0 calc(100% - 64px)} .mnMn .drp.mr .a{font-size:13px;padding-bottom:0;opacity:.7} .mnMn .drp.mr li >*{display:block;padding:10px 20px} .mnMn .drp.mr svg.d{display:none} .mnMn .drpI:checked ~ .a svg.d{transform:rotate(180deg)} .mnMn .drpI:checked ~ ul{display:block;opacity:1;visibility:visible} /* Font and Blog */ .pTtl{font-size:1.1rem} .onId:not(.onBl) .pTtl{font-size:1rem}}
@media screen and (min-width:641px){.onId:not(.onBl) .blogPts >*{width:calc(33.333% - 22px);flex:0 0 calc(33.333% - 22px)}}
@media screen and (max-width:640px){/* Header */ .headCn{height:var(--headerHm)} /* Pop-up */ .fixL{align-items:flex-end} .fixL .fixLi, .fixL .cmBri{border-radius:16px 16px 0 0; max-width:680px} .fixL .cmBri:not(.mty){border-radius:0;height:100%;max-height:100%} /* Article */ .onId .blogPts, .itemFt .itm{width:calc(100% + 15px);left:-7.5px;right:-7.5px} .onId .blogPts >*, .itemFt .itm >*{flex:0 0 calc(50% - 15px);width:calc(50% - 15px); margin-left:7.5px;margin-right:7.5px} .onId .blogPts .nAd{flex:0 0 calc(100% - 15px)} .onId:not(.onBl) .pTtl{font-size:1.1rem}}
@media screen and (max-width:500px){/* blogTopc */ .topM{left:-280px;width:280px} /* Font size */ .iFxd{font-size:12px} .cdtIn, .pInf.ps{font-size:13px} .pDesc{font-size:14px} .pEnt{font-size:var(--postFm)} .pTtl.itm{font-size:var(--postTm)} /* Share */ .pShc a::after{display:none} /* Article */ .onId:not(.oGrd) .ntry .pTtl{font-size:1rem} .onId:not(.oGrd) .ntry .pSml{font-size:12px} .onId:not(.oGrd) .ntry .pSnpt{font-size:13px; display:none} .onId:not(.oGrd) .ntry .iFxd .spnr{display:none} .onId:not(.oGrd) .ntry .iFxd{padding:8px 3px} .onId:not(.oGrd) .ntry .iFxd .cmnt{padding:3px} .onId:not(.oGrd) .ntry .iFxd >* svg{padding:1px} .onId.oGrd .blogPts >*{flex:1 0 calc(100% - 15px); padding-bottom:0} .onId.oGrd .blogPts .pInf{position:relative} /* Widget Featured */ .itemFt .itm >*{flex:1 0 calc(100% - 15px)} .itemFt .itm .iThmb{margin-bottom:20px} .itemFt .itm .iCtnt{padding-bottom:30px;border-bottom:1px solid var(--contentL)} .itemFt .itm .pInf{margin-top:15px}}
/* Keyframes Animation */ @keyframes shimmer{100%{transform:translateX(100%)}} @keyframes fadein{50%{opacity:1}80%{opacity:1;padding-top:5px;height:22px}100%{opacity:0;padding-top:0;height:0}} @keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-5px)}50%{transform:translateX(5px)}70%{transform:translateX(-2px)}100%{transform:translateX(0)}} @keyframes tonext{ 75%{left:0} 95%{left:100%} 98%{left:100%} 99%{left:0}} @keyframes tostart{ 75%{left:0} 95%{left:-300%} 98%{left:-300%} 99%{left:0}} @keyframes tonext-rev{ 75%{right:0} 95%{right:100%} 98%{right:100%} 99%{right:0}} @keyframes tostart-rev{ 75%{right:0} 95%{right:-300%} 98%{right:-300%} 99%{right:0}} @keyframes snap{ 96%{scroll-snap-align:center} 97%{scroll-snap-align:none} 99%{scroll-snap-align:none} 100%{scroll-snap-align:center}} @-webkit-keyframes fadein{50%{opacity:1}80%{opacity:1;padding-top:5px;height:22px}100%{opacity:0;padding-top:0;height:0}} @-webkit-keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-5px)}50%{transform:translateX(5px)}70%{transform:translateX(-2px)}100%{transform:translateX(0)}} @-webkit-keyframes tonext{ 75%{left:0} 95%{left:100%} 98%{left:100%} 99%{left:0}} @-webkit-keyframes tostart{ 75%{left:0} 95%{left:-300%} 98%{left:-300%} 99%{left:0}} @-webkit-keyframes tonext-rev{ 75%{right:0} 95%{right:100%} 98%{right:100%} 99%{right:0}} @-webkit-keyframes tostart-rev{ 75%{right:0} 95%{right:-300%} 98%{right:-300%} 99%{right:0}} @-webkit-keyframes snap{ 96%{scroll-snap-align:center} 97%{scroll-snap-align:none} 99%{scroll-snap-align:none} 100%{scroll-snap-align:center}} @keyframes glitch{2%,64%{transform:translate(2px,0) skew(0deg)} 4%,60%{transform:translate(-2px,0) skew(0deg)} 62%{transform:translate(0,0) skew(5deg)}} @keyframes glitchTop{2%,64%{transform:translate(2px,-2px)} 4%,60%{transform:translate(-2px,2px)} 62%{transform:translate(13px,-1px) skew(-13deg)}} @keyframes glitchBotom{2%,64%{transform:translate(-2px,0)} 4%,60%{transform:translate(-2px,0)} 62%{transform:translate(-22px,5px) skew(21deg)}}
/* Noscript Option */ .lazy:not([lazied]){display:none} .noJs{display:flex;justify-content:flex-end;align-items:center;position:fixed;top:20px;left:20px;right:20px;z-index:99;max-width:640px;border-radius:12px;margin:auto;padding:10px 5px;background:#ffdfdf;font-size:13px;box-shadow:0 10px 20px -10px rgba(0,0,0,.1);color:#48525c} .noJs::before{content:attr(data-text);padding:0 10px;flex-grow:1} .noJs label{flex-shrink:0;padding:10px} .noJs label::after{content:'\2715';line-height:18px;font-size:14px} .nJs:checked ~ .noJs{display:none}
/* Hide Scroll */ .scrlH::-webkit-scrollbar{width:0;height:0} .scrlH::-webkit-scrollbar-track{background:transparent} .scrlH::-webkit-scrollbar-thumb{background:transparent;border:none}
/* --- Remove to reduce CSS size or if you aren't using RTL --- */ .adB{min-height:70px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--darkTa);border:1px solid var(--contentL);border-radius:3px;background-color:var(--bgColor,#f0f0f0)}.adB::before{content:attr(data-text);display:block}
/* Article Style RTL */.Rtl .note{padding:20px 50px 20px 20px} .Rtl .note::before{left:auto;right:-12px} .Rtl .note::after{left:auto;right:18px} .Rtl .pS hr::before{text-indent:-0.6em} .Rtl .dropCap{margin:0;line-height:inherit;font-size:inherit;float:none} .Rtl blockquote, .Rtl .cmC i[rel=quote]{border-left:0;border-right:2px solid var(--contentL)} .Rtl blockquote.s-1{padding:25px 45px 25px 25px;border-right:0} .Rtl blockquote.s-1::before{left:auto;right:0}
/* RTL Mode */ .Rtl .ntfT{padding:0 0 0 15px} .Rtl .ntfC::before{left:auto;right:-12px} .Rtl .ntfA >a{margin-left:0;margin-right:10px} .Rtl .cmHr.a .n::after{margin:0 3px 0 0} .Rtl .cmAc a::before{content:'\2935'} .Rtl .cmHl li li .cmIn::before{right:-18px;left:auto} .Rtl .cmHl >li >.cmIn >.cmBd .cmHr{padding:0 calc(35px + 8px) 0 0} .Rtl .BlogSearch .sb, .Rtl .fotCd .creator{left:auto;right:0} .Rtl .BlogSearch button.sb{left:0;right:auto} @media screen and (max-width:1100px){.Rtl .topM{left:auto;right:-320px} .Rtl .topI:checked ~ .topM{left:auto;right:0} .Rtl .topI:checked ~ .topM .tpC{left:-17.5px;right:auto} .Rtl .tpC{left:-45px;right:auto} .Rtl .tpC label{border-radius:20px 0 0 20px} .Rtl .tpC svg.rad{transform:rotate(92deg);left:auto;right:-2px} .Rtl .tpC svg.rad.in{transform:rotate(-2deg)}} @media screen and (min-width:897px){.Rtl .mnMn ul{border-radius:16px 5px 16px 16px} .Rtl .mnMn >li:last-child ul{left:-15px;right:auto;border-radius:5px 16px 16px 16px}} @media screen and (max-width:896px){.Rtl .headR{padding:0 0 0 20px} .Rtl .headL{padding:0 20px 0 0} .Rtl .navi:checked ~ .mainWrp .headM .mnBr{margin-right:auto;margin-left:0} .Rtl .mnBr{margin-right:auto;margin-left:-480px} .Rtl .mnMn li:not(.mr) ul{padding-left:0;padding-right:5px} .Rtl .mnMn li:not(.mr) .a::before, .Rtl .mnMn .drp.mr li >*::before{left:auto;right:0}} @media screen and (max-width:500px){.Rtl .topM{left:auto;right:-280px} .Rtl .ftMn{right:auto;left:0;border-radius:16px 16px 16px 5px} .Rtl .cdtIn .PageList{margin-left:5px;margin-right:auto}}
/* General Preloader & Dot Styles */ .preloader{position:fixed;inset:0;background:#0f0f0f;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .4s ease-in-out;will-change:opacity}.preloader.hide{opacity:0;pointer-events:none}.dots-container{display:flex;gap:20px}.dot{width:18px;height:48px;border-radius:8px;animation:fireGlow .7s infinite ease-in-out;transform-origin:bottom;box-shadow:0 0 10px rgba(255,255,255,0.2)}.dot.red{background:#ef476f;animation-delay:0s}.dot.green{background:#06d6a0;animation-delay:.2s}.dot.yellow{background:#ffd166;animation-delay:.4s}
/* Animation Keyframes */ @keyframes fireGlow{0%,100%{transform:scaleY(1);opacity:.5;box-shadow:0 0 8px rgba(255,255,255,0.1)}50%{transform:scaleY(1.6);opacity:1;box-shadow:0 0 20px rgba(255,255,255,0.4)}}
/* Anonymous Comments Avatar */ .im[lazied][data-style*="resources.blogblog.com/img/blank.gif"],.im[lazied][style*="resources.blogblog.com/img/blank.gif"]{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjit9MCnrMRXaYOqLwqsPIzmWRnN1Hr7rt3NHkgAHI5fTGEpn8PZ-yNGZicjo6_7YeFlWpPR8FQPx5Lyg2Xxtv-HhUEnofyuz4w9MlTrL9Jz86HjlYoPOagfZK_Rr79lYIj9ekYIUfJldvY6N0FmQ49Suf5MciTOlBqRgNKH_-xjUhJvAw/s1600/user.png")!important;background-size:cover;background-position:center;border-radius:50%;display:block;width:35px;height:35px}
/* Break */ body{overflow-wrap:break-word;word-break:normal;line-break:auto;hyphens:auto;}
/* Syntax Highlighting for Code */ .hljs-comment,.hljs-quote{color:var(--dark-red)}.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-title,.hljs-name{color:var(--green)}.hljs-variable,.hljs-template-variable{color:var(--dark-orange)}.hljs-string,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-regexp{color:var(--bright-green)}.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-meta,.hljs-number,.hljs-link{color:var(--darker-green)}.hljs-doctag,.hljs-type,.hljs-attr,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:var(--grayish-tone)}.hljs-attribute,.hljs-subst{color:var(--black)}.hljs-formula{font-style:italic}.hljs-selector-id,.hljs-selector-class{color:var(--tan)}.hljs-addition,.hljs-deletion{color:var(--bright-green)}.hljs-deletion{color:var(--dark-red)}.hljs-strong,.hljs-doctag{font-weight:bold}.hljs-emphasis{font-style:italic}
/* Toast Notification */ .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,0.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px;box-shadow:0 5px 35px rgba(149,157,165,0.3);opacity:0;transition:opacity 0.1s ease,bottom 0.1s ease;animation:slideinwards 2s ease forwards}@media (max-width:500px){.tNtf span{left:20px;right:20px;font-size:13px}}@keyframes slideinwards{0%{opacity:0;bottom:-70px}20%,50%,80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,0.2)}
/* Pre Notification */ .pre:not(.tb):hover::before{content:'Double click to copy | '}.pre:not(.tb).html:hover::before{content:'Double click to copy | .html'}.pre:not(.tb).css:hover::before{content:'Double click to copy | .css'}.pre:not(.tb).js:hover::before{content:'Double click to copy | .js'}.pre:not(.tb).python:hover::before{content:'Double click to copy | .py'}.pre:not(.tb).java:hover::before{content:'Double click to copy | .java'}.pre:not(.tb).php:hover::before{content:'Double click to copy | .php'}.pre:not(.tb).c:hover::before{content:'Double click to copy | .c'}.pre:not(.tb).cpp:hover::before{content:'Double click to copy | .cpp'}.pre:not(.tb).ruby:hover::before{content:'Double click to copy | .rb'}.pre:not(.tb).swift:hover::before{content:'Double click to copy | .swift'}.pre:not(.tb).kotlin:hover::before{content:'Double click to copy | .kt'}.pre:not(.tb).go:hover::before{content:'Double click to copy | .go'}.pre:not(.tb).r:hover::before{content:'Double click to copy | .r'}.pre:not(.tb).sql:hover::before{content:'Double click to copy | .sql'}.pre:not(.tb).bash:hover::before{content:'Double click to copy | .sh'}.pre:not(.tb).xml:hover::before{content:'Double click to copy | .xml'}.pre:not(.tb).json:hover::before{content:'Double click to copy | .json'}.pre:not(.tb).yaml:hover::before{content:'Double click to copy | .yaml'}.pre:not(.tb).perl:hover::before{content:'Double click to copy | .pl'}.pre:not(.tb).dart:hover::before{content:'Double click to copy | .dart'}.pre:not(.tb).typescript:hover::before{content:'Double click to copy | .ts'}
/* Pre Code Styling */ .pre{border:1px solid grey!important;}.pre code{all:unset!important;}
/* Landing Page */ .lPage .widget .title{font-size:2.3rem;font-family:var(--fontBa);font-weight:900;line-height:1.6em}.lPage .Image a{display:block}.lPage .Image img{width:100%;display:block;border-radius:5px}.lPage .Image .caption{display:block;font-size:13px;opacity:.7;padding:7px 10px}.lPage p{font-size:15px;font-family:var(--fontBa);margin:20px 0;line-height:1.7em}.lPage .ln{position:relative;width:calc(100% + 20px);left:-10px;right:-10px;display:flex;align-items:center}.lPage .ln>*{margin-left:10px;margin-right:10px}.lPage .ln .l{color:inherit;text-decoration:underline;font-family:var(--fontBa);line-height:20px}.lPage ul{list-style:none;margin:20px 0;padding:0;line-height:normal;font-size:14px;font-family:var(--fontB)}.lPage ul li{display:flex;margin-bottom:10px;position:relative;width:calc(100% + 10px);left:-5px;right:-5px}.lPage ul li>*{margin:0 5px;display:block;color:inherit}.lPage ul li svg{flex-shrink:0;width:18px;height:18px;fill:var(--linkC)}.lPage ul li svg.line{fill:none;stroke:var(--linkC)}.lPage ul li a:hover{text-decoration:underline}.lPage ul.lf{display:flex;flex-wrap:wrap;position:relative;width:calc(100% + 20px);left:-10px;right:-10px}.lPage ul.lf li{width:calc(50% - 20px);margin-left:10px;margin-right:10px}.lPage ul.mf{display:flex;flex-wrap:wrap;margin:40px 0 0}.lPage ul.mf li{width:33.333%;padding:0 45px;margin-bottom:30px;left:0;right:0;display:block;text-align:center}.lPage ul.mf li>*{margin:0 auto}.lPage ul.mf svg{width:45px;height:45px;fill:var(--iconCs);margin-bottom:25px}.lPage ul.mf svg.line{fill:none;stroke:var(--iconCs)}.lPage ul.mf .t strong{font-size:1.2rem;font-family:var(--fontBa);font-weight:900}.lPage ul.mf .t p{font-size:inherit;font-family:inherit;line-height:1.7em;opacity:.8}.pgCont{position:relative;padding-top:80px;padding-bottom:80px}.pgFx{display:flex;align-items:center;flex-wrap:wrap}.pgFx>*:first-child{width:55%;flex:0 0 auto}.pgFx>*:not(.HTML):Last-child{width:45%;flex:0 0 auto;display:block}.pgRw{flex-direction:row-reverse}.pgMo{display:inline-flex;align-items:center}.pgMo::before{content:attr(aria-label);display:block;line-height:18px}.pgMo svg.line{width:18px;height:18px;stroke:var(--linkC);flex-shrink:0;margin:0 7px}.pG-01 .pgCont{background:var(--page-1);padding-top:50px}.pG-01 .HTML,.pG-02 .HTML,.pG-03 .HTML,.pG-04 .HTML,.pG-05 .HTML,.pG-08 .HTML{display:flex}.pG-01 .HTML:after,.pG-02 .pgRw .HTML:before,.pG-03 .HTML:after,.pG-04 .pgRw .HTML:before,.pG-05 .HTML:after,.pG-08 .HTML::after{content:'';padding-left:30px;flex-shrink:0}.pG-02 .pgRw .HTML:after,.pG-04 .pgRw .HTML:after{display:none}.pG-02 .pgCont{background:var(--page-2)}.pG-03 .pgCont{background:var(--page-3)}.pG-04 .pgCont{background:var(--page-4)}.pG-05 .pgCont{background:var(--page-5)}.pG-06 .pgCont{background:var(--page-6)}.pG-06 .widget .title,.pG-07 .widget .title{text-align:center}.pG-06 .widget .title:after,.pG-07 .widget .title:after{display:none}.pG-07 .pgCont{background:var(--page-7);border-bottom:1px solid var(--contentL)}.pG-07 p{text-align:center}.pG-09{background:var(--page-9)}.pG-09 .pgCont{max-width:820px;margin-left:auto;margin-right:auto}.pay{display:flex;justify-content:center;flex-wrap:wrap;font-family:var(--fontB);font-size:14px}.pyM{min-width:250px;max-width:300px;display:block;position:relative;background:#fff;border-radius:3px;box-shadow:0 10px 40px rgba(149,157,165,.2);padding:0 0 74px;text-align:center;margin:0 10px 30px}.pyM.disc::before{content:'-30%';display:block;font-weight:700;font-size:13px;width:50px;height:50px;padding:15px 0 10px;background:#ebeced;border-radius:5px 5px 50px 50px;position:absolute;top:-5px;right:10px}.pyM.disc.ds-40::before{content:'-40%'}.pyM i.strike{display:block;font-size:15px;font-style:normal;text-decoration:line-through}.pyM ol.pyI{list-style:none;margin:30px 0;padding:0 30px;font-size:13px;line-height:1.8em;opacity:.8}.pyH{padding:20px;text-transform:uppercase}.pyP{font-size:55px;line-height:normal;color:var(--linkC);font-weight:700}.pyP::before,.pyP::after{content:attr(data-currency);font-size:16px;font-weight:400}.pyP::after{content:attr(data-text)}.pyB{position:absolute;bottom:0;left:0;right:0}.pyB .button{margin:0 0 30px}
/* Landing Page(Responsive) */ @media screen and (max-width:896px){.pG-01 .HTML:after,.pG-02 .pgRw .HTML:before,.pG-03 .HTML:after,.pG-04 .pgRw .HTML:before,.pG-05 .HTML:after,.pG-08 .HTML::after{display:none}.pgFx,.pG-01 .HTML,.pG-02 .HTML,.pG-03 .HTML,.pG-04 .HTML,.pG-05 .HTML,.pG-08 .HTML{display:block}.pgFx >*:first-child{width:auto}.pgFx >*:not(.HTML):Last-child{width:auto;margin-top:30px}.lPage ul.mf li{width:50%}}@media screen and (max-width:640px){.lPage ul.mf li{width:100%}}@media screen and (max-width:480px){.lPage ul.lf li{width:calc(100% - 20px)}}
/* Landing Page(Dark Mode) */ .drK .lPage li a{color:inherit}.drK .lPage li svg{fill:var(--darkU)}.drK .lPage li svg.line,.drK .pgMo svg.line{fill:none;stroke:var(--darkU)}.drK .lPage ul.mf svg{fill:var(--darkTa)}.drK .lPage ul.mf svg.line{fill:none;stroke:var(--darkTa)}.drK .pG-01 .pgCont,.drK .pG-03 .pgCont,.drK .pG-05 .pgCont,.drK .pG-07 .pgCont{background:inherit}.drK .pG-02 .pgCont,.drK .pG-04 .pgCont,.drK .pG-06 .pgCont,.drK .pG-09{background:var(--darkBs)}.drK .pG-07 .pgCont{border-color:rgba(255,255,255,.1)}.drK .pyM{background:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .pyP{color:var(--darkU)}.drK .pyM.disc::before{background:var(--darkU)}