@import"https://fonts.googleapis.com/css2?family=Bitter:wght@100&family=Montserrat:wght@300;900&family=Noto+Sans+Lao:wght@400;500;600&family=Nunito:wght@200;300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Poppins:ital,wght@0,200;0,500;0,600;0,900;1,300;1,500;1,600;1,700;1,800;1,900&family=Roboto&family=Rubik:wght@500;600;700&family=Tangerine:wght@700&display=swap";@import"https://fonts.googleapis.com/css2?family=Bitter:wght@100&family=Clicker+Script&family=Dancing+Script:wght@400;500;600;700&family=Montserrat:wght@300;900&family=Noto+Sans+Lao:wght@400;500;600&family=Nunito:wght@200;300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Poppins:ital,wght@0,200;0,500;0,600;0,900;1,300;1,500;1,600;1,700;1,800;1,900&family=Roboto&family=Rubik:wght@500;600;700&family=Tangerine:wght@700&display=swap";.menu_navbar{width:76%;margin-left:auto;padding:1rem 2%;display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-black-900);position:fixed;right:0;top:0;z-index:99}.menu_navbar.hide{box-shadow:1rem 2rem 5rem var(--text-black-00)}.menu_navbar>.logo a{font-size:4rem;padding:.5rem 1rem;position:relative;color:var(--text-black-900)}.menu_navbar>.logo a:before{content:"";position:absolute;height:2rem;width:2rem;top:0;right:0;border-top:.5rem solid var(--skin-color);border-right:.5rem solid var(--skin-color)}.menu_navbar>.logo a:after{content:"";position:absolute;height:2rem;width:2rem;left:0;bottom:0;border-left:.5rem solid var(--skin-color);border-bottom:.5rem solid var(--skin-color)}.menu_navbar>.logo a>span{color:var(--skin-color);font-family:Dancing Script,cursive}.menu_navbar .left{display:flex;justify-content:center;gap:1rem;align-items:center}.menu_navbar .left .fa-them,.fa-palette{width:4rem;height:4rem;background-color:var(--bg-black-500);text-align:center;line-height:4rem;font-size:2rem;color:var(--text-black-900);border-radius:50%;cursor:pointer;transition:all .5s ease-in-out}.menu_navbar .left .fa-them:hover,.fa-palette:hover{background-color:var(--skin-color);color:#fff}.menu_navbar .colors{position:absolute;top:115%;right:3%;background:var(--text-white);border-radius:.5rem;box-shadow:var(--box-shadow);padding:1rem;text-align:center;width:20rem;display:none;justify-content:center;flex-wrap:wrap;gap:1rem}.menu_navbar .colors.active{display:flex}.menu_navbar .colors h3{padding:.7rem;font-size:2rem;color:#000}.menu_navbar .colors .color{border-radius:50%;cursor:pointer;height:4.5rem;width:4.5rem}.toggle-bars{width:3rem;height:3rem;display:none;flex-direction:column;gap:.3rem;background-color:var(--text-black-700);padding:.5rem;cursor:pointer;overflow:hidden;transition:all .5 linear}.toggle-bars span{width:100%;height:.4rem;background:var(--skin-color);border-radius:.3rem;transition:.3s linear}.toggle-bars.active span:nth-child(1){transform:translatey(6px) rotate(405deg)}.toggle-bars.active span:nth-child(2){transform:translate(24rem)}.toggle-bars.active span:nth-child(3){transform:translatey(-6px) rotate(-405deg)}@media (max-width:1200px){.menu_navbar{width:100vw}.toggle-bars{display:flex}}aside{position:fixed;top:0;left:0;z-index:1000;height:100%;width:24%;max-width:100%;background:var(--bg-black-500);display:flex;align-items:center;justify-content:center;flex-flow:column;text-align:center}aside .user img{height:17rem;width:17rem;border-radius:50%;object-fit:cover;margin-bottom:1rem;border:.7rem solid var(--skin-color)}aside .user .name{font-size:2.7rem;color:var(--text-black-900)}aside .user .post{font-size:1.5rem;color:var(--text-black-00);text-transform:capitalize}aside .navbar{width:100%}aside .navbar ul{list-style:none;padding:1rem 3rem}aside .navbar ul li a{display:block;padding:1rem;margin:1.5rem 0;background:var(--bg-black-900);color:var(--text-black-900);font-size:1.5rem;border-radius:5rem;text-transform:capitalize;transition:all .5s ease-in-out}aside .navbar ul li a.active{background:var(--skin-color);color:#fff}aside .navbar ul li a:hover{background:var(--skin-color);color:#fff}@media (max-width:1200px){aside{display:none;z-index:100;left:0;transition:all .5s ease-in-out;width:30rem}aside.active{display:flex}}@media (max-width:390px){aside{top:0rem;width:60%}}.loader{width:60px;height:60px;border:6px solid var(--skin-color);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.box_card{display:flex;background-color:var(bg-black-100);border-radius:1rem;flex-direction:column;row-gap:1rem;padding:1rem;text-align:center;max-width:100%;border:1px solid var(--skin-color);cursor:pointer;transition:.3s linear}.box_card:hover{box-shadow:0 1rem 4rem var(--text-black-00)}.box_card img{width:100%;display:block;object-fit:cover}.box_card span{font-size:1.5rem;color:var(--text-black-00)}.card{display:flex;flex-direction:column;gap:1rem;border-radius:.5rem;background-color:transparent}.card .img-box{position:relative;height:20rem;overflow:hidden;cursor:pointer}.card .img-box img{object-fit:cover;width:100%;height:100%;position:absolute;left:0;top:0}.card .img-box .overlay{position:absolute;width:100%;height:100%;background-color:#0001024d;z-index:10;display:flex;justify-content:center;align-items:center;gap:2rem;transform:translateY(-100%);transition:all .5s ease-in-out}.card .img-box:hover .overlay{transform:translateY(0)}.img-box .overlay a{font-size:1.2rem;padding:1rem 2rem;background-color:var(--skin-color);color:#fff;border-radius:1.5rem}.card .detail{display:flex;flex-direction:column;gap:2rem;padding:1rem}.card .detail h4{font-size:1.5rem;color:var(--text-black-700)}.card .detail p{font-size:1.2rem;color:var(--text-black-00)}footer{padding:2rem 5rem;background-color:var(--bg-black-900);margin-top:4rem}footer h3{font-size:1.7rem;color:var(--text-black-900)}footer .links{display:flex;gap:1rem;justify-content:center;flex-direction:column;margin-top:2rem}footer .links li{font-size:1.2rem}footer .links li #rotate{transform:rotate(110deg)}footer .links li a{color:var(--text-black-00);font-size:1.5rem;text-transform:capitalize}footer .links li a i{margin-right:1rem;color:var(--skin-color);transition:.3s linear}footer .links li a:hover i{margin-right:1.7rem}footer .f-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1rem}footer .f-container .box{display:flex;flex-direction:column}footer .f-bottom{text-align:center;margin-top:4rem}footer hr{margin-top:2rem}.form{text-align:center;margin-top:3rem}.form ul li{margin:3rem 0}.form h2{margin-bottom:4rem;color:var(--text-black-900);text-transform:uppercase;font-size:2rem;font-weight:400}.form label{display:block;font-size:1.2rem;color:var(--text-black-00);margin-bottom:1rem}.form input,.form textarea{width:80%;font-size:1.3rem;padding:1.7rem;border-radius:.5rem;border:none;outline:1px solid var(--text-black-700);background-color:var(--input-bg-1);color:var(--text-black-00)}.form input:focus,.form textarea:focus{outline:1px solid var(--skin-color)}.form input::placeholder,textarea::placeholder{color:var(--text-black-900)}.form textarea{height:15rem;resize:none}.form button{position:relative;padding:1rem 20px;border-radius:7px;border:1px solid rgb(61,106,255);font-size:14px;text-transform:uppercase;font-weight:600;letter-spacing:2px;background:transparent;color:var(--text-black-900);overflow:hidden;box-shadow:0 0 0 0 transparent;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;transition:all .2s ease-in;cursor:pointer}.form button:hover{background:var(--skin-color);box-shadow:0 0 30px 5px #008eecd0;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out;color:#fff}.form button:hover:before{-webkit-animation:sh02 .5s 0s linear;-moz-animation:sh02 .5s 0s linear;animation:sh02 .5s 0s linear}.form button:before{content:"";display:block;width:0px;height:86%;position:absolute;top:7%;left:0%;opacity:0;background:#fff;box-shadow:0 0 50px 30px #fff;-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);-ms-transform:skewX(-20deg);-o-transform:skewX(-20deg);transform:skew(-20deg)}@keyframes sh02{0%{opacity:0;left:0%}50%{opacity:1}to{opacity:0;left:100%}}.form button:active{box-shadow:0 0 0 0 transparent;-webkit-transition:box-shadow .2s ease-in;-moz-transition:box-shadow .2s ease-in;transition:box-shadow .2s ease-in}@media (max-width:768px){.form input,.form textarea{width:100%}}.home{margin-top:5rem;display:flex;padding:1rem;margin-left:auto;flex:1 1 1fr;justify-content:space-evenly;align-items:center;background-color:var(--bg-black-900)}.home .left{width:60%;align-self:start;padding:4rem 0;margin-top:6rem;background-color:transparent}.home .left h3.hello,.home h3.profession{font-size:3rem;margin:2rem 0;color:var(--text-black-900)}.home h3.profession{display:flex;align-items:center}.home .left h3.hello span{color:var(--skin-color);font-family:Dancing Script,cursive;font-weight:900}.home .left h3.profession span{color:var(--skin-color);padding-left:.5rem}.home .left p{font-size:1.75rem;margin:1rem 0 3rem;color:var(--text-black-900)}.home .left .hire-me{width:20rem}.home .right{display:flex;justify-content:center;margin-top:1rem;background-color:transparent}.home .right .box{width:25rem;position:relative}.home .right .box:before{position:absolute;content:"";width:4rem;height:4rem;top:-2rem;left:-2rem;border-top:1rem solid var(--skin-color);border-left:1rem solid var(--skin-color)}.home .right .box:after{position:absolute;content:"";width:4rem;height:4rem;bottom:-2rem;right:-2rem;border-bottom:1rem solid var(--skin-color);border-right:1rem solid var(--skin-color)}.home .right .box>img{width:100%;object-fit:cover;height:40rem}@media (max-width:1200px){.home .left,.home .right{align-self:center;margin-top:0;padding:none;width:100%}.home .right{padding:0}}@media (max-width:768px){.home{justify-content:center;flex-direction:column;margin-top:8rem}}.about{width:100%;padding:2rem 5rem;background-color:var(--bg-black-900)}.about-top>h3{color:var(--text-black-900)}.about-top>p{font-size:1.4rem;color:var(--text-black-00);margin-bottom:2rem}.about-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.5rem}.about-row .row-left{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.5rem;padding:1rem 0}.about-row .row-left>ul>li{font-size:1.3rem;padding:.5rem 0;border-bottom:1px solid var(--text-black-900)}.about-row .row-left>ul>li>span{font-weight:600;color:var(--text-black-00)}.about-row .row-left>ul>li>p{font-weight:400;color:var(--text-black-00)}.row-right .languages{display:flex;flex-direction:column;gap:3rem;padding:2rem;justify-content:center;align-items:center}.languages p{color:var(--text-black-900);font-weight:600;text-transform:capitalize;font-size:1.2rem}.languages>li{position:relative;width:100%;height:.5rem;background:var(--bg-black-500);border-radius:1rem;font-size:1.3rem}.languages>li:nth-child(2):before{content:"";position:absolute;left:0;height:100%;width:60%;background-color:var(--skin-color);border-radius:1rem}.languages>li:nth-child(3):before{content:"";position:absolute;left:0;height:100%;width:80%;background-color:var(--skin-color);border-radius:1rem}.languages>li:nth-child(4):before{content:"";position:absolute;left:0;height:100%;width:50%;background-color:var(--skin-color);border-radius:1rem}.languages>li:nth-child(5):before{content:"";position:absolute;left:0;height:100%;width:45%;background-color:var(--skin-color);border-radius:1rem}.languages>li:nth-child(6):before{content:"";position:absolute;left:0;height:100%;width:90%;background-color:var(--skin-color);border-radius:1rem}.languages>li>span{position:absolute;color:var(--text-black-900)}.languages>li>span:nth-child(1){left:0;top:-2rem}.languages>li>span:nth-child(2){top:-2rem;right:0rem}.about-buttom>.cv{width:20rem;cursor:pointer;border:none}.skills{width:100%;padding:2rem 5rem;background-color:var(--bg-black-900)}.skills p{font-size:1.5rem;color:var(--text-black-00);margin-bottom:2rem}.programmings h3{margin-left:auto;color:var(--text-black-00)}.wrapp_card{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem}.projects{width:100%;padding:2rem 5rem;background-color:var(--bg-black-900)}.projects .wrapper__card{display:grid;grid-template-columns:repeat(auto-fit,minmax(25rem,auto));gap:1rem;margin-top:3rem}.projects .tags{display:flex;justify-content:center;align-items:center;gap:1rem}.tags .tag{padding:1.5rem;font-size:.3rem 1rem;font-weight:500;cursor:pointer;outline:none;border:none;background-color:#c7ccd9;border-radius:.3rem}.tags .tag.active{background-color:var(--skin-color);color:#fff}.contact{width:100%;padding:2rem 5rem;background-color:var(--bg-black-900)}.contact p{font-size:1.2rem;color:var(--text-black-900);text-transform:capitalize;font-weight:500;text-align:center;margin-bottom:3rem}.contact .contact_icons{display:flex;flex-direction:row;column-gap:3rem;flex-wrap:nowrap;justify-content:center}.contact_icons li{text-align:center}.contact_icons li i{display:block;padding:1rem;font-size:1.75rem;background-color:var(--skin-color);color:#fff;width:5rem;height:5rem;line-height:3rem;margin:0 auto;border-radius:50%;border:1px solid green}.contact_icons li p{margin-top:2rem;font-size:1.2rem;color:var(--text-black-900)}.contact_icons li p span{font-weight:600;text-transform:capitalize;margin-right:4px}.App{display:flex}.App.dark{--bg-black-900:#151522;--bg-black-100:#fdf9ff;--bg-black-500:#181D31;--text-black-900:#ffff;--text-black-700:#F5F9F9;--text-black-00:#ffffff;--input-bg-1:#222929}.content{min-height:100vh;background-color:var(--bg-black-900);width:100%;margin-left:28.4rem;margin-top:2rem}@media (max-width:1200px){.content{width:100vw;margin:0}}:root{--skin-color:#ec1839;--bg-black-900:#f2f2fc;--bg-black-100:#fdf9ff;--bg-black-500:#e8dfec;--text-black-900:#302e4d;--text-black-700:#504e70;--text-white:#ffff;--text-black-00:#000000;--input-bg-1:#F1F0F5}*{padding:0;margin:0;box-sizing:border-box;outline:0;text-decoration:none}body{line-height:1.5s;font-family:Poppins,sans-serif;scroll-behavior:smooth;overflow-x:hidden}section{width:100%;padding:1rem 2%}.btn{background-color:var(--skin-color);color:#fff;padding:2rem 4rem;font-size:1.75rem;border-radius:3.3rem;display:block;text-align:center;transition:all .3s linear}.btn:hover{box-shadow:0 .5rem 2rem var(--text-black-00)}html{font-size:63.5%;scroll-behavior:smooth}html::-webkit-scrollbar{width:1.4rem}html::-webkit-scrollbar-track{background:var(--text-black-700)}html::-webkit-scrollbar-thumb{background-color:var(--skin-color);border-radius:1rem}:before,:after{box-sizing:border-box}ul{list-style:none}.title{padding:.5rem 0;font-size:3rem;color:var(--text-black-900);position:relative;margin:3rem 0}.title:before{content:"";position:absolute;bottom:0;left:0;height:.5rem;width:7rem;background-color:var(--skin-color);border-radius:.2rem}.title:after{content:"";position:absolute;bottom:-1rem;left:0;height:.5rem;width:4rem;background-color:var(--skin-color);border-radius:.2rem}.top{font-size:2rem;margin:3rem 0}.top>span{color:var(--skin-color);text-transform:capitalize}@media (max-width:1200px){section{width:100vw;padding:2rem 5rem}html{font-size:55.5%}}