html,body,#root{margin:0;padding:0;height:100%;overflow:hidden;--background-header-color-vintage: #4f46e5;--header-font-color-vintage: white;--button-color-vintage: #9911ff;--content-background-vintage: antiquewhite;--header-color-normal: #363732;--button-color-normal: #8D6B94;--window-color-normal: #DCE1E9;--header-color: #0E131F;--button-color: #8D6B94;--window-color: #DCE1E9;background:linear-gradient(180deg,#1d2a44,#2e1c47)}[data-theme=dark]{--header-color: ;--button-color: ;--window-color: }.App{position:relative;height:100vh;width:100vw;overflow:hidden;font-family:Quicksand;font-weight:50}.window-box{width:300px;position:absolute;background-color:#4f46e5;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 4px 8px #0003}.window-header{width:300px;height:20x;background-color:#4f46e5;color:#fff;display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:grab;font-size:1.2rem;-webkit-user-select:none;user-select:none}.window-content{width:280px;height:180px;background-color:#faebd7;box-shadow:inset 0 0 0 3px #00f;display:block;justify-content:center;padding:10px}.window-content .scroll{width:100%;height:50%;overflow-y:auto}.close-button{position:absolute;top:.5%;right:1%;background:transparent;border:none;color:#fff;font-size:15px;border-radius:5px;cursor:pointer}.button-panel{position:absolute;top:20px;left:20px;display:flex;flex-direction:column;gap:15px;z-index:1000}.windows-button{border:none;padding:12px;font-size:14px;width:90px;height:90px;background:#fff0;color:#fff;border-radius:10px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 6px #0000001a}.windows-button .icon{font-size:36px}.windows-button .label{margin-top:5px;font-size:16px}.windows-button:hover{background-color:#fff3;color:#fff;box-shadow:0 4px 8px #0003}.windows-button:active{background-color:#fff6}.taskbar{position:fixed;bottom:0;left:0;right:0;height:48px;background-color:#141414cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:14px;color:#fff;z-index:1000}.taskbar-left,.taskbar-right{display:flex;align-items:center;gap:12px}.taskbar-avatar{height:40px;width:40px;border-radius:6px;cursor:pointer;object-fit:cover}.looping-audio-button{background-color:#91f;color:#fff;border:none;padding:10px 16px;font-size:16px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background-color .3s ease;font-family:Quicksand,sans-serif}.looping-audio-button:hover{background-color:#7a0fcc}.looping-audio-button:active{background-color:#5e0bb0}.window-box-MP{width:950px;height:700px;position:absolute;background-color:var(--header-color);border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:3px 3px #b3b3b3}.window-header-MP{touch-action:none;width:950px;height:40px;background-color:var(--header-color);color:#fff;display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:grab;font-size:2rem;-webkit-user-select:none;user-select:none}.window-content-MP{width:930px;height:680px;background-color:var(--window-color);box-shadow:inset 0 0 0 3px var(--header-color),3px 3px #b3b3b3;border-radius:12px;display:block;padding:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.window-content-MP .scroll{width:100%;height:50%;overflow-y:auto}.close-button-MP{position:absolute;top:.5%;right:1%;background:transparent;border:none;color:#fff;font-size:15px;border-radius:5px;cursor:pointer}.button-pannel-mainpage{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;width:80%;margin:0 auto}.button-pannel-mainpage .fa-solid{text-shadow:3px 3px 0px #b3b3b3}.hero-name{font-size:3rem;text-align:center;margin:.5em 0;padding-bottom:-10px}.hero-more{text-align:center;margin:.5em 0;padding-top:-5px;font-size:2rem}.highlight-name{color:#91f;font-size:4rem}@media (max-width: 1300px){.window-box-MP{width:750px;height:500px}.window-header-MP{width:750px;font-size:1.6rem}.window-content-MP{width:730px;height:460px}.hero-name{font-size:2.4rem}.highlight-name{font-size:3rem}.hero-more{font-size:1.5rem}}@media (max-width: 768px){.window-box-MP{width:70vw;height:70vh}.window-header-MP{width:100%;font-size:1.3rem}.window-content-MP{width:96.8%;height:calc(80vh - 40px);padding:8px}.hero-name{font-size:1.8rem}.highlight-name{font-size:2.4rem}.hero-more{font-size:1.2rem}.button-pannel-mainpage{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%;margin-top:1rem;justify-items:center}.button-pannel-mainpage .fa-solid{font-size:40px!important}}:root{--window-width-about: 850px;--window-height-about: 600px}.window-box-about{width:var(--window-width-about);height:var(--window-height-about);position:absolute;background-color:var(--header-color);border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:3px 3px #b3b3b3}.window-header-about{touch-action:none;width:var(--window-width-about);height:40px;background-color:var(--header-color);color:#fff;display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:grab;font-size:2rem;-webkit-user-select:none;user-select:none}.window-content-about{width:calc(var(--window-width-about) - 20px);height:calc(var(--window-height-about) - 20px);background-color:var(--window-color);box-shadow:inset 0 0 0 3px var(--header-color),3px 3px #b3b3b3;border-radius:12px;display:block;justify-content:center;padding:10px}.about-hero{height:40%;display:flex;align-items:center;margin-left:20px}.my-name{margin-bottom:-5px;font-size:2.9rem}.about-info{height:55%;width:97%;overflow-y:auto;margin:0 auto 0 20px;box-sizing:border-box;font-size:1.2rem;--window-color: color-mix(in srgb, var(--window-color), white 20%);background-color:var( --window-color)}.info-education .education{border-left:4px solid rgba(211,211,211,.507);padding-left:16px;margin-left:8px}.info-education .degree{margin-top:0;margin-bottom:0}.info-education .year{color:#b4b0b0cc;margin-top:0;margin-bottom:0}.info-language .language{border-left:4px solid rgba(211,211,211,.507);padding-left:16px;margin-left:8px}.info-language .extra{margin-top:0;margin-bottom:0}.info-language .main{margin-top:0;margin-bottom:5px}.about-info::-webkit-scrollbar{width:6px}.about-info::-webkit-scrollbar-thumb{background-color:#00000080;border-radius:10px}.about-info::-webkit-scrollbar-track{background-color:transparent}.about-info::-webkit-scrollbar-button{display:none}.close-button-about{position:absolute;top:.5%;right:1%;background:transparent;border:none;color:#fff;font-size:15px;border-radius:5px;cursor:pointer}@media (max-width:1300px){.window-box-about{width:700px;height:450px}.window-header-about{width:700px}.window-content-about{width:680px;height:450px}}@media (max-width: 768px){.window-box-about{width:70vw;height:70vh}.window-header-about{width:100%;font-size:1.3rem}.window-content-about{width:96.8%;height:calc(70vh - 40px);padding:8px}.about-title{flex-direction:column;align-items:flex-start;margin-left:10px;height:30%}.my-name{font-size:1.8rem}.about-info{font-size:1rem;margin-left:10px;height:55%}.info-education .education,.info-language .language{padding-left:10px;margin-left:6px;border-left-width:3px}.close-button-about{top:1%;right:2%;font-size:13px}}:root{--window-width-music: 300px;--window-height-music: 100px}.window-box-music{width:var(--window-width-music);height:var(--window-height-music);position:absolute;background-color:var(--header-color);border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:3px 3px #b3b3b3}.window-header-music{touch-action:none;width:var(--window-width-music);height:40px;background-color:var(--header-color);color:#fff;display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:grab;font-size:2rem;-webkit-user-select:none;user-select:none}.window-content-music{width:calc(var(--window-width-music) - 20px);height:calc(var(--window-height-music) - 20px);background-color:var(--window-color);box-shadow:inset 0 0 0 3px var(--header-color),3px 3px #b3b3b3;border-radius:12px;display:block;padding:10px;display:flex;justify-content:center;align-items:center;gap:10px}.close-button-music{position:absolute;top:.5%;right:1%;background:transparent;border:none;color:#fff;font-size:15px;border-radius:5px;cursor:pointer}:root{--window-width-links: 300px;--window-height-links: 100px}.window-box-links{width:var(--window-width-links);height:var(--window-height-links);position:absolute;background-color:var(--header-color);border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:3px 3px #b3b3b3}.window-header-links{touch-action:none;width:var(--window-width-links);height:40px;background-color:var(--header-color);color:#fff;display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:grab;font-size:2rem;-webkit-user-select:none;user-select:none}.window-content-links{width:calc(var(--window-width-links) - 20px);height:calc(var(--window-height-links) - 20px);background-color:var(--window-color);box-shadow:inset 0 0 0 3px var(--header-color),3px 3px #b3b3b3;border-radius:12px;display:block;padding:10px;display:flex;justify-content:center;align-items:center;gap:10px}.close-button-links{position:absolute;top:.5%;right:1%;background:transparent;border:none;color:#fff;font-size:15px;border-radius:5px;cursor:pointer}:root{--window-width-work: 620px;--window-height-work: 800px}.window-box-work{width:var(--window-width-work);height:var(--window-height-work);position:absolute;background-color:var(--header-color);border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:3px 3px #b3b3b3}.window-header-work{touch-action:none;width:var(--window-width-work);height:40px;background-color:var(--header-color);color:#fff;display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:grab;font-size:2rem;-webkit-user-select:none;user-select:none}.window-content-work{width:calc(var(--window-width-work) - 20px);height:calc(var(--window-height-work) - 20px);background-color:var(--window-color);box-shadow:inset 0 0 0 3px var(--header-color),3px 3px #b3b3b3;border-radius:12px;display:block;justify-content:center;padding:10px;overflow:auto}.close-button-work{position:absolute;top:.5%;right:1%;background:transparent;border:none;color:#fff;font-size:15px;border-radius:5px;cursor:pointer}.skill-box{display:flex;justify-content:center;align-items:center;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-family:Quicksand;font-weight:700;padding:8px;background-color:#91f;color:#fff;border-radius:8px;box-shadow:2px 2px 6px #0003;cursor:pointer}.skill-box:hover{box-shadow:inset 0 0 8px #0000004d}.divider{height:1px;background-color:#ccc;margin:16px 0;width:100%}.work-container{margin-bottom:5px;transition:box-shadow .3s ease,transform .3s ease;border-radius:10px}.work-container:hover{box-shadow:0 0 20px #9911ffb3;transform:scale(1.02);z-index:1}.work-content>div+div{margin-top:12px}.work-container-intro{display:flex;align-items:flex-start;flex-direction:row;gap:16px}.work-title{align-self:flex-end;margin-right:10px}.work-image{flex-shrink:0;align-self:center}.work-content{display:flex;flex-direction:column;justify-content:flex-start}.window-content-work{scroll-behavior:smooth}.window-content-work::-webkit-scrollbar{width:6px}.window-content-work::-webkit-scrollbar-thumb{background-color:#00000080;border-radius:10px}.window-content-work::-webkit-scrollbar-track{background-color:transparent}.window-content-work::-webkit-scrollbar-button{display:none}@media (max-width: 1300px){.window-box-work{width:750px;height:500px}.window-header-work{width:750px;font-size:1.6rem}.window-content-work{width:730px;height:460px}.work-title{font-size:1.4rem}.skill-box{font-size:11px;padding:6px}.work-container-intro{flex-direction:row;gap:12px}}@media (max-width: 768px){.window-box-work{width:90vw;height:85vh}.window-header-work{width:100%;font-size:1.3rem}.window-content-work{width:96%;height:calc(85vh - 50px);padding:10px}.work-container-intro{flex-direction:column;align-items:center;gap:10px}.work-image{width:80%;height:180px}.skill-box{font-size:10px;padding:5px}.work-title{font-size:1.2rem;text-align:center}.work-desc1,.work-desc2{font-size:.9rem}}:root{--window-width-contact: 760px;--window-height-contact: 500px}.window-box-contact{width:var(--window-width-contact);height:var(--window-height-contact);position:absolute;background-color:var(--header-color);border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:3px 3px #b3b3b3}.window-header-contact{touch-action:none;width:var(--window-width-contact);height:40px;background-color:var(--header-color);color:#fff;display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:grab;font-size:2rem;-webkit-user-select:none;user-select:none}.window-content-contact{width:calc(var(--window-width-contact) - 20px);height:calc(var(--window-height-contact) - 20px);background-color:var(--window-color);box-shadow:inset 0 0 0 3px var(--header-color),3px 3px #b3b3b3;border-radius:12px;display:block;justify-content:center;padding:10px;overflow:none;font-size:1.1rem}.close-button-contact{position:absolute;top:.5%;right:1%;background:transparent;border:none;color:#fff;font-size:15px;border-radius:5px;cursor:pointer}.mail-title{text-align:center;font-size:2rem;font-weight:700;color:#91f;margin:10px 0 20px}.email-container{position:relative;display:inline-block;cursor:pointer;color:#007aff;text-decoration:underline;font-weight:700}.email-container:hover{color:orange}.email-tooltip{position:absolute;bottom:120%;left:50%;transform:translate(-50%);background-color:#222;color:#fff;padding:6px 10px;border-radius:8px;font-size:12px;white-space:nowrap;box-shadow:0 2px 6px #0000004d;z-index:10;pointer-events:none;opacity:0;transition:opacity .6s ease-in-out}.email-container:hover .email-tooltip{opacity:1}.email-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #222}.left-side{width:60%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;flex:1}.left-side p{margin-bottom:5px;justify-content:center}.left-side img{display:block;margin-left:auto;margin-right:auto}.right-side p{margin-bottom:1px}.right-side{width:35%;display:flex;flex-direction:column;align-items:flex-start;padding:0 1rem;box-sizing:border-box;flex:1.1}.right-side .contact-form{width:100%}.contact-info{display:flex;justify-content:center;align-items:center;gap:20px}.contact-form{padding-top:10px;display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:400px}.contact-form input,.contact-form textarea{padding:.5rem;border:2px solid #ccc;border-radius:5px;font-size:1rem;resize:vertical;background:#fff;transition:border-color .3s ease}.contact-form input:focus,.contact-form textarea:focus{border-color:#91f;outline:none}.contact-form textarea{min-height:100px}.submit-button{cursor:pointer;color:#fff;border:none;font-weight:700;font-size:1rem}.contact-form input:hover,.contact-form textarea:hover{border-color:#91f;animation:pulse-glow 2s infinite ease-in-out;outline:none}.email-hover-text{font-weight:lighter;color:#969696a2;transition:all .3s ease}.email-hover-text:hover{font-weight:400;color:#000}@keyframes pulse-glow{0%{box-shadow:0 0 8px #91f8}50%{box-shadow:0 0 16px #91fc}to{box-shadow:0 0 8px #91f8}}@media (max-width: 1300px){:root{--window-width-contact: 700px;--window-height-contact: 460px}.window-content-contact{width:calc(var(--window-width-contact) - 20px);height:calc(var(--window-height-contact) - 20px)}.window-header-contact{font-size:1.8rem;width:var(--window-width-contact)}.window-content-contact{font-size:1rem;padding:8px}.mail-title{font-size:1.8rem}.contact-form input,.contact-form textarea{font-size:.95rem}.submit-button{font-size:.95rem;height:45px}.email-container,.left-side p,.right-side p{font-size:.95rem}.right-side .contact-form{max-width:95%}}@media (max-width: 768px){:root{--window-width-contact: 95vw;--window-height-contact: 90vh}.window-box-contact{width:var(--window-width-contact);height:calc(var(--window-height-contact) - 350px)}.window-header-contact{font-size:1.4rem;width:var(--window-width-contact)}.window-content-contact{width:calc(var(--window-width-contact) - 10px);height:calc(var(--window-height-contact) - 350px);font-size:1rem;padding:5px;overflow:auto}.left-side p,.right-side p,.email-container{font-size:.95rem}.mail-title{font-size:1.6rem}.contact-form input,.contact-form textarea,.submit-button{font-size:.95rem}}@media (max-width: 480px){.window-box-contact{border-radius:6px}.window-header-contact{height:35px;font-size:1.2rem;border-radius:6px}.mail-title{font-size:1.4rem}.contact-info{gap:10px}.contact-form{gap:.5rem}.contact-form input,.contact-form textarea{font-size:.9rem;padding:.4rem}.submit-button{font-size:.9rem;height:45px}}:root{--window-width-success: 300px;--window-height-success: 100px}.window-box-success{width:var(--window-width-success);height:var(--window-height-success);position:absolute;background-color:#5b8d5b;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:3px 3px #b3b3b3}.window-header-success{touch-action:none;width:var(--window-width-success);height:40px;background-color:#5b8d5b;color:#fff;display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:grab;font-size:2rem;-webkit-user-select:none;user-select:none}.window-content-success{width:calc(var(--window-width-success) - 20px);height:calc(var(--window-height-success) - 20px);background-color:var(--window-color);box-shadow:inset 0 0 0 3px #5b8d5b,3px 3px #b3b3b3;border-radius:12px;display:block;padding:10px;display:flex;justify-content:center;align-items:center;gap:10px;text-align:center}.close-button-success{position:absolute;top:.5%;right:1%;background:transparent;border:none;color:#fff;font-size:15px;border-radius:5px;cursor:pointer}:root{--window-width-failed: 300px;--window-height-failed: 100px}.window-box-failed{width:var(--window-width-failed);height:var(--window-height-failed);position:absolute;background-color:#ee7674;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:3px 3px #b3b3b3}.window-header-failed{touch-action:none;width:var(--window-width-failed);height:40px;background-color:#ee7674;color:#fff;display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:grab;font-size:2rem;-webkit-user-select:none;user-select:none}.window-content-failed{width:calc(var(--window-width-failed) - 20px);height:calc(var(--window-height-failed) - 20px);background-color:var(--window-color);box-shadow:inset 0 0 0 3px #ee7674,3px 3px #b3b3b3;border-radius:12px;display:block;padding:10px;display:flex;justify-content:center;align-items:center;gap:10px}.close-button-failed{position:absolute;top:.5%;right:1%;background:transparent;border:none;color:#fff;font-size:15px;border-radius:5px;cursor:pointer}.shooting-stars-container{position:absolute;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none}.twinkling-star{position:absolute;background-color:#fff;border-radius:50%;animation:twinkle 5s infinite ease-in-out;opacity:.7;will-change:opacity}.shooting-star{position:absolute;width:4px;height:4px;background-color:#fff;border-radius:50%;opacity:.9;box-shadow:0 0 10px #fff;transition:filter .2s ease-out;will-change:transform,opacity;pointer-events:none}.shooting-star.angle-1{transform:rotate(42deg)}.shooting-star.angle-2{transform:rotate(45deg)}.shooting-star.angle-3{transform:rotate(48deg)}@keyframes twinkle{0%,to{opacity:.1}50%{opacity:1}}.moon{position:absolute;top:10%;right:5%;width:100px;height:100px;background:radial-gradient(circle at 30% 30%,#fdf5e6,#dcdcdc);border-radius:50%;box-shadow:0 0 40px 10px #fff3;z-index:0}