-
Notifications
You must be signed in to change notification settings - Fork 0
/
Median-UI-Blogger-Template.xml
5346 lines (4719 loc) · 500 KB
/
Median-UI-Blogger-Template.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='unPlug' b:templateVersion='1.5.5' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale.language' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<b:attr name='xmlns' value=''/>
<b:attr name='xmlns:b' value=''/>
<b:attr name='xmlns:expr' value=''/>
<b:attr name='xmlns:data' value=''/>
<b:attr cond='data:blog.locale.language == "in"' name='lang' value='id'/>
<!--[ <head> open ]-->
<head>
<b:comment>Title that appears in search results</b:comment>
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:view.isHomepage'>
<!--[ Homepage title ]-->
<title><data:blog.title/></title>
<b:elseif cond='data:view.search.query'/>
<!--[ Search title ]-->
<title><data:messages.search/>: <data:view.search.query/></title>
<b:elseif cond='data:view.search.label'/>
<!--[ Label title ]-->
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:elseif cond='data:view.isArchive'/>
<!--[ Archive title ]-->
<title>Blog archive in: <data:blog.pageName/></title>
<b:else/>
<title>Blog - <data:blog.title/></title>
</b:if>
<b:elseif cond='data:view.isError'/>
<!--[ Error title ]-->
<title>Error 404: Not Found!</title>
<b:else/>
<!--[ SingleItem title ]-->
<b:comment>It will omit the blog title when the character count exceeds 57</b:comment>
<b:if cond='(data:blog.pageName.length + data:blog.title.length) gt 57'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
</b:if>
<!--[ Meta for browser ]-->
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='max-image-preview:large' name='robots'/>
<!-- Link canonical -->
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<b:if cond='!data:view.isError'>
<!--[ Description and keyword ]-->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<b:elseif cond='data:view.isSingleItem'/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='description'/>
</b:if>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped + ", keyword_1, keyword_2, keyword_3 "' name='keywords'/>
<b:tag cond='data:view.isPost' expr:href='resizeImage(data:blog.postImageUrl, 0)' name='link' rel='image_src'/>
<!--[ Generator and RRS ]-->
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl.canonical + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl.canonical + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - Feed"' rel='alternate' type='application/rss+xml'/>
<link expr:href='data:blog.homepageUrl.canonical + "feeds/comments/default?alt=rss"' expr:title='data:blog.title + " - Comments Feed"' rel='alternate' type='application/rss+xml'/>
<!--[ Theme color ]-->
<meta expr:content='data:skin.vars.themeColor' name='theme-color'/>
<meta expr:content='data:skin.vars.themeColor' name='msapplication-navbutton-color'/>
<meta expr:content='data:skin.vars.themeColor' name='apple-mobile-web-app-status-bar-style'/>
<meta expr:content='true' name='apple-mobile-web-app-capable'/>
<!--[ Favicon ]-->
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/>
<!--[ Open graph and Twitter card ]-->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:title'/>
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:blog.url.canonical' name='twitter:url'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<b:if cond='data:view.isMultipleItems'>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:description'/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:description'/>
</b:if>
<b:else/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' name='twitter:image:src'/>
<b:else/>
<b:comment>Replace Add_your_image_url_here with your image url</b:comment>
<b:with value='{url: "Add_your_image_url_here"}' var='thumb'>
<meta expr:content='data:thumb.url' property='og:image'/>
<meta expr:content='data:thumb.url' name='twitter:image:src'/>
</b:with>
</b:if>
<!--[ Additional meta is here ]-->
</b:if>
<b:if cond='!data:view.isLayoutMode'>
<!--[ CSS Stylesheet ]-->
<b:if cond='!data:view.isPreview'><style>/*</b:if><b:skin version='1.3.3'><![CDATA[
/*
<Group description="Address bar">
<Variable name="themeColor" description="Address Bar Color" type="color" default="#3d73dd" value="#fffdfc"/>
</Group>
<Group description="Basic and color">
<Variable name="fontSize" description="Basic font size" type="length" max="18px" default="14px" value="14px"/>
<Variable name="themeLink" description="Link and button" type="color" default="#3740ff" value="#3740ff"/>
<Variable name="themeC" description="Basic text color" type="color" default="#0e2045" value="#0e2045"/>
<Variable name="themeC.alt" description="Alternative text color(opacity 80%)" type="color" default="#0e2045" value="#0e2045"/>
<Variable name="themeBg" description="Basic background" type="color" default="#fffdfc" value="#fffdfc"/>
<Variable name="themeBg.alt" description="Alternative background 01" type="color" default="#f9f9fb" value="#f9f9fb"/>
<Variable name="themeBg.sec" description="Alternative background 02" type="color" default="#f5f3f2" value="#f5f3f2"/>
<Variable name="themeBd.color" description="Default border-color" type="color" default="#e4e3e1" value="#e4e3e1"/>
</Group>
<Group description="Dark mode">
<Variable name="darkLink" description="link and button(dark mode)" type="color" default="#8775f5" value="#8775f5"/>
<Variable name="darkC" description="Text color(dark mode)" type="color" default="#d9e2f0" value="#d9e2f0"/>
<Variable name="darkC.alt" description="Alternative text color(dark mode/opacity 70%)" type="color" default="#d9e2f0" value="#d9e2f0"/>
<Variable name="darkBg" description="Basic dark background" type="color" default="#22262d" value="#22262d"/>
<Variable name="darkBg.alt" description="Alternative dark background 01" type="color" default="#2d3138" value="#2d3138"/>
<Variable name="darkBg.sec" description="Alternative dark background 02" type="color" default="#161c24" value="#161c24"/>
<Variable name="darkBd.color" description="Basic dark border-color" type="color" default="#35393f" value="#35393f"/>
</Group>
<Group description="Button">
<Variable name="buttonC" description="Button color" type="color" default="#fffdfc" value="#fffdfc"/>
<Variable name="buttonBg" description="Button background" type="color" default="$(themeLink)" value="#3740ff"/>
<Variable name="buttonBd.line" description="Button border-width" type="length" max="2px" default="1px" value="1px"/>
<Variable name="buttonBd.radius" description="Button border-radius" type="length" max="20px" default="4px" value="4px"/>
<Variable name="buttonBd.color" description="Button border-color" type="color" default="$(themeBd.color)" value="#e4e3e1"/>
<Variable name="button.maxWidth" description="Button max-width" type="length" max="420px" default="320px" value="320px"/>
</Group>
<Group description="Logo" selector="div.widget.Header">
<Variable name="logo.maxWidth" description="Header image max-width" type="length" max="180px" default="160px" value="160px"/>
<Variable name="logo.maxHeight" description="Header image max-height" type="length" max="$(headerHeight)" default="50px" value="50px"/>
</Group>
<Group description="Header" selector="header.mainH">
<Variable name="headerHeight" description="Header max-height" type="length" max="100px" default="65px" value="65px"/>
<Variable name="headerHeight.phone" description="Header max-height(mobile)" type="length" max="100px" default="65px" value="65px"/>
<Variable name="headerC" description="Header color" type="color" default="$(themeC)" value="#0e2045"/>
<Variable name="headerBg" description="Header background" type="color" default="$(themeBg)" value="#fffdfc"/>
<Variable name="headerBd.line" description="Header border-width" type="length" max="2px" default="1px" value="1px"/>
<Variable name="headerBd.radiusBL" description="Header border-radius(bottom-left/mobile only)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="headerBd.radiusBR" description="Header border-radius(bottom-right/mobile only)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="headerBd.color" description="Header border-color" type="color" default="$(themeBd.color)" value="#e4e3e1"/>
</Group>
<Group description="Side navigation" selector="div.mainL">
<Variable name="sideWidth.collapse" description="Side width(collapse)" type="length" max="100px" default="75px" value="75px"/>
<Variable name="sideWidth.expand" description="Side width(expand)" type="length" max="300px" default="230px" value="230px"/>
<Variable name="sideWidth.max" description="Side max-width(mobile only)" type="length" max="500px" default="480px" value="480px"/>
<Variable name="sideMargin" description="Side margin(mobile only)" type="length" max="22px" default="0px" value="0px"/>
<Variable name="sideC" description="Side color" type="color" default="$(themeC)" value="#0e2045"/>
<Variable name="sideBg" description="Side background" type="color" default="$(themeBg)" value="#fffdfc"/>
<Variable name="sideBd.line" description="Side border-width" type="length" max="2px" default="1px" value="1px"/>
<Variable name="sideBd.radiusTL" description="Side border-radius(top-left/mobile only)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="sideBd.radiusTR" description="Side border-radius(top-right/mobile only)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="sideBd.radiusBL" description="Side border-radius(bottom-left/mobile only)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="sideBd.radiusBR" description="Side border-radius(bottom-right/mobile only)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="sideBd.color" description="Side border-color" type="color" default="$(themeBd.color)" value="#e4e3e1"/>
</Group>
<Group description="Sidebar" selector="aside.sideB">
<Variable name="sidebarWidth" description="Sidebar width" type="length" max="300px" default="280px" value="280px"/>
<Variable name="sidebarPadding" description="Sidebar padding" type="length" max="15px" default="0px" value="0px"/>
<Variable name="sidebarC" description="Sidebar color" type="color" default="$(themeC)" value="#0e2045"/>
<Variable name="sidebarBg" description="Sidebar background" type="color" default="$(themeBg)" value="#fffdfc"/>
<Variable name="sidebarBd.line" description="Sidebar border-width" type="length" max="2px" default="0px" value="0px"/>
<Variable name="sidebarBd.radius" description="Sidebar border-radius" type="length" max="20px" default="0px" value="0px"/>
<Variable name="sidebarBd.color" description="Sidebar border-color" type="color" default="$(themeBd.color)" value="#e4e3e1"/>
</Group>
<Group description="Content">
<Variable name="content.maxWidth" description="Body max-width" type="length" max="1366px" default="1300px" value="1300px"/>
<Variable name="contentPost.maxWidth" description="Post max-width" type="length" max="1024px" default="780px" value="780px"/>
<Variable name="contentPage.maxWidth" description="Static page max-width" type="length" max="1024px" default="820px" value="820px"/>
<Variable name="contentPop.maxWidth" description="Pop-up max-width" type="length" max="640px" default="550px" value="550px"/>
<Variable name="contentPadding" description="Side spacing" type="length" max="30px" default="22px" value="22px"/>
<Variable name="contentPadding.box" description="Content padding" type="length" max="15px" default="15px" value="15px"/>
<Variable name="contentSpace" description="Content space-between" type="length" max="60px" default="40px" value="40px"/>
<Variable name="contentC" description="Content color" type="color" default="$(themeC)" value="#0e2045"/>
<Variable name="contentBg" description="Content background" type="color" default="$(themeBg)" value="#fffdfc"/>
<Variable name="contentBg.alt" description="Content alternative background 01" type="color" default="$(themeBg.alt)" value="#f9f9fb"/>
<Variable name="contentBg.sec" description="Content alternative background 02" type="color" default="$(themeBg.sec)" value="#f5f3f2"/>
<Variable name="contentBd.line" description="Content border-width" type="length" max="2px" default="1px" value="1px"/>
<Variable name="contentBd.radius" description="Content border-radius" type="length" max="20px" default="4px" value="4px"/>
<Variable name="contentBd.radiusA" description="Content border-radius (alternative)" type="length" max="20px" default="10px" value="10px"/>
<Variable name="contentBd.color" description="Content border-color" type="color" default="$(themeBd.color)" value="#e4e3e1"/>
</Group>
<Group description="Footer" selector="footer.mainF">
<Variable name="footerC" description="Footer color" type="color" default="$(themeC)" value="#0e2045"/>
<Variable name="footerBg" description="Footer background" type="color" default="$(themeBg)" value="#fffdfc"/>
<Variable name="footerBd.line" description="Footer border-width" type="length" max="2px" default="1px" value="1px"/>
<Variable name="footerBd.radiusTL" description="Footer border-radius(top-left/mobile only)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="footerBd.radiusTR" description="Footer border-radius(top-right/mobile only)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="footerBd.color" description="Footer border-color" type="color" default="$(themeBd.color)" value="#e4e3e1"/>
</Group>
<Group description="Post: Style" selector="div.blogP article.p">
<Variable name="postPadding" description="Post padding" type="length" max="12px" default="0px" value="0px"/>
<Variable name="postPadding.phone" description="post Padding(mobile only)" type="length" max="12px" default="0px" value="0px"/>
<Variable name="postPadding.content" description="Post content padding" type="length" max="12px" default="0px" value="0px"/>
<Variable name="postC" description="Post color" type="color" default="$(themeC)" value="#0e2045"/>
<Variable name="postBg" description="Post background" type="color" default="$(themeBg)" value="#fffdfc"/>
<Variable name="postBd.line" description="Post border-width" type="length" max="2px" default="0px" value="0px"/>
<Variable name="postBd.radius" description="Post border-radius" type="length" max="20px" default="0px" value="0px"/>
<Variable name="postBd.color" description="Post border-color" type="color" default="$(themeBd.color)" value="#e4e3e1"/>
<Variable name="postBs.color" description="Post box-shadow background" type="color" default="transparent" value="transparent"/>
<Variable name="postBs.hoverColor" description="Post box-shadow background(hover)" type="color" default="transparent" value="transparent"/>
</Group>
<Group description="Post: Component">
<Variable name="noteC" description="Component: Note color" type="color" default="#272eb5" value="#272eb5"/>
<Variable name="noteBg" description="Component: Note background" type="color" default="#e8f0fe" value="#e8f0fe"/>
<Variable name="warnC" description="Component: Warning color" type="color" default="#e51661" value="#e51661"/>
<Variable name="warnBg" description="Component: Warning background" type="color" default="#fce8e8" value="#fce8e8"/>
<Variable name="stepC" description="Component: Step-list color" type="color" default="$(themeLink)" value="#3740ff"/>
<Variable name="stepHover" description="Component: Step-list text(hover)" type="color" default="#fffdfc" value="#fffdfc"/>
</Group>
<Group description="Widget: Notification" selector="div.notify">
<Variable name="notifHeight" description="Notif max-height" type="length" max="100px" default="55px" value="55px"/>
<Variable name="notifLink" description="Link color" type="color" default="#3740ff" value="#3740ff"/>
<Variable name="notifC" description="Text color" type="color" default="#272eb5" value="#272eb5"/>
<Variable name="notifBg" description="Background color" type="color" default="#e8f0fe" value="#e8f0fe"/>
</Group>
<Group description="Widget: Mobile menu" selector="div.mainM">
<Variable name="mobileHeight" description="max-height" type="length" max="100px" default="60px" value="60px"/>
<Variable name="mobileMargin" description="Margin" type="length" max="22px" default="0px" value="0px"/>
<Variable name="mobileC" description="Color" type="color" default="$(themeC)" value="#0e2045"/>
<Variable name="mobileBg" description="Background" type="color" default="$(themeBg)" value="#fffdfc"/>
<Variable name="mobileBd.line" description="Border-width" type="length" max="2px" default="0px" value="0px"/>
<Variable name="mobileBd.radiusTL" description="Border-radius(top-left)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="mobileBd.radiusTR" description="Border-radius(top-right)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="mobileBd.radiusBL" description="Border-radius(bottom-left)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="mobileBd.radiusBR" description="Border-radius(bottom-right)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="mobileBd.color" description="Vorder-color" type="color" default="$(themeBd.color)" value="#e4e3e1"/>
</Group>
<Group description="Widget: Table of Content">
<Variable name="tocWidth" description="max-height" type="length" max="320px" default="280px" value="280px"/>
<Variable name="tocMargin" description="Margin" type="length" max="22px" default="0px" value="0px"/>
<Variable name="tocC" description="Color" type="color" default="$(themeC)" value="#0e2045"/>
<Variable name="tocBg" description="Background" type="color" default="$(themeBg)" value="#fffdfc"/>
<Variable name="tocBd.line" description="Border-width" type="length" max="2px" default="1px" value="1px"/>
<Variable name="tocBd.radiusTL" description="Border-radius(top-left)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="tocBd.radiusTR" description="Border-radius(top-right)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="tocBd.radiusBL" description="Border-radius(bottom-left)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="tocBd.radiusBR" description="Border-radius(bottom-right)" type="length" max="20px" default="0px" value="0px"/>
<Variable name="tocBd.color" description="Vorder-color" type="color" default="$(themeBd.color)" value="#e4e3e1"/>
</Group>
<Group description="(Do not edit) New Blogger comment required">
<Variable name="body.background" description="Background" color="#989b9f" type="background" default="$(color) none repeat scroll center center" value="$(color) url() no-repeat scroll center center"/>
<Variable name="body.link.color" description="Link color" type="color" default="#989b9f" value="#5b5c5e"/>
<Variable name="body.text.font" description="Comment font size" type="font" default="400 14px sans-serif" value="400 13px sans-serif"/>
<Variable name="body.text.color" description="Comment text color" type="color" default="#989b9f" value="#6d7176"/>
<Variable name="posts.background.color" description="Comment background color" type="color" default="#fffdfc" value="transparent"/>
<Variable name="posts.title.color" description="Post title color" type="color" default="#989b9f" value="#5b5c5e"/>
<Variable name="posts.icons.color" description="Post icons color" type="color" default="#989b9f" value="#5b5c5e"/>
<Variable name="tabs.font" description="Tabs font" type="font" default="400 14px sans-serif" value="400 13px sans-serif"/>
<Variable name="labels.background.color" description="Labels background color" type="color" default="#fff" value="#fffdfc"/>
</Group>
*/
/*
THEME DETAILS:
.
Name : Median-UI-1.7-Blogger-Template-With-WhatsApp-Live-Chat
Demo site : median-ui.jagodesain.com
Powered by : jagodesain.com
WhatsApp Integrated By : https://imamuddinwp.com
============================================================================
NOTE:
This theme is premium (paid). You can only get it by purchasing officially.
If you get it for free through any method, that mean's you get it illegally.
============================================================================
*/
/* Variable */
:root{
/* var: Font */
--fontSize: $(fontSize) ;
--fontHead: 'Noto Sans', sans-serif ;
--fontBody: 'Noto Sans', sans-serif ;
--fontBody-alt: 'Fira Sans', sans-serif ;
--fontCode: 'Fira Mono', sans-serif ;
--head-H1: 2rem ;
--head-H2: 1.8rem ;
--head-H3: 1.7rem ;
--head-H4: 1.6rem ;
--head-H5: 1.5rem ;
--head-H6: 1.4rem ;
--head-fontWg: 400 ;
}
.nB{
/* var: Light-mode */
--lightLink: $(themeLink) ;
--lightC: $(themeC) ;
--lightC-alt: $(themeC.alt)cc ; /* cc mean's opacity 80% */
--lightBg: $(themeBg) ;
--lightBg-alt: $(themeBg.alt) ;
--lightBg-sec: $(themeBg.sec) ;
--lightBg-pop: rgb(14 20 27 / 30%) ;
--lightBd-color: $(themeBd.color) ;
/* var: Dark-mode */
--darkLink: $(darkLink) ;
--darkC: $(darkC) ;
--darkC-alt: $(darkC.alt)B3 ; /* B3 mean's opacity 70% */
--darkBg: $(darkBg) ;
--darkBg-alt: $(darkBg.alt) ;
--darkBg-sec: $(darkBg.sec) ;
--darkBg-pop: rgb(14 20 27 / 90%) ;
--darkBd-color: $(darkBd.color) ;
/* var: Theme */
--themeLink: var(--lightLink) ;
--themeC: var(--lightC) ;
--themeC-alt: var(--lightC-alt) ;
--themeBg: var(--lightBg) ;
--themeBg-alt: var(--lightBg-alt) ;
--themeBg-sec: var(--lightBg-sec) ;
--themeBg-pop: var(--lightBg-pop) ;
--themeBd-color: var(--lightBd-color) ;
/* var: Basic, button, input */
--vHeight: 100vh ;
--selectC: #fffdfc ;
--selectBg: var(--themeLink) ;
--placeHolder: var(--themeC-alt) ;
--buttonC: $(buttonC) ;
--buttonBg: $(buttonBg) ;
--buttonBd-line: $(buttonBd.line) ;
--buttonBd-color: $(buttonBd.color) ;
--buttonBd-radius: $(buttonBd.radius) ;
--button-maxWidth: $(button.maxWidth) ;
--inputC: currentColor ;
--inputBg: var(--themeBg) ;
--inputBd-line: 1px ;
--inputBd-color: var(--themeBd-color) ;
--inputBd-radius: 4px ;
/* var: Icons */
--iconWidth: 35px ;
--iconHeight: 35px ;
/* var: Pop-up */
--closeHeight-phone: 60px ;
/* var: Header */
--headerText-after: '' ;
--headerWidth-expand: var(--sideWidth-expand) ;
--headerHeight: $(headerHeight) ;
--headerHeight-min: -$(headerHeight) ;
--headerHeight-phone: $(headerHeight.phone) ;
--header-font: 1.143em ;
--header-fontWg: 500 ;
--headerC: $(headerC) ;
--headerBg: $(headerBg) ;
--headerBd-line: $(headerBd.line) ;
--headerBd-radiusBL: $(headerBd.radiusBL) ;
--headerBd-radiusBR: $(headerBd.radiusBR) ;
--headerBd-color: $(headerBd.color) ;
--headerLogo-maxWidth: $(logo.maxWidth) ;
--headerLogo-maxHeight: $(logo.maxHeight) ;
/* var: Sidenav */
--sideWidth: $(sideWidth.collapse) ;
--sideWidth-collapse: var(--sideWidth) ;
--sideWidth-expand: $(sideWidth.expand) ;
--sideWidth-max: $(sideWidth.max) ;
--sideMargin-phone: $(sideMargin) ;
--sideC: $(sideC) ;
--sideBg: $(sideBg) ;
--sideBd-line: $(sideBd.line) ;
--sideBd-radiusTL: $(sideBd.radiusTL) ;
--sideBd-radiusTR: $(sideBd.radiusTR) ;
--sideBd-radiusBR: $(sideBd.radiusBR) ;
--sideBd-radiusBL: $(sideBd.radiusBL) ;
--sideBd-color: $(sideBd.color) ;
/* var: Sidebar */
--sidebarWidth: $(sidebarWidth) ;
--sidebarPadding: $(sidebarPadding) ;
--sidebarC: $(sidebarC) ;
--sidebarBg: $(sidebarBg) ;
--sidebarBd-line: $(sidebarBd.line) ;
--sidebarBd-radius: $(sidebarBd.radius) ;
--sidebarBd-color: $(sidebarBd.color) ;
/* var: Content */
--content-maxWidth: $(content.maxWidth) ;
--contentPost-maxWidth: $(contentPost.maxWidth) ;
--contentPage-maxWidth: $(contentPage.maxWidth) ;
--contentPop-maxWidth: $(contentPop.maxWidth) ;
--contentPadding: $(contentPadding) ;
--contentPadding-minus: -$(contentPadding) ;
--contentPadding-box: $(contentPadding.box) ;
--contentSpace: $(contentSpace) ;
--contentC: $(contentC) ;
--contentBg: $(contentBg) ;
--contentBg-alt: $(contentBg.alt) ;
--contentBg-sec: $(contentBg.sec) ;
--contentBd-line: $(contentBd.line) ;
--contentBd-radius: $(contentBd.radius) ;
--contentBd-radiusA: $(contentBd.radiusA) ;
--contentBd-color: $(contentBd.color) ;
/* var: Footer */
--footerC: $(footerC) ;
--footerBg: $(footerBg) ;
--footerBd-line: $(footerBd.line) ;
--footerBd-radiusTL: $(footerBd.radiusTL) ;
--footerBd-radiusTR: $(footerBd.radiusTR) ;
--footerBd-color: $(footerBd.color) ;
/* var: Post style */
--postPadding: $(postPadding) ;
--postPadding-phone: $(postPadding.phone) ;
--postPadding-content: $(postPadding.content) ;
--postC: $(postC) ;
--postBg: $(postBg) ;
--postBd-line: $(postBd.line) ;
--postBd-radius: $(postBd.radius) ;
--postBd-color: $(postBd.color) ;
--postBs-color: $(postBs.color) ;
--postBs-hoverColor: $(postBs.hoverColor) ;
/* var: Post font */
--postTitle-font: 2.6rem ;
--postTitle-fontPhone: 2rem ;
--postTitle-fontWg: 400 ;
--postTitle-fontItems: 1.2em ;
--postTitle-fontItemsPhone: 1.1em ;
--postDescription-font: 1.13rem ;
--postDescription-fontPhone: 1.072rem ;
--postBody-font: 1.143rem ;
--postBody-fontPhone: 1.072rem ;
/* var: Post typo */
--postBreak: 3em ;
--postImageBd-radius: 2px;
--lineHeight: 1.7 ;
--lineSpacing: 1.8em ;
--tableBg-color: rgb(246 246 246 / 80%) ;
/* var: Post thumbnail */
--thumbnailRatio: 56.25% ; /* According to aspect-ratio 16:9 (divide 9 by 16 = 0.5625) */
--thumbnailRatio-box: 100% ;
/* var: Post syntax */
--synC: #2f3337 ;
--synBg: #f8f9fa ;
--synOrange: #b75501 ;
--synBlue: #015692 ;
--synGreen: #54790d ;
--synRed: #f15a5a ;
--synGray: #656e77 ;
--synGold: #72621d ;
--synPurple: #803378 ;
--synBd-line: 1px ;
--synBd-radius: 4px ;
--synBd-color: #d2d3d7 ;
/* var: Post component */
--noteAfter: '\002A' ;
--warnAfter: '\0021' ;
--noteC: $(noteC) ;
--noteBg: $(noteBg) ;
--warnC: $(warnC) ;
--warnBg: $(warnBg) ; /*#fef5fa*/
--stepC: $(stepC) ;
--stepHover: $(stepHover) ;
/* var: Widget */
--widgetTitle-font: 1.072rem ;
--widgetTitle-fontWg: 400 ;
--widgetTitle-afterD: inline-block ;
--widgetTitle-afterWd: 10px ;
--widgetTitle-afterC: var(--themeBd-color) ;
--widgetTitle-space: 20px ;
/* var: Widget notify */
--notifHeight: $(notifHeight) ;
--notifLink: $(notifLink) ;
--notifC: $(notifC) ;
--notifBg: $(notifBg) ;
/* var: Widget slider */
--sliderBd-radius: 4px ;
--sliderRatio: 43.75% ;
/* var: Widget featuredPosts */
--thumbnailSize: 300px ;
/* var: Widget mobileMenu */
--mobileHeight: $(mobileHeight) ;
--mobileMargin: $(mobileMargin) ;
--mobileC: $(mobileC) ;
--mobileBg: $(mobileBg) ;
--mobileBd-line: $(mobileBd.line) ;
--mobileBd-radiusTL: $(mobileBd.radiusTL) ;
--mobileBd-radiusTR: $(mobileBd.radiusTR) ;
--mobileBd-radiusBR: $(mobileBd.radiusBR) ;
--mobileBd-radiusBL: $(mobileBd.radiusBL) ;
--mobileBd-color: $(mobileBd.color) ;
/* var: Widget ToC */
--tocWidth: $(tocWidth) ;
--tocWidth-minus: -$(tocWidth) ;
--tocMargin: $(tocMargin) ;
--tocC: $(tocC) ;
--tocBg: $(tocBg) ;
--tocBd-line: $(tocBd.line) ;
--tocBd-radiusTL: $(tocBd.radiusTL) ;
--tocBd-radiusTR: $(tocBd.radiusTR) ;
--tocBd-radiusBR: $(tocBd.radiusBR) ;
--tocBd-radiusBL: $(tocBd.radiusBL) ;
--tocBd-color: $(tocBd.color) ;
/* var: Transition */
--tDuration: .1s ease ;
--tShowHide: opacity var(--tDuration), visibility var(--tDuration) ;
/* var: Bookmark */
--addBookmark: 'Save' ;
--removeBookmark: 'Saved' ;
--bookmarkTextLenght: 90px ;
/* var: Custom text */
--free: 'Free!' ;
--new: 'New!' ;
--breadcrumbs: '\005C' ;
--noImage: 'Null' ;
--labelComa: 'and' ;
--closeButton: 'Close' ;
--pageNext: 'Next' ;
--pagePrev: 'Back' ;
--latestUpdate: '\21BB' ;
--reply: 'Reply' ;
--replies: 'Write a reply...' ;
--readtimeBefore: '\00B7' ;
--readtimeAfter: 'min read' ;
--copyLink: 'or copy link' ;
--copied: 'Copied!' ;
--tableToc: 'Contents' ;
}
/* --- WhatsApp Button For Blogger CSS code by imamuddinwp.com --- */:root {--warna-background: #4dc247;--warna-bg-chat: #f0f5fb;--warna-icon: #fff;--warna-text: #505050;--warna-text-alt: #989b9f;--lebar-chatbox: 320px;}.sticky-button{display: flex;align-items: center;justify-content: center;position: fixed;right: 20px;bottom: 76px;width: 45px;height: 45px;background-color: #fefefe;border-radius: 20px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.1);}.sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}.sticky-button a svg, .sticky-button label svg{margin:auto;fill:#4dc247}.sticky-button label svg.svg-2{display:none}.sticky-chat{position:fixed;bottom:70px;right:20px;width:var(--lebar-chatbox);-webkit-transition:all .3s ease-out;transition:all .3s ease-out;z-index:21;opacity:0;visibility:hidden;line-height:normal}.sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:var(--warna-background);overflow:hidden}.sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.040);border-radius:70px 0 5px 0;}.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-icon)}.sticky-chat .chat-header .title a{color:#fff}.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}.sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--warna-text)}.sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--warna-bg-chat);border-radius:3px 15px 15px}.sticky-chat .chat-text span:after{content:'Just now';display:inline-block;margin-left:15px;font-size:9px;color:var(--warna-text-alt)}.sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}.sticky-chat .chat-text span.typing:after, .chat-menu{display:none}.sticky-chat .chat-text span.typing svg{height:14px;fill:var(--warna-text-alt)}.sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text)}.sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--warna-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}.chat-menu:checked + .sticky-button label svg.svg-1{display:none}.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}.chat-menu:checked + .sticky-button + .sticky-chat{bottom: 77px;right: 81px;opacity: 1;visibility: visible;}
/*]]></b:skin>
<style>/*<![CDATA[*/
/* Font: Body + Heading, Noto Sans(Latin) by Google */ @font-face {font-family:'Noto Sans'; font-style:italic;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4ARCQ_k.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4DRG.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:italic;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AyxYOyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AyxYNyH.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:italic;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AydZ-yDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4AydZ9yH.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:italic;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4Az5ZtyH.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNb4Q.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:normal;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjFhdVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjFhdlYA.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:normal;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjOhBVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjOhBlYA.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Noto Sans'; font-style:normal;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjXhFlYA.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Font: Body + Heading(Alternative), Fira Sans(Latin) by Google */ @font-face {font-family:'Fira Sans'; font-style:italic;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9C4kDNxMZdWfMOD5VvkrjJYTI.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9C4kDNxMZdWfMOD5VvkojN.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Fira Sans'; font-style:italic;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrA6Qif4VFk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrA6Qhf8.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Fira Sans'; font-style:italic;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrAWRSf4VFk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrAWRRf8.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Fira Sans'; font-style:italic;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrByRCf4VFk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9f4kDNxMZdWfMOD5VvkrByRBf8.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Fira Sans'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jL.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vfkw.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Fira Sans'; font-style:normal;font-weight:500;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnZKveRhf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnZKvuQg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Fira Sans'; font-style:normal;font-weight:600;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnSKzeRhf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnSKzuQg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face {font-family:'Fira Sans'; font-style:normal;font-weight:700;font-display:swap; src:url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnLK3eRhf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firasans/v16/va9B4kDNxMZdWfMOD5VnLK3uQg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Font: Source code, Fira Mono(Latin) by Google */ @font-face {font-family:'Fira Mono'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format('woff2'), url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtQIg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/*! normalize.css v8.0.1 - modified for Jagodesain.com at 14px | MIT License | github.com/necolas/normalize.css*/ html{line-height:1.15;-webkit-text-size-adjust:100%} body{margin:0} main{display:block} h1{font-size:2em;margin:.67em 0} hr{box-sizing:content-box;overflow:visible} pre{font-family:monospace, monospace;font-size:.82em} a{background-color:transparent} abbr[title]{border-bottom:none;text-decoration:underline} b, strong{font-weight:bolder} code, kbd, samp{font-family:monospace, monospace;font-size:.88em} small{font-size:80%} sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-.25em} sup{top:-.5em} img{border-style:none} button, input, optgroup, select, textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;outline:0} button, input{overflow:visible} button, select{text-transform:none} button, [type=button], [type=reset], [type=submit]{-webkit-appearance:button} button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText} fieldset{padding:.35em .75em .625em} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal} progress{vertical-align:baseline} textarea{overflow:auto} [type=checkbox], [type=radio]{padding:0} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} details{display:block} summary{display:list-item} template{display:none} [hidden], .hidden{display:none}
/* Basic: CSS */ ::selection{color:var(--selectC);background-color:var(--selectBg); opacity:.85} ::placeholder{color:var(--placeHolder)} ::before, ::after, *{-webkit-box-sizing:border-box;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden; font:var(--fontSize) var(--fontBody)} body{position:relative; margin:0;padding:0 !important; color:var(--themeC);background-color:var(--themeBg); -webkit-font-smoothing: antialiased} h1, h2, h3, h4, h5, h6{margin-block:.67em; font:var(--head-fontWg) 1.4rem/1.4 var(--fontHead); color:currentColor} h1{font-size:var(--head-H1)} h2{font-size:var(--head-H2)} h3{font-size:var(--head-H3)} h4{font-size:var(--head-H4)} h5{font-size:var(--head-H5)} h6{font-size:var(--head-H6)} a{color:var(--themeLink);text-decoration:none} a:hover{filter:brightness(.9);transition:filter .1s} table{border-spacing:0} iframe{width:100%;border:0;margin-inline:auto} img{display:inline-block;max-width:100%;height:auto} svg{width:24px;height:24px; fill:currentColor} svg.line, svg .line{fill:none; stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.25} .invisible{opacity:0;visibility:hidden} .clear{width:100%;display:block;margin:0;padding:0;float:none;clear:both} .break{word-break:break-word}
/* Basic: input and details tag */ input{color:var(--inputC);background-color:var(--inputBg)} input[type=search]::-ms-clear, input[type=search]::-ms-reveal{display:none;appearance:none;width:0;height:0} input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration{display:none;-webkit-appearance:none;appearance:none} details summary.n, details.sp summary, details.ac summary{list-style:none;outline:none; cursor:default} details summary.n::-webkit-details-marker, details.sp summary::-webkit-details-marker, details.ac summary::-webkit-details-marker{display:none}
/* Basic: function */ .fc::after{content:''; display:block; position:fixed;top:0;left:0;right:0;bottom:0; z-index:1; transition:background var(--tDuration), var(--tShowHide), backdrop-filter var(--tDuration); background-color:transparent;opacity:0;visibility:hidden} .free::after, .new::after{display:inline-block; content:var(--free); color:var(--themeLink); font-weight:400;font-size:small; text-indent:5px} .new::after{content:var(--new)} .extL::after{content:''; display:inline-block; width:14px;height:14px;margin-inline-start:5px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>") center / 16px no-repeat} .noList, .noList ul, .noList ol{list-style:none;margin:0;padding:0} .noWrap{white-space:nowrap} .ellips{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cInherit a{color:inherit} .cInherit.u a:hover{text-decoration:underline} .bgInherit{background-color:inherit} .bgAlt{background-color:var(--themeBg-alt)} .clamp{/*display:-webkit-box;*/ -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .strike{text-decoration:line-through} .flex{display:flex} .flex.center{align-items:center;justify-content:center} .flex.column{flex-direction:column} .flex.wrap{flex-wrap:wrap} .flex.space-between{justify-content:space-between} .flex.baseline{align-items:baseline} .flexIn{display:inline-flex} .flexIn.baseline{align-items:baseline} .flexIn.center{align-items:center} .shrink{flex-shrink:0} .grow{flex-grow:1} .opacity{opacity:.8}
/* Font style */ .fontM{font-size:.93em} .fontS{font-size:small} .fontSm{font-size:smaller} .fontB{font-family:var(--fontBody)} .fontBa{font-family:var(--fontBody-alt)} .fontC{font-family:var(--fontCode)}
/* Icon and SVG */ .ic{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center; width:var(--iconWidth);height:var(--iconHeight)} .op svg{opacity:.8} .i12 svg{flex-shrink:0; width:12px;height:12px} .i14 svg{flex-shrink:0; width:14px;height:14px} .i16 svg{flex-shrink:0; width:16px;height:16px} .i18 svg{flex-shrink:0; width:18px;height:18px} .i20 svg{flex-shrink:0; width:20px;height:20px} .i22 svg{flex-shrink:0; width:22px;height:22px} .i28 svg{flex-shrink:0; width:28px;height:28px}
/* Button */ .button{display:inline-flex;align-items:center;column-gap:8px; max-width:var(--button-maxWidth); padding:.75rem 1rem;outline:0;border:0;border-radius:var(--buttonBd-radius); color:var(--buttonC);background-color:var(--buttonBg); font:1rem/1.5 var(--fontBody); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .button:hover{filter:brightness(1.1)} .button:active{filter:brightness(.9)} .button.ln{border:var(--buttonBd-line) solid var(--buttonBd-color); color:inherit;background-color:transparent} .button.ln:hover{border-color:var(--buttonBg);box-shadow:0 0 0 .5px var(--buttonBg) inset} .button.sc{padding-inline:0; color:currentColor;background-color:transparent} .button.sc:hover{text-decoration:underline} .button.round{border-radius:30px} .button svg{flex-shrink:0; width:18px;height:18px} .button span::after{content:attr(data-text); display:block;font-size:smaller;text-indent:4px; opacity:.8} .btnF{display:flex;justify-content:center;gap:12px; margin-block:1em}
/* Avatar */ .avatar{min-width:28px;min-height:28px; border-radius:50%;background-color:var(--contentBg-sec);background-size:100%;background-position:center;background-repeat:no-repeat} .avatar.im{width:35px;height:35px}
/* Back to top */ .bT{align-items:center;gap:5px; position:relative;margin-inline-end:-2px} .bT::before{content:attr(data-text); opacity:.8}
/* Sticky ad */ .stickAd{position:fixed;left:0;bottom:0;right:0; min-height:70px;max-height:200px; padding:5px;border-top:1px solid var(--contentBd-color);background-color:var(--contentBg); transition:border var(--tDuration), padding var(--tDuration), min-height var(--tDuration); z-index:1} .stickAd .n{position:absolute;top:-28px;right:0; width:45px;height:28px; border-radius:10px 0 0;border:1px solid var(--contentBd-color);border-right:0;border-bottom:0; background-color:var(--contentBg)} .stickAd .n::after{content:'\2715';font-size:13px} .stickAd:not([open]){border-top:0;padding-block:0;min-height:0}
/* Error 404 */ .errorP{height:100vh;text-align:center} .errorC{width:calc(100% - calc(var(--contentPadding) * 2));max-width:450px; margin:auto; font-family:var(--fontBody-alt)} .errorC .e{font-size:4rem; color:rgb(0 0 0 / 10%)} .errorC .t{font-size:1.6rem} .errorC p{margin-block:25px 30px; line-height:1.4} .errorC .button{padding-inline:2.5em} .errorC .button::before{content:attr(aria-label)}
/* Notify */ .nB .fixN{--minHeight: 45px ; --minHeight-phone: var(--closeHeight-phone) ; display:inline-flex;align-items:center; position:fixed;bottom:calc(-100px + var(--contentPadding-minus));min-height:var(--minHeight); padding:15px 20px;border-radius:var(--contentBd-radius);color:#d9e2f0;background:#323232; font:small/1.3 var(--fontBody-alt); box-shadow:5px 10px 20px 0 rgb(0 0 0 / 10%); transition:bottom var(--tDuration), var(--tShowHide); z-index:99; animation:slideIn 2.2s ease-in forwards} .nB:not(.r) .fixN{left:var(--contentPadding);direction:ltr;} .nB.r .fixN{right:var(--contentPadding);direction:rtl} .fixN.copied::before{content:var(--copied)}
/* Widget: notify */ .notify{--padding:15px;--closeW:32px; color:var(--notifC);background-color:var(--notifBg)} .notify:not(.no-items){margin-block-end:var(--contentSpace)} .notify details{position:relative;min-height:0;padding-block:0;padding-inline-end:calc(var(--closeW) - 7px); transition:min-height var(--tDuration), padding var(--tDuration); overflow:hidden} .notify details[open]{min-height:var(--notifHeight);padding-block:var(--padding)} .notify summary{position:absolute;top:15px; width:var(--closeW);min-height:20px} .notify summary:not(.r){right:-7px} .notify summary.r{left:-7px} .notify summary .c::after{content:'\2715'; font-weight:400;font-size:14px} .notify .p{min-height:calc(var(--notifHeight) - (var(--padding) * 2)); line-height:1.3;font-family:var(--fontBody-alt)} .notify a:not(.b){color:var(--notifLink);text-decoration:underline; font-weight:500} .notify a.b{margin-inline-start:5px;padding:6px 8px;border-radius:var(--contentBd-radius);color:#3740ff;background-color:#fffdfc; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)}
/* noScript/cookie */ body.nB .lazy:not([lazied]){display:none} .nJ{position:fixed;left:0;bottom:var(--contentPadding);right:0; max-width:400px;margin-inline:var(--contentPadding);padding:18px 20px;padding-block-end:36px;border-radius:var(--contentBd-radius); color:var(--warnC);background:var(--warnBg); font:small/1.3 var(--fontBody-alt);box-shadow:0 15px 30px -8px rgb(0 0 0 / 8%); z-index:99} .nJ:not([open]){display:none} .nJ summary{position:absolute;bottom:12px;right:20px} .nJ span:not(.c)::before{content:attr(data-text)} .nJ span.c{display:flex;align-items:center;gap:5px; font-weight:500} .nJ span.c::before{content:attr(data-text)} .nJs .noJava, .njs .lazyYt{display:none} .nJ.cookie:not(.hidden){display:block} .nJ.cookie{bottom:calc(-100px + var(--contentPadding)); margin-bottom:var(--contentPadding);padding-block-end:15px;color:#0e2045;background-color:#fffdfc; font-size:.94rem; box-shadow:0 15px 30px 8px rgb(0 0 0 / 8%); transition:bottom var(--tDuration), var(--tShowHide); animation:slideTop 2.2s ease-in forwards} .nJ.cookie p{margin-block:0 5px} .nJ.cookie p a:hover{text-decoration:underline; opacity:1} .nJ.cookie .ft{gap:20px;justify-content:flex-end; font-weight:500} .nJ.cookie .ft >*{padding-block:5px} .nJ.cookie .acc{color:var(--themeLink); cursor:pointer}
/* Element: po-up */ .popH{align-items:baseline;justify-content:space-between;column-gap:20px; top:0;left:0;right:0; padding-block:20px;background-color:inherit; z-index:3} .popH .filter{align-items:center;justify-content:flex-end;column-gap:10px;flex-shrink:0; min-width:50px} .popH .c{display:none; align-items:center;justify-content:center;gap:5px; width:var(--iconWidth);height:var(--iconHeight); margin-inline-end:-10px} .popH .c::after{content:'\2715'; font-weight:400;font-size:14px} .popH .t{display:none} .popH .t::before{content:attr(data-text); flex-grow:1; opacity:.8} .popUp .popH .c{display:flex} .popUp .popH .t{display:block} .popUp .popH{position:absolute; height:60px;padding:10px var(--contentPadding)} .popUp .popH .title{margin:0; font-size:1em} .popUp{display:flex;align-items:center;justify-content:center; position:fixed;left:0;right:0;bottom:0; width:100%;height:var(--vHeight); margin-bottom:-100%; font-size:1rem; opacity:0;visibility:hidden; transition:width var(--tDuration), height var(--tDuration), margin var(--tDuration), var(--tShowHide); z-index:20} .popUp .popIn{display:flex; position:relative; width:100%;max-width:var(--contentPop-maxWidth);max-height:calc(100% - (var(--contentPadding) * 2)); border:var(--contentBd-line) solid var(--contentBd-color);border-radius:var(--contentBd-radiusA); transition:inherit;z-index:3; overflow:hidden} .popUp .popC{width:100%; padding:60px var(--contentPadding) var(--contentPadding); background-color:var(--contentBg); overflow-y:scroll;overflow-x:hidden} .popI:checked ~ .popUp{opacity:1;visibility:visible; margin-bottom:0} .popI:checked ~ .popUp .fc::after{opacity:1;visibility:visible; background-color:var(--themeBg-pop); backdrop-filter:saturate(180%) blur(10px)}
/* element: Main */ .maxC{margin-inline:auto;padding-inline:var(--contentPadding); max-width:var(--content-maxWidth)} .mainH{--gapH:15px;gap:var(--gapH); height:var(--headerHeight); position:-webkit-sticky;position:sticky;top:0; border-bottom:var(--headerBd-line) solid var(--headerBd-color); color:var(--headerC);background-color:var(--headerBg); z-index:10} .mainN{min-height:calc(var(--vHeight) - var(--headerHeight)); transition:min-height var(--tDuration)} .mainF{position:relative; margin-block-start:auto; padding-block:25px;border-radius:var(--footerBd-radiusTL) var(--footerBd-radiusTR) 0 0;color:var(--footerC);background-color:var(--footerBg)}
/* mainH */ .mainH >*{align-items:center} .headL{--gap: 10px; gap:var(--gap); width:var(--headerWidth-expand)} .headR{--gap: 15px; flex-grow:1;gap:var(--gap); width:calc(100% - (var(--headerWidth-expand) + var(--gapH))); padding-inline-end:var(--contentPadding)} .headT{max-width:calc(100% - (((var(--sideWidth) - var(--iconWidth)) / 2) + var(--iconWidth) + var(--gap)))} .headB{position:relative;margin-inline-start:auto}
/* mainH: icon */ .headi.menu{height:100%; padding-inline-start:calc((var(--sideWidth) - var(--iconWidth)) /2)} .headi:not(.menu){align-items:center;justify-content:flex-end;gap:2px; position:relative;margin-inline-end:-8px} .headi .sc{display:none} .ibook .bc{position:relative} .ibook .bc svg{z-index:-1} .ibook .bc::before{content:attr(data-text); display:flex;align-items:center;justify-content:center; position:absolute;top:1px;right:2px;min-width:18px;height:18px; border-radius:20px;color:var(--themeLink);background-color:var(--headerBg); font-weight:500;font-size:10px;font-style:normal}
/* mainH: setting */ .settB{--maxWidth: 260px; --maxWidth-minus: -260px} .settB .h{align-items:center;align-self:flex-start;gap:6px; padding-top:var(--contentPadding-box)} .settB .h::after{content:attr(data-text)} .settB .h svg{display:none} .setti{--gap:15px; flex-wrap:wrap; gap:var(--gap)} .setti >*{width:calc((100% / 5) - (var(--gap) * 4/5))} .ipopUp{position:absolute;top:0; width:var(--maxWidth);padding:var(--contentPadding-box);border:var(--contentBd-line) solid var(--contentBd-color);border-radius:var(--contentBd-radiusA);background-color:var(--contentBg); transition:top var(--tDuration), left var(--tDuration), right var(--tDuration), var(--tShowHide); box-shadow:0 10px 30px -8px rgb(0 0 0 / 15%); overflow:hidden; z-index:1} .ipopUp:not(.r){right:0} .ipopUp.r{left:0} /* set theme or bookmark */ .iTheme, .iBook{gap:15px; padding-top:0} .inn{--gap: 10px; flex-wrap:wrap;gap:12px var(--gap)} .inn >*:not(:last-child){width:calc((100% / 3) - (var(--gap) * 2/3));transition:font-weight var(--tDuration), color var(--tDuration), opacity var(--tDuration)} .inn >*:not(:last-child):hover{opacity:.8} .inn >*:last-child{width:100%} .inn >*:not(:last-child)::after{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inn >*::after{content:attr(data-text); display:block} .inn .i{height:36px;margin-bottom:6px;border-radius:calc(var(--contentBd-radiusA) /1.5); background-color:#e5e5e6;overflow:hidden; transition:box-shadow var(--tDuration)} .inn .i >*{flex:1 0 50%; padding-inline-start:6px;padding-block-start:6px} .inn .k{gap:7px; height:100%;padding-block:8px 0;padding-inline:8px;background-color:#fffdfc} .inn .k:not(.r){border-top-left-radius:calc(var(--contentBd-radiusA) /2.2)} .inn .k.r{border-top-left-radius:0;border-top-right-radius:calc(var(--contentBd-radiusA) /2.2)} .inn .k >*{gap:4px;width:100%} .inn .k >*::before, .inn .k >*::after{content:'';flex-shrink:0;width:12px;height:1px; background-color:rgb(0 0 0 / 60%)} .inn .p::before{width:100%} .inn .p::after{width:60%} .inn .a >*:not(:first-child), .inn .a >*:not(:first-child) .k{padding-inline-start:0} .inn .a >*:not(:first-child) .k:not(.r), .inn .a >*:not(:first-child) .k.r{border-radius:0} .inn .a >*:first-child .k{padding-inline-end:0} .inn .a >*:first-child .t::after{flex-grow:1;width:3px} .inn .a >*:first-child .p::after{width:100%} .inn .a >*:not(:first-child) .t::before, .inn .a >*:not(:first-child) .p::after{width:8px} .inn .a >*:not(:first-child) .t::after{display:none} .inn .rev{background-color:#22262d} .inn .rev .k{background-color:#5a5c63} .inn .rev .k >*::before, .inn .rev .k >*::after{background-color:#d9e2f0} /* set theme or bookmark: active */ .setI:checked ~ .settB .iSett, .setI:checked ~ .settB .iTheme, .setI:checked ~ .settB .iBook, .darkI:checked ~ .settB .iTheme, .bookI:checked ~ .settB .iBook{top:5px} .setI:checked ~ .settB .iSett, .darkI:checked ~ .settB .iTheme, .bookI:checked ~ .settB .iBook, .setI:checked ~ .section .st.fc::after, .darkI:checked ~ .section .dc.fc::after, .bookI:checked ~ .section .bc.fc::after, .setI:checked ~ .darkI:checked ~ .section .dc.fc::after, .setI:checked ~ .bookI:checked ~ .section .bc.fc::after{opacity:1;visibility:visible} .setI:checked ~ .settB .iTheme .h svg, .setI:checked ~ .settB .iBook .h svg{display:block} .setI:checked ~ .settB .iTheme:not(.r), .setI:checked ~ .settB .iBook:not(.r){right:var(--maxWidth-minus)} .setI:checked ~ .settB .iTheme.r, .setI:checked ~ .settB .iBook.r{left:var(--maxWidth-minus)} .setI:checked ~ .darkI:checked ~ .settB .iTheme:not(.r), .setI:checked ~ .bookI:checked ~ .settB .iBook:not(.r){right:0} .setI:checked ~ .darkI:checked ~ .settB .iTheme.r, .setI:checked ~ .bookI:checked ~ .settB .iBook.r{left:0} .setI:checked ~ .darkI:checked ~ .section .dc.fc::after, .setI:checked ~ .bookI:checked ~ .section .bc.fc::after{z-index:2}
/* mainH: Bookmark */ .addb ~ label svg{display:none} .addb:not(:checked) ~ label svg:nth-child(1), .addb:checked ~ label svg:nth-child(2){display:block} .addb:checked ~ label svg, .book .bm-delete:hover{color:var(--themeLink); opacity:1}
.addl .addb:checked ~ label::before{content:var(--removeBookmark)}
.addl label::before{content:var(--addBookmark); position:relative;max-width:0;padding-inline:0; transition:max-width var(--tDuration), padding-inline var(--tDuration); opacity:.8; white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addl:hover label::before{max-width:var(--bookmarkTextLenght);padding-inline:4px 3px; opacity:1}
.iBook{padding:0} .iBook:not(.item) >*{padding-inline:var(--contentPadding-box)} .iBook .bookmark-inner{gap:20px; max-height:300px;padding-block-end:var(--contentPadding-box);overflow-x:hidden;overflow-y:scroll} .iBook .loading{gap:8px} .iBook .loading::after{content:attr(data-text)} .book{--thumbSize: 50px; gap:14px} .book >.flex{gap:10px;align-items:center} .book .bm-thumb{position:relative;width:var(--thumbSize); opacity:.8} .book .bm-thumb a{display:block;position:inherit; padding-top:var(--thumbnailRatio-box); border-radius:var(--contentBd-radius);background-color:var(--contentBg-alt); overflow:hidden} .book .bm-im{position:absolute;top:0;left:0;bottom:0;right:0; background-size:cover;background-position:center;background-repeat:no-repeat; font-size:10px;line-height:1.1} .book .bm-title{font: .95rem/1.3 var(--fontBody-alt)} .book .bm-title a{display:-webkit-box; -webkit-line-clamp:3} .book .bm-title a:hover, .book ~ .more:hover span:not(.fontSm){text-decoration:underline} .book .bm-delete{padding:5px;padding-inline-end:0; cursor:pointer} .book ~ .more span:not(.fontSm){margin-inline-end:6px;color:var(--themeLink)} .book.all{--gap:16px; --thumbSize:60px; gap:var(--gap)} .book.all >.flex{gap:15px; width:calc((100% / 2) - (var(--gap) / 2)); padding:15px;border:1px solid var(--contentBd-color);border-radius:var(--contentBd-radius);background-color:var(--contentBg); transition:border-color var(--tDuration), box-shadow var(--tDuration); overflow:hidden} .book.all >.flex:hover{border-color:var(--themeLink); box-shadow:0 0 0 .5px var(--themeLink) inset, 0 25px 60px -20px rgb(0 0 0 / 20%)} .book.all .bm-thumb{opacity:1} .book.all .bm-title{font-size:1.15rem} .book.all .bm-delete{padding:8px} @media screen and (max-width:640px){.book.all{--gap:14px} .book.all >.flex{width:100%}} @media screen and (max-width:500px){.book.all >.flex{gap:12px; padding:10px} .book.all .bm-title{font-size:1.05rem}}
/* mainN */ .mainL{position:relative;width:var(--sideWidth-collapse); z-index:1; transition:width var(--tDuration)} .mainR{width:calc(100% - var(--sideWidth-collapse))} .leftW{height:var(--vHeight);color:var(--sideC);background-color:var(--sideBg); transition:height var(--tDuration)} .leftC{padding-inline:calc((var(--sideWidth) - var(--iconWidth)) /2)} .leftN{width:100%;height:100%; padding-block:var(--contentPadding-box) var(--closeHeight-phone);background-color:inherit} .leftP{position:absolute;left:0;bottom:0;right:0; padding-block:18px;background-color:inherit}
/* mainN: menu */ .leftNav{--padding:10px} .leftNav:not(.r) .a::before{right:calc(var(--contentPadding-minus) + 3px); border-radius:2px 0 0 2px} .leftNav.r .a::before{left:calc(var(--contentPadding-minus) + 3px); border-radius:0 2px 2px 0} .leftNav .a::before{content:''; position:absolute;top:0;bottom:0; border-inline-start:2px solid var(--themeLink); opacity:0;visibility:hidden; transition:var(--tShowHide)} .leftNav .a{ align-items:center;position:relative; min-width:var(--iconWidth);padding-block:var(--padding); filter:none} .leftNav .a svg{flex-shrink:0} .leftNav .a svg.r{width:14px;height:14px; margin-inline-start:auto} .leftNav .a >svg{margin-inline-start:calc((var(--iconWidth) - 20px) / 2);margin-inline-end:calc(((var(--iconWidth) - 20px) / 2) + 10px - calc((var(--iconWidth) - 20px) / 2))} .leftNav .a >.text{padding-inline-start:calc((var(--iconWidth) - 20px) / 2)} .leftNav .a:hover >svg, .leftNav .a.home >svg{color:var(--themeLink)} .leftNav .a:hover::before, .leftNav details[open] .a::before, .leftNav .a.home::before{opacity:.8;visibility:visible} .leftNav .br::after{content:''; display:block;margin-block:12px; border-bottom:var(--sideBd-line) solid var(--sideBd-color)} .leftNav details[open] svg.r{transform:rotate(180deg)} .leftNav details .n{padding-block:5px 10px;padding-inline-start:calc(var(--iconWidth) - 15px);overflow:hidden} .leftNav details .n li{position:relative;padding-inline-start:calc((var(--iconWidth) - 20px) + 10px)} .leftNav details .n li >*{display:inline-block;padding-block:4px} .leftNav details .n li::after{content:''; position:absolute;top:-85px; width:14px;height:100px;border-inline-start:1.5px solid var(--sideBd-color);border-block-end:1.5px solid var(--sideBd-color)} .leftNav:not(.r) details .n li::after{left:0; border-radius:0 0 0 8px} .leftNav.r details .n li::after{right:0; border-radius:0 0 8px 0} .leftNav details .n li.m::before{content:attr(data-text); display:block;margin-block:15px 8px; font-size:smaller;opacity:.6} .leftNav details .n li.m::after{height:124px} .addNav li:not(:last-child)::after{content:'\00B7';margin-inline:8px}
/* mainC */ .mainAd:not(.no-items){margin-block-end:var(--contentSpace)} .mainC{padding-block-end:var(--contentSpace)} .mainC >.maxC{margin-block-start:var(--contentPadding)} .mainB{justify-content:center;gap:var(--contentSpace)} .mainB .blogB{width:calc(100% - (var(--sidebarWidth) + var(--contentSpace))); transition:width var(--tDuration), max-width var(--tDuration)} .mainB .blogB.item{max-width:var(--contentPost-maxWidth)} .mainB .blogB.static{max-width:var(--contentPage-maxWidth)} .mainB .sideB{gap:var(--contentSpace);width:var(--sidebarWidth); max-width:500px} .mainB .sideSticky{position:-webkit-sticky; position:sticky;top:calc(var(--headerHeight) + 10px)} .mainB .sideB .section:not(.slider){gap:0} .mainB .sideB .widget:not(:first-child){margin-top:var(--contentSpace)} .mainB .sideB #HTML11{margin-top:0} .mainB .section:not(.slider){gap:var(--contentSpace)} .mainB.full :is(.blogB, .sideB){width:100%} .blogB >.section:not(:last-child){margin-bottom:var(--contentSpace)}
/* mainM */ .mainM{display:none; position:fixed;left:var(--mobileMargin);bottom:var(--mobileMargin);right:var(--mobileMargin); border-top:var(--mobileBd-line) solid var(--mobileBd-color);border-radius:var(--mobileBd-radiusTL) var(--mobileBd-radiusTR) var(--mobileBd-radiusBR) var(--mobileBd-radiusBL); color:var(--mobileC);background-color:var(--mobileBg); box-shadow:0 -10px 25px -5px rgb(0 0 0 / 10%);z-index:1} .mobileM{height:var(--mobileHeight);padding-inline:var(--contentPadding); font-size:9px} .mobileM >*{justify-content:center;width:20%} .mobileM *[data-text]{justify-content:center; min-width:40px;max-width:100px;min-height:35px} .mobileM *[data-text]::after{content:attr(data-text); display:block;width:100%; text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mobileM.index .search:nth-last-child(2){order:3}
/* mainF */ .mainF::before{content:'';position:absolute;top:0;left:var(--contentPadding);right:var(--contentPadding);border-block-start:var(--footerBd-line) solid var(--footerBd-color)} .mainF .credits{align-items:center;gap:10px} .mainF .HTML{margin-inline-end:auto; overflow:hidden;text-overflow:ellipsis} .mainF .credit, .mainF .credit .e{display:inline} .mainF .credit .creator{opacity:0} .mainF .credit .e::before{content:'\00A9'} .mainF .socials{position:relative; margin-inline-end:-6px} .mainF .socials div.ic{opacity:.5} .mainF .socials .ic{width:30px;height:30px}
/* Widget: default */ .widget .title{position:relative;margin-block:0 var(--widgetTitle-space); font-weight:var(--widgetTitle-fontWg);font-size:var(--widgetTitle-font)} .widget .title.s{font-size:small} .widget .title::after{content:''; display:var(--widgetTitle-afterD);vertical-align:middle; width:var(--widgetTitle-afterWd);margin-inline-start:8px;border-bottom:1px solid var(--widgetTitle-afterC); opacity:1} .no-items{display:none}
/* Widget: Header */ .Header{width:100%;background-repeat:no-repeat;background-size:100%;background-position:center} .Header img{max-width:var(--headerLogo-maxWidth);max-height:var(--headerLogo-maxHeight)} .Header a:hover{opacity:1} .headN{display:block;margin:0; font-weight:var(--header-fontWg);font-size:var(--header-font)} .headt{display:block} .headt::after{content:var(--headerText-after); display:inline-block;font-weight:400;font-size:11px;line-height:14px; opacity:.8}
/* Widget: BlogSearch */ .BlogSearch form{position:relative; margin-inline:-10px;border-radius:var(--contentBd-radiusA);background-color:transparent;overflow:hidden} .BlogSearch input[type=search]{display:block; width:320px;height:42px; padding-inline:40px;border:0; transition:margin var(--tDuration), padding-inline var(--tDuration), background var(--tDuration)} .BlogSearch .b{position:absolute;top:0;bottom:0;min-width:40px; padding:0;border:0; transition:var(--tShowHide)} .BlogSearch .ba:not(.r), .BlogSearch .bu.r{left:0} .BlogSearch .ba.r, .BlogSearch .bu:not(.r){right:0} .BlogSearch .bu::before{content:'\2715';font-size:13px} .BlogSearch:focus-within .b.bu{opacity:1;visibility:visible; color:inherit} .BlogSearch:focus-within input, .BlogSearch:hover input{background-color:var(--contentBg-sec)}
/* Widget: Profile */ .proP:checked ~ .profileIcon .fc::after, .proP:checked ~ .profilePop{opacity:1;visibility:visible} .proT:not(:checked) ~ .t.clamp{display:-webkit-box} .proT:not(:checked) ~ label{display:inline-block} .proT:not(:checked) ~ .proTeam >*:not(.s){display:none} .profileIcon .a span.p::before, .Profile .location::after, .profilePop label::before{content:attr(data-text)} .profileIcon .a{align-items:center} .profileIcon .a span.p{margin-inline-start:6px} .profileIcon .n{max-width:calc(100% - 45px)} .profileIcon .avatar{margin-inline-start:calc((var(--iconWidth) - 20px) / 2 - 4px);margin-inline-end:calc(((var(--iconWidth) - 20px) / 2) + 6px)} .profileIcon.team .avatar, .profileIcon.team .avi{min-width:32px;min-height:32px; margin-inline-start:calc((var(--iconWidth) - 20px) / 2 - 6px);margin-inline-end:0;border:2px solid var(--sideBg)} .profileIcon.team .avatar:not(:first-child){margin-inline-start:-8px} .profileIcon.team .avi{display:none;border-width:0} .profilePop{position:absolute;bottom:var(--contentPadding); width:220px;min-height:160px;max-height:220px;border:var(--contentBd-line) solid var(--contentBd-color);border-radius:var(--contentBd-radiusA);background-color:var(--contentBg); box-shadow:0 25px 60px -20px rgb(0 0 0 / 20%);transition:var(--tShowHide);z-index:1; overflow:hidden} .profilePop:not(.r){left:var(--contentPadding)} .profilePop.r{right:var(--contentPadding)} .profilePop.team{--padding:15px;--padding-minus:-15px; padding:var(--padding)} .profilePop .h{gap:10px;padding:15px} .profilePop .h .n{width:calc(100% - (28px + 10px))} .profilePop .d{padding:0 15px 15px} .profilePop .d a{text-decoration:underline} .profilePop label{display:none;padding-block-start:5px; color:var(--themeLink)} .proTeam{width:100%;overflow-x:hidden;overflow-y:auto} .proTeam .team >*{--gap:10px; align-items:center;gap:var(--gap); position:relative; width:calc(100% + (var(--padding) * 2));margin-inline:var(--padding-minus); padding:5px var(--padding)} .proTeam .team >*::after{content:attr(data-text);flex:1 0 calc(100% - (35px + var(--gap))); /*white-space:nowrap;*/ text-overflow:ellipsis;overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .proTeam .team .avatar{width:35px;height:35px}
/* Widget: Sliders */ .slideB{border-radius:var(--sliderBd-radius);overflow:hidden} .slideB:hover .slideI svg{opacity:1;visibility:visible} .slideB:hover .slideI svg .pause{display:block} .slideB:hover .slideI svg .play, .slideI svg .pause{display:none} .slideB:hover .slider, .slideB:hover .slideI .i{animation-play-state:paused} .slider.no-items ~ .slideI{display:none} .slideI{--height:12px;--dotHeight:4px;gap:5px; position:relative;height:var(--height); margin-block:5px calc(var(--contentSpace) - (var(--height) - var(--dotHeight)))} .slideI .i{width:var(--dotHeight);height:var(--dotHeight); border-radius:10px;background-color:rgb(0 0 0 / 15%);transition: width var(--tDuration), background-color var(--tDuration)} .slideI:not(.r) svg{right:0} .slideI.r svg{left:0} .slideI svg{position:absolute;top:0; opacity:0;visibility:hidden; transition: opacity var(--tDuration) .4s, visibility var(--tDuration) .4s} .slideI .i:nth-child(1){animation: bullet 16.4s ease 0ms infinite} .slideI .i:nth-child(2){animation: bullet 16.4s ease 4100ms infinite} .slideI .i:nth-child(3){animation: bullet 16.4s ease 8200ms infinite} .slideI .i:nth-child(4){animation: bullet 16.4s ease 12300ms infinite} .slider{position:relative;width:400%; transition:all 800ms cubic-bezier(.770, 0.0, .175, 1.0);transition-timing-function:cubic-bezier(.770, 0.0, .175, 1.0); animation:slide 16.4s cubic-bezier(.770, 0.0, .175, 1.0) infinite} .slider >*{flex-shrink:0; width:calc(100% / 4)} .slider .item{position:relative;border-radius:var(--sliderBd-radius); overflow:hidden} .slider .img{display:block;padding-top:var(--sliderRatio); color:#d9e2f0;background-color:var(--contentBg-alt);background-position:center;background-size:cover;background-repeat:no-repeat} .slider .cap{display:block;position:absolute;left:0;bottom:0;right:0;padding:20px;padding-block-start:40px;background-image:linear-gradient(0deg, rgb(45 49 56 / 90%) 0%, rgb(45 49 56 / 50%) 60%, rgb(45 49 56 / 0%) 100%); font-family:var(--fontBody-alt)}
/* Widget: FeaturedPost */ .itemP.featured article{--gap:20px; align-items:center;gap:var(--gap)} .itemP.featured article .pI{width:var(--thumbnailSize)} .itemP.featured article .pC{width:calc(100% - (var(--gap) + var(--thumbnailSize)))}
/* Widget: PopularPost */ .itemP.popular{--counter:30px; gap:18px;counter-reset:popular} .itemP.popular article.most{gap:18px} .itemP.popular .pH.info .label:not(:first-child)::before{content:'\00B7'; margin-inline:8px 6px} .itemP.popular .pT .name{font-size:var(--postTitle-fontItems)} .itemP.popular .pS{display:block} .itemP.popular .pS .snippet{-webkit-line-clamp:2} .itemP.popular article .pC::before{content:'0' counter(popular);counter-increment:popular; flex:0 0 var(--counter); color:var(--themeC-alt); font:700 1.1rem var(--fontBody-alt); opacity:.6} .itemP.popular article:not(:nth-child(-n+9)) .pC::before{content:counter(popular)} .itemP.popular article .pB{flex-grow:1; width:calc(100% - var(--counter))}
/* Widget: Label */ .itemL .labi:checked ~ label::before{content:attr(data-hide)} .itemL .labi:checked ~ label::after, .itemL .labi:not(:checked) ~ .lab >*:not(.s){display:none} .itemL .lab{--gap:10px; gap:var(--gap)} .itemL .lab >*{max-width:100%} .itemL .lab.list >*{width:calc((100% / 2) - (var(--gap) / 2))} .itemL .link{align-items:center;gap:8px; width:100%;padding:10px;border:1px solid var(--contentBg-sec);border-radius:var(--contentBd-radius);background-color:var(--contentBg-sec); line-height:18px} .itemL a.link:is(.c, .noBg){border-color:var(--contentBd-color)} .itemL .link:is(.c, .noBg){background-color:transparent} .itemL a.link:hover, .itemL div.link{border-color:var(--themeLink);box-shadow:0 0 0 .5px var(--themeLink) inset; filter:none} .itemL a.link:hover .count, .itemL div.link .count{color:var(--themeLink)} .itemL a.link:hover .count svg, .itemL div.link .count svg{stroke:none;fill:currentColor;opacity:1} .itemL .count.flexIn{gap:4px} .itemL .count::before{content:attr(data-text)} .itemL label{gap:6px; margin-top:10px;padding-block:8px} .itemL label::before{content:attr(data-show);color:var(--themeLink)} .itemL label::after{content:attr(data-length);font-size:smaller;opacity:.8}
/* Widget: RelatedPost */ .itemR{--cgap:20px;gap:30px var(--cgap)} .itemR article{--gap:20px; align-items:flex-start;gap:var(--gap)} .itemR .pI, .itemR .pC{width:100%} .itemR .pI .image{display:block;position:inherit; padding-top:var(--thumbnailRatio)} .itemR .pI .mi{position:absolute;top:0;left:0;bottom:0;right:0; background-position:center;background-size:cover;background-repeat:no-repeat} .itemR .pH.info .label:not(:first-child)::before{content:'\00B7'; margin-inline:8px} .itemR .pT .clamp{display:-webkit-box} .itemR .pS .snippet{-webkit-line-clamp:2} .itemR:not(.type-2, .type-3, .type-4){--colGap: 40px ; --thumbnailSize: 65px ; column-gap:var(--colGap)} .itemR:not(.type-2, .type-3, .type-4) >*{width:calc((100% / 2) - (var(--colGap) / 2))} .itemR:not(.type-2, .type-3, .type-4) article{flex-direction:row-reverse} .itemR:not(.type-2, .type-3, .type-4) .pC{width:calc(100% - (var(--gap) + var(--thumbnailSize)))} .itemR:not(.type-2, .type-3, .type-4) .pI{width:var(--thumbnailSize)} .itemR:not(.type-2, .type-3, .type-4) .pI .image{padding-top:var(--thumbnailRatio-box)} .itemR:is(.type-2, .type-3, .type-4) article{width:calc((100% / 3) - (var(--cgap) * 2/3))} .itemR:is(.type-2, .type-3, .type-4) .pT .name:not(.item){--postTitle-fontItems:1.1em}
/* Widget: ContactForm */ .formB{max-width:480px; font-size:1rem} .formB form{gap:20px} form .area{--paddingB:14px; --paddingI:16px; display:block;position:relative} form .area .n{display:block; position:absolute;top:var(--paddingB); padding-inline:6px;font-size:1rem;line-height:1.5; opacity:.8;transition:top var(--tDuration), padding var(--tDuration), var(--tShowHide), font-size var(--tDuration), background var(--tDuration)} .nB:not(.r) form .area .n{left:calc(var(--paddingI) - 6px)} .nB.r form .area .n{right:calc(var(--paddingI) - 6px)} form .area .sup{display:block; padding-inline:var(--paddingI);padding-block-start:4px;font-size:small;line-height:1.5} form input[type=email]:not([data-filled=true]):focus ~ .sup, form textarea:not([data-filled=true]):focus ~ .sup{color:#d32f2f} form input:is([type=text], [type=email]), form textarea{--themeLink:currentColor; display:block;width:100%; padding:var(--paddingB) var(--paddingI);border:var(--inputBd-line) solid var(--inputBd-color);border-radius:var(--inputBd-radius); color:var(--inputC);background-color:var(--themeBg); font:1rem/1.5 var(--fontBody); transition:border-color var(--tDuration), box-shadow var(--tDuration), min-height var(--tDuration)} form input:is([type=text][data-filled=true], [type=email][data-filled=true]), form textarea[data-filled=true], form input:is([type=text], [type=email]):focus, form textarea:focus{border-color:var(--themeLink);box-shadow:0 0 0 .5px var(--themeLink) inset} form input:is([type=text][data-filled=true], [type=email][data-filled=true]) ~ .n, form textarea[data-filled=true] ~ .n, form .area:focus-within .n{top:-10px;background-color:var(--themeBg);font-size:small; opacity:1} form textarea{min-height:100px} form textarea:focus, form textarea[data-filled=true]{min-height:200px}
/* Widget: ToC */ .tocP{position:fixed;top:var(--headerHeight); width:var(--tocWidth);height:calc(var(--vHeight) - var(--headerHeight)); margin-inline-end:var(--tocWidth-minus);color:var(--tocC);background-color:var(--tocBg); box-shadow:0 5px 30px 0 rgb(0 0 0 / 5%); opacity:0;visibility:hidden;transition:margin var(--tDuration), var(--tShowHide);z-index:5} .tocP:not(.r), .tocP.r::before{right:0} .tocP.r, .tocP:not(.r)::before{left:0} .tocP::before{content:''; position:absolute;top:0;bottom:0; border-inline-start:var(--tocBd-line) solid var(--tocBd-color); z-index:2} .tocIn{position:relative; height:100%; background-color:inherit} .tocIn label{align-items:center;gap:6px; position:absolute;top:0;left:0;right:0; height:60px;padding:10px 20px;background-color:inherit;z-index:1} .tocIn label::after{content:var(--tableToc)} .tocC{height:inherit; padding-block:60px var(--contentPadding-box);padding-inline:var(--contentPadding-box); line-height:1.3; overflow-x:hidden;overflow-y:scroll} .tocC a{/*display:-webkit-box;*/ display:inline; -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tocC ol{overflow:hidden} .tocC ol ol{margin-top:3px;padding-top:5px} .tocC ol ol ol ol{display:none} .tocC >ol >li:not(:last-child){margin-bottom:15px} .tocC li{position:relative;padding-inline-start:8px} .tocC li li{padding-inline-start:17px} .tocC li li:not(:last-child){margin-bottom:5px} .tocC li li::before{content:''; position:absolute;top:-389px; min-width:12px;height:400px;border:1.5px solid var(--themeBd-color);border-block-start:0;border-inline-end:0} .tocC:not(.r) li li::before{left:1px; border-radius:0 0 0 8px} .tocC.r li li::before{right:1px; border-radius:0 0 8px 0} .tocB span{position:fixed;top:calc(var(--headerHeight) + 40px); width:45px;height:40px; background-color:var(--tocBg); box-shadow:0 5px 20px 0 rgb(0 0 0 / 10%);opacity:0;visibility:hidden;transition:var(--tShowHide); z-index:1} .tocB:not(.r) span{right:0;border-radius:20px 0 0 20px} .tocB.r span{left:0;border-radius:0 20px 20px 0} .tocI:not(:checked) ~ .tocB span, .tocI:checked ~ .tocB.fc::after{opacity:1;visibility:visible} .tocI:checked ~ .tocP{margin-inline-end:0; opacity:1;visibility:visible}
/* Widget: Blog */ .blogP.flex{--gap:20px;gap:40px var(--gap)} .blogP.flex >article{gap:20px; width:calc((100% / 3) - (var(--gap) * 2/3))} .blogP.flex >article, .itemP.featured article{padding:var(--postPadding);border:var(--postBd-line) solid var(--postBd-color);border-radius:var(--postBd-radius); color:var(--postC);background-color:var(--postBg); box-shadow:0 8px 24px -4px var(--postBs-color); transition:box-shadow var(--tDuration); overflow:hidden} .blogP.flex >article:hover, .itemP.featured article:hover{box-shadow:0 20px 60px -20px var(--postBs-hoverColor)} .blogP.flex >article .pC, .itemP.featured article .pC{padding:var(--postPadding-content);padding-block-start:0} article.shop .prices{margin-block-start:.5em; line-height:1.2} article.shop .prices i{font-style:normal} article.shop .prices i.strike{opacity:.8; font-size:smaller} article.shop .prices i:not(.strike){display:block; color:var(--themeLink); font-weight:600;font-size:1.1em} article:not(.sponsor):hover .pF .jump{opacity:1}
/* Widget: Blog - title + breadcrumbs */ .blogT{align-items:baseline;justify-content:space-between; margin-bottom:var(--widgetTitle-space)} .blogT.home .title{margin:0} .blogT.item{justify-content:flex-start} .blogT.item .tab .n >*{overflow:hidden;text-overflow:ellipsis} .blogT.item .a::before{display:none} .blogT.item .tab:not(:first-child)::before, .blogT:not(.item) .n:not(.s)::before{content:var(--breadcrumbs); flex-shrink:0; margin-inline:8px} .blogT .tab{align-items:baseline; overflow:hidden} .blogT .a{flex-shrink:0; opacity:.8} .blogT .a::before{content:attr(data-text)} .blogT .n.name::after{content:attr(data-text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blogT .n.s{padding-inline-start:5px}
/* Widget: Blog - pagination */ .blogN, .blogPg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px; margin-block:calc(var(--contentSpace) * 1.5) 0} .blogN.n{justify-content:center} .blogN >*{font-size:inherit} .blogN >*::after{content:attr(data-text)} .blogN .m{cursor:not-allowed; color:var(--themeC-alt);background-color:var(--contentBg-sec)} .blogN .np{flex-direction:row-reverse} .blogN .np::after{content:var(--pageNext)} .blogN .pp{/*align-self:center;*/ margin-inline:-2px auto} .blogN .pp::after{content:var(--pagePrev)} .blogN .pp svg{width:14px;height:14px} .blogN svg.line{stroke-width:1.5} .blogN .j{margin-inline:auto} .blogN .j:not(.m){cursor:pointer} .blogN .j.n{background:transparent}
/* Widget: Blog - product */ .shop .pPad{margin-block:15px} .shop .pPric{display:flex;flex-direction:column; margin-block-start:30px;color:var(--themeLink);font-size:1.8rem} .shop .pPric i{font-style:normal} .shop .pPric .strike{order:2;color:var(--themeC); font-size:small;opacity:.8} .shop .pPric .price{font-weight:600;line-height:1.4} .shop .pPric::before{content:attr(data-text)} .shop .pPric::before, .shop .pInfo small{display:block;color:var(--themeC); font-size:small; opacity:.8} .shop .pInfo{font-size:1rem} .shop .pInfo:not(.o){--gap:20px; display:flex;gap:var(--gap)} .shop .pInfo:not(.o) >*{width:calc((100% / 2) - (var(--gap) / 2))} .shop .pMart{display:flex;flex-wrap:wrap;gap:8px 10px; margin-block:15px} .shop .pMart small{width:100%} .shop .pMart a{display:flex;align-items:center;justify-content:center; width:34px;height:34px;padding:4px;border:1px solid var(--contentBd-color);border-radius:12px;overflow:hidden}
/* Widget: Blog - post */ /* thumbnail and comment count */ .pI{position:relative; border-radius:var(--contentBd-radius);background-color:var(--contentBg-alt); overflow:hidden} .pI .thumbnail{display:block;position:inherit; padding-top:var(--thumbnailRatio)} .pI .thumbnail amp-img{position:absolute;top:50%;left:50%; min-width:100%;min-height:100%;max-height:100%; text-align:center;transform:translate(-50%, -50%)} .pI.youtube:not(.noImage) .thumbnail::after{content:''; display:flex;align-items:center;justify-content:center; position:absolute;top:0;left:0;right:0;bottom:0; background:rgb(0 0 0 / 30%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23fffdfc'><path d='M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z'/></svg>") center / 24px no-repeat; opacity:0;transition:opacity var(--tDuration), -webkit-backdrop-filter var(--tDuration), backdrop-filter var(--tDuration); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px)} .pI.youtube:not(.noImage):hover .thumbnail::after{opacity:1} .pI.youtube img{max-width:100%;max-height:none} .pI .img{position:absolute;top:50%;left:50%; max-width:110%;max-height:100%; font-size:.7em;text-align:center; transform:translate(-50%, -50%)} .pI .img.null::before{content:var(--noImage)} .pI .bar{justify-content:flex-end;flex-direction:row-reverse;gap:6px; position:absolute;top:0; padding:8px; font-size:.76em} .pI .bar:not(.r){right:0} .pI .bar.r{left:0} .pI .bar >*{gap:3px; padding:4px 5px;border-radius:12px; color:#0e2045;background-color:#fffdfc; box-shadow:5px 5px 15px 0 rgb(0 0 0 / 10%)} .pI .bar >*:hover{filter:none} .pI .bar >*:not(.tag)::before{content:attr(data-text); text-indent:2px; opacity:.8} .pI .bar >.discount{background-color:#fff6bf} .pI .bar >.discount::before{opacity:1} /* head, time and label */ .time:not(.timeAgo)::before, .jump::before{content:attr(data-text)} .pH .reading::before{content:var(--readtimeBefore) ' '; margin-inline:5px} .pH .reading::after{content:' ' var(--readtimeAfter)} .pH.info{justify-content:flex-start;align-items:baseline; margin-block-end:8px} .pH.info .label::before{opacity:.8} .pH.info .label::before, .pH.info .label [data-text]::before{content:attr(data-text)} .pH.info .label >span:not(:first-child)::before{content:var(--breadcrumbs);opacity:.8} .pH.info .label [data-text]{display:inline;padding-block:4px} .pH.info .label a:hover{text-decoration:underline} .pH:not(.info){--gap:8px;--imgWidth:28px;--fontDate:inherit;--fontDate-phone:.93em; align-items:center;gap:var(--gap); margin-block:20px 25px} .pH:not(.info).tag{margin-block-start:25px} .pH:not(.info) .avatar.im{width:var(--imgWidth);height:var(--imgWidth)} .pH:not(.info) .m{display:inline-block;line-height:1.3} .pH:not(.info) .m::after{content:attr(data-text); margin-inline-end:5px} .pH:not(.info) .date{font-size:var(--fontDate); white-space:nowrap} .pH:not(.info) .time.update:not(.timeAgo)::before{content:var(--latestUpdate) ' ' attr(data-text)} .pH .item{width:calc(100% - (100px + var(--imgWidth)))} .pH .share{gap:10px; max-width:100px; margin-inline-start:auto; font-size:var(--fontDate)} .pH .share [aria-label=Share]{gap:7px; flex-direction:row-reverse} .pH .share [aria-label=Share]::before{content:attr(data-text)} /* title */ .pT .name{margin:0} .pT .name:not(.item){font:var(--postTitle-fontWg) var(--postTitle-fontItems)/1.3 var(--fontBody-alt);} .pT .item{font:var(--postTitle-fontWg) var(--postTitle-font)/1.3 var(--fontBody-alt)} .pT a:hover{text-decoration:underline} /* snippet */ .pS .snippet{margin-block:.75em .5em; line-height:1.5} .pS:not(.noImage) .snippet{display:-webkit-box} /* description */ .pD{margin-block:15px 25px; font:var(--postDescription-font)/1.4 var(--fontBody-alt)} /* foot */ .pF.items{gap:5px; margin-block-start:auto;padding-top:5px} .pF.items.shop{display:none} .pF.item{gap:var(--contentSpace); margin-top:var(--contentSpace)} .pF .jump{margin-inline-start:auto} .pF .jump:not(.sponsor){opacity:0; transition:var(--tShowHide)} .pF .jump:hover{text-decoration:underline} .pF .label{gap:10px} .pF .label >*::before{content:attr(aria-label)} .pF .label >*:hover{text-decoration:underline} .pF .labels .flex{gap:8px;flex-wrap:wrap;align-items:center} .pF .labels .flex >*{padding:8px 14px;border:1px solid var(--contentBd-color);border-radius:20px} .pF .labels .flex >*:not(label):hover{border-color:var(--themeLink);box-shadow:0 0 0 .5px var(--themeLink) inset} .pF .labels .flex >*:not(label)::before{content:attr(aria-label)} .pF .labels .li:not(:checked) ~ .flex >*:not(.s), .pF .labels .li:checked ~ .flex label{display:none} .pF .labels .flex label{padding-inline:0;border:0} .pF .labels .flex label::before{content:attr(data-show)} /* share */ .shared{position:fixed;left:0;right:0; z-index:10} .shareB .popIn{max-width:480px} .shareI{gap:30px} .shareL{display:grid;grid-template-columns:repeat(auto-fit, minmax(50px, 1fr));grid-auto-rows:50px;grid-gap:35px 15px; padding-bottom:30px} .shareL >[data-text]{position:relative} .shareL >[data-text]::after{content:attr(data-text);position:absolute; left:0;right:0;bottom:-18px; text-align:center;opacity:.8} .shareL >[data-text] >*{width:50px;height:50px;margin-inline:auto;border-radius:20px;background-color:var(--contentBg-alt);overflow:hidden} .shareC::before{content:var(--copyLink); opacity:.8} .shareC .copy{--gap:15px; align-items:center;gap:var(--gap); margin-top:15px;padding-inline:15px;border:1px solid var(--contentBd-color);border-radius:var(--contentBd-radius); overflow:hidden; transition:border var(--tDuration), background var(--tDuration), box-shadow var(--tDuration)} .shareC label{flex-shrink:0; padding:10px 0;color:var(--themeLink)} .shareC input{flex-grow:1; padding:16px 0;border:0;outline:0;background-color:transparent;opacity:.6} .shareC input:focus, .shareC .copy:hover input{opacity:1} /* writter */ .authors{gap:10px; padding-block:var(--contentPadding);border-block:1px solid var(--contentBd-color);background-color:var(--contentBg)} .authors .name{width:calc(100% - (40px + 14px));max-width:400px} .authors .m::before{content:attr(data-write) ' '; opacity:.8} .authors .m::after{content:attr(data-text); font-weight:500} .authors .d{margin-top:4px} .authors .namei:not(:checked) ~ .d label::before{content:attr(data-text); color:var(--themeLink)} .authors .namei:not(:checked) ~ .d .clamp{display:-webkit-box;-webkit-line-clamp:1}
/* component */ .pE{position:relative;margin-top:40px; font:var(--postBody-font)/var(--lineHeight) var(--fontBody); transition:font var(--tDuration)} /* head */ .pE h1, .pE h2, .pE h3, .pE h4, .pE h5, .pE h6{margin-top:1em; line-height:1.3;font-family:var(--fontBody-alt)} .pE h1:target, .pE h2:target, .pE h3:target, .pE h4:target, .pE h5:target, .pE h6:target{margin-top:0;padding-top:var(--headerHeight)} .pE :is(h1, h2, h3, h4, h5, h6).h::before{content:attr(data-text)} /* Paragraph */ .pE p{margin-block:var(--lineSpacing)} .pRef{font:1rem/1.4 var(--fontBody-alt); opacity:.8;word-break:break-word} .pRef ol, .pRef ul{padding-inline-start:30px} .pIndent{text-indent:2.2em} .pE:not(.r) .dropCap{float:left;margin-block-start:5px;margin-inline-end:8px; font:3.4em/45px var(--fontBody-alt)} .pE hr{margin-block:var(--postBreak); border:0; font:24px var(--fontCode)} .pE hr::before{content:'\007E'; display:block; letter-spacing:.6em;text-indent:.6em;text-align:center; opacity:.8;clear:both} .pE hr.dot::before{content:'\2027 \2027 \2027'} .pE hr.line::before{content:'';border-bottom:1px solid var(--contentBd-color)} /* blockquote */ blockquote{position:relative; margin-inline:0;padding-block:8px;padding-inline-start:20px;border-inline-start:1px solid var(--contentBd-color); font-size:.97em;line-height:1.6; opacity:.8} blockquote.s-1, details.sp{padding-block:1.7em;padding-inline-start:40px; border-block:1px solid var(--contentBd-color);border-inline-start:0} blockquote.s-1::before{content:'\201D'; position:absolute;top:5px; font-size:60px;line-height:normal;opacity:.5} .pE:not(.r) blockquote.s-1::before{left:4px} .pE.r blockquote.s-1::before{right:4px} /* img */ .pE img, .cm img{display:inline-block; border-radius:var(--postImageBd-radius)} /* scroll-img */ .psImg{--gap:14px; display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:var(--gap); margin-block:var(--lineSpacing)} .psImg img{display:block} .psImg >*{width:calc((100% / 2) - (var(--gap) / 2)); position:relative} .scImg >*{width:calc((100% / 3) - (var(--gap) * 2/3))} .btImg label{display:flex;align-items:center;justify-content:center; position:absolute;top:0;left:0;right:0;bottom:0; font-size:.93rem;font-family:var(--fontBody-alt); border-radius:var(--postImageBd-radius); color:#d9e2f0;background-color:var(--themeBg-pop); transition:var(--tShowHide); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px)} .hdImg .shImg{width:100%; margin-block:0} .inImg:not(:checked) ~ .hdImg .shImg{display:none} .inImg:checked ~ .hdImg .btImg label{opacity:0;visibility:hidden} /* caption */ figure{margin-inline:0} figcaption, .tr-caption, .psCaption{display:block;margin-top:8px; font-size:small;line-height:1.3; opacity:.8} /* ad */ .Blog ~ .LinkList{display:none} .pE .widget, .post .nAd >*{margin-block:40px} /* Note */ .note{position:relative; padding:18px 20px;padding-inline-start:40px;border-radius:var(--contentBd-radius); color:var(--noteC);background-color:var(--noteBg); font:14px/1.4 var(--fontBody-alt); overflow:hidden} .note::after{content:var(--noteAfter); position:absolute;top:12px; min-width:15px;text-align:center; font-size:1.5rem} .note.wr{color:var(--warnC);background-color:var(--warnBg)} .note.wr::after{content:var(--warnAfter)} .nB:not(.r) .note::after{left:14px} .nB.r .note::after{right:14px} /* list */ .step{counter-reset:num; line-height:1.6} .step li{position:relative;counter-increment:num; padding-inline-start:45px} .step li:not(:last-child){padding-bottom:15px} .step li::before{content:counter(num) '.'; display:flex;align-items:center;justify-content:center; position:absolute;top:0;width:30px;height:30px;border:1px solid var(--stepC);border-radius:50%; color:currentColor;font:small var(--fontBody-alt); transition:background var(--tDuration), color var(--tDuration)} .pE:not(.r) .step li::before{left:0} .pE.r .step li::before{right:0} .step li:hover::before{background-color:var(--stepC);color:var(--stepHover)} .step li::after{content:''; position:absolute;top:calc(30px + 8px);bottom:8px; border-inline-start:1px solid var(--stepC)} .pE:not(.r) .step li::after{left:calc(30px / 2)} .pE.r .step li::after{right:calc(30px / 2)} .step img{margin-top:1.2em} /* list - pros, cons */ .pros, .cons{margin-block:5px 15px;padding-inline-start:10px; font-size:1.02rem;line-height:1.5} .pros li, .cons li{margin-bottom:10px;padding-inline-start:10px} .pros li::marker{content:'\002B'} .cons li::marker{content:'\2212'} /* related */ .pRelate{margin-block:2.5em;padding-block:1.7em; border-block:var(--contentBd-line) solid var(--contentBd-color); font:14px/1.4 var(--fontBody-alt)} .pRelate b{font-weight:400; opacity:.8} .pRelate ul, .pRelate ol{margin-block:10px 0;padding-inline-start:20px} .pRelate li{padding-block:2px} .pRelate a:hover{text-decoration:underline} /* table */ .table{margin-block:1em;padding-block-end:4px; overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth} table{margin-inline-end:auto; font:14px/1.4 var(--fontBody-alt)} table:not(.tr-caption-container){border:1px solid var(--contentBd-color);border-radius:var(--contentBd-radius); overflow:hidden} table:not(.tr-caption-container) td{padding:14px} table:not(.tr-caption-container) tr:not(:last-child) td, table th{border-bottom:1px solid var(--contentBd-color)} table th{padding:15px 14px; font-weight:500;text-align:inherit} table th:not(:last-child), table:not(.tr-caption-container) td:not(:last-child){border-inline-end:1px solid var(--contentBd-color)} .table.w90 table:not(.tr-caption-container){min-width:90%} .table.w100 table:not(.tr-caption-container){min-width:100%} .table.noLine table th:not(:last-child), .table.noLine table:not(.tr-caption-container) td:not(:last-child){border-inline-color:transparent} .table.withBg table:not(.tr-caption-container) tbody tr:nth-child(2n+1), .table.hoverBg table:not(.tr-caption-container) tbody tr:hover{background-color:var(--tableBg-color)} /* toc */ details.sp{padding:1.5em 1.25em;border-color:var(--themeLink);font-size:.96em} details.sp summary{display:flex;justify-content:space-between;align-items:baseline;column-gap:10px; line-height:1.4} details.sp summary::after{content:'\276F'; flex-shrink:0; color:var(--themeLink);font-size:small; transform:rotate(90deg);cursor:pointer} details.sp[open] summary::after{transform:rotate(-90deg)} details.toc .toC{margin-top:1em} details.toc a:hover{text-decoration:underline} details.toc a{/*display:-webkit-box;*/ display:inline; -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit} details.toc ol{list-style:none;margin:0;padding:0; counter-reset:toc; overflow:hidden} details.toc ol ol{padding-top:5px} details.toc ol ol ol::before{content:''; position:absolute;top:0; width:15px;height:100%; border-inline-start:1.5px solid var(--contentBd-color)} details.toc ol ol ol ol{display:none} details.toc li{position:relative;padding-inline-start:28px} details.toc li::before{content:counters(toc,'.')'. ';counter-increment:toc; position:absolute;top:0; min-width:24px;font-size:small;line-height:1.8;text-align:end; opacity:.8} details.toc li li{padding-inline-start:17px} details.toc li li::before{content:''; top:-85px; min-width:12px;height:100px;border:1.5px solid var(--themeBd-color);border-block-start:0;border-inline-end:0;} .pE:not(.r) details.toc li::before{left:0; border-radius:0 0 0 8px} .pE.r details.toc li::before{right:0; border-radius:0 0 8px 0} .pE:not(.r) details.toc ol ol ol::before{left:0} .pE.r details.toc ol ol ol::before{right:0} /* accordion */ .showH{margin-block:1.7em; font:.98em/1.6 var(--fontBody)} details.ac{padding:1.5em 1.25em; border-bottom:var(--contentBd-line) solid var(--contentBd-color)} details.ac:first-child{border-top:var(--contentBd-line) solid var(--contentBd-color)} details.ac summary{display:flex;align-items:baseline;justify-content:space-between; transition:color var(--tDuration)} details.ac summary::after{content:'\276F'; flex-shrink:0;display:inline; font-size:small; transform:rotate(90deg);cursor:pointer} details.ac[open] summary{color:var(--themeLink)} details.ac:not(.alt)[open] summary::after{transform:rotate(-90deg)} details.ac.alt summary::after{content:'\002B'; font-size:1.25em;line-height:20px;transform:none} details.ac.alt[open] summary::after{content:'\2212'} details.ac .aC{margin-block:1em} details.ac .aC p:first-child{margin-block-start:0} /* youtube-fullpage */ .videoYt{position:relative; padding-bottom:56.25%; border-radius:var(--contentBd-radius);overflow:hidden} .videoYt iframe{position:absolute;width:100%;height:100%;left:0;right:0} /* youtube-lazy */ .lazyYt{position:relative;padding-top:56.25%;border-radius:var(--contentBd-radius); overflow:hidden} .lazyYt img{top:-16.84%;left:0; width:100%; border:0;border-radius:0;opacity:.95; z-index:-1} .lazyYt img:hover{transform:none;box-shadow:none} .lazyYt img, .lazyYt iframe, .lazyYt .play{position:absolute} .lazyYt iframe{bottom:0;right:0; width:100%;height:100%} .lazyYt .play{display:block;width:70px;height:70px; top:50%;left:50%; transform:translate3d(-50%,-50%,0); transition:all .5s ease} .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:.9;stroke:var(--themeLink)} .nAMP .lazyYt{display:none} /* button */ .pE .button{margin-block:.4em} .pE .btnF .button{margin:0} /* button-download */ .dlBox{display:flex;align-items:center; max-width:500px; margin-block:1.6em;padding:.8em; border:1px solid var(--contentBd-color);border-radius:var(--contentBd-radius); font:14px var(--fontBody-alt); transition:box-shadow var(--tDuration), border-color var(--tDuration)} .dlBox:hover{box-shadow:0 15px 50px -20px rgb(0 0 0 / 20%)} .dlBox .fT{display:flex;align-items:center;justify-content:center;flex-shrink:0; width:42px;height:42px;background-color:rgb(152 155 159 / 20%);border-radius:var(--contentBd-radius)} .dlBox .fT::before{content:attr(data-text);opacity:.8} .dlBox .fT.lazy{background-size:cover;background-position:center;background-repeat:no-repeat} .dlBox .fT.lazy::before{display:none} .dlBox .button{flex-shrink:0;height:40px;margin:0;padding:10px 12px;font-size:small} .dlBox .button::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:1.5;font-size:small;opacity:.8} /* lightBox */ .lightBox{position:relative} .lightBox img{display:block; transition:position var(--tDuration), margin var(--tDuration)} .lightBox details .n, .lightBox details[open]{position:absolute;top:0;left:0;bottom:0;right:0; background-color:transparent; transition:position var(--tDuration), background-color var(--tDuration), backdrop-filter var(--tDuration), height var(--tDuration)} .lightBox details .n .c{position:fixed;bottom:-20px;right:-20px;width:42px;height:42px;border-radius:50%; color:currentColor;background-color:var(--contentBg); opacity:0;visibility:hidden;box-shadow:0 5px 20px -5px rgb(0 0 0 / 20%); transition:bottom var(--tDuration), right var(--tDuration), var(--tShowHide)} .lightBox details .n .c::after{content:'\2715'; font-weight:400;font-size:14px} .lightBox details[open]{position:fixed; height:var(--vHeight);background-color:var(--themeBg-pop);backdrop-filter:saturate(180%) blur(10px); z-index:10} .lightBox details[open] .n .c{bottom:20px;right:20px; opacity:1;visibility:visible} .lightBox details[open] ~ *, .lightBox details[open] ~ noscript >*{position:fixed;top:0;left:0;bottom:0;right:0;max-width:calc(100% - (var(--contentPadding) * 2));max-height:calc(100% - (var(--contentPadding) * 2));margin:auto; z-index:10} /* syntax */ .pre{color:var(--synC);background-color:var(--synBg);border:var(--synBd-line) solid var(--synBd-color);border-radius:var(--synBd-radius); direction:ltr} .pre:not(.tb){position:relative; margin:1.7em auto; font-family:var(--fontCode); overflow:hidden} .pre:not(.tb)::before{content:'</>'; display:flex;justify-content:flex-end; position:absolute;top:0;left:0;right:0; padding-inline:10px;color:var(--synGray);background-color:inherit; font-size:11px;line-height:30px; z-index:1; opacity:0;visibility:hidden} .pre:not(.tb).html::before{content:'.html'} .pre:not(.tb).css::before{content:'.css'} .pre:not(.tb).js::before{content:'.js'} .pre:not(.tb).custom::before{content:attr(data-text)} .pre:not(.tb, :hover)::before{opacity:1;visibility:visible; transition-delay: 2s} .pre:not(.tb) button{display:flex;justify-content:flex-end; position:absolute;top:0;right:0; padding:0 10px;border:0;color:var(--synGray);background-color:inherit; font-size:11px;line-height:30px; z-index:2} .pre:not(.tb, :hover) button{opacity:0;visibility:hidden; transition-delay: 2s; z-index:1} .pre pre, .pre.tb pre{margin:0;padding-top:30px; color:inherit;background-color:inherit} pre{display:block; position:relative; font:13px/1.6 var(--fontCode); color:var(--synC);background-color:var(--synBg); margin:1.7em auto;padding:20px;border-radius:var(--contentBd-radius); -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(--synBlue);font-style:normal} pre i.block{color:#fff;background-color:var(--synBlue)} code, kbd{display:inline; padding:5px;border-radius:2px; font:14px var(--fontCode); background-color:#ebeced;color:#2f3337} /* Multi syntax */ .pre.tb .preH{font-size:.93rem; margin:0} .pre.tb .preH >*{padding-top:15px} .pre.tb .preH::after{content:'</>'; margin-left:auto;padding:15px; font:10px var(--fontCode); color:var(--synGray)} .pre.tb >:not(.preH){display:none} .pE input[id*="1"]:checked ~ div[class*="C-1"], .pE input[id*="2"]:checked ~ div[class*="C-2"], .pE input[id*="3"]:checked ~ div[class*="C-3"], .pE input[id*="4"]:checked ~ div[class*="C-4"]{display:block} /* hljs */ .hljs-comment, .hljs-code, .hljs-meta, pre i.gray{color:var(--synGray)} .hljs-name, .hljs-title, .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-selector-id, .hljs-selector-class, .hljs-selector-tag, .hljs-literal, pre i.red{color:var(--synOrange)} .hljs-keyword, .hljs-string, .hljs-type, .hljs-section, .hljs-quote, .hljs-built_in, .hljs-builtin-name, pre i.blue{color:var(--synBlue)} .hljs-attribute{} .hljs-params, pre i.green{color:var(--synGreen)} .hljs-number, .hljs-symbol{color:var(--synRed)} .hljs-regexp, .hljs-link{color:var(--synGold)} .hljs-deletion{background-color:var(--warnBg);color:var(--warnC)} .hljs-addition{background-color:var(--noteBg);color:var(--noteC)} .hljs-strong{font-weight:bold} .hljs-code, .hljs-emphasis{font-style:italic} /* tabs */ .tbHd.stick:not(.preH){position:-webkit-sticky;position:sticky;top:var(--headerHeight);background-color:var(--contentBg); z-index:1} .tbHd{display:flex; margin-bottom:30px;border-bottom:var(--contentBd-line) solid var(--contentBd-color); font:14px/1.6 var(--fontBody-alt); overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch} .tbHd >*{position:relative; padding:12px 15px; transition:opacity var(--tDuration); opacity:.6;white-space:nowrap; scroll-snap-align:start} .tbHd >*::before{content:attr(data-text)} .tbHd >*::after{content:''; position:absolute;left:0;bottom:-1px;right:0; height:2px;border-radius:2px 2px 0 0;background-color:var(--themeLink); opacity:0; transition:var(--tShowHide)} .tbCn >*{display:none;width:100%} .tbCn >* p:first-child{margin-top:0} .pE input[id*="1"]:checked ~ .tbHd label[for*="1"], .pE input[id*="2"]:checked ~ .tbHd label[for*="2"], .pE input[id*="3"]:checked ~ .tbHd label[for*="3"], .pE input[id*="4"]:checked ~ .tbHd label[for*="4"]{color:var(--themeLink);opacity:1; font-weight:500} .pE input[id*="1"]:checked ~ .tbHd label[for*="1"]::after, .pE input[id*="2"]:checked ~ .tbHd label[for*="2"]::after, .pE input[id*="3"]:checked ~ .tbHd label[for*="3"]::after, .pE input[id*="4"]:checked ~ .tbHd label[for*="4"]::after{opacity:1} .pE input[id*="1"]:checked ~ .tbCn div[class*="Text-1"], .pE input[id*="2"]:checked ~ .tbCn div[class*="Text-2"], .pE input[id*="3"]:checked ~ .tbCn div[class*="Text-3"], .pE input[id*="4"]:checked ~ .tbCn div[class*="Text-4"]{display:block} /* split */ .blogPg{font-size:small; align-items:baseline;justify-content:center; gap:0} .blogPg >*:not(.page){display:inline-flex;align-items:center;justify-content:center;gap:8px; position:relative;min-width:40px;height:40px; border-radius:var(--contentBd-radius); color:inherit} .blogPg a{opacity:.6} .blogPg a:hover{opacity:1} .blogPg .current:not(.page)::after, .blogPg .n::after{content:'';display:block; width:20px;border-bottom:1px solid currentColor} .blogPg .n{gap:4px;margin-inline-start:5px; transition:gap var(--tDuration)} .blogPg .n::before{content:var(--pageNext)} .blogPg .n::after{width:1px; opacity:0;visibility:hidden;transition:width var(--tDuration), var(--tShowHide)} .blogPg .n:hover{gap:8px} .blogPg .n:hover::after{width:20px; opacity:1;visibility:visible} .blogPg .a:hover{color:var(--themeLink)} /* component: responsive */ @media screen and (max-width:640px){/* scroll-img */ .scImg{flex-wrap:nowrap;justify-content:flex-start; padding-inline:var(--contentPadding); 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} .pE img.full{max-width:none;border-radius:0} /* Table */ .table{display:flex; padding-inline:var(--contentPadding)} /* full-width */ .pE img.full, .scImg, .table{position:relative;width:calc(100% + (var(--contentPadding) * 2)); margin-inline:var(--contentPadding-minus)} } @media screen and (max-width:500px){/* scroll-img */ .hdImg >*, .shImg >*, .grImg >*:first-child, .grImg >*:nth-child(4), .grImg >*:nth-child(7){width:100%} .pE .separator a{display:block!important; margin:0!important} /* button */ .btnF >*{flex-grow:1;justify-content:center} .btnF >*:first-child{flex:0 0 auto} .dlBox a::after{display:none} .dlBox .button{min-width:45px;height:45px;justify-content:center} }
/* comment */ .pR{margin-top:var(--contentSpace)} /* comment-button */ .cmButton .button{justify-content:center; width:100%;max-width:none;padding-block:18px;padding-inline:var(--contentPadding-box); font-family:var(--fontBody-alt)} .cmButton .button span::before{content:attr(data-comment)} .cmButton .button:hover{box-shadow:0 15px 50px -20px rgb(0 0 0 / 20%), 0 0 0 .5px var(--themeLink) inset} /* comment-head */ .cmH .s{gap:5px} .cmH .s::before{content:attr(data-text); opacity:.8} .cmi:checked ~ .cm .cmH .s::before{content:attr(data-new)} .cmi:checked ~ .cm .cmH .s svg{transform:rotate(180deg)} .cmi:checked ~ .cm .cmO{flex-direction:column-reverse} /* comment-func */ .item-control{display:none} #comment:target .cm.popUp{margin-bottom:0;opacity:1;visibility:visible} #comment:target .cm.popUp .fc::after{opacity:1;visibility:visible; background-color:var(--themeBg-pop); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px)} #comment:target .popI:not(:checked) ~ .cmButton, .popI:checked ~ .cmButton, #comment:not(:target) .popI:not(:checked) ~ .cmButton ~ .cm:not(.popUp){display:none} #comment:target .popI:checked ~ .cm.popUp{margin-bottom:-100%; opacity:0;visibility:hidden} #comment:target .popI:checked ~ .cm.popUp .fc::after{background-color:transparent; opacity:0;visibility:hidden; backdrop-filter:none} #comment:target .popI:checked ~ .cmButton{display:block} /* comment-title */ .cm .title{margin:0; font-size:1em} /* comment-iframe */ .cm.embed .cmF, .cmO .cmX{position:relative; width:calc(100% + (10px * 2));margin-inline:-10px} .cmm.note{margin-inline:10px;font-size:small} /* comment-list */ .cmO{margin-block-start:var(--contentPadding)} .cmO li{flex-wrap:wrap;gap:10px; padding-bottom:25px} .cmO li li{position:relative;padding-bottom:15px} .cmO .cmI{position:relative; width:calc(100% - (35px + 10px))} .cmT{width:100%} .cmT svg{color:var(--themeLink); margin-inline-start:3px} .cmT .time::before{content:'\00B7';margin-inline:8px} .cmC{color:var(--themeC-alt)} .cmC img{font-size:smaller;margin-block-start:1em} .cmC.delete{display:block;margin-block-start:.5em;padding:15px;border:1px dashed rgb(0 0 0 / 20%);border-radius:3px;text-align:center} .cmC i[rel=image]{display:block;position:relative;min-height:50px;margin-block-start:.5em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:.93em;opacity:.8} .cmC i[rel=image]::before{content:'Enable javascript to view image';display:flex;align-items:center;justify-content:center; position:absolute;top:0;left:0;bottom:0;right:0; padding:15px;border:1px dashed rgb(0 0 0 / 20%);border-radius:3px; background-color:var(--contentBg); text-align:center} .cmC i[rel=quote]{display:block;margin-block:1em .5em;padding-block:6px;padding-inline-start:15px;border-inline-start:1px solid var(--contentBd-color); opacity:.8} .cmC i[rel=pre]{display:block;margin-block:1em .5em;padding:15px;border:var(--synBd-line) solid var(--synBd-color);border-radius:var(--contentBd-radius); color:var(--synC);background-color:var(--synBg); font:normal 13px/1.6 var(--fontCode); -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} .cmJ:not(.cmc), .cmR{margin-block-start:.75em} .cmJ:not(.cmc) >*::after{content:var(--reply)} .cmJ.cmc >*::after{content:var(--replies)} .cmR summary{align-items:center;padding-block:5px} .cmR summary::before{content:attr(aria-label)} .cmR summary::after{content:''; display:var(--widgetTitle-afterD);vertical-align:middle; width:30px;margin-inline-start:8px;border-bottom:1px solid var(--widgetTitle-afterC)} .cmR[open] summary::before{content:attr(data-text)} .cmS{margin-block-start:1.5em} .cmS .cmI{width:100%} .cmS .cmA{position:absolute;width:20px} .cmS .cmA .avatar.im{min-width:20px;min-height:20px;max-width:20px;max-height:20px} .cmS .cmT{padding-inline-start:26px} .cmS .cmC{margin-block-start:.5em}
/* Responsive */
@media screen and (max-width:1100px){/* mainC */ .mainB .blogB{width:calc(100% - ((var(--sidebarWidth) - 20px) + var(--contentSpace)))} .mainB .sideB{width:calc(var(--sidebarWidth) - 20px)} /* Widget: Blog */ .blogP.flex >article{width:calc((100% / 2) - (var(--gap) * 1/2))} }
@media screen and (min-width:897px){/* mainN */ .leftW{position:sticky;top:var(--headerHeight);height:calc(var(--vHeight) - var(--headerHeight))} .leftW::after{content:'';position:absolute;top:0;bottom:0;border-inline-end:var(--sideBd-line) solid var(--sideBd-color)} .leftW:not(.r)::after{right:0} .leftW.r::after{left:0} /* mainN: active and openMenu */ .nB:not(.openMenu) .navi:checked ~ .mainW .leftN, .nB.openMenu .navi:not(:checked) ~ .mainW .leftN{overflow-x:hidden;overflow-y:hidden} .nB:not(.openMenu) .navi:checked ~ .mainW .leftN:hover, .nB.openMenu .navi:not(:checked) ~ .mainW .leftN:hover{overflow-y:scroll} .nB.openMenu .mainN, .nB:not(.openMenu) .navi:checked ~ .mainW .mainN{--sideWidth-collapse: var(--sideWidth-expand)} .nB.openMenu .navi:checked ~ .mainW .mainN{--sideWidth-collapse: var(--sideWidth)} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav .n, .nB.openMenu .navi:checked ~ .mainW .leftNav .n{--top:6px;position:absolute;top:calc(var(--padding) - (var(--top) - 2px)); max-width:160px;padding:var(--top) 10px;border:var(--sideBd-line) solid var(--sideBd-color);border-radius:var(--contentBd-radiusA); background-color:var(--contentBg); box-shadow:0 10px 30px -5px rgb(0 0 0 / 10%); font-size:.93em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; z-index:1; opacity:0;visibility:hidden; transition:var(--tShowHide)} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav details .n, .nB.openMenu .navi:checked ~ .mainW .leftNav details .n{top:calc(var(--padding) - (var(--top) - 12px))} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav:not(.r) details .n, .nB.openMenu .navi:checked ~ .mainW .leftNav:not(.r) details .n{left:55px} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav.r details .n, .nB.openMenu .navi:checked ~ .mainW .leftNav.r details .n{right:55px} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav details .n li, .nB.openMenu .navi:checked ~ .mainW .leftNav details .n li{padding-inline-start:0} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav details .n li::after, .nB.openMenu .navi:checked ~ .mainW .leftNav details .n li::after, .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftN .profileIcon .n, .nB.openMenu .navi:checked ~ .mainW .leftN .profileIcon .n, .nB:not(.openMenu) .navi:checked ~ .mainW .leftN .profileIcon.team .avi, .nB.openMenu .navi:not(:checked) ~ .mainW .leftN .profileIcon.team .avi{display:none} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftN .profileIcon.team .avi, .nB.openMenu .navi:checked ~ .mainW .leftN .profileIcon.team .avi{display:flex} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav .a:hover .n, .nB.openMenu .navi:checked ~ .mainW .leftNav .a:hover .n, .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav details:hover .n, .nB.openMenu .navi:checked ~ .mainW .leftNav details:hover .n{opacity:1;visibility:visible} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav:not(.r) .n, .nB.openMenu .navi:checked ~ .mainW .leftNav:not(.r) .n{left:35px} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav.r .n, .nB.openMenu .navi:checked ~ .mainW .leftNav.r .n{right:35px} .nB:not(.openMenu) .navi:not(:checked) ~ .mainW .leftNav summary .flexIn, .nB.openMenu .navi:checked ~ .mainW .leftNav summary .flexIn{display:none} }
@media screen and (max-width:896px){/* mainH */ .nB:not(.headerSticky) .mainH{position:relative} /* mainN */ .mainR{width:100%} .mainL{position:fixed;top:0;bottom:0;width:calc(100% - (var(--contentPadding) * 2));max-width:var(--sideWidth-max); margin-inline-start:calc(-100% + (var(--contentPadding) * 2));margin-block:var(--sideMargin-phone); opacity:0;visibility:hidden; transition:margin var(--tDuration), var(--tShowHide); z-index:10; overflow:hidden} .mainL:not(.r){left:0} .mainL.r{right:0} .leftW{position:relative;height:calc(var(--vHeight) - (var(--sideMargin-phone) * 2)); border-radius:var(--sideBd-radiusTL) var(--sideBd-radiusTR) var(--sideBd-radiusBR) var(--sideBd-radiusBL); overflow:hidden} .leftN{overflow-y:scroll} .leftF{display:flex;align-items:center;justify-content:flex-end; position:absolute;left:0;bottom:0;right:0; height:var(--closeHeight-phone); border-block-start:var(--sideBd-line) solid var(--sideBd-color); background-color:inherit} .leftF label{align-items:inherit;justify-content:inherit; min-width:100px;padding-block:10px;color:var(--themeLink)} .leftF label, .leftP{background-color:transparent; z-index:1} .leftF label::before{content:var(--closeButton)} /* mainN: active */ .navi:checked ~ .mainW .mainL{opacity:1;visibility:visible; margin-inline-start:var(--sideMargin-phone);margin-inline-end:var(--sideMargin-phone)} .navi:checked ~ .mainW .fc[for=forNav]::after{opacity:1;visibility:visible; background-color:var(--themeBg-pop);backdrop-filter:saturate(180%) blur(10px); z-index:2} /* mainC */ .mainB{align-items:center;flex-direction:column; gap:calc(var(--contentSpace) * 1.5)} .mainB :is(.blogB, .sideB){flex:1 0 100%; width:100%} /* mainM/mainF */ .mainM{display:block} .mainM:not(.no-items) ~ .mainF{padding-block-end:calc(25px + var(--mobileHeight))} /* Widget: Sliders */ .slideB{width:calc(100% + (var(--contentPadding) * 2));margin-inline:var(--contentPadding-minus);padding-inline:calc(var(--contentPadding) / 2);border-radius:0} .slideI{margin-inline:calc(var(--contentPadding) / 2)} .slider{left:calc(var(--contentPadding-minus) / -2);right:calc(var(--contentPadding-minus) / -2)} .slider >*{padding-inline-end:var(--contentPadding)} /* Widget: Blog */ .blogP.flex >article{width:calc((100% / 3) - (var(--gap) * 2/3))} }
@media screen and (min-width:768px){/* Scrollbar custom */ ::-webkit-scrollbar{-webkit-appearance:none; width:4px;height:5px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:rgb(0 0 0 / 15%); border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:rgb(0 0 0 / 35%)}::-webkit-scrollbar-thumb:active{background-color:rgb(0 0 0 / 35%)} }
@media screen and (min-width:641px){.mainB.full .sideB{display:none} }
@media screen and (max-width:640px){/* Variable */ .nB{--headerHeight:var(--headerHeight-phone); --postTitle-font:var(--postTitle-fontPhone); --thumbnailSize: 250px ;} /* Notify */ .nB:not(.r) .fixN, .nB.r .fixN{left:0;right:0} .nB .fixN{--minHeight:var(--minHeight-phone); margin-bottom:var(--contentPadding-minus); border-radius:0;box-shadow:none} /* noScript/cookie */ .nJ{bottom:0;max-width:none;margin-inline:0;border-radius:0;box-shadow:none} .nJ.cookie{margin-bottom:0} /* mainH */ .mainH{padding-inline:var(--contentPadding);border-radius:0 0 var(--headerBd-radiusBR) var(--headerBd-radiusBL)} .headL{--gap:12px; flex-grow:1; width:60%} .headR{flex-grow:0;gap:0; width:auto;margin-inline-start:auto;padding-inline:0} .headT{max-width:calc(100% - (var(--iconWidth) + var(--gap)) + 8px)} .headi.menu{margin-inline-start:-8px;padding-inline-start:0} .headi .sc{display:inline-flex} /* Widget: BlogSearch */ .BlogSearch{position:fixed;top:0;left:0;right:0; margin-block-start:var(--headerHeight-min); transition:margin var(--tDuration); z-index:2} .BlogSearch form{background-color:var(--headerBg);margin-inline:0;border-bottom:var(--headerBd-line) solid var(--headerBd-color);border-radius:0 0 var(--headerBd-radiusBR) var(--headerBd-radiusBL)} .BlogSearch input[type=search]{width:100%;height:var(--headerHeight);padding-inline:62px;border-width:0} .BlogSearch .b{padding-inline:var(--contentPadding)} .BlogSearch:focus-within{margin-block-start:0} .BlogSearch:focus-within input, .BlogSearch:hover input{background-color:inherit} /* Element: po-up */ .popUp{align-items:flex-end} .popUp .popIn{max-width:100%; margin-block-end:0; border:0;border-radius:var(--contentBd-radiusA) var(--contentBd-radiusA) 0 0} .popUp .popC{padding-block:0 calc(var(--closeHeight-phone) + var(--contentPadding-box))} .popUp .popH{position:static;padding:var(--contentPadding-box) 0} .popUp .popH::before{content:''; position:absolute;left:0;bottom:0;right:0; height:var(--closeHeight-phone); background-color:inherit;border-top:1px solid var(--contentBd-color); z-index:2} .popUp .popH .c{justify-content:flex-end; position:absolute;bottom:calc((var(--closeHeight-phone) - var(--iconWidth)) / 2); min-width:60px;width:auto; margin-inline-end:0;color:var(--themeLink);z-index:2} .popUp .popH .c::after{content:var(--closeButton)} .popUp .popH .c:not(.r){right:var(--contentPadding)} .popUp .popH .c.r{left:var(--contentPadding)} .popUp .popIn:not(.n){border-radius:0; height:var(--vHeight);max-height:100%} /* Widget: RelatedPost */ .itemR:not(.type-2, .type-3, .type-4) >*{width:100%;max-width:500px} .itemR:not(.type-2, .type-4) .pT .clamp{-webkit-line-clamp:2} .itemR:is(.type-2, .type-3, .type-4){--cgap:15px} .itemR:is(.type-2, .type-3, .type-4) article{--gap:15px;width:calc((100% / 2) - (var(--cgap) / 2))} .itemR:is(.type-2, .type-3, .type-4) .pT .name:not(.item){--postTitle-fontItems:1em} .itemR.type-4 .pS{display:block} /* Widget: ToC */ .tocP{top:var(--tocMargin);bottom:var(--tocMargin); height:auto; border-radius:var(--tocBd-radiusTL) var(--tocBd-radiusTR) var(--tocBd-radiusBR) var(--tocBd-radiusBL); overflow:hidden;z-index:11} .tocP:not(.r){right:var(--tocMargin)} .tocP.r{left:var(--tocMargin)} .tocB.fc::after{z-index:10} .tocP::before{display:none} .tocI:checked ~ .tocB.fc::after{background-color:var(--themeBg-pop);backdrop-filter:saturate(180%) blur(10px)} /* Widget: Blog */ .blogP.flex >article{width:calc((100% / 2) - (var(--gap) * 1/2))} .nB:not(.oneGrid) .blogP.flex >article{gap:15px} .nB:not(.oneGrid) .blogP.flex .pS .clamp{-webkit-line-clamp:2} /* Widget: Blog - post */ /* snippet and jumplink */ .pS:not(.show), .nB:not(.oneGrid) .pF .jump:not(.sponsor){display:none} }
@media screen and (max-width:500px){/* Variable */ .nB{--postPadding:var(--postPadding-phone); --postTitle-fontItems:var(--postTitle-fontItemsPhone); --postDescription-font:var(--postDescription-fontPhone); --postBody-font:var(--postBody-fontPhone); --thumbnailSize:100%} /* Widget: RelatedPost */ .itemR.type-3 article{flex-direction:row; width:100%} .itemR.type-3 .pI{--thumbnailSize:40%; width:var(--thumbnailSize)} .itemR.type-3 .pC{width:calc(100% - (var(--gap) + var(--thumbnailSize)))} .itemR.type-4{flex-wrap:nowrap; position:relative;width:calc(100% + (var(--contentPadding) *2)); margin-inline:var(--contentPadding-minus);padding-inline:var(--contentPadding); overflow-y:hidden;overflow-x:scroll; scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:none} .itemR.type-4 article{width:85%; scroll-snap-align:center} .itemR.type-4 .pT .name:not(.item){--postTitle-fontItems:1.1em} /* Widget: Blog */ .blogP.flex{--gap:15px} .oneGrid .blogP.flex >article{width:100%} /* head, time and label */ .pH:not(.info){--fontDate:var(--fontDate-phone)} .pH:not(.info) .date{display:block;overflow:hidden;text-overflow:ellipsis} .pH .share [aria-label=Share]:not(.nt)::before{display:none} }
/* Effect */ @keyframes nudge{ 0%{transform:translateX(0)} 30%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 70%{transform:translateX(-2px)} 100%{transform:translateX(0)} } @keyframes slideIn{ 0%{opacity:0} 10%, 80%{opacity:1;bottom:var(--contentPadding)} 100%{bottom:calc(-100px + var(--contentPadding-minus)); opacity:0;visibility:hidden} } @keyframes slideTop{ 0%, 40%{opacity:0} 50%, 100%{opacity:1;bottom:0} } @keyframes bullet{ 1%, 21%{width:10px;background-color:var(--themeLink)} 22%, 39%{width:4px;background-color:rgb(0 0 0 / 15%)} } @keyframes slide{ 0%, 20%{margin-inline-start:0} 25%, 45%{margin-inline-start:-100%} 50%, 70%{margin-inline-start:-200%} 75%, 95%{margin-inline-start:-300%} }
/* Hide scroll */ .scrlH::-webkit-scrollbar{width:0;height:0} .scrlH::-webkit-scrollbar-track{background-color:transparent} .scrlH::-webkit-scrollbar-thumb{background-color:transparent;border:none}
/* Print (Do not print selected area) */ @media print{.noPrint{display:none}}
/* Do not copy */ /*body{user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} pre, code, kbd, i[rel=pre]{user-select:text;-moz-user-select:text;-ms-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-webkit-touch-callout:text}*/
/* Set theme: switch */ .dc[aria-label=Dark] svg >*{display:none} .nB[data-theme=default] .inn .A, .nB[data-theme=dark] .inn .D, .nB[data-theme=light] .inn .L{color:var(--themeLink);opacity:1} .nB[data-theme=default] .inn .A .i, .nB[data-theme=dark] .inn .D .i, .nB[data-theme=light] .inn .L .i{box-shadow:0 0 0 1px var(--themeLink)} .nB[data-theme=default] .dc[aria-label=Dark] svg .sun, .nB[data-theme=light] .dc[aria-label=Dark] svg .sun, .nB[data-theme=dark] .dc[aria-label=Dark] svg .moon{display:block} .nB[data-theme=default] .dc[aria-label=Dark] svg{z-index:-1} .nB[data-theme=default] .dc[aria-label=Dark]{position:relative} .nB[data-theme=default] .dc[aria-label=Dark]::before{content:'A'; display:flex;align-items:center;justify-content:center; position:absolute;bottom:5px;right:4px; width:14px;height:16px;border-radius:6px;background-color:var(--headerBg); font-size:smaller} .nB[data-theme=default] .iSett .dc[aria-label=Dark]::before{background-color:var(--contentBg)}
/* Set theme: dark */ .nB[data-theme=dark]{--themeLink: var(--darkLink); --themeC: var(--darkC); --themeC-alt: var(--darkC-alt); --themeBg: var(--darkBg); --themeBg-alt: var(--darkBg-alt); --themeBg-sec: var(--darkBg-sec); --themeBg-pop: var(--darkBg-pop); --themeBd-color: var(--darkBd-color); --synC: var(--themeC-alt); --synBg: var(--themeBg-alt); --synBd-color: var(--themeBd-color); --tableBg-color: rgb(45 49 56 / 80%); /* reset */ --buttonBg: var(--themeLink); --stepC: var(--themeLink); --headerBg: var(--themeBg); --sideBg: var(--themeBg); --sidebarBg: var(--themeBg); --footerBg: var(--themeBg); --postBg: var(--themeBg); --mobileBg: var(--themeBg-alt); --tocBg: var(--themeBg-alt); --contentBg: var(--themeBg); --contentBg-alt: var(--themeBg-alt); --contentBg-sec: var(--themeBg-sec); --buttonBd-color: var(--themeBd-color); --headerBd-color: var(--themeBd-color); --sideBd-color: var(--themeBd-color); --sidebarBd-color: var(--themeBd-color); --footerBd-color: var(--themeBd-color); --postBd-color: var(--themeBd-color); --mobileBd-color: var(--themeBd-color); --tocBd-color: var(--themeBd-color); --contentBd-color: var(--themeBd-color); --headerC: currentColor; --sideC: currentColor; --sidebarC: currentColor; --footerC: currentColor; --postC: currentColor; --mobileC: currentColor; --tocC: currentColor; --contentC: currentColor; } .nB[data-theme=dark] .ipopUp, .nB[data-theme=dark] .profilePop{background-color:var(--contentBg-alt)}
@media (prefers-color-scheme: dark){/* Set theme: switch */ .nB[data-theme=default] .dc[aria-label=Dark] svg .sun{display:none} .nB[data-theme=default] .dc[aria-label=Dark] svg .moon{display:block} .nB[data-theme=default]{--themeLink: var(--darkLink); --themeC: var(--darkC); --themeC-alt: var(--darkC-alt); --themeBg: var(--darkBg); --themeBg-alt: var(--darkBg-alt); --themeBg-sec: var(--darkBg-sec); --themeBg-pop: var(--darkBg-pop); --themeBd-color: var(--darkBd-color); --synC: var(--themeC-alt); --synBg: var(--themeBg-alt); --synBd-color: var(--themeBd-color); --tableBg-color: rgb(45 49 56 / 80%); /* reset */ --buttonBg: var(--themeLink); --stepC: var(--themeLink); --headerBg: var(--themeBg); --sideBg: var(--themeBg); --sidebarBg: var(--themeBg); --footerBg: var(--themeBg); --postBg: var(--themeBg); --mobileBg: var(--themeBg-alt); --tocBg: var(--themeBg-alt); --contentBg: var(--themeBg); --contentBg-alt: var(--themeBg-alt); --contentBg-sec: var(--themeBg-sec); --buttonBd-color: var(--themeBd-color); --headerBd-color: var(--themeBd-color); --sideBd-color: var(--themeBd-color); --sidebarBd-color: var(--themeBd-color); --footerBd-color: var(--themeBd-color); --postBd-color: var(--themeBd-color); --mobileBd-color: var(--themeBd-color); --tocBd-color: var(--themeBd-color); --contentBd-color: var(--themeBd-color); --headerC: currentColor; --sideC: currentColor; --sidebarC: currentColor; --footerC: currentColor; --postC: currentColor; --mobileC: currentColor; --tocC: currentColor; --contentC: currentColor; } .nB[data-theme=default] .ipopUp, .nB[data-theme=dark] .profilePop{background-color:var(--contentBg-alt)} }
/* Additional (Dummy ad) */ .adB{display:flex; min-height:60px;border:1px solid rgb(0 0 0 /10%);border-radius:2px;font-size:smaller} .adB::before{content:attr(data-text); margin:auto;opacity:.7}
/*]]>*/</style>
<b:else/>
<!--[ CSS for Blogger Layout ]-->
<b:template-skin><![CDATA[
/* standard */ body#layout::before{content:'Median UI' ;position:absolute;top:10px;right:5px; font:.8rem Roboto, sans-serif; color:rgb(0 0 0 / 52%)} body#layout{width:1025px;margin:0 !important;padding:60px 0 0 !important;border:0 !important;text-align:left !important;position:relative} body#layout div.layout-widget-description{font-size:12px !important;line-height:16px !important} body#layout div.layout-title{font-size:15px !important} body#layout div.section{border-radius:2px} body#layout .section h4{font-size:15px !important; margin-left:0!important} body#layout .add_widget a{font-size:13px !important} body#layout .Blog .widget-content{height:auto !important}
/* custom */ body#layout .mainH, body#layout .headR, body#layout .mainN, body#layout .mainB{display:flex} body#layout .headL{width:30%} body#layout .headR{width:70%} body#layout .headR >*{width:50%} body#layout .mainL{width:25%} body#layout .mainR{width:75%} body#layout .blogB{width:60%} body#layout .sideB{width:40%} body#layout #HTML91 .widget-content, body#layout #HTML92 .widget-content, body#layout #HTML93 .widget-content, body#layout #HTML95 .widget-content, body#layout #HTML99 .widget-content{background-color:#f0f8ff !important}
/* notif */ body#layout #notif-widget{padding:0!important} body#layout #notif-widget .widget{margin-top:0!important} body#layout #notif-widget h4, body#layout #notif-widget .layout-widget-description{display:none !important}
]]></b:template-skin>
</b:if>
<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<!--[ SVG icon lists ]-->
<!--[ arrow-left by Iconsax ]-->
<b:includable id='arrow-left-icon'>
<svg class='line r' viewBox='0 0 24 24'><path d='M9.57 5.92993L3.5 11.9999L9.57 18.0699'/><path d='M20.5 12H3.67004'/></svg>
</b:includable>
<!--[ arrow-right by Iconsax ]-->
<b:includable id='arrow-right-icon'>
<svg class='line r' viewBox='0 0 24 24'><path d='M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699'/><path d='M3.5 12H20.33'/></svg>
</b:includable>
<!--[ arrow-left-1 by Iconsax ]-->
<b:includable id='arrow-left-1-icon'>
<svg class='line r' viewBox='0 0 24 24'><path d='M15 19.9201L8.47997 13.4001C7.70997 12.6301 7.70997 11.3701 8.47997 10.6001L15 4.08008'/></svg>
</b:includable>
<!--[ arrow-right-1 by Iconsax ]-->
<b:includable id='arrow-right-1-icon'>
<svg class='line r' viewBox='0 0 24 24'><path d='M8.91003 19.9201L15.43 13.4001C16.2 12.6301 16.2 11.3701 15.43 10.6001L8.91003 4.08008'/></svg>
</b:includable>
<!--[ arrow-up-1 by Iconsax ]-->
<b:includable id='arrow-up-1-icon'>
<svg class='line r' viewBox='0 0 24 24'><path d='M19.9201 15.0499L13.4001 8.52989C12.6301 7.75989 11.3701 7.75989 10.6001 8.52989L4.08008 15.0499'/></svg>
</b:includable>
<!--[ arrow-down-1 by Iconsax ]-->
<b:includable id='arrow-down-1-icon'>
<svg class='line r' viewBox='0 0 24 24'><path d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995'/></svg>
</b:includable>
<!--[ menu-2 by Feathericons ]-->
<b:includable id='menu-2-icon'>
<svg class='line' viewBox='0 0 24 24'><polyline points='2 17 7 12 2 7'/><line x1='8' x2='22' y1='5' y2='5'/><line x1='12' x2='22' y1='12' y2='12'/><line x1='8' x2='22' y1='19' y2='19'/></svg>
</b:includable>
<!--[ search by Iconsax ]-->
<b:includable id='search-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z'/><path d='M22 22L20 20'/></svg>
</b:includable>
<!--[ category-2 by Iconsax ]-->
<b:includable id='category-2-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M17 10H19C21 10 22 9 22 7V5C22 3 21 2 19 2H17C15 2 14 3 14 5V7C14 9 15 10 17 10Z'/><path d='M5 22H7C9 22 10 21 10 19V17C10 15 9 14 7 14H5C3 14 2 15 2 17V19C2 21 3 22 5 22Z'/><path d='M6 10C8.20914 10 10 8.20914 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 8.20914 3.79086 10 6 10Z'/><path d='M18 22C20.2091 22 22 20.2091 22 18C22 15.7909 20.2091 14 18 14C15.7909 14 14 15.7909 14 18C14 20.2091 15.7909 22 18 22Z'/></svg>
</b:includable>
<!--[ frame by Iconsax ]-->
<b:includable id='frame-icon'>
<svg class='line' viewBox='0 0 24 24'><!--<path d='M9.25 9.05005C11.03 9.70005 12.97 9.70005 14.75 9.05005'/>--><path d='M16.8199 2H7.17995C5.04995 2 3.31995 3.74 3.31995 5.86V19.95C3.31995 21.75 4.60995 22.51 6.18995 21.64L11.0699 18.93C11.5899 18.64 12.4299 18.64 12.9399 18.93L17.8199 21.64C19.3999 22.52 20.6899 21.76 20.6899 19.95V5.86C20.6799 3.74 18.9499 2 16.8199 2Z'/></svg>
</b:includable>
<!--[ archive-add by Iconsax ]-->
<b:includable id='archive-add-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M14.5 10.6499H9.5' stroke-miterlimit='10'/><path d='M12 8.20996V13.21' stroke-miterlimit='10'/><path d='M16.8199 2H7.17995C5.04995 2 3.31995 3.74 3.31995 5.86V19.95C3.31995 21.75 4.60995 22.51 6.18995 21.64L11.0699 18.93C11.5899 18.64 12.4299 18.64 12.9399 18.93L17.8199 21.64C19.3999 22.52 20.6899 21.76 20.6899 19.95V5.86C20.6799 3.74 18.9499 2 16.8199 2Z'/></svg>
</b:includable>
<!--[ archive-tick by Iconsax ]-->
<b:includable id='archive-tick-icon'>
<svg viewBox='0 0 24 24'><path d='M16.8203 1.91016H7.18031C5.06031 1.91016 3.32031 3.65016 3.32031 5.77016V19.8602C3.32031 21.6602 4.61031 22.4202 6.19031 21.5502L11.0703 18.8402C11.5903 18.5502 12.4303 18.5502 12.9403 18.8402L17.8203 21.5502C19.4003 22.4302 20.6903 21.6702 20.6903 19.8602V5.77016C20.6803 3.65016 18.9503 1.91016 16.8203 1.91016ZM15.6203 9.03016L11.6203 13.0302C11.4703 13.1802 11.2803 13.2502 11.0903 13.2502C10.9003 13.2502 10.7103 13.1802 10.5603 13.0302L9.06031 11.5302C8.77031 11.2402 8.77031 10.7602 9.06031 10.4702C9.35031 10.1802 9.83031 10.1802 10.1203 10.4702L11.0903 11.4402L14.5603 7.97016C14.8503 7.68016 15.3303 7.68016 15.6203 7.97016C15.9103 8.26016 15.9103 8.74016 15.6203 9.03016Z'/></svg>
</b:includable>
<!--[ bag by Iconsax ]-->
<b:includable id='bag-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001'/><path d='M8.99999 22H15C19.02 22 19.74 20.39 19.95 18.43L20.7 12.43C20.97 9.99 20.27 8 16 8H7.99999C3.72999 8 3.02999 9.99 3.29999 12.43L4.04999 18.43C4.25999 20.39 4.97999 22 8.99999 22Z'/><path d='M15.4955 12H15.5045'/><path d='M8.49451 12H8.50349'/></svg>
</b:includable>
<!--[ tag by Iconsax ]-->
<b:includable id='tag-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M4.16989 15.3L8.69989 19.83C10.5599 21.69 13.5799 21.69 15.4499 19.83L19.8399 15.44C21.6999 13.58 21.6999 10.56 19.8399 8.69005L15.2999 4.17005C14.3499 3.22005 13.0399 2.71005 11.6999 2.78005L6.69989 3.02005C4.69989 3.11005 3.10989 4.70005 3.00989 6.69005L2.76989 11.69C2.70989 13.04 3.21989 14.35 4.16989 15.3Z'/><path d='M9.5 12C10.8807 12 12 10.8807 12 9.5C12 8.11929 10.8807 7 9.5 7C8.11929 7 7 8.11929 7 9.5C7 10.8807 8.11929 12 9.5 12Z'/></svg>
</b:includable>
<!--[ tag-right by Iconsax ]-->
<b:includable id='tag-right-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M4.21995 3.09998H15.6599C16.3399 3.09998 17.19 3.56998 17.55 4.14998L21.73 10.83C22.13 11.48 22.09 12.5 21.63 13.11L16.45 20.01C16.08 20.5 15.28 20.9 14.67 20.9H4.21995C2.46995 20.9 1.40999 18.98 2.32999 17.49L5.09995 13.06C5.46995 12.47 5.46995 11.51 5.09995 10.92L2.32999 6.48998C1.40999 5.01998 2.47995 3.09998 4.21995 3.09998Z'/></svg>
</b:includable>
<!--[ translate ]-->
<b:includable id='translate-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M3 5H15M9 3V5M10.0482 14.5C8.52083 12.9178 7.28073 11.0565 6.41187 9M12.5 18H19.5M11 21L16 11L21 21M12.7511 5C11.7831 10.7702 8.06969 15.6095 3 18.129'/></svg>
</b:includable>
<!--[ moon and sun-2 (alternative) ]-->
<b:includable id='moon-n-sun-2-icon'>
<svg class='line' viewBox='0 0 24 24'>
<g class='moon'><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'/></g>
<g class='sun'><path d='M12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12C5.5 15.5899 8.41015 18.5 12 18.5Z'/><path d='M19.14 19.14L19.01 19.01M19.01 4.99L19.14 4.86L19.01 4.99ZM4.86 19.14L4.99 19.01L4.86 19.14ZM12 2.08V2V2.08ZM12 22V21.92V22ZM2.08 12H2H2.08ZM22 12H21.92H22ZM4.99 4.99L4.86 4.86L4.99 4.99Z' stroke-width='2'/></g>
</svg>
</b:includable>
<!--[ profile-circle by Iconsax ]-->
<b:includable id='profile-circle-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z'/><path d='M18.74 19.3801C16.96 21.0101 14.6 22.0001 12 22.0001C9.40001 22.0001 7.04001 21.0101 5.26001 19.3801C5.36001 18.4401 5.96001 17.5201 7.03001 16.8001C9.77001 14.9801 14.25 14.9801 16.97 16.8001C18.04 17.5201 18.64 18.4401 18.74 19.3801Z'/><path d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z'/></svg>
</b:includable>
<!--[ user by Iconsax ]-->
<b:includable id='user-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z'/><path d='M20.5899 22C20.5899 18.13 16.7399 15 11.9999 15C7.25991 15 3.40991 18.13 3.40991 22'/></svg>
</b:includable>
<!--[ profile-2user by Iconsax ]-->
<b:includable id='profile-2user-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M9.16006 10.87C9.06006 10.86 8.94006 10.86 8.83006 10.87C6.45006 10.79 4.56006 8.84 4.56006 6.44C4.56006 3.99 6.54006 2 9.00006 2C11.4501 2 13.4401 3.99 13.4401 6.44C13.4301 8.84 11.5401 10.79 9.16006 10.87Z'/><path d='M16.41 4C18.35 4 19.91 5.57 19.91 7.5C19.91 9.39 18.41 10.93 16.54 11C16.46 10.99 16.37 10.99 16.28 11'/><path d='M4.15997 14.56C1.73997 16.18 1.73997 18.82 4.15997 20.43C6.90997 22.27 11.42 22.27 14.17 20.43C16.59 18.81 16.59 16.17 14.17 14.56C11.43 12.73 6.91997 12.73 4.15997 14.56Z'/><path d='M18.3401 20C19.0601 19.85 19.7401 19.56 20.3001 19.13C21.8601 17.96 21.8601 16.03 20.3001 14.86C19.7501 14.44 19.0801 14.16 18.3701 14'/></svg>
</b:includable>
<!--[ home by Iconsax ]-->
<b:includable id='home-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M12 18V15'/><path d='M10.07 2.81997L3.14002 8.36997C2.36002 8.98997 1.86002 10.3 2.03002 11.28L3.36002 19.24C3.60002 20.66 4.96002 21.81 6.40002 21.81H17.6C19.03 21.81 20.4 20.65 20.64 19.24L21.97 11.28C22.13 10.3 21.63 8.98997 20.86 8.36997L13.93 2.82997C12.86 1.96997 11.13 1.96997 10.07 2.81997Z'/></svg>
</b:includable>
<!--[ home-2 by Iconsax ]-->
<b:includable id='home-2-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M9.02 2.84004L3.63 7.04004C2.73 7.74004 2 9.23004 2 10.36V17.77C2 20.09 3.89 21.99 6.21 21.99H17.79C20.11 21.99 22 20.09 22 17.78V10.5C22 9.29004 21.19 7.74004 20.2 7.05004L14.02 2.72004C12.62 1.74004 10.37 1.79004 9.02 2.84004Z'/><path d='M12 17.99V14.99'/></svg>
</b:includable>
<!--[ export by Iconsax ]-->
<b:includable id='export-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M16.44 8.8999C20.04 9.2099 21.51 11.0599 21.51 15.1099V15.2399C21.51 19.7099 19.72 21.4999 15.25 21.4999H8.73998C4.26998 21.4999 2.47998 19.7099 2.47998 15.2399V15.1099C2.47998 11.0899 3.92998 9.2399 7.46998 8.9099'/><path d='M12 15.0001V3.62012'/><path d='M15.35 5.85L12 2.5L8.65002 5.85'/></svg>
</b:includable>
<!--[ share-icon by Feathericons ]-->
<b:includable id='share-icon'>
<svg class='line' viewBox='0 0 24 24'><circle cx='18' cy='5' r='3'/><circle cx='6' cy='12' r='3'/><circle cx='18' cy='19' r='3'/><line x1='8.59' x2='15.42' y1='13.51' y2='17.49'/><line x1='15.41' x2='8.59' y1='6.51' y2='10.49'/></svg>
</b:includable>
<!--[ message-text by Iconsax ]-->
<b:includable id='message-text-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M8.5 19H8C4 19 2 18 2 13V8C2 4 4 2 8 2H16C20 2 22 4 22 8V13C22 17 20 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z'/><path d='M7 8H17'/><path d='M7 13H13'/></svg>
</b:includable>
<!--[ info by Feathericons ]-->
<b:includable id='info-icon'>
<svg class='line' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='16' y2='12'/><line x1='12' x2='12.01' y1='8' y2='8'/></svg>
</b:includable>
<!--[ location by Iconsax ]-->
<b:includable id='location-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M12 13.4299C13.7231 13.4299 15.12 12.0331 15.12 10.3099C15.12 8.58681 13.7231 7.18994 12 7.18994C10.2769 7.18994 8.88 8.58681 8.88 10.3099C8.88 12.0331 10.2769 13.4299 12 13.4299Z'/><path d='M3.62001 8.49C5.59001 -0.169998 18.42 -0.159997 20.38 8.5C21.53 13.58 18.37 17.88 15.6 20.54C13.59 22.48 10.41 22.48 8.39001 20.54C5.63001 17.88 2.47001 13.57 3.62001 8.49Z'/></svg>
</b:includable>
<!--[ chat-curver by Iconly ]-->
<b:includable id='chat-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><path d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'/></g></svg>
</b:includable>
<!--[ folder-2 by Iconsax ]-->
<b:includable id='folder-2-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M22 11V17C22 21 21 22 17 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44 10.9 3.2L12.4 5.2C12.78 5.7 13 6 14 6H17C21 6 22 7 22 11Z'/><path d='M8 2H17C19 2 20 3 20 5V6.38'/></svg>
</b:includable>
<!--[ sms-edit by Iconsax ]-->
<b:includable id='sms-edit-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M12 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V11.5'/><path d='M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9'/><path d='M19.21 14.77L15.6701 18.31C15.5301 18.45 15.4 18.71 15.37 18.9L15.18 20.25C15.11 20.74 15.45 21.0801 15.94 21.0101L17.29 20.82C17.48 20.79 17.75 20.66 17.88 20.52L21.4201 16.9801C22.0301 16.3701 22.3201 15.6601 21.4201 14.7601C20.5301 13.8701 19.82 14.16 19.21 14.77Z'/><path d='M18.7001 15.28C19.0001 16.36 19.8401 17.2 20.9201 17.5'/></svg>
</b:includable>
<!--[ play and pause by Ionicons ]-->
<b:includable id='playPause-icon'>
<svg viewBox='0 0 512 512'>
<g class='play'><path d='M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z'/></g>
<g class='pause'><path d='M208 432h-48a16 16 0 01-16-16V96a16 16 0 0116-16h48a16 16 0 0116 16v320a16 16 0 01-16 16zM352 432h-48a16 16 0 01-16-16V96a16 16 0 0116-16h48a16 16 0 0116 16v320a16 16 0 01-16 16z'/></g>
</svg>
</b:includable>
<!--[ Document icon ]-->
<b:includable id='document-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.610000, 2.750100)'><line x1='11.9858' x2='4.7658' y1='12.9463' y2='12.9463'/><line x1='11.9858' x2='4.7658' y1='9.1865' y2='9.1865'/><line x1='7.521' x2='4.766' y1='5.4272' y2='5.4272'/><path d='M7.63833441e-14,9.25 C7.63833441e-14,16.187 2.098,18.5 8.391,18.5 C14.685,18.5 16.782,16.187 16.782,9.25 C16.782,2.313 14.685,0 8.391,0 C2.098,0 7.63833441e-14,2.313 7.63833441e-14,9.25 Z'/></g></svg>
</b:includable>
<!--[ behance by DailyYouth ]-->
<b:includable id='behance-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M13.09,15.65A5.49,5.49,0,0,0,9.5,6H3A1,1,0,0,0,2,7V25a1,1,0,0,0,1,1h7.5a5.5,5.5,0,0,0,2.59-10.35ZM4,8H9.5a3.5,3.5,0,0,1,0,7H4Zm6.5,16H4V17h6.5a3.5,3.5,0,0,1,0,7Z'/><path d='M23.5,13a6.5,6.5,0,0,0,0,13c4.05,0,5.33-2.26,5.38-2.35a1,1,0,0,0-.4-1.36,1,1,0,0,0-1.36.4S26.28,24,23.5,24a4.5,4.5,0,0,1-4.38-3.5H29a1,1,0,0,0,1-1A6.51,6.51,0,0,0,23.5,13Zm0,2a4.5,4.5,0,0,1,4.38,3.5H19.12A4.5,4.5,0,0,1,23.5,15Z'/><path d='M21,11h6a1,1,0,0,0,0-2H21a1,1,0,0,0,0,2Z'/></g></svg>
</b:includable>
<!--[ blogger by DailyYouth ]-->
<b:includable id='blogger-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'/><path d='M22,15H20.44A3.91,3.91,0,0,0,21,13a4,4,0,0,0-4-4H13a4,4,0,0,0-4,4v6a4,4,0,0,0,4,4h6a4,4,0,0,0,4-4V16A1,1,0,0,0,22,15ZM11,13a2,2,0,0,1,2-2h4a2,2,0,0,1,0,4H11Zm10,6a2,2,0,0,1-2,2H13a2,2,0,0,1-2-2V17H21Z'/></g></svg>
</b:includable>
<!--[ dribbble by DailyYouth ]-->
<b:includable id='dribbble-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M30,16A14,14,0,1,0,16,30a16,16,0,0,0,1.7-.11A1.09,1.09,0,0,0,18,30a1,1,0,0,0,.59-.21A14,14,0,0,0,30,16Zm-2.63,3.8a14,14,0,0,0-6.56-2.67,22.26,22.26,0,0,0-1-4.37,14,14,0,0,0,5.47-4.41A11.92,11.92,0,0,1,27.37,19.8ZM23.79,6.89a11.86,11.86,0,0,1-4.77,4,22,22,0,0,0-4.78-6.74A12.79,12.79,0,0,1,16,4,11.89,11.89,0,0,1,23.79,6.89ZM11.93,4.73l0,0a20,20,0,0,1,5.19,6.82A12.13,12.13,0,0,1,14,12,11.9,11.9,0,0,1,6.2,9.1,12,12,0,0,1,11.93,4.73ZM4,16a12,12,0,0,1,1.17-5.14A14,14,0,0,0,14,14a14,14,0,0,0,3.89-.55A19.5,19.5,0,0,1,18.77,17,14,14,0,0,0,7,23.86,11.89,11.89,0,0,1,4,16Zm4.44,9.31A12,12,0,0,1,19,19c0,.33,0,.67,0,1a19.68,19.68,0,0,1-1.64,7.92A12.12,12.12,0,0,1,16,28,11.94,11.94,0,0,1,8.44,25.31ZM19.72,27.4A21.73,21.73,0,0,0,21,20c0-.28,0-.55,0-.83a12,12,0,0,1,5.58,2.52A12.06,12.06,0,0,1,19.72,27.4Z'/></g></svg>
</b:includable>
<!--[ facebook by DailyYouth ]-->
<b:includable id='facebook-i-icon'>
<svg viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H17V18h4a1,1,0,0,0,0-2H17V14a2,2,0,0,1,2-2h2a1,1,0,0,0,0-2H19a4,4,0,0,0-4,4v2H12a1,1,0,0,0,0,2h3v9H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'/></svg>
</b:includable>
<!--[ messenger by DailyYouth ]-->
<b:includable id='messenger-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M21.4,13.2l-3.31,2.48-3.38-3.39a1,1,0,0,0-1.31-.09l-4,3a1,1,0,1,0,1.2,1.6l3.31-2.48,3.38,3.39a1,1,0,0,0,1.31.09l4-3a1,1,0,1,0-1.2-1.6Z'/></g></svg>
</b:includable>
<!--[ whatsapp by DailyYouth ]-->
<b:includable id='whatsapp-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></g></svg>
</b:includable>
<!--[ youtube by DailyYouth ]-->
<b:includable id='youtube-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z'/><path d='M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z'/></g></svg>
</b:includable>
<!--[ instagram by DailyYouth ]-->
<b:includable id='instagram-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M22,3H10a7,7,0,0,0-7,7V22a7,7,0,0,0,7,7H22a7,7,0,0,0,7-7V10A7,7,0,0,0,22,3Zm5,19a5,5,0,0,1-5,5H10a5,5,0,0,1-5-5V10a5,5,0,0,1,5-5H22a5,5,0,0,1,5,5Z'/><path d='M16,9.5A6.5,6.5,0,1,0,22.5,16,6.51,6.51,0,0,0,16,9.5Zm0,11A4.5,4.5,0,1,1,20.5,16,4.51,4.51,0,0,1,16,20.5Z'/><circle cx='23' cy='9' r='1'/></g></svg>
</b:includable>
<!--[ twitter by DailyYouth ]-->
<b:includable id='twitter-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M13.35,28A13.66,13.66,0,0,1,2.18,22.16a1,1,0,0,1,.69-1.56l2.84-.39A12,12,0,0,1,5.44,4.35a1,1,0,0,1,1.7.31,9.87,9.87,0,0,0,5.33,5.68,7.39,7.39,0,0,1,7.24-6.15,7.29,7.29,0,0,1,5.88,3H29a1,1,0,0,1,.9.56,1,1,0,0,1-.11,1.06L27,12.27c0,.14,0,.28-.05.41a12.46,12.46,0,0,1,.09,1.43A13.82,13.82,0,0,1,13.35,28ZM4.9,22.34A11.63,11.63,0,0,0,13.35,26,11.82,11.82,0,0,0,25.07,14.11,11.42,11.42,0,0,0,25,12.77a1.11,1.11,0,0,1,0-.26c0-.22.05-.43.06-.65a1,1,0,0,1,.22-.58l1.67-2.11H25.06a1,1,0,0,1-.85-.47,5.3,5.3,0,0,0-4.5-2.51,5.41,5.41,0,0,0-5.36,5.45,1.07,1.07,0,0,1-.4.83,1,1,0,0,1-.87.2A11.83,11.83,0,0,1,6,7,10,10,0,0,0,8.57,20.12a1,1,0,0,1,.37,1.05,1,1,0,0,1-.83.74Z'/></g></svg>
</b:includable>
<!--[ linkedin by DailyYouth ]-->
<b:includable id='linkedin-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'/><path d='M11,14a1,1,0,0,0-1,1v6a1,1,0,0,0,2,0V15A1,1,0,0,0,11,14Z'/><path d='M19,13a4,4,0,0,0-4,4v4a1,1,0,0,0,2,0V17a2,2,0,0,1,4,0v4a1,1,0,0,0,2,0V17A4,4,0,0,0,19,13Z'/><circle cx='11' cy='11' r='1'/></g></svg>
</b:includable>
<!--[ tiktok by DailyYouth ]-->
<b:includable id='tiktok-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'/><path d='M22,12a3,3,0,0,1-3-3,1,1,0,0,0-2,0V19a3,3,0,1,1-3-3,1,1,0,0,0,0-2,5,5,0,1,0,5,5V13a4.92,4.92,0,0,0,3,1,1,1,0,0,0,0-2Z'/></g></svg>
</b:includable>
<!--[ telegram by DailyYouth ]-->
<b:includable id='telegram-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z'/></g></svg>
</b:includable>
<!--[ pinterest by DailyYouth ]-->
<b:includable id='pinterest-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26a12,12,0,0,1-3.81-.63l1.2-4.81A7.93,7.93,0,0,0,16,23a8.36,8.36,0,0,0,1.4-.12,8,8,0,1,0-9.27-6.49,1,1,0,0,0,2-.35,6,6,0,1,1,3.79,4.56L15,16.24A1,1,0,1,0,13,15.76l-2.7,10.81A12,12,0,1,1,16,28Z'/></g></svg>
</b:includable>
<!--[ tumblr by DailyYouth ]-->
<b:includable id='tumblr-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z'/><path d='M20,19a1,1,0,0,0-1,1,1,1,0,0,1-1,1H17a1,1,0,0,1-1-1V15h3a1,1,0,0,0,0-2H16V10a1,1,0,0,0-2,0v3H12a1,1,0,0,0,0,2h2v5a3,3,0,0,0,3,3h1a3,3,0,0,0,3-3A1,1,0,0,0,20,19Z'/></g></svg>
</b:includable>
<!--[ line by DailyYouth ]-->
<b:includable id='line-i-icon'>
<svg viewBox='0 0 32 32'><g><path d='M16,2C8.28,2,2,7.38,2,14c0,5.48,4.34,10.24,10.44,11.6L12,28.87a1,1,0,0,0,.37.91A1,1,0,0,0,13,30a1,1,0,0,0,.35-.06C14,29.68,30,23.58,30,14,30,7.38,23.72,2,16,2ZM14.22,27.4l.33-2.47a1,1,0,0,0-.83-1.12C8.09,22.91,4,18.78,4,14,4,8.49,9.38,4,16,4S28,8.49,28,14C28,20.61,18.14,25.66,14.22,27.4Z'/><path d='M10,15.25H8.75V12a.75.75,0,0,0-1.5,0v4a.76.76,0,0,0,.75.75h2a.75.75,0,0,0,0-1.5Z'/><path d='M24,12.75a.75.75,0,0,0,0-1.5H22a.76.76,0,0,0-.75.75v4a.76.76,0,0,0,.75.75h2a.75.75,0,0,0,0-1.5H22.75v-.5H24a.75.75,0,0,0,0-1.5H22.75v-.5Z'/><path d='M13,11.25a.76.76,0,0,0-.75.75v4a.75.75,0,0,0,1.5,0V12A.76.76,0,0,0,13,11.25Z'/><path d='M19,11.25a.76.76,0,0,0-.75.75v1.75l-1.65-2.2a.75.75,0,0,0-1.35.45v4a.75.75,0,0,0,1.5,0V14.25l1.65,2.2a.75.75,0,0,0,.6.3.67.67,0,0,0,.24,0,.75.75,0,0,0,.51-.71V12A.76.76,0,0,0,19,11.25Z'/></g></svg>
</b:includable>
<!--[ github by Bombasticon ]-->
<b:includable id='github-b-icon'>
<svg viewBox='0 0 32 32'><g><path d='M16,3a13,13,0,0,0-3.46,25.53,1,1,0,1,0,.53-1.92,11,11,0,1,1,7-.4,15.85,15.85,0,0,0-.3-3.92A6.27,6.27,0,0,0,24.68,16a6.42,6.42,0,0,0-1.05-3.87,7.09,7.09,0,0,0-.4-3.36,1,1,0,0,0-1.1-.67,8,8,0,0,0-3.37,1.28A11.35,11.35,0,0,0,16,9a13.09,13.09,0,0,0-3,.43A5.74,5.74,0,0,0,9.62,8.25a1,1,0,0,0-1,.66,7.06,7.06,0,0,0-.37,3.19A7.15,7.15,0,0,0,7.2,16a6.66,6.66,0,0,0,5,6.28,7.43,7.43,0,0,0-.15.79c-1,.06-1.58-.55-2.32-1.48a3.45,3.45,0,0,0-1.94-1.53,1,1,0,0,0-1.15.76A1,1,0,0,0,7.35,22c.16,0,.55.52.77.81a4.74,4.74,0,0,0,3.75,2.25,4.83,4.83,0,0,0,1.3-.18h0a1,1,0,0,0,.29-.14l0,0a.72.72,0,0,0,.18-.21.34.34,0,0,0,.08-.09.85.85,0,0,0,.06-.17,1.52,1.52,0,0,0,.06-.2v0a4.11,4.11,0,0,1,.46-1.91,1,1,0,0,0-.76-1.65A4.6,4.6,0,0,1,9.2,16a4.84,4.84,0,0,1,.87-3,1,1,0,0,0,.24-.83,5,5,0,0,1,0-1.85,3.59,3.59,0,0,1,1.74.92,1,1,0,0,0,1,.23A12.49,12.49,0,0,1,16,11a9.91,9.91,0,0,1,2.65.43,1,1,0,0,0,1-.18,5,5,0,0,1,2-1,4.11,4.11,0,0,1,0,1.91,1.05,1.05,0,0,0,.32,1A4,4,0,0,1,22.68,16a4.29,4.29,0,0,1-4.41,4.46,1,1,0,0,0-.94.65,1,1,0,0,0,.28,1.11c.59.51.5,4,.47,5.36a1,1,0,0,0,.38.81,1,1,0,0,0,.62.21,1.07,1.07,0,0,0,.25,0A13,13,0,0,0,16,3Z'/></g></svg>
</b:includable>
<!--[ blank social ]-->
<b:includable id='blank-s-icon'>
<svg viewBox='0 0 32 32'><path d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z'/><path d='M16,9.5A6.5,6.5,0,1,0,22.5,16,6.51,6.51,0,0,0,16,9.5Zm0,11A4.5,4.5,0,1,1,20.5,16,4.51,4.51,0,0,1,16,20.5Z'/></svg>
</b:includable>
<!--[ admin-icon ]-->
<b:includable id='admin-icon'>
<svg viewBox='0 0 24 24'><path d='M15.29,8.85l-4.73,4.74L8.71,11.73a1,1,0,0,0-1.42,1.42l2.56,2.56a1,1,0,0,0,1.42,0l5.44-5.44a1,1,0,1,0-1.42-1.42ZM12,2A10,10,0,0,0,2,12a9.89,9.89,0,0,0,2.26,6.33l-2,2a1,1,0,0,0-.21,1.09A1,1,0,0,0,3,22h9A10,10,0,0,0,12,2Zm0,18H5.41l.93-.93a1,1,0,0,0,0-1.41A8,8,0,1,1,12,20Z'/></svg>
</b:includable>
<!--[ Default markups (applies to all widgets) ]-->
<!--[ Ad unit ]-->
<b:includable id='defaultAdUnit'>
<ins class='adsbygoogle' data-ad-format='auto' expr:data-ad-client='data:adClientId ?: data:blog.adsenseClientId' expr:data-ad-host='data:blog.adsenseHostId' expr:data-analytics-uacct='data:blog.analyticsAccountNumber' expr:style='data:style ?: "display: block;"'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</b:includable>
<!--[ In-feed ad ]-->
<b:includable id='post-adI'>
<div class='p nAd noPrint'>
<b:comment>Paste your ad code right under this tag</b:comment>
</div>
</b:includable>
<!--[ Before article ad ]-->
<b:includable id='post-adT'>
<div class='nAd noPrint'>
<b:comment>Paste your ad code right under this tag</b:comment>
</div>
</b:includable>
<!--[ After article ad ]-->
<b:includable id='post-adB'>
<div class='nAd noPrint'>
<b:comment>Paste your ad code right under this tag</b:comment>
</div>
</b:includable>