:where(*,:before,:after){margin:0;padding:0;box-sizing:border-box;line-height:1;background-repeat:no-repeat;text-decoration:none;font:inherit}:where(ul,menu){list-style:none}:where(button){border:0;outline:0;background-color:transparent;color:var(--fg-color)}:where(:root){--global-header-height:80px;--outer-space:16px;--base-font-size:14px;--base-font-weight:300}@media screen and (min-width:800px){:root{--outer-space:32px;--base-font-size:18px;--base-font-weight:100}}:where(:root){--bg-color:#000;--fg-color:hsla(0,0%,100%,.6);--secondary-bg-color:hsla(0,0%,100%,.05);--logo-color:#fff;--headline-color:#fff;--tb-bg-color:#000;--link-color:hsla(0,0%,100%,.8);--link-active-color:#fff;--portfolio-item-title-color:#fff;--tag-border-color:hsla(0,0%,100%,.1);--scroll-bar-color:hsla(0,0%,100%,.1)}.site-title .black{display:none}.light{--bg-color:#fff;--fg-color:rgba(0,0,0,.6);--secondary-bg-color:rgba(0,0,0,.05);--logo-color:#000;--headline-color:#000;--link-color:rgba(0,0,0,.9);--link-active-color:#000;--portfolio-item-title-color:#000;--tag-border-color:rgba(0,0,0,.1)}.light .site-title .black{display:block}.light .site-title .white{display:none}.retro{--bg-color:#f13a54;--fg-color:hsla(0,0%,100%,.6);--secondary-bg-color:#f02643;--logo-color:#f4afff;--headline-color:#fff;--link-color:#f4afff;--link-active-color:#fff;--portfolio-item-title-color:#f4afff;--tag-border-color:rgba(0,0,0,.1);body:has(&) .site-title .black{display:none}body:has(&) .site-title .white{display:block}}.cyber{--bg-color:#765390;--fg-color:hsla(0,0%,100%,.6);--secondary-bg-color:#595a8d;--logo-color:#f4afff;--headline-color:#fff;--link-color:#f4afff;--link-active-color:#fff;--portfolio-item-title-color:#f4afff;--tag-border-color:rgba(0,0,0,.1)}body:has(.punk) .site-title .black{display:none}body:has(.punk) .site-title .white{display:block}.green{--bg-color:#69b088;--fg-color:hsla(0,0%,100%,.6);--secondary-bg-color:#bebc84;--logo-color:#b2e08a;--headline-color:#fff;--link-color:#b8ea97;--link-active-color:#fff;--portfolio-item-title-color:#deeba2;--tag-border-color:rgba(0,0,0,.1)}body:has(.green) .site-title .black{display:none}body:has(.green) .site-title .white{display:block}:where(:root){font-family:Noto Sans JP;font-size:var(--base-font-size);font-weight:var(--base-font-weight);overflow-x:clip;overflow-y:scroll}body{position:relative;background-color:var(--bg-color);color:var(--fg-color);overflow-x:clip;transition:all .5s ease}html:has(.open-menu){overflow:hidden}a{color:var(--link-color)}main{min-height:100svh;margin:0;padding:0 var(--outer-space);>header+*{min-height:calc(100svh - var(--global-header-height))}}.site-nav{position:fixed;left:50%;bottom:var(--outer-space);z-index:100;display:flex;justify-content:flex-end;padding:0 var(--outer-space);gap:24px;transform:translateX(-50%);background-color:var(--bg-color);border-radius:50px;box-shadow:0 2px 5px rgba(0,0,0,.1)}.site-nav a{display:block;padding:16px;font-family:Raleway;text-transform:uppercase;&:hover{color:var(--link-active-color);transition:all .5s ease}}.theme-selector{grid-area:theme-selector;position:relative;display:flex;flex-direction:column;gap:16px;padding:calc(var(--outer-space) * 2);width:100%;background-color:var(--bg-color);box-shadow:0 2px 6px rgba(0,0,0,.1);animation:fadeInRight .5s ease;& .active{color:var(--link-active-color);font-weight:700}}.theme-selector ul{display:flex;flex-direction:column;align-items:flex-start;gap:24px}.theme-selector li{display:flex;gap:16px;padding:8px;cursor:pointer;align-items:center}.theme-selector b{color:var(--headline-color);font-family:Raleway;font-size:1.2em;text-transform:uppercase}@keyframes bound{to{transform:translateY(-4px)}}a:hover .site-title{animation:bound .5s ease infinite}.site-title{display:flex;align-items:center}.site-logo{display:block;width:38px;height:auto}.site-title b,.site-title span{display:block;text-indent:-99999px}.global-header{position:-webkit-sticky;position:sticky;top:0;left:0;right:0;z-index:101;display:flex;height:var(--global-header-height);justify-content:space-between;align-items:center;padding:0 var(--outer-space);background-color:var(--bg-color);h1{color:var(--logo-color);text-transform:uppercase;font-weight:700}span{display:block;opacity:.5;font-weight:100}}.site-menu{position:fixed;inset:0 0 0 0;z-index:1000;display:none;backdrop-filter:saturate(100%) blur(20px);-webkit-backdrop-filter:saturate(100%) blur(20px);overflow-y:auto;overflow-x:hidden}@keyframes slideInRight{0%{left:100%;width:0}to{left:-5px;width:auto}}.site-menu a{position:relative;font-family:Raleway;font-size:2em;font-weight:100;text-transform:uppercase;&:hover{color:var(--link-active-color);transition:all .5s ease;&:after{content:"";position:absolute;display:block;top:12px;left:-5px;right:-5px;bottom:10px;background-color:var(--secondary-bg-color);animation:slideInRight .5s ease;opacity:.5}}}.close{position:fixed;top:var(--outer-space);right:var(--outer-space);z-index:100;transition:all .4s ease;&:hover{color:var(--link-active-color)}}@keyframes fadeInUp{0%{opacity:0}to{opacity:1}}.open-menu .site-menu{display:grid;grid-template-areas:"pad-lft portfolio-nav" "pad-lft theme-selector";grid-template-columns:auto minmax(300px,600px);&:before{content:"";grid-area:pad-lft}}.portfolio-nav{grid-area:portfolio-nav;display:grid;grid-gap:32px;gap:32px;padding:calc(var(--outer-space) * 2);padding-bottom:20px;width:100%;background-color:var(--bg-color);box-shadow:0 2px 6px rgba(0,0,0,.1);opacity:0;animation:fadeInRight .5s ease both}footer{min-height:30vh;margin:30vh calc(var(--outer-space) * -1) 0;padding:120px calc(var(--outer-space) * 2);background-color:var(--secondary-bg-color)}.portfolio-item{display:grid;grid-template-areas:"content content" "header info";grid-gap:24px;gap:24px;.title{color:var(--portfolio-item-title-color);font-size:2em;font-weight:200;line-height:1}header{grid-area:header}p{margin-top:24px}}.item-content{grid-area:content;img{width:100%}}.item-info{grid-area:info}.tb-list{display:flex;align-items:stretch;width:100%;padding-bottom:16px;overflow-x:scroll;flex-wrap:nowrap;gap:16px;scroll-snap-type:x mandatory;&::-webkit-scrollbar{height:8px;background-color:transparent}&::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--scroll-bar-color)}}.tb-list li{position:relative;display:flex;align-items:center;flex-shrink:0;width:100%;scroll-snap-align:center;background-color:var(--tb-bg-color);&:has([src$=".gif"]):after{content:"GIF";position:absolute;bottom:16px;left:16px;padding:calc(var(--outer-space) / 2) var(--outer-space);background-color:var(--bg-color)}}.item-tb{display:block;width:100%;height:auto;margin:0 auto;background-color:var(--fg-color)}.tags{display:flex;justify-content:flex-end;align-items:center;gap:24px}.tag{padding:6px 16px;border:1px solid var(--tag-border-color)}.last-updated-at,.tag{font-size:.8em}.jumbotron{position:relative;margin:0 calc(var(--outer-space) * -1)}.jumbotron img{display:block;width:100%;height:auto}.hukidasi-container{position:absolute;top:6vh;right:15vw;z-index:200;color:#000;&:after{content:"";position:absolute;bottom:13px;left:14px;height:20px;width:20px;border-radius:10px;background-color:#faebd7}span{display:block}}@media screen and (orientation:landscape){.hukidasi-container{top:10vh;right:20vw}}.hukidasi{background-color:#faebd7;border-radius:50%;display:flex;width:160px;height:100px;flex-direction:column;justify-content:center;align-items:center;border:2px solid #000;&:before{bottom:-18px;left:-10px;z-index:-11;margin-left:8px;margin-bottom:8px;border-color:transparent transparent #faebd7;border-style:solid;border-width:20px 10px}&:after,&:before{content:"";width:0;height:0;position:absolute;transform:rotate(-130deg);transform-origin:center}&:after{bottom:-17px;left:-8px;z-index:-12;border-color:transparent transparent #000;border-style:solid;border-width:24px 12px}}body:has(.open-menu) .hukidasi-container{display:none}.portfolio-list{display:flex;flex-flow:column nowrap;gap:35vh;margin-top:160px}