*{padding:0;margin:0;box-sizing:border-box;font-family:DM Sans,sans-serif;font-optical-sizing:auto;font-weight:700;font-style:normal}body{background-color:#1e1e2f;color:#e0e0e0}body a{color:#fff;text-decoration:none}header{background-color:#2c2c3c;position:fixed;display:flex;justify-content:center;align-items:center;height:5rem;width:100%;z-index:999}header nav ul{list-style:none;display:flex;justify-content:center;align-items:center;gap:1rem}header nav ul li{list-style:none;padding:0;margin:0;background:none;transition:all .5s ease}header nav ul li button{background-color:#1e1e2f;color:#fff;width:100%;height:100%;padding:1rem 2.5rem;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease;border-radius:10px;white-space:nowrap}header nav ul li button:hover{background-color:#4f83cc}.Picture{height:100vh;padding-top:5rem;display:flex}.Picture .introduce{padding:9rem;flex:5}.Picture .introduce h1{font-size:5rem;color:#e0e0e0}.Picture .introduce h2{margin:1rem 0;font-size:2rem}.Picture .introduce p{font-size:1.5rem}.Picture .myPicture{flex:4}.Picture .myPicture img{width:40vw;height:95vh;padding:4rem}.aboutMe{align-items:center;width:100%;height:50vh;padding:5rem;line-height:3rem;background-color:#2c2c3ccc}.aboutMe p{font-size:1.5rem}.Skill{padding:5rem}.Skill h2{text-align:center;font-size:2.5rem}.Skill .images{display:flex;justify-content:center;align-self:center;width:100%;height:20vh;padding:2.5rem}.Skill .images img{padding:1rem;margin:0 .5rem;cursor:pointer;height:10vh;width:10vh;transition:all .5s ease}.Skill .images img:hover{background-color:#4f83cc;border:1px solid #3e3e4e}.Component{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem;align-items:start}.Component .project{width:100%;display:flex;flex-direction:column;background-color:#2c2c3c;border-radius:1rem;padding:1rem;gap:1rem}.Component .project img{width:100%;height:auto;border-radius:1rem}.Component .introduce h1{position:relative}.Component .introduce h1 a{font-size:2rem}.Component .introduce h1 .tooltip-text{visibility:hidden;opacity:0;font-size:1rem;position:absolute;transition:opacity 2s;left:0;top:-50%}.Component .introduce h1:hover .tooltip-text{visibility:visible;opacity:1}.Component .useSkill{background-color:#1e1e2f;padding:1rem;border-radius:.5rem;display:flex;justify-content:space-between;text-align:center}.Component .useSkill h1{margin:1rem;font-size:1.5rem;position:relative}.Component .useSkill h1 span{visibility:hidden;opacity:0;transition:opacity 1.5s;font-size:.9rem;position:absolute;left:0;top:-70%;white-space:nowrap}.Component .useSkill h1:hover span{visibility:visible;opacity:1}.Component .useSkill p{text-align:center;border-radius:15px;background-color:#4f83cc;border:1px solid blue;font-size:1.2rem;padding:1rem}.Component .introduce h1{font-size:2rem;margin-bottom:1rem}.Component .introduce p{margin:3rem 8rem 0 0;font-size:1.2rem;line-height:2rem}.Component .useSkill .introduce{background-color:#2c2c3c;padding:2rem;border-radius:1rem;color:#e0e0e0}.context{background-color:#2c2c3c;display:grid;grid-template-columns:1fr 1fr;width:100%;height:10vh}.context h2{display:flex;justify-content:center;align-items:center}.context .context-logo{display:flex;justify-content:space-evenly;align-items:center}.context .context-logo a{width:5%;height:auto}.context .context-logo a .logo-linkedin{width:100%}@media screen and (max-width: 650px){.hamburger{width:30px;height:30px;position:relative;cursor:pointer;z-index:1002;position:fixed;top:10px;left:10px}.hamburger div{background-color:#e0e0e0;height:3px;margin:5px 0;border-radius:2px;transition:.4s}.hamburger.open div:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger.hamburger.open div:nth-child(2){opacity:0}.hamburger.hamburger.open div:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-menu{position:fixed;right:-100%;width:100%;background-color:#2c2c3c;padding:.5rem;display:flex;flex-direction:column;gap:1rem;transition:right .3s ease;text-align:center}.mobile-menu a{color:#e0e0e0;text-decoration:none;font-size:1.2rem;opacity:0;transform:translateY(100px);transition:opacity .5s ease,transform .5s ease}.mobile-menu.show{right:0}.mobile-menu.show a{opacity:1;transform:translateY(0)}.mobile-menu.show :nth-child(1){transition-delay:.3s}.mobile-menu.show :nth-child(2){transition-delay:.4s}.mobile-menu.show :nth-child(3){transition-delay:.5s}.mobile-menu.show :nth-child(4){transition-delay:.6s}.mobile-menu.show :nth-child(5){transition-delay:.7s}.Picture .introduce{padding:1rem 3rem;align-items:center;text-align:center;min-height:100vh}.Picture .introduce p{margin-top:3rem}.Picture .myPicture{display:none;opacity:0}.aboutMe{padding:3rem 5rem;overflow-y:auto}.Skill{padding:1rem}.Skill .images{display:flex;flex-wrap:wrap;width:100%;height:100%;padding:1rem}.Skill .images img{height:10vh;width:10vh}.Project .Component{display:flex;flex-direction:column;text-align:center}.Project .Component .project img{width:100%;height:132px}.Project .Component .project .useSkill p{align-self:center}.Project .Component .introduce p{height:40vh;overflow-y:auto;margin:2rem .5rem}.context{height:100%}.context h2{text-align:center}.context .context-logo{align-items:center}.context .context-logo a img{width:300%;height:300%}.context .context-logo a .logo-linkedin{width:300%;height:3.5vh}}@media screen and (max-width: 1050px){.Picture{height:auto}.Picture .introduce{padding:3rem;text-align:left}.Picture .myPicture{display:none}.aboutMe{padding:3rem}.Project .Component{display:flex;flex-direction:column}.Project .Component .introduce h1{display:none}.Project .Component .introduce p{margin:2rem 0;font-size:1.3rem}.Skill .images img{height:10vh;width:10vh}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000;z-index:500;animation:fadeIn .3s forwards}@keyframes fadeIn{to{background-color:#1e1e2fb3}}.hidden{opacity:0;transform:translateY(50px);transition:opacity .8s ease,transform .8s ease}.show{opacity:1;transform:translateY(0)}.fade-in-text{opacity:0;transform:translateY(20px);animation:fadeInUp 1s ease forwards;animation-delay:.5s}.fade-in-text:nth-child(1){animation-delay:.3s}.fade-in-text:nth-child(2){animation-delay:1s}.fade-in-text:nth-child(3){animation-delay:1s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}