.search{position:absolute;top:0;right:0}.search .box{width:200px;position:relative;z-index:5;visibility:hidden;opacity:0;transition:.3s}.search .box input{border:none;height:40px;padding:0 10px;color:var(--front-color)}.search .icon{position:absolute;top:50%;right:10px;width:20px;height:20px;transform:translateY(-50%);transition:.3s;cursor:pointer}.search .icon:before{border:solid 2px var(--front-color);width:100%;height:100%;border-radius:50%;box-sizing:border-box}.search .icon:after,.search .icon:before{content:"";position:absolute;transition:.3s}.search .icon:after{width:2px;height:7px;background-color:var(--front-color);bottom:0;right:0;transform:rotate(-45deg)}.search.focus .box{visibility:visible;opacity:1}.search.focus .icon{width:200px;height:40px;right:0}.search.focus .icon:before{border-radius:4px}.search.focus .icon:after{opacity:0}#footer{padding:30px 0;text-align:center;font-size:12px}#footer .copy{display:flex;align-items:center;justify-content:center}#footer a{text-decoration:underline;margin:0 10px}#footer img{width:16px}#app{background-color:var(--background-color);height:auto;min-height:100%;color:var(--front-color);font-size:16px}.logo{font-size:24px;display:inline-block;vertical-align:middle;margin-right:20px}nav{position:-webkit-sticky;position:sticky;top:0;left:0;width:100%;height:var(--header-height);line-height:var(--header-height);border-bottom:1px solid var(--border-color);z-index:100;background-color:var(--box-color-op80);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px)}nav a{padding:0 20px;margin-right:20px}nav a:hover{text-decoration:underline}.article-item{background-color:var(--box-color);border-radius:4px;transition:.5s;height:260px;position:relative;overflow:hidden;position:absolute;left:0;width:100%}.article-item:hover{transition:.2s;box-shadow:0 5px 15px rgba(0,0,0,.15)}.article-item img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.article-item h2{top:20px;left:0;transition:.6s cubic-bezier(.645,.045,.355,1);padding-left:20px}.article-item .date,.article-item h2{position:absolute;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.5)}.article-item .date{bottom:20px;right:20px}.home .wrapper{display:flex;justify-content:space-between}.home main{width:880px;position:relative}.home aside,.home main{transition:.5s}.home aside.hide,.home main.hide{opacity:0}.home .box{position:fixed;z-index:90;opacity:0;pointer-events:none;height:260px;will-change:top,left,opacity}.home .box.ani h2{top:150px;font-size:52px;left:50%;padding-left:0;transform:translate(-50%);white-space:nowrap}:root{--front-color:#222;--background-color:#f5f5f5;--box-color:#fff;--box-color-op80:hsla(0,0%,100%,0.8);--border-color:#e5e5e5;--header-height:70px}@media (prefers-color-scheme:dark){:root{--front-color:#ddd;--background-color:#222;--box-color-op80:rgba(34,34,34,0.8);--box-color:#333;--border-color:#444}}body,h1,h2,h3,html,li,p,ul{margin:0;padding:0}html{overflow:hidden}body,html{height:100%}body{overflow-x:hidden;overflow-y:auto;perspective:1px}ul{list-style:none}a{text-decoration:none;color:var(--front-color)}.wrapper{width:90%;max-width:1000px;margin:0 auto;position:relative;z-index:5}input,textarea{border:solid 1px var(--border-color);background:none;box-shadow:none;outline:none;padding:10px;width:100%;box-sizing:border-box}