:root{color-scheme:light dark;--bgcolor-l:#FFF;--txtcolor-l:#000;--bgcolor-d:#000;--txtcolor-d:#CCC;--bgcolor:var(--bgcolor-l);--txtcolor:var(--txtcolor-l);--primColor:#39C5BB;--primGrad:linear-gradient(135deg, #4DC, #3CB)}@media (prefers-color-scheme:dark){:root{--bgcolor:var(--bgcolor-d);--txtcolor:var(--txtcolor-d)}}@media(min-width:768px){.container{max-width:720px}}.logo{height:4rem}body{background-color:var(--bgcolor);color:var(--txtcolor);transition-property:background-color,color;transition-duration:.5s}section{position:relative;padding:5rem 0}h1,h2{color:var(--primColor)}h2{position:absolute;top:2rem;transition-property:left opacity;transition-duration:.2s;left:0;opacity:1}h2.hover-disp{left:2rem;opacity:0}section:hover h2{left:-2rem;opacity:0}section:hover h2.hover-disp{left:0;opacity:1}a{transition-property:color,transform,box-shadow;transition-duration:.2s}a,a:hover{color:var(--primColor);text-decoration:none}ul{list-style:none;padding-inline-start:0}li{display:inline-block;perspective:500;-webkit-perspective:500}#contactList{display:grid;grid-template-columns:repeat(auto-fill,5rem);grid-gap:1rem .75rem;justify-content:space-between}#contactList li,#videoList li{perspective:100;-webkit-perspective:100}#contactList li a{display:inline-block;width:5rem;height:5rem;border-radius:100%;color:var(--specColor,var(--primColor));box-shadow:0 0 4px 1px var(--specColor,var(--primColor)) inset;text-align:center;font-size:.75rem;padding-top:1rem}#contactList li a:hover{color:#fff;box-shadow:none}#videoList{display:grid;grid-template-columns:repeat(auto-fill,4rem);grid-gap:.5rem;justify-content:space-between}#videoList li a{display:flex;align-items:center;justify-content:center;font-size:150%;color:#fff;width:4rem;height:3rem;background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:.5rem;box-shadow:0 0 4px 1px var(--specColor) inset,0 0 0 4px var(--bgcolor) inset}#videoList li a:hover{box-shadow:0 0 8px 2px var(--specColor) inset,0 0 0 var(--bgcolor) inset}#videoList li:last-child a{color:var(--specColor)}#videoList li:last-child a:hover{color:#fff;box-shadow:none}#videoList li:not(:last-child) a::before{background:0 0!important}.txt-shadow{text-shadow:0 0 8px #000}#biliVideoFrame{width:100%;height:200px;padding:4px;border:none;box-shadow:0 0 4px 1px #f79 inset;border-radius:.5rem}@media(min-width:576px){#biliVideoFrame{height:250px}#videoList{grid-template-columns:repeat(auto-fill,5rem);grid-gap:.5rem}#videoList li a{font-size:200%;width:5rem;height:4rem}}@media(min-width:768px){#biliVideoFrame{height:420px}}#demoList a,#friendList a{display:block;position:relative;border-radius:.5rem;color:var(--specColor,var(--primColor));box-shadow:0 0 4px 1px var(--specColor,var(--primColor)) inset}#friendList a{text-align:center}#demoList li a:hover,#friendList li a:hover{color:#fff;box-shadow:none}.friend-logo{width:4rem;height:4rem;border-radius:50%}.friend-title{position:relative;top:.25rem}.friend-desc{font-size:75%;opacity:.75}#contactList li a::before,#demoList li a::before,#friendList li a::before,#videoList li a::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:.5rem;background:var(--specGrad,var(--primGrad));box-shadow:0 .5rem 20px -5px var(--specColor,var(--primColor));opacity:.05;z-index:-1;transition:opacity .2s}#contactList li a::before{border-radius:50%}#contactList li a:hover::before,#demoList li a:hover::before,#friendList li a:hover::before,#videoList li a:hover::before{opacity:.8}.soc-mail,.spcolor-cyan{--specColor:var(--primColor);--specGrad:var(--primGrad)}.soc-qq,.soc-tg,.spcolor-blue{--specColor:#19D;--specGrad:linear-gradient(135deg, #3BF, #08C)}#videoList,.soc-bili,.spcolor-pink{--specColor:#F79;--specGrad:linear-gradient(135deg, #F9B, #E68)}.soc-qzone,.spcolor-yellow{--specColor:#FB2;--specGrad:linear-gradient(135deg, #FD3, #EA1)}.soc-github,.spcolor-gray{--specColor:#666;--specGrad:linear-gradient(135deg, #888, #555)}i{display:inline-block}i.soc-ic{font-size:2rem}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.rot-anim{animation:rotate 1s linear infinite}#btnTheme{outline:0;position:fixed;top:1rem;right:1rem;border:1px solid #888;background:0 0;border-radius:100%;padding:0;width:1.5rem;height:1.5rem;color:#888}.tooltip{top:.8rem!important;left:-.5rem!important}.tooltip.show{opacity:1!important}.tooltip .arrow::before{border-left-color:var(--primColor);border-width:0 0 .75rem .75rem;top:-.5rem}.tooltip .tooltip-inner{background-color:var(--primColor);border-radius:0}.ghs{position:relative;top:-.2rem;width:1rem}.text-beian{color:#888;margin-left:.5rem;margin-right:.5rem}