.imggallery{position:relative}.imggallery img{height:100%;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--mp3-height) - var(--padding)),calc(100% - var(--mp3-height) * 2 - var(--padding) * 2) calc(100% - var(--mp3-height) - var(--padding)),calc(100% - var(--mp3-height) * 2 - var(--padding) * 2) 100%,0 100%)}.imggallery div{display:flex;gap:var(--padding);position:absolute;bottom:0;right:0;justify-content:flex-end}.imggallery div button{width:var(--mp3-height);height:var(--mp3-height);background-color:#db4804;border:none}.imggallery div button svg{height:100%}.imggallery div button:nth-child(2){background-color:#85ab0a}.btnexpand{display:flex;gap:var(--padding);justify-content:center;height:5rem}.btnexpand a{flex-grow:0;display:flex;text-align:center;justify-content:center;flex-direction:column;aspect-ratio:1/1;background-color:#a3ab9b;color:#0f1624;padding:var(--padding)}.btnexpand a svg{width:2rem;height:2rem;flex-shrink:0;margin:0 auto}.btnexpand a p{flex-grow:0;margin:0}.btnexpand a:nth-child(1){background-color:#f0ae13}.btnexpand a:nth-child(2){background-color:#85ab0a}.btnexpand a:nth-child(3){background-color:#038f9e}@media screen and (min-width: 25rem){.btnexpand a{padding:calc(var(--padding) * 2)}}@media screen and (min-width: 40rem){.btnexpand a p{display:none}.btnexpand a:hover{padding:0 calc(var(--padding) * 5.5)}.btnexpand a:hover p{display:inline-block}}@media screen and (min-width: 40rem){.btnexpand{height:6rem}}@media screen and (min-width: 55rem){.btnexpand{height:7rem}}:root{--desktopwidth: 100%;--h1size: 3.5rem;--header-height: 15rem;--mp3-height: 2.5rem;--header-offset: 2rem;--landing-gap: 5rem;--sitenav-width: 55%}@media screen and (min-width: 25rem){:root{--desktopwidth: 60%;--h1size: 4rem;--header-height: 18rem;--header-offset: 4.5rem;--landing-gap: 3.5rem;--sitenav-width: 46%}}@media screen and (min-width: 40rem){:root{--desktopwidth: 85%;--h1size: 5rem;--header-height: 22rem;--mp3-height: 3rem;--header-offset: 10%;--landing-gap: 4rem}}@media screen and (min-width: 55rem){:root{--desktopwidth: 60%;--mp3-height: 3.5rem;--landing-gap: 5rem}}header{height:var(--header-height)}header img{clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - var(--header-offset)) 100%,calc(100% - var(--mp3-height) - var(--padding) - var(--header-offset)) calc(100% - var(--mp3-height) - var(--padding)),0 calc(100% - var(--mp3-height) - var(--padding)))}header aside{position:relative;bottom:var(--mp3-height);margin-left:var(--padding);height:var(--mp3-height);width:calc(100% - var(--header-offset));clip-path:polygon(0 0,calc(100% - var(--mp3-height) - var(--padding) * 2.5) 0,calc(100% - var(--padding) * 2.5) 100%,0 100%);display:flex;gap:var(--padding)}header aside button{aspect-ratio:1/1;border:0}header aside button svg{height:100%;color:#0f1624;width:calc(var(--padding) * 3.5)}header aside button:nth-child(1){background-color:#038f9e}header aside button:nth-child(2){background-color:#f0ae13}header aside button:nth-child(3){background-color:#85ab0a}header aside marquee{background-color:#0f1624;color:#e5ded9;align-content:center;flex-grow:1;text-wrap:nowrap}header h1{margin:0;font-size:var(--h1size);color:#e5ded9;position:absolute;left:var(--padding);transform-style:preserve-3d;top:calc(var(--header-height) - var(--h1size) - var(--mp3-height) - var(--padding) * 2.5)}header h1:before{content:"b4g.foo";position:absolute;left:0;top:0;transform:translateZ(-1px);-webkit-text-stroke:calc(var(--padding) * 2) #0F1624}main{display:flex;flex-direction:column;width:100%;background-color:#0f1624;color:#e5ded9;gap:var(--padding)}main>div{display:flex;flex-direction:column;gap:var(--padding)}main>div>section{width:100%;margin:auto}main>div:nth-child(odd){background-color:#e5ded9;color:#0f1624;padding:var(--padding) 0}main>div:first-child>section:first-child{background-color:#0f1624;color:#e5ded9;padding:var(--padding) calc(var(--padding) * 2);box-sizing:border-box}main #landing{display:flex}main #landing>a{background-color:#db4804;flex-grow:1;margin-right:calc(var(--padding) * 1.25 - var(--landing-gap));clip-path:polygon(0 0,0 100%,calc(100% - var(--landing-gap)) 100%,100% 0);background-image:url(/_astro/construction.HysakDoa.png);background-size:cover}main #landing nav{display:flex;flex-direction:column;text-align:right;width:var(--sitenav-width);clip-path:polygon(var(--landing-gap) 0,0 100%,100% 100%,100% 0)}main #landing nav a{padding:calc(var(--padding) * 1.5);color:#0f1624;position:relative}main #landing nav a:nth-child(1){background-color:#f0ae13}main #landing nav a:nth-child(2){background-color:#85ab0a}main #landing nav a:nth-child(3){background-color:#038f9e}main #art{display:flex;flex-direction:column;gap:var(--padding)}main #art .imggallery img{height:10rem}main #blog{display:flex;gap:calc(var(--padding) * 2);flex-direction:column;justify-content:center;width:90%}main #blog nav{transform:skew(5deg);display:flex;gap:calc(var(--padding) * 2);margin-left:var(--padding);flex-wrap:wrap}main #blog nav a{position:relative;flex-basis:42%;flex-grow:1;color:#0f1624;background-color:#85ab0a;padding:var(--padding);box-shadow:calc(var(--padding) * -1) var(--padding) #038f9e}main #blog nav a:nth-child(1){background-color:#f0ae13;box-shadow:calc(var(--padding) * -1) var(--padding) #85ab0a}main #blog nav a:nth-child(1):after,main #blog nav a:nth-child(1):before{background-color:#85ab0a}main #blog nav a:nth-child(3){background-color:#038f9e;box-shadow:calc(var(--padding) * -1) var(--padding) #462d87}main #blog nav a:nth-child(3):after,main #blog nav a:nth-child(3):before{background-color:#462d87}main #blog nav a:before,main #blog nav a:after{content:"";display:block;position:absolute;background-color:#038f9e}main #blog nav a:before{left:calc(var(--padding) * -1);top:calc(var(--padding) / 2);width:var(--padding);height:100%;transform:skew(0,-45deg)}main #blog nav a:after{right:calc(var(--padding) / 2);top:100%;height:var(--padding);width:100%;transform:skew(-45deg)}main #blog #statuscafe{transform:skew(5deg);background-color:#e5ded9;color:#0f1624;padding:var(--padding) var(--padding) calc(var(--padding) * 3);clip-path:polygon(0 0,0 calc(100% - var(--padding) * 2),calc(100% - var(--padding) * 4) calc(100% - var(--padding) * 2),calc(100% - var(--padding) * 3) 100%,calc(100% - var(--padding) * 2) calc(100% - var(--padding) * 2),100% calc(100% - var(--padding) * 2),100% 0)}main #code{display:flex;gap:var(--padding);flex-direction:column}main #code .btnexpand{order:2}main #code>div{display:flex;gap:var(--padding);flex-direction:column}main #code>div img{flex-basis:8rem}main #code>div .imggallery{min-height:0;flex-basis:10rem}main #personal{display:flex;flex-direction:column;gap:var(--padding);height:15rem}main #personal h2{font-size:calc(var(--h1size) - 2rem);text-align:center;margin:var(--padding)}main #personal>a{background-color:red;margin:0;width:100%;height:100%}#audioenable{position:fixed;top:0;right:0;width:calc(var(--mp3-height) + var(--padding) * 2.5);aspect-ratio:1/1;border:none;clip-path:polygon(0 0,100% 0,100% 100%);background-color:#e5ded9}#audioenable svg{position:absolute;top:calc(var(--padding));right:calc(var(--padding));width:calc(var(--mp3-height) / 2);color:#038f9e}@media (prefers-color-scheme: dark){header aside marquee,main>div:first-child>section:first-child,footer{background-color:#e5ded9;color:#0f1624}main>div:nth-child(odd){background-color:#0f1624;color:#e5ded9}}@media screen and (min-width: 25rem){main #landing>a{clip-path:polygon(0 0,0 100%,calc(100% - var(--landing-gap) * 2) 100%,100% 0);margin-right:calc(var(--landing-gap) * -2 + var(--padding) * 1.25)}main #landing nav{width:calc(var(--sitenav-width) + var(--landing-gap) / 2);clip-path:polygon(calc(var(--landing-gap) * 2) 0,0 100%,100% 100%,100% 0)}main #art .imggallery img{height:12rem}main #blog{flex-direction:row;gap:var(--padding);padding-bottom:var(--padding)}main #blog #statuscafe{flex-basis:55%;flex-shrink:0}main #personal{display:grid;grid-gap:var(--padding);height:15rem;grid:auto 1fr/1fr 1.75fr 1fr}main #personal h2{margin:var(--padding) 0;grid-area:1/2/1/2}main #personal>a{background-color:red;margin:0;width:100%;height:100%;background-image:url(/_astro/construction.HysakDoa.png);background-size:cover}main #personal a:nth-child(2){grid-area:1/1/span 2/2}main #personal a:nth-child(3){grid-area:2/2/2/2}main #personal a:nth-child(4){grid-area:1/3/span 2/3}}@media screen and (min-width: 40rem){header img{clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - (100% - var(--desktopwidth)) / 2 - var(--header-offset)) 100%,calc(100% - (100% - var(--desktopwidth)) / 2 - var(--header-offset) - var(--mp3-height) - var(--padding)) calc(100% - var(--mp3-height) - var(--padding)),0 calc(100% - var(--mp3-height) - var(--padding)))}header aside{width:calc(var(--desktopwidth) - var(--header-offset) + var(--padding));left:calc((100% - var(--desktopwidth)) / 2 - var(--padding))}header aside button svg{width:calc(100% - var(--padding))}main>div>section{width:var(--desktopwidth)}main #landing nav>a{padding:calc(var(--padding) * 2);color:#0f1624}@keyframes landhover1{0%{width:0;opacity:75%}to{width:90%;opacity:0}}@keyframes landhover2{0%{width:0;opacity:75%}to{width:102%;opacity:0}}@keyframes landhover3{0%{width:0;opacity:75%}to{width:115%;opacity:0}}main #landing nav>a:before{content:"";display:block;position:absolute;right:0;top:0;background-color:#85ab0a;height:100%;width:0;clip-path:polygon(2rem 0,100% 0,100% 100%,2rem 100%,0 50%)}main #landing nav>a:nth-child(2):before{background-color:#038f9e}main #landing nav>a:nth-child(3):before{background-color:#462d87}main #landing nav>a:hover:before{animation:landhover1 2s cubic-bezier(.05,.75,.1,1)}main #landing nav>a:nth-child(2):hover:before{animation-name:landhover2}main #landing nav>a:nth-child(3):hover:before{animation-name:landhover3}main #art .imggallery img{height:15rem}main #blog{width:calc(var(--desktopwidth) - var(--padding) * 2)}main #blog nav a:hover{right:calc(var(--padding) / 3);top:calc(var(--padding) / 3);box-shadow:calc(var(--padding) * -1 / 1.5) calc(var(--padding) / 1.5) #038f9e}main #blog nav a:hover:nth-child(1){box-shadow:calc(var(--padding) * -1 / 1.5) calc(var(--padding) / 1.5) #85ab0a}main #blog nav a:hover:nth-child(3){box-shadow:calc(var(--padding) * -1 / 1.5) calc(var(--padding) / 1.5) #462d87}main #blog nav a:hover:before{width:calc(var(--padding) / 1.5);left:calc(var(--padding) / -1.5);top:calc(var(--padding) / 3)}main #blog nav a:hover:after{height:calc(var(--padding) / 1.5);top:100%;left:calc(var(--padding) / -3)}main #blog nav a:active{right:calc(var(--padding) / 2);top:calc(var(--padding) / 2);box-shadow:calc(var(--padding) * -.5) calc(var(--padding) / 2) #038f9e}main #blog nav a:active:nth-child(1){box-shadow:calc(var(--padding) * -.5) calc(var(--padding) / 2) #85ab0a}main #blog nav a:active:nth-child(3){box-shadow:calc(var(--padding) * -.5) calc(var(--padding) / 2) #462d87}main #blog nav a:active:before{width:calc(var(--padding) / 2);left:calc(var(--padding) / -2);top:calc(var(--padding) / 4)}main #blog nav a:active:after{height:calc(var(--padding) / 2);top:100%;left:calc(var(--padding) / -4)}main #code{flex-direction:row-reverse;height:25rem}main #code .btnexpand{flex-direction:column;flex-shrink:0;height:100%;flex-basis:7rem;justify-content:flex-start}main #code .btnexpand a:hover{padding:calc(var(--padding) * 4) calc(var(--padding) * 2)}main #code>img{flex-basis:15rem}main #code .imggallery{flex-grow:1}main #personal h2{font-size:calc(var(--h1size) - 3rem)}}@media screen and (min-width: 55rem){main #landing nav{width:calc(var(--sitenav-width) + var(--landing-gap) / 1.5)}main #landing nav a{padding:calc(var(--padding) * 3);color:#0f1624}}