@keyframes fadeout{0%{outline:solid .8em var(--alttextcolor)}to{outline:0}}:root{--bgcolor:#F4D11D;--altbgcolor:#F6F5BD;--textcolor:#333;--alttextcolor:#000;--iconsprite:url(../img/iconsprite.png)}*,html{scroll-behavior:smooth;box-sizing:border-box}body{color:var(--textcolor);background-color:var(--bgcolor);font-family:Lato,sans-serif;max-width:800px;min-width:280px;margin:0 auto;overflow-y:scroll}a[href=\#],a[href=\#top]{text-align:right;padding-right:1em;border-radius:.3em 0}a[href=\#]:focus,a[href=\#]:hover,a[href=\#top]:focus,a[href=\#top]:hover{background-color:var(--altbgcolor);color:var(--textcolor)}a[href$=".pdf"]{background:var(--iconsprite) 0 -150px no-repeat;padding-left:20px;display:inline-flex}a[href^="http://"],a[href^="https://"]{background:var(--iconsprite) 0 -125px no-repeat;padding-left:20px;display:inline-flex;line-height:1.5}a[href^="mailto:"]{background:var(--iconsprite) 0 -100px no-repeat;padding-left:24px}a[href^="http://www.facebook.com"],a[href^="https://www.facebook.com"]{background:var(--iconsprite) 0 0 no-repeat;padding-left:20px}a[href^="http://twitter.com"],a[href^="https://twitter.com"]{background:var(--iconsprite) 0 -50px no-repeat;padding-left:22px}a[href^="http://www.instagram.com"],a[href^="https://www.instagram.com"]{background:var(--iconsprite) 0 -25px no-repeat;padding-left:20px}a[href^="http://www.youtube.com"],a[href^="http://youtu.be"],a[href^="https://www.youtube.com"],a[href^="https://youtu.be"]{background:var(--iconsprite) 0 -75px no-repeat;padding-left:28px}a{text-decoration:underline solid 2px var(--bgcolor)}a,p{line-height:1.5}a:hover,code{background-color:var(--bgcolor)}a,a:hover{color:var(--alttextcolor)}a:hover{text-decoration-color:var(--alttextcolor)}button:active{border:solid var(--alttextcolor) .3em;outline:var(--bgcolor) solid .3em}button:hover{color:var(--bgcolor);background-color:var(--alttextcolor)}button{border:solid var(--textcolor) .3em;border-radius:.5em 0}.container{display:grid;gap:1em}h1,h2{font-family:Oswald,sans-serif}header{font-size:large;text-transform:uppercase;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:flex-end}header div{display:block;line-height:1;margin:auto}header div p{text-transform:none}header img{max-width:100%;align-self:center}.block{display:block;margin:.5em}.center{text-align:center}.right{text-align:right}footer,header,navigation{padding:1em;text-align:center}article,content,footer,header,navigation,section{grid-column:1;background-color:var(--altbgcolor);min-width:280px;border-radius:1em 0}navigation{display:grid;grid-template-columns:repeat(4,1fr);justify-content:space-around;gap:.5em;align-items:center;font-size:larger}.right,navigation ul,navigation ul li{display:contents}navigation a,navigation ul li a{padding:1em 0;border-radius:0 .5em;width:100%;text-decoration:underline var(--bgcolor)}navigation a:hover,navigation ul li a:hover{background-color:var(--bgcolor);text-decoration:overline}li,nav ul li{list-style-type:'\25a0\a0\a0';margin:1em 0}.content,article,content,section{padding:0 2em 1em;text-align:left}.split-2-1{display:grid;grid-template-columns:2fr 1fr}aside{text-align:right}aside img{max-height:180px;padding:1em 0 0}.social{display:flex;flex-flow:row wrap;justify-content:space-around}.social a{margin-bottom:.7em}.quote{border-left:solid 2px #aaa;padding-left:2em;margin-left:0;display:block}date,small,time{font-weight:700;font-style:italic}date,time{position:relative;top:1em;float:right}small{padding:0 2em;display:block}button,mark{background-color:var(--textcolor);color:var(--altbgcolor)}code{margin:0 5px;font-size:larger;user-select:all}img{max-width:100%;height:auto}header:hover img#a{content:url(../img/hankypeng_b.png)}header:hover img#b{content:url(../img/hankypeng_a.png)}summary::marker{content:none}summary{display:block;border-radius:0 .5em}details summary span{display:flex;align-items:baseline;border-radius:0 .8em;margin-top:.9em}details summary span:focus,details summary span:hover{background:var(--bgcolor);color:var(--alttextcolor)}details summary span::after{content:'\a0\a0 — Click to expand'}details[open] summary span::after{content:''}summary span{display:list-item}summary ::before{content:'\A0\A0'}:target,summary span:target{background-color:var(--altbgcolor);animation:fadeout 2s ease-in 1}.theme{position:fixed;right:0;bottom:10px;background-color:var(--altbgcolor);border:solid var(--altbgcolor) .6em;border-radius:.4em 0 0 .4em;outline:var(--textcolor) solid;cursor:pointer;display:none}details.theme[open]{cursor:grab}.float-right{float:right}@media screen and (max-width:800px){navigation{grid-template-columns:repeat(3,1fr);gap:0}.social{max-width:425px;margin:0 auto}header{font-size:2.3vw;line-height:1}.split-2-1 .block,.split-2-1 .right img,.split-2-1>aside{text-align:center}.split-2-1{display:block}}@media screen and (max-width:480px){navigation{grid-template-columns:repeat(2,1fr);gap:0}navigation a{padding:.5em 0}header{font-size:3.9vw}header div h1{line-height:1;margin:auto}article,content,footer,header,navigation,section{padding:.6em;margin:.4em}.social{max-width:280px}details summary span h1{display:flex}details summary span{margin:.6em}a[href=\#],a[href=\#top]{margin:0 .4em}li,p{line-height:2.5}.float-right.smallhide{display:none}}