@charset "UTF-8";@keyframes user-img{0%{box-shadow:0px 0px 0px 0px rgb(103,153,254)}50%{box-shadow:0px 0px 100px 10px rgb(103,153,254)}100%{box-shasdow:0px 0px 0px 0px rgb(103,153,254)}}@keyframes show-skill{0%{transform:translateX(-10%);opacity:0}100%{transform:translateX(0%);opacity:1}}@keyframes time-line-top{0%{transform:translateY(-25%);opacity:0}100%{transform:translateY(0%);opacity:1}}@keyframes time-line-bottom{0%{transform:translateY(25%);opacity:0}100%{transform:translateY(0%);opacity:1}}@font-face{font-family:"OPPOSans-L";font-weight:1 999;src:url("../fonts/OPPOSans-L.ttf")}@media (min-width:100px) and (max-width:767px){html{font-size:12px !important}.skill-pane{padding-left:0 !important}.time-line ul{flex-direction:column !important;align-items:center !important;height:80% !important}.time-line ul::before{content:"" !important;background:none !important}.time-line ul li{position:relative !important;margin-bottom:1.5rem}.time-line ul li .time-card{width:100% !important;height:100% !important}.time-line ul li .time-card::before{content:"" !important}.time-line ul li .time-card::before{border:0 !important;top:0 !important}.time-line ul li:nth-child(2n) .time-card{position:relative !important}.time-line .time-line-animation > li:nth-child(1) .time-card{animation:time-line-top 1s !important;animation-delay:0.5s !important;animation-fill-mode:forwards !important}.time-line .time-line-animation > li:nth-child(2) .time-card{animation:time-line-top 1s !important;animation-delay:1s !important;animation-fill-mode:forwards !important}.time-line .time-line-animation > li:nth-child(3) .time-card{animation:time-line-top 1s !important;animation-delay:1.5s !important;animation-fill-mode:forwards !important}.hobby .contain{flex-wrap:wrap !important}.hobby .hobby-card{width:8.75rem !important;height:20rem !important;padding:2rem !important;border-radius:1rem !important}.hobby .hobby-card .art{width:6.25rem !important;height:6.25rem !important}.hobby .hobby-card p.title{font-size:0.875rem !important}.hobby .hobby-card p.sub-title{font-size:0.6875rem !important}.contact .title{font-size:3rem !important}.contact .contact-pane{width:32.5rem !important;height:18.75rem !important}.contact .contact-pane .contact-item{display:flex;flex-direction:column;justify-content:center;align-items:center;width:25%;height:50%;font-size:1rem !important}.contact .contact-pane .contact-item a{width:4rem !important;height:4rem !important}.contact .contact-pane .contact-item img{width:4rem !important;height:4rem !important}.contact .footer p{color:gray !important}}@media (min-width:768px) and (max-width:1023px){html{font-size:14px !important}.skill-pane{padding-left:0 !important}.time-line ul{flex-direction:column !important;align-items:center !important;height:80% !important}.time-line ul::before{content:"" !important;background:none !important}.time-line ul li{position:relative !important;margin-bottom:1.5rem}.time-line ul li .time-card{width:100% !important;height:100% !important}.time-line ul li .time-card::before{content:"" !important}.time-line ul li .time-card::before{border:0 !important;top:0 !important}.time-line ul li:nth-child(2n) .time-card{position:relative !important}.time-line .time-line-animation > li:nth-child(1) .time-card{animation:time-line-top 1s !important;animation-delay:0.5s !important;animation-fill-mode:forwards !important}.time-line .time-line-animation > li:nth-child(2) .time-card{animation:time-line-top 1s !important;animation-delay:1s !important;animation-fill-mode:forwards !important}.time-line .time-line-animation > li:nth-child(3) .time-card{animation:time-line-top 1s !important;animation-delay:1.5s !important;animation-fill-mode:forwards !important}.hobby .contain{flex-wrap:wrap !important}.hobby .hobby-card{width:8.75rem !important;height:20rem !important;padding:2rem !important;border-radius:1rem !important}.hobby .hobby-card .art{width:6.25rem !important;height:6.25rem !important}.hobby .hobby-card p.title{font-size:0.875rem !important}.hobby .hobby-card p.sub-title{font-size:0.6875rem !important}.contact .title{font-size:3rem !important}.contact .contact-pane{width:32.5rem !important;height:18.75rem !important}.contact .contact-pane .contact-item{display:flex;flex-direction:column;justify-content:center;align-items:center;width:25%;height:50%;font-size:1rem !important}.contact .contact-pane .contact-item a{width:4rem !important;height:4rem !important}.contact .contact-pane .contact-item img{width:4rem !important;height:4rem !important}.contact .footer p{color:gray !important}}@media (min-width:1024px) and (max-width:1920px){html{font-size:16px !important}}html{font-size:12px}html,body,.main{position:relative;width:100%;height:100%;padding:0;margin:0;overflow-y:hidden;overflow-x:auto;font-family:"OPPOSans-L"}ul{padding:0 !important}.main{overflow-x:visible !important}.container{position:absolute;top:0;width:100%;height:auto}.container-animation{transition:all 0.5s ease}.section{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:100%;height:100vh;color:white}.section.self{background:url("../images/background.png");background-size:cover;background-position:center;background-repeat:no-repeat}.section.self .user-img{width:16rem;height:16rem;border:0.25rem solid rgb(103,153,254);border-radius:50%;animation:user-img 5s;animation-iteration-count:infinite;animation-timing-function:linear}.section.self .title{font-size:2.25rem;margin:0.75rem}.section.self .sub-title{font-size:1.5rem;margin:0.75rem}.section.self .text{font-size:1.5rem;margin:0.75rem}.section.skill{background:url("../images/skill.png");background-size:cover;background-position:center;background-repeat:no-repeat}.section.skill .skill-pane{padding-left:12.5rem;width:100%}.section.skill .skill-pane p:nth-child(2){margin-left:6px}.section.skill .skill-pane p:nth-child(3){margin-left:9px}.section.skill .skill-pane p:nth-child(4){margin-left:12px}.section.skill .skill-pane p:nth-child(5){margin-left:15px}.section.skill .skill-pane p:nth-child(6){margin-left:18px}.section.skill .skill-pane p:nth-child(7){margin-left:21px}.section.skill .skill-pane p:nth-child(8){margin-left:24px}.section.skill .skill-pane p:nth-child(9){margin-left:27px}.section.skill .skill-pane p:nth-child(10){margin-left:30px}.section.skill .skill-pane p:nth-child(11){margin-left:33px}.section.skill .skill-pane p:nth-child(12){margin-left:36px}.section.skill .skill-pane p:nth-child(13){margin-left:39px}.section.skill .skill-pane p:nth-child(14){margin-left:42px}.section.skill .skill-pane p:nth-child(15){margin-left:45px}.section.skill .skill-pane p:nth-child(16){margin-left:48px}.section.skill .skill-pane p:nth-child(17){margin-left:51px}.section.skill .skill-pane p:nth-child(18){margin-left:54px}.section.skill .skill-pane p:nth-child(19){margin-left:57px}.section.skill .skill-pane p:nth-child(20){margin-left:60px}.section.skill .skill-pane p{font-size:1.75rem;margin:0.75rem 0;opacity:0}.section.skill .skill-pane p.title{font-size:2.25rem}.section.skill .skill-pane .hr{width:28.125rem;border:none;border-bottom:1px solid white}.section.skill .skill-font{position:absolute;top:-4rem;right:-4rem;width:16rem;height:16rem}.section.skill .skill-animation p:nth-child(1){animation:show-skill 1s;animation-delay:0.2s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(2){animation:show-skill 1s;animation-delay:0.4s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(3){animation:show-skill 1s;animation-delay:0.6s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(4){animation:show-skill 1s;animation-delay:0.8s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(5){animation:show-skill 1s;animation-delay:1s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(6){animation:show-skill 1s;animation-delay:1.2s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(7){animation:show-skill 1s;animation-delay:1.4s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(8){animation:show-skill 1s;animation-delay:1.6s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(9){animation:show-skill 1s;animation-delay:1.8s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(10){animation:show-skill 1s;animation-delay:2s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(11){animation:show-skill 1s;animation-delay:2.2s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(12){animation:show-skill 1s;animation-delay:2.4s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(13){animation:show-skill 1s;animation-delay:2.6s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(14){animation:show-skill 1s;animation-delay:2.8s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(15){animation:show-skill 1s;animation-delay:3s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(16){animation:show-skill 1s;animation-delay:3.2s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(17){animation:show-skill 1s;animation-delay:3.4s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(18){animation:show-skill 1s;animation-delay:3.6s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(19){animation:show-skill 1s;animation-delay:3.8s;animation-fill-mode:forwards}.section.skill .skill-animation p:nth-child(20){animation:show-skill 1s;animation-delay:4s;animation-fill-mode:forwards}.section.time-line{background:url("../images/time-line.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}.section.time-line ul{display:flex;width:80%;height:100%;position:relative}.section.time-line ul::before{content:" ";position:absolute;top:50%;width:100%;height:2px;background:linear-gradient(45deg,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%)}.section.time-line ul li{width:100%;height:100%}.section.time-line ul li .time-card{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:25rem;height:15.625rem;color:black;background-color:white;border-radius:1rem;box-shadow:0.3125rem 0.3125rem 0.625rem rgba(0,0,0,0.5);opacity:0}.section.time-line ul li .time-card::before{content:" ";position:absolute;right:calc(50% - 2rem);border-top:2rem solid transparent;border-right:2rem solid transparent;border-left:2rem solid transparent;border-bottom:2rem solid transparent}.section.time-line ul li .time-card p{font-size:1.125rem;margin:0.25rem 0}.section.time-line ul li .time-card p.title{font-size:2rem;margin-bottom:0.5rem}.section.time-line ul li:nth-child(odd) .time-card::before{border-top:2rem solid white;bottom:-4rem}.section.time-line ul li:nth-child(even) .time-card::before{border-bottom:2rem solid white;top:-4rem}.section.time-line ul li:nth-child(2n) .time-card{position:absolute;bottom:0}.section.time-line .time-line-animation > li:nth-child(1) .time-card{animation:time-line-top 1s;animation-delay:0.5s;animation-fill-mode:forwards}.section.time-line .time-line-animation > li:nth-child(2) .time-card{animation:time-line-bottom 1s;animation-delay:1s;animation-fill-mode:forwards}.section.time-line .time-line-animation > li:nth-child(3) .time-card{animation:time-line-top 1s;animation-delay:1.5s;animation-fill-mode:forwards}.section.hobby{background:url("../images/hobby.png");background-size:cover;background-position:center;background-repeat:no-repeat}.section.hobby .contain{flex-direction:row;justify-content:space-around}.section.hobby .hobby-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:17.5rem;height:28.125rem;padding:4rem;border-radius:2rem}.section.hobby .hobby-card.left{background-color:rgba(255,194,204,0.7)}.section.hobby .hobby-card.left .art{border:0.25rem solid #f3add1}.section.hobby .hobby-card.mid{background-color:rgba(149,255,184,0.7)}.section.hobby .hobby-card.mid .art{border:0.25rem solid #caf9d1}.section.hobby .hobby-card.right{background-color:rgba(106,178,255,0.7)}.section.hobby .hobby-card.right .art{border:0.25rem solid #8ab4e9}.section.hobby .hobby-card .art{width:12.5rem;height:12.5rem;border-radius:50%;margin-bottom:2rem}.section.hobby .hobby-card p{text-align:center;margin:0.25rem 0}.section.hobby .hobby-card p.title{font-size:1.75rem}.section.hobby .hobby-card p.sub-title{font-size:1.375rem}.section.contact{background:url("../images/contact.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;color:black}.section.contact .title{font-size:4rem}.section.contact .contact-pane{display:flex;flex-direction:row;flex-wrap:wrap;width:75rem;height:37.5rem;background-color:rgba(255,255,255,0.5);border-radius:0.25rem}.section.contact .contact-pane .contact-item{display:flex;flex-direction:column;justify-content:center;align-items:center;width:25%;height:50%;font-size:1.25rem}.section.contact .contact-pane .contact-item a{width:6.25rem;height:6.25rem}.section.contact .contact-pane .contact-item img{width:6.25rem;height:6.25rem;border-radius:1rem}.section.contact .footer p{font-size:1.5rem;color:white;text-align:center}.section .contain{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:80%;height:80%}.section .contain .down-link{position:absolute;bottom:0;width:3rem;height:3rem;transition:all 0.5s}.section .contain .down-link .down-img{width:3rem;height:3rem}.section .contain .down-link:hover{opacity:0.6}.section.easter-egg{background:url("../images/2026-03-05_21.18.32.png");background-size:cover;background-position:center;background-repeat:no-repeat}.section.easter-egg::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.jukebox-container{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;width:70%;height:80%;padding:0 50px}.parrot-container{width:250px;height:250px;background:rgba(240,240,240,0.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:15px;border:1px solid rgba(220,220,220,0.4);display:flex;justify-content:center;align-items:center;margin-right:auto}.parrot-img{width:auto;height:auto;max-width:150px;max-height:150px;transition:opacity 0.3s ease}.jukebox-img{cursor:pointer;width:200px;height:auto;transition:transform 0.2s}.jukebox-img:hover{transform:scale(1.1)}.jukebox-img.playing{animation:pulse 0.5s infinite alternate}@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.05)}}.section.end-page{background:url("../images/background.png");background-size:cover;background-position:center;background-repeat:no-repeat}.end-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}.end-text{font-size:2rem;color:white;text-shadow:0 0 20px rgba(255,255,255,0.5);text-align:center}.end-icons{display:flex;align-items:center;gap:60px}.steve-img{width:100px;height:auto;transform:scaleX(-1);image-rendering:pixelated}.door-img{width:160px;height:auto;cursor:pointer;transition:transform 0.3s;image-rendering:pixelated}.door-img:hover{transform:scale(1.1)}.quote-container{margin:1rem 0;display:flex;justify-content:center;align-items:center}.quote-box{background:rgba(255,255,255,0.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:12px;padding:1rem 2rem;border:1px solid rgba(255,255,255,0.3);box-shadow:0 8px 32px rgba(0,0,0,0.1);font-size:1.25rem;color:white;min-height:3rem;display:flex;align-items:center;justify-content:center}.cursor{animation:blink 0.7s infinite;font-weight:bold;margin-left:2px}@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}.context-menu{position:fixed;z-index:9999;min-width:250px;background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.2);border:1px solid rgba(200,200,200,0.4);display:none;padding:8px 0}.context-menu.show{display:block}.context-item{display:block;padding:12px 20px;cursor:pointer;transition:background 0.2s;color:#333;text-decoration:none;font-size:14px}.context-item:hover{background:rgba(0,0,0,0.08)}#context-hint{cursor:default;display:flex;flex-direction:column;gap:6px}.hint-text{display:block;font-size:13px;color:#555}.context-divider{height:1px;background:rgba(200,200,200,0.5);margin:4px 0}#context-qq{color:#333;text-decoration:none}#context-qq:hover{background:rgba(18,183,245,0.1)}.qq-number{color:#12b7f5;font-weight:bold;font-size:16px}.copy-hint{font-size:12px;color:#888;margin-left:8px}.controls{position:absolute;top:50%;right:20px;transform:translateY(-50%);border-radius:8px;overflow:hidden}.controls .bar{display:block;position:absolute;top:1px;right:1px;width:12px;height:48px;background-color:white;z-index:-1;transition:all 0.5s;transform:translateY(0px)}.controls ul{position:relative;list-style:none;border-radius:8px;margin:0;padding:0}.controls ul li{width:12px;height:48px;border-right:1px solid white;border-left:1px solid white;border-bottom:1px solid white;cursor:pointer;transition:all 0.5s}.controls ul li:first-child{border-top:1px solid white;border-radius:8px 8px 0 0}.controls ul li:last-child{border-bottom:1px solid white;border-radius:0 0 8px 8px}