.colorThems{cursor:none;justify-content:center;align-items:center;width:max-content;padding:8px;display:flex}.tumbler{background:#cfd4da;border-radius:50px;flex-direction:row;justify-content:flex-start;align-items:center;width:55px;height:28px;padding:3px 5px;transition:background .3s;display:flex;position:relative;box-shadow:inset 0 0 4px #0003}.toggleBall{background:#fff;border-radius:50%;width:24px;height:24px;transition:all .3s;box-shadow:0 2px 6px #0000004d}.tumbler.active{background:#f12fff}.tumbler.active .toggleBall{transform:translate(30px)}body{color:#0a0a0a;background:#f5f7fa;transition:background .3s,color .3s}body.dark{color:#f2f5ff;background:#0b1220}:root{--defoult-cursor:#ff00c8;--defoult-cursor-border:#ff00c8;--hover-cursor:#fff;--hover-cursor-border:#ff5fdc}.JSCursor{border:2px solid var(--defoult-cursor-border);background:var(--defoult-cursor);pointer-events:none;z-index:9999;will-change:transform,width,height,opacity;opacity:1;border-radius:50%;width:20px;height:20px;transition:opacity .3s,box-shadow .18s,border-color .18s;position:fixed;transform:translate(-50%,-50%)}.JSCursor.hover{border-color:var(--hover-cursor);background:var(--hover-cursor-border);transition:opacity .3s,box-shadow .18s,border-color .18s;box-shadow:0 0 10px 3px #646cffcc}.JSCursor.click{transition:width .1s,height .1s;width:16px!important;height:16px!important}.JSCursor.leave{opacity:0;transform-origin:50%}@media (hover:none),(pointer:coarse){.JSCursor{display:none!important}}.f-s48{font-size:48px}.f-s32{font-size:32px}.ico-60{width:100px;height:100px}.ico-80{width:80px;height:80px}.ico-128{width:128px;height:128px}.button-SA{width:max-content;color:var(--body-text-color);background-position:0 100%;border-radius:30px;justify-content:center;align-items:center;gap:10px;padding:12px 24px;font-size:20px;font-weight:600;text-decoration:none;transition:background-size .3s;display:flex;position:relative;overflow:hidden}.button-SA:before{content:"";-webkit-mask-composite:xor;background:linear-gradient(-45deg,#ff00c8,#bf00ff);border-radius:30px;padding:3px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.button-SA .bg_button{z-index:1;background:linear-gradient(-45deg,#ff00c8,#bf00ff);width:100%;height:100%;transition:all .3s;position:absolute;transform:translate(-100%)}.button-SA span{z-index:2}.button-SA:hover .bg_button{background-size:100% 100%;transition:all .3s;transform:translate(0)}p{margin:0}img{width:100%;height:auto}.titleSections{justify-content:flex-start;align-items:center;gap:10px;font-size:64px;display:flex}.media-container{width:100%;max-width:1400px;margin:0 auto;padding:24px 0;position:relative}.container{width:100%}main{width:100vw;margin:0 auto}@media (max-width:1450px){.media-container{max-width:1200px}}@media (max-width:1250px){.media-container{max-width:1000px}}@media (max-width:1050px){.media-container{max-width:768px}}@media (max-width:800px){.media-container{max-width:90%;padding:16px 0}h2.title{font-size:2rem}}@media (max-width:500px){.media-container{max-width:80%;padding:16px 0}}[data-theme=light]{--body-color:#fff;--body-text-color:#080812;--header-color:#fadeff;--footer-color:#fadeff;--a-button-color:#646cff;--buttonKCD:#646cff;--shadow-image-about:#9d32cf 0px 0px 20px 0px;--border-image-about:linear-gradient(0deg,#e1d0ff,#f0e);--header-shadow:#000e1f4b;--grey-jun-background:#a1a1a1;--grey-jun-color:#565656;--cursor:#05000f}[data-theme=dark]{--body-color:#05000f;--body-text-color:#fff;--header-color:#05000f;--footer-color:#03000a;--a-button-color:#9096ff;--buttonKCD:#646cff;--shadow-image-about:#470068 0px 0px 20px 0px;--border-image-about:linear-gradient(0deg,#250022,#8b0081);--header-shadow:#e6eef842;--grey-jun-background:#3b3b3b;--grey-jun-color:#aeaeae;--cursor:#fff}body{background-color:var(--body-color);color:var(--body-text-color);cursor:none;width:100vw;transition:background-color .3s,color .3s;overflow-x:hidden}a{color:var(--a-button-color);cursor:none;transition:color .3s}header{color:var(--body-text-color);background-color:var(--header-color);width:100vw;box-shadow:var(--header-shadow)0px 2px 16px 0px;z-index:1000;flex-flow:row;justify-content:center;align-items:center;transition:background-color .3s;display:flex;position:fixed;top:0;left:0}header .HeaderContainer{flex-direction:row;justify-content:space-between;align-items:center;width:90%;max-width:1400px;margin:0 auto;padding:15px 0;display:flex}header h1{color:var(--body-text-color);gap:4px;margin:0;font-size:50px;display:flex}.gradient-textLR{background:linear-gradient(90deg,#ff00c8,#bf00ff);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:700}.gradient-textRL{background:linear-gradient(90deg,#bf00ff,#ff00c8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:700}header a{text-decoration:none}header nav{gap:24px;display:flex}header nav a{color:var(--body-text-color);font-size:20px}#home{align-items:center;height:100vh;display:flex}.ProfName{font-size:25px}.ProfName .GreyJun{background:var(--grey-jun-background);color:var(--grey-jun-color);white-space:nowrap;border-radius:15px;padding:4px 8px}.slogan-1{grid-template-areas:"b line1""b line2";align-content:center;place-items:center start;width:max-content;display:grid}.slogan-1 .B{grid-area:b;font-size:128px}.Line1{grid-area:line1;margin-bottom:-90px}.Line2{grid-area:line2}.Line1,.Line2{font-size:64px}.slogan-2{flex-direction:column;align-items:center;gap:0;width:max-content;display:flex}#home .media-container{margin-top:-100px}#home .image{width:65%;height:auto;position:absolute;top:0;right:0}#home .container{display:flex}#about{height:calc(100vh - 100px)}.text-con-about{flex-direction:column;gap:16px;height:100%;font-size:32px;display:flex}.text-con-about p{font-size:24px}#about .container{grid-template-columns:1fr 1fr;align-items:center;display:grid}.image-about{box-shadow:var(--shadow-image-about);border-radius:50%;position:relative;overflow:hidden}.image-about:before{content:"";background:var(--border-image-about);-webkit-mask-composite:xor;border-radius:50%;padding:6px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}#about .text-con-about .info{flex-direction:column;justify-content:center;gap:30px;height:40%;display:flex}.skills-grid{perspective:1000px;grid-template-rows:1fr;grid-template-columns:1fr 1fr 1fr;gap:18px;display:grid}.card-title{text-align:center;margin:0;font-size:28px}.ico_title{flex-flow:row;align-items:center;gap:20px;font-size:30px;display:flex}.skills-item .card-info{text-align:center;font-size:20px}.skills-item{transform-style:preserve-3d;position:relative}.firstCard:before,.secondCard:before{content:"";background:linear-gradient(#9800fe,#fe00bf);border-radius:40px;padding:3px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.skills-item>*{width:90%;height:75%;position:absolute;top:0;left:0}.card-inner{width:100%;height:200px;min-height:200px;position:relative}.firstCard,.secondCard{backface-visibility:hidden;transform-style:preserve-3d;border-radius:40px;justify-content:center;align-items:center;transition:transform .68s cubic-bezier(.2,.9,.3,1),opacity .22s;display:flex;position:absolute;inset:0}.firstCard{z-index:2;background:#ffffff0a;transform:rotateX(0)}.secondCard{z-index:1;opacity:0;background:#ffffff0a;flex-direction:column;justify-content:center;align-items:center;padding:20px 10px;display:flex;transform:rotateX(90deg)}.skills-item.is-hovered .firstCard{opacity:0;z-index:1;transform:rotateX(90deg)}.skills-item.is-hovered .secondCard{opacity:1;z-index:2;transform:rotateX(0)}.skills-item .firstCard,.skills-item .secondCard{transition-delay:.1s}.projects-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;align-items:stretch;gap:62px;display:grid}.project-item{background:linear-gradient(#9800fe21,#fe00bf21);border:4px solid #fff;border-radius:50px;flex-direction:column;padding:0 0 24px;display:flex;overflow:hidden}.project-item .project-info{padding:0 24px}.project-item .project-info .title{letter-spacing:.5px;margin:16px 0 8px;font-size:28px;font-weight:700;line-height:1.2;position:relative}.project-item .project-info a.decoy{color:var(--body-text-color);z-index:1;background:linear-gradient(90deg,var(--body-text-color),var(--body-text-color),var(--body-text-color));-webkit-text-fill-color:transparent;background-position:0;background-repeat:no-repeat;background-size:100% 100%;-webkit-background-clip:text;text-decoration:none;transition:background-size .3s;position:absolute;left:0}.project-item .project-info a.front{color:var(--body-text-color);z-index:2;background:linear-gradient(90deg,#ff00c8,#bf00ff,#fff) 0/0% 100% no-repeat;-webkit-text-fill-color:transparent;-webkit-background-clip:text;text-decoration:none;transition:background-size .3s;position:relative}.project-item .project-info a.front:hover{background-size:200% 100%;transition:background-size 1s}.project-button{justify-content:flex-end;width:100%;display:flex}#contact .container{flex-direction:row;align-items:center;gap:40px;display:flex}#contact .container .img-contact{justify-content:center;width:50%;height:600px;display:flex;overflow:hidden}#contact .container .img-contact img{object-fit:cover}.contact-item{color:var(--body-text-color);flex-direction:row;align-items:center;gap:20px;font-size:24px;text-decoration:none;display:flex}.contact-link{flex-direction:column;width:min-content;padding-top:70px;display:flex}.text{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:60%;height:100%;display:flex}.text p{margin:0;font-size:26px}footer{background:linear-gradient(0deg,var(--footer-color)50%,var(--body-color));color:var(--body-text-color);min-height:100px;transition:background-color .3s,color .3s}footer .Footer{text-align:center;padding:80px 30px 24px}@media (max-width:1450px){.slogan-1 .Line1,.slogan-1 .Line2{font-size:46px}.slogan-1 .B{font-size:92px}.Line1{margin-bottom:-60px}.slogan-2 .f-s48{font-size:32px}.slogan-2 .f-s32{font-size:24px}#about .container{gap:90px}.skills-item .card-title{font-size:24px}.skills-item .card-info{font-size:18px}}@media (max-width:1250px){#home .image{width:65%}#about .text-con-about .info{gap:10px;height:100%}.skills-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:1050px){#about{height:auto}#about .container{grid-template-columns:1fr;gap:40px}#contact .container{flex-direction:column}#contact .container .img-contact{width:100%;max-height:410px}.projects-grid{grid-template-columns:1fr}#home .image{width:100%;margin-top:-80px;position:relative}#home .container{flex-direction:column}#home .media-container{margin-top:170px}.text{width:100%}}@media (max-width:950px){.skills-grid{grid-template-columns:1fr;justify-items:center}.skills-item{width:100%;max-width:400px}}@media (max-width:900px){.slogan-1 .B{font-size:72px}.slogan-1 .Line1,.slogan-1 .Line2{font-size:36px}.slogan-2 .f-s48{font-size:28px}.slogan-2 .f-s32{font-size:20px}header nav a{display:none}#home .media-container{margin-top:85px}}@media (max-width:600px){.button-SA{padding:10px 20px;font-size:16px}.titleSections{gap:8px;font-size:40px}#home .image{margin-top:60px}.text-con-about p{font-size:16px}.contact-item{gap:12px;font-size:16px}.ico-80{width:50px;height:50px}.skills-item{width:90%}.slogan-1 .B{font-size:46px}.slogan-1 .Line1,.slogan-1 .Line2{font-size:22px}.Line1{margin-bottom:-30px}.ProfName{font-size:20px;line-height:40px}.project-item .project-info .title,.text p{font-size:20px}.skills-item .card-title{font-size:18px}.ico-60{width:50px;height:50px}#home .media-container{margin-top:0}footer .Footer{font-size:14px}}@media (max-width:400px){.ProfName{font-size:18px;line-height:40px}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}