@import "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Quicksand:wght@300..700&display=swap";*{scroll-behavior:smooth;margin:0;padding:0;font-family:Nunito,sans-serif;box-sizing:border-box!important}#introduce{background-color:#faf7f2;justify-content:space-evenly;height:100vh;padding:180px 14rem 0;display:flex}#about-me{text-align:center;background-color:#f4efe680;flex-direction:column;height:100vh;padding:180px 14rem 0;display:flex}#project{background-color:#faf7f2;height:100vh;padding-top:180px}#experience-and-education{background-color:#f4efe680;height:100vh;padding-top:180px}#contact-me{background-color:#faf7f2;height:100vh;padding-top:170px}.navbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background-color:#fffc;border-radius:32px;justify-content:space-between;padding:16px 32px;display:flex;position:fixed;top:20px;left:14rem;right:14rem;box-shadow:0 8px 24px #8a959e26}.title-navbar{font-family:Nunito;font-weight:700;font-style:Bold;letter-spacing:0.49%;vertical-align:middle;color:#f7a3a3;font-size:24px;line-height:32px}.logo-navbar{align-items:center;gap:12px;display:flex}.menu-navbar{align-items:center;gap:32px;font-family:Quicksand,sans-serif;font-size:16px;display:flex}.menu-navbar a{color:#4a5568b2;text-decoration:none}.menu-navbar a.active{color:#f7a3a3}.btn-navbar{color:#fff;cursor:pointer;background-color:#f7a3a3;border:none;border-radius:32px;align-items:center;gap:6px;padding:10px 24px;display:flex}.avatar-name{font-weight:700;font-style:Bold;letter-spacing:0.1%;vertical-align:middle;color:#4a5568;font-size:60px;line-height:75px}.gift{color:#f7a3a3}.description{font-weight:400;font-style:Regular;letter-spacing:0%;vertical-align:middle;color:#4a556899;margin-top:30px;font-size:20px;line-height:32.5px}.view-projects{opacity:1;color:#fff;cursor:pointer;cursor:pointer;background-color:#e68a75;border:none;border-radius:32px;width:180px;height:60px;padding:16px 32px;font-size:18px;text-decoration:none;transition:background-color .2s}.view-projects:hover{background-color:#e68a75cc}.let-chat{opacity:1;color:#f7a3a3;cursor:pointer;background-color:#fff;border:none;border-radius:32px;width:153px;height:60px;padding:16px 32px;font-size:18px;text-decoration:none;transition:background-color .2s}.let-chat:hover{background-color:#f7a3a31a}.btn-introduce{gap:16px;margin-top:40px;display:flex}.level1{opacity:1;color:#ffcd6b;background-color:#ffcd6b33;border-width:1px;border-radius:32px;justify-content:center;align-items:center;gap:10px;width:330px;height:42px;margin-top:0;margin-bottom:30px;padding:0 16px;font-size:16px;display:flex}.star{opacity:1;width:16px;height:15px;top:.24px}.avatar{object-fit:cover;border-radius:16px;width:300px;height:300px}.wrapper-avatar{z-index:1;background-color:#f4efe6;border-radius:16px;width:fit-content;padding:30px;box-shadow:0 8px 24px #8a959e26}.right-introduce{flex-direction:column;align-items:center;margin-top:4rem;display:flex}.happy{z-index:2;width:230px;margin-top:18rem;margin-right:-10rem;position:absolute}.yellow{z-index:0;width:300px;margin-top:11rem;margin-right:25rem;position:absolute}.pink{z-index:1;width:220px;margin-top:-7rem;margin-right:-20rem;position:absolute}.title{font-weight:700;font-style:Bold;letter-spacing:0.1%;text-align:center;vertical-align:middle;color:#4a5568;font-size:36px;line-height:40px}.des-aboutme{font-weight:400;font-style:Regular;letter-spacing:0%;text-align:center;vertical-align:middle;color:#4a556899;margin-top:1rem;font-size:16px;line-height:24px}.box-container{justify-content:center;gap:70px;margin-top:7rem;display:flex}.box{opacity:1;text-align:start;background-color:#fff;border-radius:32px;width:350px;padding:32px;box-shadow:0 8px 24px #8a959e26}.box-title{font-family:Nunito;font-weight:700;font-style:Bold;letter-spacing:0.2%;vertical-align:middle;color:#4a5568;align-items:center;gap:15px;font-size:20px;line-height:28px;display:flex}.react-icon{width:48px}.wrapper-hard{grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:1.5rem;display:grid}.wrapper-soft{grid-template-columns:repeat(1,1fr);gap:.5rem;margin-top:1.5rem;display:grid}.hard-skill,.soft-skill{font-weight:700;font-style:Bold;letter-spacing:0.88%;vertical-align:middle;color:#4a5568;background-color:#f7a3a333;border:1px solid #f7a3a326;border-radius:24px;align-items:center;gap:7px;width:fit-content;padding:4px 12px;font-size:14px;line-height:20px;display:flex}.growing-path{letter-spacing:0.1%;text-align:center;vertical-align:middle;color:#4a556899;font-size:14px;font-style:italic;font-weight:400;line-height:20px}.wrapper-growing{margin-top:0;display:flex}.growth-icon{width:128px}.growing{flex-direction:column;align-items:center;display:flex}.experience{justify-content:center;gap:1px;margin-top:3rem;display:flex}.box-icon1{opacity:1;color:#f7a3a3;background-color:#fff;border:5px solid #f7a3a333;border-radius:32px;justify-content:center;align-items:center;width:80px;height:80px;margin-right:1.5rem;display:flex;box-shadow:0 4px 6px -1px #0000001a}.box-icon2{opacity:1;color:#ffcd6b;background-color:#fff;border:5px solid #ffcd6b33;border-radius:32px;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:1.5rem;margin-right:1.5rem;display:flex;box-shadow:0 4px 6px -1px #0000001a}.wrapper-icon-ex{z-index:1;justify-content:right;gap:20px;margin-top:3rem;display:grid}.line{z-index:0;background-color:#f7a3a333;width:4px;height:450px;margin-top:3rem;margin-right:54rem;position:absolute}.box-ee{z-index:1;justify-content:center;gap:5px;margin-top:2rem;display:grid}.container-ee{text-align:left;background-color:#fff;border-radius:28px;width:800px;margin:20px;padding:32px;box-shadow:0 4px 6px #0000001a}.years{color:#ffcd6b;background-color:#ffcd6b1a;border:none;border-radius:15px;padding:4px 12px;font-size:14px;display:inline}.head2{font-family:Nunito;font-weight:700;font-style:Bold;letter-spacing:0.1%;vertical-align:middle;color:#4a5568;flex-direction:row;justify-content:space-between;font-size:20px;line-height:28px;display:flex}.content1{font-family:Nunito;font-weight:700;font-style:Bold;letter-spacing:0%;vertical-align:middle;color:#4a556880;margin-top:-2rem;font-size:16px;line-height:24px}.content2{font-family:Quicksand;font-weight:400;font-style:Regular;letter-spacing:0%;vertical-align:middle;color:#4a556899;margin-top:1rem;font-size:16px;line-height:24px}.wrapper-content{margin-top:1.5rem}.months{color:#f7a3a3;background-color:#f7a3a31a;border:none;border-radius:15px;padding:4px 12px;font-size:14px;display:inline}.letme{font-weight:700;font-style:Bold;letter-spacing:0%;vertical-align:middle;color:#fff;font-size:36px;line-height:40px}.des-contact{font-weight:400;font-style:Regular;letter-spacing:0%;vertical-align:middle;color:#fffc;margin-top:1.5rem;font-size:16px;line-height:26px}.box-contact1{opacity:1;text-align:start;background-color:#f7a3a3;border-radius:32px;width:704px;padding:40px;box-shadow:0 10px 15px -3px #0000001a}.box-contact2{opacity:1;text-align:start;background-color:#fff;border-radius:32px;width:704px;height:470px;padding:32px;box-shadow:0 8px 24px #8a959e26}.submail-add{font-family:Nunito;font-weight:700;font-style:Bold;letter-spacing:0%;vertical-align:middle;color:#fff;align-items:center;gap:24px;margin-top:1.5rem;font-size:15px;line-height:24px;display:flex}.wrapper-mailadd{margin-top:2.5rem}.img-2-icon{opacity:1;cursor:pointer;border-radius:16px;width:48px;margin-top:1.5rem;transition:background-color .2s}.img-2-icon:hover{background-color:#fff3}.icon-btn{border-radius:16px;justify-content:center;align-items:center;margin-top:1.5rem;transition:background-color .2s;display:flex;background-color:#ffffff1a!important;width:48px!important;height:48px!important}.icon-btn:hover{background-color:#fff3!important}.two-icon{flex-direction:row;gap:20px;margin-top:1.5rem;display:flex}.test{opacity:1;background-color:#fff3;border-radius:16px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.label-contact{font-family:Quicksand;font-weight:700;font-style:Bold;letter-spacing:0%;vertical-align:middle;color:#4a556899;font-size:14px;line-height:20px}.input-contact{opacity:1;width:292px;height:24px;letter-spacing:0%;vertical-align:middle;color:#9ca3af;background-color:#faf7f2;border:none;border-radius:32px;margin-top:.5rem;padding-left:24px;padding-right:24px;font-size:16px;font-weight:500;line-height:24px}.wrapper-input{flex-direction:column;display:flex}.container-contact{justify-content:center;gap:24px;margin-top:1rem;display:flex}.wrapper-input2{flex-direction:column;margin-top:1rem;display:flex}.container-contact2{justify-content:center;gap:24px;margin-top:1rem;display:flex}.input-contact2{opacity:1;width:608px;height:136px;letter-spacing:0%;vertical-align:middle;color:#9ca3af;background-color:#faf7f2;border:none;border-radius:32px;margin-top:.5rem;padding:16px 24px 96px;font-family:Nunito;font-size:16px;font-weight:500;line-height:24px}.btn-send{opacity:1;width:608px;height:60px;letter-spacing:0.1%;vertical-align:middle;color:#fff;cursor:pointer;background-color:#e68a75;border:none;border-radius:32px;justify-content:center;align-items:center;gap:10px;margin-top:2rem;font-size:18px;font-weight:700;line-height:28px;transition:background-color .2s;display:flex;box-shadow:0 10px 15px -3px #0000001a}.btn-send:hover{background-color:#e68a75cc}.protect{font-family:Nunito;font-weight:400;font-style:Regular;letter-spacing:0%;vertical-align:middle;color:#4a556866;text-align:center;margin-top:1rem;font-size:14px;line-height:20px}.box-project{column-span:1;flex-direction:column;align-items:center;padding:32px;display:flex}.top{opacity:1;background-color:#f7a3a31a;border-radius:32px 32px 0 0;width:560px;height:256px;padding:32px}.bottom{opacity:1;background-color:#fff;border-radius:0 0 32px 32px;gap:12px;width:560px;height:296px;padding:32px}.btn-explore{opacity:1;width:496px;height:48px;letter-spacing:0.2%;color:#fff;cursor:pointer;background-color:#e68a75;border:none;border-radius:32px;justify-content:space-between;align-items:center;margin-top:2rem;padding:0 24px;font-size:16px;font-weight:650;line-height:24px;transition:background-color .2s;display:flex;box-shadow:0 10px 15px -3px #0000001a}.btn-explore:hover{background-color:#e68a75cc}.wrapper-box-title{margin-top:1rem}.purr-img{object-fit:cover;border-radius:16px;width:496px;height:200px}.footer-port{font-weight:700;font-style:Bold;letter-spacing:0.29%;vertical-align:middle;color:#f7a3a399;font-size:18px;line-height:28px}.footer-text{font-weight:500;font-style:Medium;letter-spacing:-0.39%;text-align:center;vertical-align:middle;color:#4a556866;font-size:16px;line-height:24px}.footer{background-color:#faf7f2;flex-direction:column;align-items:center;gap:16px;padding:32px;display:flex}@media (width<=768px){#introduce,#about-me,#project,#experience-and-education,#contact-me{height:auto;min-height:100vh;padding-left:1.5rem;padding-right:1.5rem}#introduce{flex-direction:column;justify-content:flex-start;gap:48px;padding-top:130px;padding-bottom:64px}#about-me,#project,#experience-and-education,#contact-me{padding-top:120px;padding-bottom:64px}.navbar{border-radius:24px;align-items:center;gap:12px;padding:12px 16px;top:12px;left:1rem;right:1rem}.logo-navbar{flex-shrink:0;gap:8px}.logo-navbar img{width:32px}.title-navbar{font-size:20px;line-height:28px}.menu-navbar{display:none}.btn-navbar{border-radius:24px;flex-shrink:0;padding:8px 12px;font-size:0}.btn-navbar img{width:18px}.avatar-name{font-size:40px;line-height:48px}.description{margin-top:24px;font-size:17px;line-height:28px}.description br,.growing-path br{display:none}.level1{justify-content:flex-start;width:100%;max-width:330px;height:auto;min-height:42px;font-size:14px}.btn-introduce{flex-wrap:wrap;gap:12px;margin-top:32px}.view-projects,.let-chat{justify-content:center;align-items:center;width:auto;min-height:52px;padding:14px 24px;font-size:16px;display:inline-flex}.right-introduce{width:100%;margin-top:0}.wrapper-avatar{margin-right:0;padding:20px}.avatar{width:min(260px,70vw);height:min(260px,70vw)}.happy,.yellow,.pink{display:none}.title{font-size:30px;line-height:36px}.des-aboutme{max-width:560px;margin-left:auto;margin-right:auto}.box-container{flex-direction:column;align-items:center;gap:24px;margin-top:3rem}.box{border-radius:24px;width:100%;max-width:420px;padding:24px}.box-title{font-size:18px;line-height:26px}.wrapper-hard{grid-template-columns:repeat(2,minmax(0,1fr))}.hard-skill,.soft-skill{width:100%;min-width:0}.wrapper-growing{justify-content:center}.growth-icon{width:104px}.box-project{padding:24px 0 0}.top,.bottom{width:100%;max-width:560px;height:auto;padding:24px}.purr-img{aspect-ratio:16/9;width:100%;height:auto}.btn-explore{width:100%;max-width:496px;margin-top:1.5rem}.experience{flex-direction:column;align-items:center;margin-top:2rem}.line{display:none}.wrapper-icon-ex{justify-content:center;gap:16px;margin-top:0;display:flex}.box-icon1,.box-icon2{border-radius:24px;width:64px;height:64px;margin-bottom:0;margin-right:0}.box-ee{width:100%;margin-top:1.5rem}.container-ee{border-radius:24px;width:100%;max-width:560px;margin:12px auto;padding:24px}.head2{flex-direction:column;align-items:flex-start;gap:10px;font-size:18px;line-height:26px}.content1{margin-top:0}.wrapper-content{margin-top:1rem}.box-contact1,.box-contact2{border-radius:24px;width:100%;max-width:560px;padding:28px}.box-contact2{height:auto}.letme{font-size:30px;line-height:36px}.submail-add{overflow-wrap:anywhere;word-break:break-word;align-items:flex-start;gap:14px}.test{flex:0 0 40px}.container-contact,.container-contact2{flex-direction:column;gap:16px}.input-contact,.input-contact2,.btn-send{width:100%}.footer{padding:28px 1.5rem}}@media (width<=480px){#introduce,#about-me,#project,#experience-and-education,#contact-me{padding-left:1rem;padding-right:1rem}#introduce{padding-top:110px}.navbar{left:.75rem;right:.75rem}.title-navbar{font-size:18px}.avatar-name{font-size:34px;line-height:42px}.description{font-size:16px;line-height:26px}.btn-introduce{flex-direction:column}.view-projects,.let-chat{width:100%}.wrapper-hard{grid-template-columns:1fr}.top,.bottom,.box,.container-ee,.box-contact1,.box-contact2{border-radius:20px;padding:20px}.top{border-radius:20px 20px 0 0}.bottom{border-radius:0 0 20px 20px}.submail-add{font-size:14px}.footer-text{font-size:14px;line-height:22px}}