.grid[data-astro-cid-yvqpge4l]{grid-template:"name name name""github linkedin linkedin"224px"career career career""qobuz qobuz switch"264px"blog blog blog"/calc(50% - 16px) 34px calc(50% - 50px);grid-auto-flow:row;gap:16px;width:100%;max-width:350px;margin-inline:auto;display:grid;container:main-grid/inline-size;@container main-container (width>=768px){grid-template:"name name github"224px"name name linkedin""career career career""qobuz blog blog"224px"switch blog blog"140px/calc(50% - 16px) 34px calc(50% - 50px);max-width:768px}@container main-container (width>=1024px){grid-template:"name name name blog blog"200px"linkedin github github blog blog"200px"career career switch switch qobuz"200px/274px 86px 172px 36px 274px;max-width:906px}}.grid-box[data-astro-cid-oi6onqw5]{visibility:hidden;padding-block:var(--_box-padding-block,24px);padding-inline:var(--_box-padding-inline,32px);background:light-dark(var(--color-light-background-200),var(--color-dark-selection-200));opacity:0;border-radius:16px;animation-name:animate-areas-fade-in;animation-duration:.5s;animation-fill-mode:forwards;transform:translateY(8px);&:where(.is-link){color:light-dark(var(--color-light-background-100),var(--color-dark-foreground-100));background:light-dark(var(--color-light-comment-100),var(--color-dark-comment-100));justify-content:center;align-items:center;display:flex;position:relative;& *{pointer-events:none}& svg{width:80px;height:80px;@container main-grid (width>=768px){width:110px;height:110px}}}& p{font-family:Nanum Pen Script,cursive;font-size:var(--_text-font-size,1rem);&:not(:last-of-type){margin-block-end:16px}}& .marker{font-family:Nanum Pen Script,cursive;font-size:var(--_marker-font-size,1rem);color:light-dark(var(--color-light-pink-100),var(--color-dark-pink-100));font-weight:400;line-height:1;display:inline-flex;position:relative;&:is(a){text-decoration-thickness:2px}}}.grid-box-link-icon[data-astro-cid-oi6onqw5]{width:24px;height:24px;color:light-dark(var(--color-light-background-100),var(--color-dark-foreground-100));position:absolute;inset:auto auto 16px 16px;& svg{stroke-width:3px;width:100%;height:100%}}@keyframes animate-areas-fade-in{0%{visibility:hidden;opacity:0;transform:translateY(8px)}to{visibility:visible;opacity:1;transform:translateY(0)}}body{& figure{overflow:hidden}& [data-ui-grid-area=career]{--_animation-delay-career:.8s;--_marker-font-size:2.5rem;--_text-font-size:2.25rem;animation-delay:var(--_animation-delay-career);grid-area:career;align-items:center;display:flex;position:relative;@container main-grid (width>=768px){--_animation-delay-career:.8s;--_text-font-size:2rem}@container main-grid (width>=906px){--_animation-delay-career:1.1s}&:before{content:"";border-left:34px solid #0000;border-right:34px solid #0000;border-bottom:34px solid light-dark(var(--color-light-background-100),var(--color-dark-selection-100));z-index:1;width:0;height:0;display:block;position:absolute;inset:auto -23px -6px auto;transform:rotate(135deg)}&:after{content:"";z-index:0;background:light-dark(var(--color-light-comment-100),var(--color-dark-comment-100));border-start-start-radius:16px;width:44px;height:44px;display:block;position:absolute;inset:auto 0 0 auto}}& [data-ui-grid-area=blog]{--_animation-delay-blog:1.1s;--_marker-font-size:2.8rem;--_text-font-size:2.5rem;text-align:right;animation-delay:var(--_animation-delay-blog);grid-area:blog;position:relative;@container main-grid (width>=768px){--_animation-delay-blog:.9s;--_text-font-size:2rem}@container main-grid (width>=906px){--_animation-delay-blog:.6s}&:before{content:"";border-left:34px solid #0000;border-right:34px solid #0000;border-bottom:34px solid light-dark(var(--color-light-background-100),var(--color-dark-selection-100));z-index:1;width:0;height:0;display:block;position:absolute;inset:-6px auto auto -23px;transform:rotate(315deg)}&:after{content:"";z-index:0;background:light-dark(var(--color-light-comment-100),var(--color-dark-comment-100));border-end-end-radius:16px;width:47px;height:47px;display:block;position:absolute;inset:0 auto auto 0}& figure{width:calc(100% + 80px);height:240px;margin-block-start:32px;margin-inline:auto;position:relative;inset-inline-start:-40px;@container main-grid (width>=768px){width:354px;height:230px;margin-block-start:0;margin-inline:0;position:absolute;inset:auto 16px 8px auto}@container main-grid (width>=906px){inset:auto -14px 12px auto}& img{width:100%;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;inset:0;&.is-first-table{animation-name:animate-image-table-one;animation-duration:2s}&.is-second-table{animation-name:animate-image-table-two;animation-duration:2s}}}& p{max-width:250px;margin-inline-start:auto;@container main-grid (width>=906px){max-width:none}}}& [data-ui-grid-area=qobuz]{--_animation-delay-qobuz:1s;animation-delay:var(--_animation-delay-qobuz);grid-area:qobuz;@container main-grid (width>=768px){--_animation-delay-qobuz:1s}@container main-grid (width>=906px){--_animation-delay-qobuz:.9s}}& [data-ui-grid-area=github]{--_animation-delay-github:.6s;animation-delay:var(--_animation-delay-github);grid-area:github;@container main-grid (width>=768px){--_animation-delay-github:.6s}@container main-grid (width>=906px){--_animation-delay-github:.8s}}& [data-ui-grid-area=linkedin]{--_animation-delay-linkedin:.7s;animation-delay:var(--_animation-delay-linkedin);grid-area:linkedin;@container main-grid (width>=768px){--_animation-delay-linkedin:.7s}@container main-grid (width>=906px){--_animation-delay-linkedin:.7s}}& [data-ui-grid-area=name]{--_animation-delay-name:.5s;--_marker-font-size:3rem;--_text-font-size:2.25rem;animation-delay:var(--_animation-delay-name);flex-direction:column;grid-area:name;align-items:center;display:flex;@container main-grid (width>=768px){--_animation-delay-name:.5s;--_text-font-size:2.1rem}@container main-grid (width>=906px){--_animation-delay-name:.5s;flex-direction:row}& p{text-align:center;max-width:260px;@container main-grid (width>=906px){text-align:left;max-width:calc(100% - 236px)}}& figure{width:273px;height:298px;position:relative;inset-block-end:-24px;@container main-grid (width>=906px){width:243px;height:268px;margin-inline:0;position:absolute;inset:auto 24px 0 auto}& img{height:100%;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;inset:0;&.is-second-glass{animation-name:animate-image-glass-two;animation-duration:7s}}}}& [data-ui-grid-area=switch]{--_box-padding-block:0;--_box-padding-inline:0;--_animation-delay-switch:.9s;animation-delay:var(--_animation-delay-switch);grid-area:switch;justify-content:center;align-items:center;display:flex;@container main-grid (width>=768px){--_animation-delay-switch:1.1s}@container main-grid (width>=906px){--_animation-delay-switch:1s}& button{background:0 0;width:100%;height:100%}& svg{width:56px;height:56px}}}@keyframes animate-image-table-one{0%,50%{opacity:1;visibility:visible}50.01%,to{opacity:0;visibility:hidden}}@keyframes animate-image-table-two{0%,50%{opacity:0;visibility:hidden}50.01%,to{opacity:1;visibility:visible}}@keyframes animate-image-glass-two{0%{opacity:0;visibility:hidden}24%{opacity:0;visibility:hidden}25%{opacity:1;visibility:visible}29%{opacity:1;visibility:visible}30%{opacity:0;visibility:hidden}49%{opacity:0;visibility:hidden}50%{opacity:1;visibility:visible}54%{opacity:1;visibility:visible}55%{opacity:0;visibility:hidden}59%{opacity:0;visibility:hidden}60%{opacity:1;visibility:visible}64%{opacity:1;visibility:visible}65%{opacity:0;visibility:hidden}84%{opacity:0;visibility:hidden}85%{opacity:1;visibility:visible}89%{opacity:1;visibility:visible}90%{opacity:0;visibility:hidden}to{opacity:0;visibility:hidden}}