.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}.header[data-astro-cid-vxlbulin]{font-family:Montserrat,sans-serif;font-size:1rem;font-weight:500;position:sticky;top:-6rem;left:0;z-index:11;height:5rem;animation:floating_nav linear forwards;animation-timeline:view();animation-range-start:120vh;animation-range-end:150vh;.wrapper{height:100%;display:flex;justify-content:space-between}.logo{font-size:clamp(1.5rem,20vw + .5rem,1.8rem);display:var(--_display-none, flex);align-items:center;transition:color .5s ease;color:transparent;background:linear-gradient(90deg,var(--clr-grd-1),var(--clr-grd-2),var(--clr-grd-2),var(--clr-grd-1));background-clip:text;background-size:200% auto;animation:logo_animation 3s linear infinite;&:is(:hover,:focus){color:var(--clr-accent-1);transform:none}}}@keyframes logo_animation{0%{background-position:200% 0%}to{background-position:0% 0%}}@keyframes floating_nav{0%,to{margin-inline:auto;padding-inline:1rem;width:fit-content;height:5rem;border-radius:100vw;border:1px solid hsl(from var(--clr-tertiary) h s l / .4);box-shadow:var(--shadow);background-color:var(--nav-alt-clr);backdrop-filter:blur(10px);--_display-none: none}to{top:1rem}}.navbar[data-astro-cid-vxlbulin]{ul{list-style-type:none;height:100%;display:flex;gap:2rem;li:is(:hover,:focus-within) .navbar-sub{height:auto;visibility:visible}}.navbar-link{position:relative;height:100%;cursor:pointer;display:flex;align-items:center;color:var(--clr-tertiary);transition:color .5s ease;&:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;display:var(--_display-none, block);background-color:var(--clr-accent-1);transition:all .5s ease;transform:translate(-50%)}&:is(:hover,:focus){color:var(--clr-accent-1);&:after{width:100%}}&:has(+.navbar-sub):after{display:none}}}.navbar-sub[data-astro-cid-vxlbulin]{position:absolute;height:0;visibility:hidden;overflow:clip;interpolate-size:allow-keywords;border-radius:0 0 1rem 1rem;background-color:var(--sidebar-sub-clr);transition:height .3s ease-out,visibility .3s ease-out;ul{list-style-type:none;display:grid;gap:0}.navbar-sub-link{padding:1rem;cursor:pointer;display:flex;align-items:center;color:var(--clr-tertiary);transition:color .5s ease;&:is(:hover,:focus){color:var(--clr-accent-1)}}}.sidebar[data-astro-cid-vxlbulin]{font-family:Montserrat,sans-serif;font-size:1rem;font-weight:500;position:fixed;top:0;z-index:999;overflow:clip;visibility:hidden;opacity:0;translate:-100% 0;width:max-content;height:100dvh;background-color:var(--nav-alt-clr);backdrop-filter:blur(10px);transition:visibility .5s ease-out,opacity .5s ease-out,translate .5s ease-out;&[data-astro-cid-vxlbulin]:is([data-visible],:focus-within){visibility:visible;opacity:1;translate:0}>ul{list-style-type:none;padding:2rem 1rem;width:100%;height:100%;overflow:clip auto;&::-webkit-scrollbar{width:.1rem;height:.2rem;background:var(--clr-primary)}&::-webkit-scrollbar-track{background:var(--clr-primary)}&::-webkit-scrollbar-track-piece{background:var(--clr-primary)}&::-webkit-scrollbar-thumb{background-color:var(--clr-accent-1)}}.sidebar-link{padding:1.5rem;color:var(--clr-tertiary);text-wrap:nowrap;display:flex;align-items:center;transition:all .5s ease;&:is(:hover,:focus){color:var(--clr-accent-1)}}}.dropdown-btn[data-astro-cid-vxlbulin]{padding-right:1.5rem;width:100%;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;border:none;background:none;.arrow-down{width:0px;height:0px;border-inline:6px solid transparent;border-top:6px solid var(--clr-tertiary);transition:all .5s ease;&[data-rotate]{transform:rotate(-180deg)}}&:is(:hover,:focus){.sidebar-link{color:var(--clr-accent-1)}.arrow-down{border-top:6px solid var(--clr-accent-1)}}}.sidebar-sub[data-astro-cid-vxlbulin]{height:0;visibility:hidden;overflow:clip;interpolate-size:allow-keywords;border-radius:1rem;background-color:var(--clr-tertiary);transition:height .3s ease-out,visibility .3s ease-out;&[data-visible]{height:auto;visibility:visible}ul{list-style-type:none;display:grid;gap:0}.sidebar-sub-link{padding:1.5rem;color:var(--clr-primary);text-wrap:nowrap;display:flex;align-items:center}}.overlay[data-astro-cid-vxlbulin]{background:#00000080;position:absolute;inset:0;z-index:997;display:none;visibility:hidden;opacity:0;transition:display .5s ease-out,visibility .5s ease-out,opacity .5s ease-out;transition-behavior:allow-discrete}.sidebar[data-astro-cid-vxlbulin][data-visible]~.overlay[data-astro-cid-vxlbulin]{display:block;visibility:visible;opacity:1;@starting-style{opacity:0}}.hamburger-btn[data-astro-cid-vxlbulin]{display:none;cursor:pointer;border:none;background-color:transparent;svg{width:clamp(2.5rem,1vw + .5rem,3rem);fill:var(--clr-accent-1)}}@media screen and (max-width:800px){.hamburger-btn[data-astro-cid-vxlbulin]{display:block}.header[data-astro-cid-vxlbulin]{top:0;animation:none;background-color:var(--nav-alt-clr);backdrop-filter:blur(10px);.navbar{display:none}}}:root{--clr-primary: hsl(288 100% 10%);--clr-primary-surface: hsl(from var(--clr-primary) h 50% 30%);--clr-secondary: hsl(from var(--clr-primary) h s 30%);--clr-tertiary: hsl(from var(--clr-primary) h s 80%);--clr-accent-1: hsl(45 100% 40%);--clr-accent-2: hsl(from var(--clr-accent-1) h 50% 75%);--clr-accent-3: hsl(160 100% 75%);--clr-font: white;--nav-alt-clr: hsl(from var(--clr-primary) h s 5% / .7);--sidebar-sub-clr: hsl(from var(--clr-primary) h 80% 15%);--clr-grd-1: var(--clr-accent-1);--clr-grd-2: hsl(from var(--clr-primary) h s 40%);--shadow-color: 289 100% 2%;--shadow: .3px .5px .5px hsl(var(--shadow-color) / .68), .7px 1.3px 1.4px -1.2px hsl(var(--shadow-color) / .57), 2.1px 4.1px 4.3px -2.5px hsl(var(--shadow-color) / .45), 5.6px 11.3px 11.8px -3.7px hsl(var(--shadow-color) / .34)}@media(prefers-color-scheme:light){:root{--clr-primary: hsl(288 100% 90%);--clr-primary-surface: hsl(from var(--clr-primary) h 50% 70%);--clr-secondary: hsl(from var(--clr-primary) h s 70%);--clr-tertiary: hsl(from var(--clr-primary) h s 20%);--clr-accent-1: hsl(45 100% 30%);--clr-accent-2: hsl(from var(--clr-accent-1) h 50% 25%);--clr-accent-3: hsl(160 100% 25%);--clr-font: black;--nav-alt-clr: hsl(from var(--clr-primary) h s 95% / .7);--sidebar-sub-clr: hsl(from var(--clr-primary) h 80% 85%);--swiper-card-bg: hsl(from var(--clr-primary) h s calc(l - 5) );--shadow-color: 289 40% 50%}}html,body{margin:0;padding:0;height:100vh;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:100px}html{-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation}body{font-family:Inter,sans-serif;font-weight:200;line-height:1.6;color:var(--clr-font);background-color:var(--clr-primary)}::-webkit-scrollbar{width:.3rem;background-color:var(--clr-primary)}::-webkit-scrollbar-track{background-color:var(--clr-primary)}::-webkit-scrollbar-track-piece{background-color:var(--clr-primary)}::-webkit-scrollbar-thumb{background-color:var(--clr-accent-1)}*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;font:inherit}:where(h1,h2,h3){font-family:Bitter,serif;font-weight:800;line-height:1.2;letter-spacing:1px;text-wrap:balance}:where(p,h1,h2,h3){overflow-wrap:break-word}h1{font-size:clamp(3rem,8vw + .5rem,6rem);color:var(--clr-accent-1)}h2{font-size:clamp(1.7rem,3vw + .5rem,2.5rem);color:var(--clr-accent-2)}h3{font-size:1.5rem;color:var(--clr-accent-2)}p{font-size:1.2rem;text-wrap:pretty}img,svg,Image{display:block;max-width:100%}hr{margin:5rem auto;width:70%;height:3px;border:none;background-color:var(--clr-tertiary)}.wrapper{margin-inline:auto;padding-inline:2rem;width:100%;max-width:80rem}.link{font-style:italic;cursor:pointer;color:var(--clr-accent-3);text-decoration:none;&:is(:hover,:focus){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}}.hint{margin-inline:auto;font-size:1rem;color:var(--clr-accent-3)}.home-hero{height:calc(100dvh - 5rem);.wrapper{height:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem}.content{display:grid;gap:1rem;p{max-width:40ch}}.profile{width:25rem;height:auto;object-fit:cover;border:5px solid transparent;border-radius:50%;background:conic-gradient(from var(--angle),var(--clr-grd-1),var(--clr-grd-2),var(--clr-grd-2),var(--clr-grd-1)) border-box;animation:rotate 3s linear infinite}}@property --angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes rotate{0%{--angle: 0deg}to{--angle: 360deg}}.about-me{padding-block:10rem;display:flex;gap:2rem;.about-me-content{flex-shrink:0;display:flex;justify-content:center;flex-direction:column;gap:1rem;h1{position:relative;width:fit-content;&:after{content:"";position:absolute;top:calc(100% - .5rem);left:0;width:0;height:.25rem;border-radius:100vw;background:currentColor;animation:heading-underline-view ease forwards;animation-timeline:view();animation-range:entry 10vh 60vh}&:hover:after{width:100%}}p{max-width:40ch}h2{margin-top:auto}.socials{width:fit-content;display:flex;gap:1rem;svg{height:2rem;fill:var(--clr-font);transform-origin:bottom;transition:all .5s ease}a:is(:hover,:focus) svg{fill:var(--clr-accent-3);transform:scale(1.1)}}}.about-me-grid{flex-grow:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(23ch,1fr));gap:1.5rem;.about-me-tile{padding:2rem 1rem;display:grid;gap:1rem;align-content:start;justify-items:center;border-radius:.5rem;box-shadow:var(--shadow);background:hsl(from var(--clr-primary-surface) h s l / .5);backdrop-filter:blur(5px);svg{height:80px;fill:var(--clr-accent-2)}p{max-width:30ch;font-size:.9rem;line-height:1.4;text-align:center;opacity:.8}}}}@keyframes heading-underline-view{to{width:100%}}.my-family{padding-block:10rem;display:grid;justify-items:center;gap:3rem}.card-wrapper{position:relative;max-width:100%;width:clamp(20rem,100%,35rem);border-radius:.5rem;box-shadow:var(--shadow);.card-item,.swiper-wrapper .swiper-slide{padding:2rem;user-select:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2rem;border-radius:.5rem;background:hsl(from var(--clr-primary-surface) h s l / .5);backdrop-filter:blur(5px);.card-image{width:10rem;height:auto;object-fit:cover;border-radius:.5rem}ul{list-style-type:none;width:max-content;display:grid;justify-items:start;gap:.15rem;li{font-size:.9rem;color:hsl(from var(--clr-font) h s calc(l - 15))}h3{font-size:2.5rem;margin-bottom:.3rem}}}}.custom-navigation{position:absolute;top:50%;left:0;right:0;z-index:5;width:100%;padding-inline:5rem;transform:translateY(-50%);display:flex;justify-content:center;pointer-events:none;.swiper-button-prev span,.swiper-button-next span{font-size:3rem;color:var(--clr-accent-1);pointer-events:auto;user-select:none}.swiper-navigation-icon{display:none}.swiper-button-next:after,.swiper-button-prev:after{display:none}.swiper-button-disabled{transition:opacity .5s ease}}:root{--swiper-pagination-color: var(--clr-accent-1);--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 10px;--swiper-pagination-bullet-inactive-color: hsl(from var(--clr-font) h s l / .3);--swiper-pagination-bullet-inactive-opacity: 1;--swiper-pagination-bullet-horizontal-gap: 3px;--swiper-pagination-bullet-vertical-gap: 6px}@media(max-width:1100px){.home-hero{.wrapper{justify-content:center;flex-direction:column-reverse}.content{justify-items:center;text-align:center;p{max-width:50ch}}}.about-me{flex-direction:column;gap:5rem;.about-me-content{align-items:center;text-align:center;h2{margin-top:1rem}p{max-width:50ch}}}}@media(pointer:coarse){.swiper-button-prev,.swiper-button-next{visibility:hidden}}.badminton-toc{position:fixed;top:5rem;left:0;z-index:100;width:0;height:calc(100dvh - 5rem);visibility:hidden;overflow:clip;interpolate-size:allow-keywords;box-shadow:var(--shadow);background:var(--nav-alt-clr);backdrop-filter:blur(10px);transition:width .5s ease,visibility .5s;&[data-open]{width:max-content;visibility:visible}ul{list-style-type:none;padding:2rem;height:100%;overflow-x:clip;overflow-y:auto;display:grid;align-content:start;gap:1.5rem;h3{text-wrap:nowrap}}.badminton-toc-close{cursor:pointer;border:none;background-color:transparent;svg{width:1.5rem;fill:var(--clr-accent-1)}}.sub-list a{font-size:1rem;text-wrap:nowrap;color:inherit;padding-left:2rem}}.badminton-toc-btn{position:fixed;top:6rem;left:2rem;z-index:50;cursor:pointer;padding:2px;display:none;border-radius:.4rem;border:1px solid var(--clr-tertiary);background-color:transparent;backdrop-filter:blur(10px);svg{width:clamp(2.5rem,1vw + .5rem,3rem);fill:var(--clr-accent-3)}}.badminton-wrapper{padding-block:5rem;display:flex;justify-content:space-between;gap:5rem}.badminton-content{max-width:77ch;ul{list-style-type:square;font-size:1.2rem;max-width:60ch;padding-left:2rem;line-height:1.5;li{color:var(--clr-font)}}.modal{top:60%;left:50%;max-width:100%;translate:-50% -50%;opacity:0;overflow:visible;transition-property:overlay display opacity;transition-duration:.5s;transition-timing-function:ease-out;transition-behavior:allow-discrete;outline:none;border:1px solid hsl(from var(--clr-tertiary) h s l / .5);border-radius:.5rem;background-color:var(--clr-primary);&::backdrop{opacity:0;background:linear-gradient(45deg,var(--clr-secondary),var(--clr-tertiary),var(--clr-secondary));transition-property:overlay display opacity;transition-duration:.5s;transition-timing-function:ease-out;transition-behavior:allow-discrete}.hide-modal{position:absolute;top:-4rem;right:0;padding:.5rem;width:3rem;cursor:pointer;fill:var(--clr-tertiary);border-radius:50%;border:1px solid hsl(from var(--clr-tertiary) h s l / .5);background-color:var(--clr-primary);transition:all .5s ease-out;&:is(:hover,:focus){fill:var(--clr-accent-1)}}}.modal[open]{opacity:1;top:50%;&::backdrop{opacity:.5}@starting-style{opacity:0;top:40%;&::backdrop{opacity:0}}}.modal-content{padding:2rem;display:grid;align-content:start;gap:1rem;h3{text-align:center}.court-img{max-height:50vh;width:70vw;max-width:20rem;display:flex;justify-self:center}}.player-card{aspect-ratio:16/9;overflow:clip;border-radius:.5rem;box-shadow:var(--shadow);background-image:url(/Portfolio/_astro/Lin-Dan.BlQGc6b9.avif);background-repeat:no-repeat;background-size:100%;background-position:top;transition:all .5s ease;&:nth-of-type(2){background-image:url(/Portfolio/_astro/Lee-Chong-Wei.DTa47SI5.webp)}&:nth-of-type(3){background-image:url(/Portfolio/_astro/Chen-Long.DuDchxVz.webp)}&:nth-of-type(4){background-image:url(/Portfolio/_astro/Kento-Momota.DwFVhbMg.jpg)}&:nth-of-type(5){background-image:url(/Portfolio/_astro/Kunlavut-Vitidsarn.CIACVgUu.jpg)}&:is(:hover,:focus){background-size:105%}&:is(:hover,:focus) .player-card-content{transform:translateY(0);transition-delay:.5s;backdrop-filter:blur(2px);overflow-y:auto}&:is(:hover,:focus) .player-card-content>h2:after{transform:scaleX(1)}&:is(:hover,:focus) .player-card-content *:not(h2,.know-more-btn){transition-delay:1s;opacity:1}.player-card-content{padding:1.5rem;height:100%;transform:translateY(70%);transition:transform .5s ease;background:linear-gradient(#0000,#0003 20%,#000);*:not(h2,.know-more-btn){opacity:0;transition:opacity .5s linear}h2{position:relative;width:max-content;color:#fcf9c6;text-shadow:3px 3px 10px black}p,li{font-size:1rem;color:#fff}h2:after{content:"";position:absolute;left:-1.5rem;bottom:-5px;height:3px;width:calc(100% + 1.5rem);transform:scaleX(0);transform-origin:left;transition:transform .5s ease;background:#fcf9c6}.know-more-btn{padding:.75rem 1rem;width:fit-content;cursor:pointer;color:#fff;border:1px solid hsl(0 0% 100% / .3);border-radius:100vw;background:#290033;transition:opacity .3s ease;&:is(:hover,:focus){opacity:.7}}}}}.badminton-aside{padding-bottom:5rem;display:grid;align-content:start;justify-items:center;gap:1.5rem;h2{color:var(--clr-accent-1)}.aside-card{padding:1rem;width:350px;display:grid;align-content:start;gap:.4rem;border-radius:.5rem;box-shadow:var(--shadow);background:hsl(from var(--clr-primary-surface) h s l / .5);backdrop-filter:blur(5px);transition:transform .5s ease;img{aspect-ratio:16/9;border-radius:.5rem;transform:none}p{font-size:.9rem;line-height:1.4;color:hsl(from var(--clr-font) h s calc(l - 15))}&:is(:hover,:focus){transform:scale(1.02)}}}@media(max-width:1100px){.badminton-wrapper{flex-direction:column;gap:10rem}.badminton-toc-btn{display:block}.badminton-content{margin-inline:auto}.badminton-aside{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));h2{font-size:clamp(3rem,8vw + .5rem,6rem);grid-column:1/-1}.aside-card{width:auto;img{width:100%;height:auto}}}}:root{--background: var(--darkBg)}@media(prefers-color-scheme:light){:root{--background: var(--lightBg)}}body{background-image:linear-gradient(hsl(from var(--clr-primary) h s l / .85)),var(--background);background-position:center;background-size:cover;background-repeat:no-repeat}