:root{font-family:Times New Roman,Times,serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{overflow-x:hidden;margin:0;padding:0}body::-webkit-scrollbar{width:10px;height:10px}body::-webkit-scrollbar-thumb{background:#03101c;border-radius:20px}body::-webkit-scrollbar-track{background:#254f7d;border-radius:20px}body{scrollbar-face-color:#03101c;scrollbar-track-color:#254f7d}.App{width:100%;height:160vh;background-image:url(/assets/retro-living-room-interior-design-5746db46.jpg);background-size:215vh 100vh;position:fixed}.App .container{width:90%;height:80vh;background:linear-gradient(80deg,rgb(51,100,133),rgb(8,29,50));border-radius:50px;margin:0 auto;position:fixed;left:50%;transform:translate(-50%) translateY(-50%);top:50%}.App .container .navBar{border-top-left-radius:20px;border-top-right-radius:20px;position:fixed;width:100%}.App .container .navBar .bar{width:100%;display:flex;align-items:center;justify-content:space-around}.App .container .navBar .bar ul{list-style:none;display:flex;gap:20px;align-items:center}.App .container .navBar .bar ul:first-of-type{margin-left:50px}.App .container .navBar .bar ul:nth-of-type(2) #icon img{width:35px}.App .container .navBar .bar select{border:none;background:transparent;padding:4px 10px;margin:0;cursor:pointer;border-radius:10px;-moz-appearance:transparent;-o-appearance:transparent;-webkit-appearance:transparent;appearance:transparent}.App .container .navBar .bar select:hover{-webkit-appearance:transparent;-moz-appearance:transparent;appearance:transparent;background-color:#093258}.App .container .navBar .bar select option{background-color:transparent;cursor:pointer}.App .container .header{margin-top:50px;position:relative}.App .container .header .myName{position:absolute;width:100%;font-size:100px;font-weight:600;opacity:.3;letter-spacing:10px;cursor:default;font-style:italic;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:-1}.App .container .header p:nth-of-type(1){margin-top:30px;margin-bottom:0}.App .container .header p:nth-of-type(2){margin-top:0;margin-bottom:10px;justify-content:center}.App .container .header .about-section{transition:all .4s}.App .container .header .about-section .background-animat{display:flex;justify-content:center}.App .container .header .about-section .background-animat .myInformation{position:absolute;width:280px;top:30px;left:30px;text-align:start}.App .container .header .about-section .background-animat .myInformation h1{margin-bottom:0;margin-top:0;transform:translate(-200px);opacity:0;transition:all .7s ease}.App .container .header .about-section .background-animat .myInformation h1:nth-of-type(2){height:60px}.App .container .header .about-section .background-animat .myInformation .animate-text{margin-bottom:0;margin-top:0}.App .container .header .about-section .background-animat .myInformation h1.slide-in{transform:translate(0);opacity:1}.App .container .header .about-section .background-animat .myInformation .spanAnimat{opacity:0;transform:translateY(10px)}.App .container .header .about-section .background-animat .myInformation .spanAnimat.show{opacity:1;transform:translateY(0)}.App .container .header .about-section .background-animat .myInformation p{opacity:0;transform:translate(-180px);transition:all .7s ease}.App .container .header .about-section .background-animat .myInformation p.slide-in{opacity:1;transform:translateY(0)}.App .container .header .about-section .background-animat .circle{position:absolute;left:50%;transform:translate(-50%) rotate(-280deg);top:15px;width:130px;height:130px;border:80px #051424 solid;border-right:transparent solid 80px;border-radius:50%;transition:all .7s ease;z-index:-1}.App .container .header .about-section .background-animat .circle.slide-in{width:260px;height:260px;transform:translate(-50%) rotate(30deg)}.App .container .header .about-section .background-animat .weatherDay{position:absolute;width:200px;height:200px;right:260px;top:240px;display:grid;grid-template-columns:1fr 1fr;z-index:100}.App .container .header .about-section .background-animat .weatherDay .weath{display:flex;justify-content:center;align-items:center;width:80px;height:80px;border-radius:15px;font-size:17px;font-weight:800;overflow:hidden;position:relative}.App .container .header .about-section .background-animat .weatherDay .weath i{position:absolute;top:-20px;left:-20px;opacity:.4;color:#fff;font-size:105px;font-weight:100;z-index:-1}.App .container .header .about-section .background-animat .weatherDay .tempe{background:#a66901}.App .container .header .about-section .background-animat .weatherDay .wind{background-color:#aa0028}.App .container .header .about-section .background-animat .weatherDay .humidity{background-color:#081d32}.App .container .header .about-section .background-animat .weatherDay .local{background-color:#03101c;color:#fff;font-size:15px}.App .container .header .about-section .background-animat .weatherDay .local i{background-color:#f7063e}.App .container .header .about-section .background-animat .weatherDay .tempe,.App .container .header .about-section .background-animat .weatherDay .wind,.App .container .header .about-section .background-animat .weatherDay .humidity,.App .container .header .about-section .background-animat .weatherDay .local{transition:all .7s;opacity:0;transform:translate(290px)}.App .container .header .about-section .background-animat .weatherDay .tempe.show.slide-in,.App .container .header .about-section .background-animat .weatherDay .wind.show.slide-in,.App .container .header .about-section .background-animat .weatherDay .humidity.show.slide-in,.App .container .header .about-section .background-animat .weatherDay .local.show.slide-in{opacity:1;transform:translate(0)}.App .container .header .about-section .background-animat .News{position:absolute;background:#081d32;color:#fff;border-radius:20px;right:50px;top:20px;color:#081d32;padding:5px;height:220px;overflow-y:scroll;overflow-x:scroll;transition:all .7s;transform:translate(150px);opacity:0;z-index:999}.App .container .header .about-section .background-animat .News::-webkit-scrollbar{display:none;width:0px;height:2px;border-radius:10px}.App .container .header .about-section .background-animat .News::-webkit-scrollbar-track{background-color:#e4e5eb;border-radius:20px}.App .container .header .about-section .background-animat .News::-webkit-scrollbar-thumb{background:#081d32}.App .container .header .about-section .background-animat .News .newItem{border-radius:10px;padding:0 3px;width:270px;height:fit-content;display:flex;align-items:center;gap:10px;margin:5px 0}.App .container .header .about-section .background-animat .News .newItem .imageNews img{width:50px;height:35px}.App .container .header .about-section .background-animat .News .newItem .textNews p{color:#dedede;font-size:12px;margin:10px 0;line-height:1.6;font-family:Arial,Helvetica,sans-serif}.App .container .header .about-section .background-animat .News .newItem .textNews .louding{font-size:large}.App .container .header .about-section .background-animat .News.show.slide-in{transform:translate(0);opacity:1}.App .container .header .skills-section{transition:all .7s}.App .container .header .skills-section .circle-of-skills{position:absolute;top:-30px;left:50%;transform:translate(-50%);width:290px;height:290px;background-color:#051424;margin-top:45px;border-radius:50%;box-shadow:110px 10px 140px #081d3220;z-index:1;transition:all .7s ease}.App .container .header .skills-section .circle-of-skills.show.slide-in{width:390px;height:390px}.App .container .header .skills-section .mySkills .image-of-skills{position:absolute;background:linear-gradient(80deg,rgb(51,100,133),rgb(8,29,50));padding:10px;width:50px;height:50px;border-radius:50%;left:50%;transition:all .7s;transform:translate(-50%) translateY(10rem);z-index:-1}.App .container .header .skills-section .mySkills .image-of-skills img{width:50px;color:#e4e5eb;transition:all .3s}.App .container .header .skills-section .mySkills .image-of-skills p{margin-top:0}.App .container .header .skills-section .mySkills .image-of-skills:first-child.show.slide-in{transform:translateY(330px) translate(-250px);z-index:1}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(2).show.slide-in{transform:translateY(225px) translate(-310px);z-index:1}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(3).show.slide-in{transform:translateY(100px) translate(-310px);z-index:1}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(4).show.slide-in{transform:translateY(-10px) translate(-250px);z-index:1}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(5).show.slide-in{transform:translateY(-10px) translate(177px);z-index:1}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(6).show.slide-in{transform:translateY(100px) translate(240px);z-index:1}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(7).show.slide-in{transform:translateY(225px) translate(240px);z-index:1}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(8).show.slide-in{transform:translateY(330px) translate(177px);z-index:1}.App .container .header .project-section .circle-of-project{position:absolute;width:290px;height:290px;left:50%;transform:translate(-50%);top:35px;background-color:#051424;border-radius:50%;z-index:-1;transition:all .7s ease}.App .container .header .project-section .allProject{width:100%;display:flex;justify-content:space-between;z-index:88}.App .container .header .project-section .allProject .project{font-weight:700;display:flex;align-items:center;gap:20px;z-index:995;transition:all .7s ease;margin-top:40px;padding:30px}.App .container .header .project-section .allProject .project .one{width:300px;height:130px;background-image:url(/Opera\ Snapshot_2023-07-07_190602_musical-griffin-83244e.netlify.app.png);background-size:cover;border-radius:20px;position:relative}.App .container .header .project-section .allProject .project .one:after{content:"Engineered a user-friendly dashboard incorporating filtering, saving, and cart functionalities for new car listings; enhanced user experience and increased lead generation by 30% and sales by 22%, Implemented comparison feature for side-by-side car comparison, Integrated advanced filtering algorithms to ensure precise car searches, reducing user query time by 40% and improving lead quality, Technologies, React,js, Redux,";position:absolute;left:0;top:7px;transition:opacity .3s ease;width:300px;opacity:0;font-size:16px;font-weight:500;text-align:center;color:#fff;display:none}.App .container .header .project-section .allProject .project .one:hover:after{left:100%;opacity:1;display:block}.App .container .header .project-section .allProject .project .two{width:300px;height:130px;background-image:url(/Opera\ Snapshot_2023-07-28_145551_127.0.0.1.png);background-size:contain;border-radius:20px;position:relative}.App .container .header .project-section .allProject .project .two:after{content:"Developed smooth scrolling animations using JavaScript and later TypeScript. Overcame challenges with Google and ChatGPT assistance. Designed and implemented an immersive landing page featuring stunning, interactive animations, increasing user engagement and reducing bounce rates by 50%.Technologies: JavaScript, TypeScript.";position:absolute;right:0;top:-40px;width:300px;transition:opacity .3s ease;opacity:0;font-size:16px;font-weight:500;text-align:center;display:none}.App .container .header .project-section .allProject .project .two:hover:after{right:100%;opacity:1;display:block}.App .container .header .project-section .allProject .project:nth-child(1){transform:translateY(-400px);flex-direction:row-reverse}.App .container .header .project-section .allProject .project:nth-child(2){transform:translateY(400px);opacity:0}.App .container .header .project-section .allProject .project:nth-child(1).show.slide-in{transform:translateY(0);opacity:1}.App .container .header .project-section .allProject .project:nth-child(2).show.slide-in{transform:translateY(250px);opacity:1}.App .container .header .project-section .allProject .project .project-info{position:relative;display:flex;justify-content:space-around;align-items:center;z-index:-1}.App .container .header .project-section .allProject .project .project-info input{background-color:transparent;border:#fff solid 2px;border-radius:20px;padding:10px 20px;cursor:pointer;font-weight:700;transition:all .5s;z-index:33;transform:translateY(50px);opacity:0}.App .container .header .project-section .allProject .project .project-info input:hover{border-color:#f79e06;color:#f79e06;background-color:#03051280}.App .container .header .project-section .allProject .project .project-info:before{content:"";position:absolute;width:100%;height:100%;background-color:#05142480;left:0;top:0;z-index:-2;transition:display .3s ease;display:none}.App .container .header .project-section .allProject .project .project-info:hover:before{display:block}.App .container .header .project-section .allProject .project .project-info:hover input{opacity:1;transform:translateY(0)}.App .container .header .project-section .allProject .project .project-details p{width:240px}.App .container .header .contact-me-section .circle-contact{position:absolute;width:290px;height:290px;left:50%;transform:translate(-50%);top:35px;background-color:#051424;border-radius:50%;z-index:-1;transition:all .7s ease}.App .container .header .contact-me-section .contact-information{display:grid;grid-template-columns:1fr 1fr;justify-content:space-around;align-items:center;gap:80px;z-index:999}.App .container .header .contact-me-section .contact-information .contact-info{padding:10px 16px;display:flex;flex-direction:column;justify-content:center;z-index:999;transform:translate(-80px);opacity:.2;transition:all .5s ease}.App .container .header .contact-me-section .contact-information .contact-info .contact-info-text{margin:0 0 0 10px;width:75%}.App .container .header .contact-me-section .contact-information .contact-info .contact-info-text h3{margin-bottom:0}.App .container .header .contact-me-section .contact-information .contact-info .contact-info-text p{color:#b9c6d4;margin-top:10px}.App .container .header .contact-me-section .contact-information .contact-info .contact-personnel{margin:0 0 0 10px;z-index:999}.App .container .header .contact-me-section .contact-information .contact-info .contact-personnel div{display:flex;align-items:baseline;gap:20px}.App .container .header .contact-me-section .contact-information .contact-info .contact-media{margin:50px auto 0;display:flex;gap:20px;z-index:999}.App .container .header .contact-me-section .contact-information .contact-info .contact-media a{display:flex;justify-content:center;align-items:center;width:30px;height:30px;background-color:transparent;cursor:pointer;border-radius:50%;transition:all .3s ease;color:#fff}.App .container .header .contact-me-section .contact-information .contact-info .contact-media .linkedin:hover{background-color:#fff;color:#0663b9}.App .container .header .contact-me-section .contact-information .contact-info .contact-media .twitter:hover{background-color:#000}.App .container .header .contact-me-section .contact-information .contact-info .contact-media .github:hover{background-color:#aa37d8;color:#fff}.App .container .header .contact-me-section .contact-information .show.slide-in{transform:translate(0);opacity:1}.App .container .header .contact-me-section .contact-information form{z-index:999}.App .container .header .contact-me-section .contact-information form .recruter{margin-top:10px;width:90%;display:flex;flex-direction:column;color:#fff;transition:all .4s ease-in-out;background-color:#4453a530;padding:13px 20px;border-radius:20px;transform:translate(80px);opacity:.2}.App .container .header .contact-me-section .contact-information form .recruter h3{margin:5px auto 13px}.App .container .header .contact-me-section .contact-information form .recruter .recruter-desc{display:flex;flex-direction:column;align-items:center}.App .container .header .contact-me-section .contact-information form .recruter .recruter-desc input{width:90%;transition:all .4s ease;padding:10px;font-size:16px;font-weight:500;background-color:#fff5;border-radius:16px;border:none;margin-bottom:20px}.App .container .header .contact-me-section .contact-information form .recruter .recruter-desc input::placeholder{color:#ffffff70}.App .container .header .contact-me-section .contact-information form .recruter #email{margin-bottom:20px;background-color:#fff5;padding:10px;border-radius:16px;font-size:18px;border:none}.App .container .header .contact-me-section .contact-information form .recruter #email::placeholder{color:#ffffff70}.App .container .header .contact-me-section .contact-information form .recruter #message{background-color:#fff5;padding:6px;border-radius:16px;font-size:17px;border:none}.App .container .header .contact-me-section .contact-information form .recruter #message::placeholder{color:#ffffff70}.App .container .header .contact-me-section .contact-information form .recruter #btn-msg{width:200px;margin:10px auto 0;padding:10px;border-radius:20px;background-color:#005bb190;cursor:pointer;transition:all .2s ease;font-size:16px;font-weight:600}.App .container .header .contact-me-section .contact-information form .recruter #btn-msg:hover{background-color:#093258}.App .container .header .contact-me-section .contact-information form .show.slide-in{transform:translate(0);opacity:1}.App .container .header .myImage{position:absolute;left:50%;top:0;transform:translate(-50%);width:280px;z-index:99;transition:all .4s;opacity:.8}.App .container .slid{width:100%;position:absolute;bottom:0;display:flex;justify-content:space-between}.App .container .slid button{position:absolute;padding:10px;border-radius:50%;background-color:#09325850;font-size:26px;font-weight:900;border:none;cursor:pointer;transition:all .4s}.App .container .slid button:hover{background-color:#093258}.App .container .slid .slide-forward{right:-20px}.App .container .slid .slide-backward{left:-20px}.App .container .Arrow{color:#fff;font-weight:800;position:absolute;bottom:-60px;left:50%;transform:translate(-50%);width:220px;display:flex;justify-content:center;align-items:center}@media screen and (max-width: 960px){.App .container .header .myName{font-size:70px}.App .container .header .about-section .background-animat .myInformation{z-index:888}.App .container .header .about-section .background-animat .myInformation h1{font-size:20px}.App .container .header .about-section .background-animat .myInformation p{font-size:14px;width:160px;letter-spacing:1px}.App .container .header .about-section .background-animat .circle{top:50px}.App .container .header .about-section .background-animat .circle.slide-in{width:210px;height:210px;border:70px #051424 solid;border-right:transparent solid 70px}.App .container .header .about-section .background-animat .weatherDay{width:160px;height:160px;right:130px}.App .container .header .about-section .background-animat .weatherDay .weath{width:70px;height:70px;font-size:14px}.App .container .header .about-section .background-animat .News .newItem{width:190px}.App .container .header .about-section .background-animat .News .newItem .imageNews img{width:40px;height:20}.App .container .header .skills-section .circle-of-skills{top:10px;z-index:2}.App .container .header .skills-section .circle-of-skills.show.slide-in{width:270px;height:270px}.App .container .header .skills-section .mySkills{z-index:1}.App .container .header .skills-section .mySkills .image-of-skills{width:40px;height:40px}.App .container .header .skills-section .mySkills .image-of-skills img{width:40px}.App .container .header .skills-section .mySkills .image-of-skills:first-child.show.slide-in{transform:translate(-150px) translateY(310px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(2).show.slide-in{transform:translate(-200px) translateY(230px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(3).show.slide-in{transform:translate(-200px) translateY(110px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(4).show.slide-in{transform:translate(-150px) translateY(20px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(5).show.slide-in{transform:translate(90px) translateY(20px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(6).show.slide-in{transform:translate(140px) translateY(110px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(7).show.slide-in{transform:translate(140px) translateY(230px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(8).show.slide-in{transform:translate(100px) translateY(320px)}.App .container .header .project-section .circle-of-project{top:35px}.App .container .header .project-section .allProject{display:flex;justify-content:space-between}.App .container .header .project-section .allProject .project{display:block}.App .container .header .project-section .allProject .project .one{width:230px;height:100px}.App .container .header .project-section .allProject .project .one:after{font-size:13px;font-weight:400;text-align:center}.App .container .header .project-section .allProject .project .two{width:230px;height:100px}.App .container .header .project-section .allProject .project .two:after{font-size:13px;font-weight:400;text-align:center}.App .container .header .project-section .allProject .project:nth-child(1){transform:translateY(-300px)}.App .container .header .project-section .allProject .project:nth-child(2){transform:translateY(300px)}.App .container .header .project-section .allProject .project:nth-child(1).show.slide-in{transform:translateY(0)}.App .container .header .project-section .allProject .project:nth-child(2).show.slide-in{transform:translateY(200px)}.App .container .header .project-section .allProject .project .project-info input{padding:6px 14px}.App .container .header .project-section .allProject .project .project-details p{width:230px;font-size:14px}.App .container .header .myImage{top:50px;width:200px;opacity:.8;z-index:3}.App .container .Arrow{font-size:13px;font-weight:400;width:160px}}@media screen and (max-width: 700px){.App .container .navBar .bar ul:first-of-type{display:none}.App .container .header .myName{display:none}.App .container .header .about-section .background-animat .weatherDay{width:160px;height:160px;right:60px;top:260px}.App .container .header .about-section .background-animat .weatherDay .weath{width:70px;height:70px;font-size:14px}.App .container .header .about-section .background-animat .News{height:220px;right:30px}.App .container .header .about-section .background-animat .News .newItem{width:170px}.App .container .header .about-section .background-animat .News .newItem .imageNews img{width:30px;height:20px}.App .container .header .project-section .allProject{display:flex;flex-direction:column;justify-content:center;align-items:center}.App .container .header .project-section .allProject .project{top:-20px}.App .container .header .project-section .allProject .project:nth-child(2).show.slide-in{transform:translateY(100px);opacity:1}.App .container .header .project-section .allProject .project .one{margin-right:0}.App .container .header .project-section .allProject .project .one:after{display:none}.App .container .header .project-section .allProject .project .one:hover:after{top:100%;left:-40px;display:block}.App .container .header .project-section .allProject .project .two:hover:after{top:-140%;left:-40px}.App .container .header .contact-me-section .contact-information{gap:10px}.App .container .header .contact-me-section .contact-information .recruter .recruter-desc input,.App .container .header .contact-me-section .contact-information .recruter input,.App .container .header .contact-me-section .contact-information .recruter textarea{font-size:15px;font-weight:400}}@media screen and (max-width: 574px){.App .container .header .contact-me-section .contact-information .contact-info .contact-media{margin-top:10px}}@media screen and (max-width: 520px){.App .container .header .about-section .background-animat .myInformation{left:15px}.App .container .header .about-section .background-animat .myInformation p{width:160px;font-size:13px;transform:translate(-110px)}.App .container .header .about-section .background-animat .circle{width:120px;height:120px;border:40px #051424 solid;border-right:transparent solid 40px;top:100px}.App .container .header .about-section .background-animat .circle.slide-in{width:180px;height:180px;border:60px #051424 solid;border-right:transparent solid 60px;transform:translate(-50%) rotate(-20deg);top:60px}.App .container .header .about-section .background-animat .weatherDay{right:10px;top:110px;opacity:.9;width:100px;height:100px}.App .container .header .about-section .background-animat .weatherDay .weath{font-size:10px;width:40px;height:40px}.App .container .header .about-section .background-animat .weatherDay .tempe,.App .container .header .about-section .background-animat .weatherDay .wind,.App .container .header .about-section .background-animat .weatherDay .humidity,.App .container .header .about-section .background-animat .weatherDay .local{transform:translate(70px)}.App .container .header .about-section .background-animat .weatherDay .tempe.show.slide-in,.App .container .header .about-section .background-animat .weatherDay .wind.show.slide-in,.App .container .header .about-section .background-animat .weatherDay .humidity.show.slide-in,.App .container .header .about-section .background-animat .weatherDay .local.show.slide-in{transform:translate(0)}.App .container .header .about-section .background-animat .weatherDay .local{font-size:10px}.App .container .header .about-section .background-animat .News{transform:translateY(290px) translate(80px);opacity:0;height:150px;width:150px;z-index:666}.App .container .header .about-section .background-animat .News .newItem .imageNews img{width:13px;height:13px}.App .container .header .about-section .background-animat .News .newItem .textNews p{font-size:10px;color:#b9b9b9}.App .container .header .about-section .background-animat .News.show.slide-in{transform:translateY(290px) translate(20px);opacity:1}.App .container .header .skills-section .circle-of-skills{width:200px;height:200px;top:60px;z-index:0}.App .container .header .skills-section .circle-of-skills.show.slide-in{width:270px;height:270px}.App .container .header .skills-section .mySkills .image-of-skills{width:40px;height:40px}.App .container .header .skills-section .mySkills .image-of-skills img{width:40px}.App .container .header .skills-section .mySkills .image-of-skills:first-child.show.slide-in{transform:translate(-120px) translateY(310px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(2).show.slide-in{transform:translate(-150px) translateY(230px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(3).show.slide-in{transform:translate(-150px) translateY(110px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(4).show.slide-in{transform:translate(-120px) translateY(20px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(5).show.slide-in{transform:translate(65px) translateY(20px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(6).show.slide-in{transform:translate(90px) translateY(110px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(7).show.slide-in{transform:translate(90px) translateY(230px)}.App .container .header .skills-section .mySkills .image-of-skills:nth-child(8).show.slide-in{transform:translate(65px) translateY(320px)}.App .container .header .project-section .circle-of-project,.App .container .header .contact-me-section .circle-contact{width:200px;height:200px;top:100px}.App .container .header .contact-me-section .contact-information{display:flex;flex-direction:column-reverse;gap:0}.App .container .header .contact-me-section .contact-information .contact-info{display:flex;justify-content:center;align-items:center;margin-top:15px}.App .container .header .contact-me-section .contact-information .contact-info .contact-info-text,.App .container .header .contact-me-section .contact-information .contact-info .contact-personnel{display:none}.App .container .header .contact-me-section .contact-information .contact-info .contact-media{margin:20px auto;padding:10px 20px}.App .container .header .contact-me-section .contact-information form .recruter{margin-top:25px}.App .container .header .contact-me-section .contact-information form .recruter .recruter-desc{flex-direction:row;gap:10px}.App .container .header .contact-me-section .contact-information form .recruter .recruter-desc input{font-size:10px;font-weight:300}.App .container .header .myImage{z-index:1}}