@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap);@import url(https://fonts.googleapis.com/css2?family=Pacifico&family=Sacramento&display=swap);*,:after,:before{box-sizing:border-box;font-family:Poppins,sans-serif;margin:0;padding:0}:root{--p:#0f172a;--s:#bd6afd;--s1:#7f00ff;--w:#f0f0f0;--w-l:#c1c1c1;--b:#1f2937;--gr:#757575;--g:linear-gradient(45deg,var(--s1),var(--s));--t:all 0.25s linear;--t1:all 0.5s ease}a{text-decoration:none}img{display:block;max-width:100%}body,button,input,select,textarea{line-height:1.5;outline:none}input{line-height:normal}button{cursor:pointer}body{background-color:#0f172a;background-color:var(--p);position:relative}.contact{align-items:center;color:var(--w);display:flex;flex-direction:column;justify-content:center;margin:0 auto;max-width:1200px;padding:100px 20px 0}.contact .title{font-size:25px;margin-bottom:50px;text-align:center}.contact .title>span{color:var(--w-l);font-size:18px}.contact .detail{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;padding:0 30px}.contact .detail .infor{display:flex;flex-direction:column;font-size:16px;gap:20px;width:350px}.contact .detail .infor .item{display:flex}.contact .detail .infor .item span:first-child{color:var(--s);font-size:20px;margin-right:10px}.contact .detail .infor img{-webkit-animation:animation_ 3s linear infinite;animation:animation_ 3s linear infinite}@-webkit-keyframes animation_{0%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}50%{-webkit-transform:translateY(0) rotate(-5deg);transform:translateY(0) rotate(-5deg)}to{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes animation_{0%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}50%{-webkit-transform:translateY(0) rotate(-5deg);transform:translateY(0) rotate(-5deg)}to{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}.contact .detail form{border-radius:5px;display:flex;flex-direction:column;gap:30px;width:400px}.contact .detail form .form-item{position:relative;width:100%}.contact .detail form input,.contact .detail form textarea{background-color:var(--p);border:1px solid var(--s);border-radius:10px;color:var(--w);padding:20px;transition:var(--t)}.contact .detail form input{height:60px;width:100%}.contact .detail form textarea{height:180px;width:100%}.contact .detail form button{background-image:var(--g);border:none;border-radius:100rem;color:var(--w);font-size:14px;height:50px;letter-spacing:1px;outline:none;overflow:hidden;position:relative;width:50%}.contact .detail form button:before{background-color:hsla(0,0%,100%,.2);content:"";height:100%;left:0;position:absolute;top:0;transition:var(--t);width:0;z-index:1}.contact .detail form button:hover:before{width:100%}.contact .detail form label{background-color:var(--p);color:var(--s);font-size:14px;left:20px;padding:0 7px;position:absolute;top:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.contact .detail form input:focus,.contact .detail form textarea:focus{background-color:var(--p);box-shadow:0 0 8px var(--s)}@media screen and (max-width:830px){.contact .detail{display:flex;flex-direction:column}.contact .detail form{justify-content:center}}.footer{align-items:center;border-top:1px solid var(--b);color:var(--w);display:flex;flex-direction:column;gap:20px;justify-content:center;margin:100px auto 0;padding:50px 0}.footer .title{font-family:Sacramento,cursive;font-size:35px}.footer .links{display:flex;justify-content:space-between;width:120px}.footer .links a{align-items:center;color:var(--w-l);display:flex;font-size:30px;height:30px;justify-content:center;width:30px}.footer .links a:first-child:hover{background-color:var(--w);border-radius:3px;color:#1871e6}.footer .links a:nth-child(2):hover{background-color:var(--w);border-radius:100rem;color:#1871e6}.footer .links a:last-child:hover{background-color:var(--w);border-radius:100rem;color:var(--b)}.home{color:var(--w);display:grid;grid-template-columns:repeat(2,1fr);margin:0 auto;max-width:1200px;padding:100px 20px 0;position:relative}.disc{margin:auto 0;max-width:100%}.disc span:first-child{font-size:35px;font-weight:300;letter-spacing:3px;line-height:1.5}.disc h1{font-size:60px;font-weight:600;letter-spacing:2px;line-height:1.5}.disc p{color:var(--w-l);font-size:16px;font-weight:400;letter-spacing:1.5px;margin:20px 0 40px}.disc h1 .cursor{-webkit-animation:typing-cursor 1s ease infinite;animation:typing-cursor 1s ease infinite;background-color:var(--w);display:inline-block;height:75px;margin-left:5px;-webkit-transform:translateY(25%);transform:translateY(25%);width:3px}@-webkit-keyframes typing-cursor{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes typing-cursor{0%,50%{opacity:1}51%,to{opacity:0}}.disc .get-in-touch{background-image:var(--g);border-radius:100rem;cursor:pointer;display:inline-block;height:50px;overflow:hidden;position:relative;text-align:center;width:200px}.disc .get-in-touch:before{background-color:hsla(0,0%,100%,.2);content:"";height:100%;left:0;position:absolute;top:0;transition:var(--t);width:0;z-index:1}.disc .get-in-touch:hover:before{width:100%}.disc .get-in-touch span{color:var(--w);display:block;font-size:14px;height:100%;letter-spacing:1px;margin-top:15px}.avt{align-items:center;display:flex;justify-content:flex-end;width:100%}.avt img{-webkit-animation:animation 3s linear infinite;animation:animation 3s linear infinite;border-radius:25px;width:80%}@-webkit-keyframes animation{0%{-webkit-transform:translateY(20px);transform:translateY(20px)}50%{-webkit-transform:translateY(0) rotate(-5deg);transform:translateY(0) rotate(-5deg)}to{-webkit-transform:translateY(20px);transform:translateY(20px)}}@keyframes animation{0%{-webkit-transform:translateY(20px);transform:translateY(20px)}50%{-webkit-transform:translateY(0) rotate(-5deg);transform:translateY(0) rotate(-5deg)}to{-webkit-transform:translateY(20px);transform:translateY(20px)}}@media screen and (max-width:960px){.home{display:flex;flex-direction:column-reverse;gap:50px;position:relative}.disc h1{font-size:40px}.disc h1 .cursor{height:60px}.avt{align-items:center;display:flex;justify-content:center;width:100%}.avt img{width:60%}}.nav-container{background-color:var(--p);border-bottom:1px solid var(--b);height:80px;left:0;padding:0 20px;position:-webkit-sticky;position:sticky;top:0;z-index:1}.nav-container nav{align-items:center;display:flex;height:100%;margin:0 auto;max-width:1200px}.nav-logo{color:var(--w);font-size:30px;font-weight:600;letter-spacing:2px;width:100%}.nav-direct{align-items:center;display:flex;width:100%}.nav-items{display:flex;height:100%;list-style:none;margin-left:auto;-webkit-user-select:none;user-select:none;width:350px}.nav-items li{cursor:pointer;height:30px;margin:auto}.nav-items .nav-item{color:var(--w-l);font-size:15px;font-weight:400;letter-spacing:1px;line-height:1.5;transition:var(--t)}.nav-items .active,.nav-items .nav-item:hover{color:var(--s)}.nav-links{height:100%;justify-content:right;width:100%;width:144px}.nav-links,.nav-links a{align-items:center;display:flex}.nav-links a{background-color:initial;border:1px solid var(--w-l);color:var(--w-l);font-size:16px;margin:0 5px;padding:10px;position:relative}.nav-links a,.nav-links a:before{border-radius:100rem;transition:var(--t)}.nav-links a:before{background-image:var(--g);content:"";height:0;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0;z-index:-1}.nav-links a:hover:before{height:100%;width:100%}.nav-links a:hover{border:1px solid var(--s);color:var(--w)}.nav-options{display:flex;justify-content:flex-end;width:100%}.nav-options button{background-color:var(--p);border:none;border-radius:100rem;height:38px;outline:none;width:38px}.nav-options button span{align-items:center;background-color:initial;border:1px solid var(--w-l);border-radius:100rem;color:var(--w-l);cursor:pointer;display:flex;font-size:16px;height:100%;margin:0;padding:10px;position:relative;transition:var(--t);width:100%}.nav-options button span:before{border-radius:100rem;content:"";height:0;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:var(--t);width:0;z-index:-1}.nav-options button span:hover:before{height:100%;width:100%}.nav-options button span:hover{border:1px solid var(--s);color:var(--w)}@media only screen and (min-width:960px){.nav-options{display:none}}@media only screen and (max-width:959px){.nav-options,nav{position:relative}.nav-options{align-items:center;display:flex;justify-content:flex-end}nav .nav-direct{border-radius:5px;display:flex;flex-direction:column;gap:20px;padding:35px 0;right:0;top:70px;width:200px}nav .nav-direct,nav>.nav-direct:before{background-color:var(--w);position:absolute}nav>.nav-direct:before{content:"";height:9.5px;right:15px;top:-5px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:9.5px;z-index:-1}nav>.nav-direct .nav-items{display:flex;flex-direction:column;gap:10px;width:100%}nav>.nav-direct .nav-items a{color:var(--b)}nav>.nav-direct .nav-items .active{color:var(--s);font-weight:600}nav>.nav-direct .nav-items a:hover{color:var(--s)}nav>.nav-direct .nav-links a{border:1px solid var(--b);color:var(--b)}nav>.nav-direct .nav-links a:hover{border:1px solid var(--s);color:var(--w)}nav>.active{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);transition:var(--t1);visibility:visible}nav>.inactive{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px);visibility:hidden}}.projects{align-items:center;color:var(--w);display:flex;flex-direction:column;justify-content:center;margin:0 auto;max-width:1200px;padding:100px 20px 0}.projects .title{font-size:25px;margin-bottom:40px;text-align:center}.projects .title span{color:var(--w-l);font-size:18px}.projects .items{padding:20px}.projects .items .item{align-items:center;-webkit-column-gap:50px;column-gap:50px;display:flex;flex-direction:row;height:100%;justify-content:center;margin-bottom:50px;width:90%}.projects .items .item:nth-child(odd){margin-left:0;margin-right:auto}.projects .items .item:nth-child(2n){flex-direction:row-reverse;margin-left:auto;margin-right:0}.projects .items .item .img-wrap{align-items:center;border:1px solid var(--b);border-radius:20px;display:flex;flex-shrink:0;height:250px;justify-content:center;overflow:hidden;padding:20px;width:400px}.projects .items .item img{border-radius:20px;height:100%;object-fit:cover;width:100%}.projects .items .item .content{align-items:center;display:flex;flex-direction:column;gap:20px;height:100%;justify-content:center;width:100%}.projects .items .item .content>span{font-size:25px}.projects .items .item .content p{color:var(--w-l)}.projects .items .item .content .btn{-webkit-column-gap:10px;column-gap:10px;display:flex;height:45px;justify-content:center;width:100%}.projects .items .item .content .btn a:first-child{align-items:center;border:1px solid var(--s1);border-radius:7px;color:var(--w);display:flex;font-size:14px;height:100%;justify-content:center;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:170px}.projects .items .item .content .btn a:first-child:before{background-color:var(--s1);content:"";height:100%;left:0;position:absolute;top:0;transition:var(--t);width:0;z-index:-1}.projects .items .item .content .btn a:first-child:hover:before{width:100%}.projects .items .item .content .btn a:first-child .icon{align-items:center;display:flex;margin-left:5px;transition:var(--t)}.projects .items .item .content .btn a:first-child:hover .icon{-webkit-transform:translateX(50%);transform:translateX(50%)}.projects .items .item .content .btn a:last-child{align-items:center;border:1px solid var(--s);border-radius:7px;color:var(--w);display:flex;font-size:14px;height:100%;justify-content:center;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:170px}.projects .items .item .content .btn a:last-child:before{background-color:var(--s);content:"";height:100%;left:0;position:absolute;top:0;transition:var(--t);width:0;z-index:-1}.projects .items .item .content .btn a:last-child:hover:before{width:100%}.projects .items .item .content .btn a:last-child .icon{align-items:center;display:flex;margin-left:5px;transition:var(--t)}.projects .items .item .content .btn a:last-child:hover .icon{-webkit-transform:translateX(50%);transform:translateX(50%)}@media screen and (max-width:960px){.projects .items .item{-webkit-column-gap:40px;column-gap:40px;height:100%;margin:0 auto 40px;width:100%}.projects .items .item .img-wrap{height:190px;width:300px}}@media screen and (max-width:815px){.projects .items .item{display:block;margin-bottom:50px}.projects .items .item .img-wrap{height:220px;margin:0 auto 25px;width:380px}}@media screen and (max-width:600px){.projects .items .item{margin-bottom:45px}.projects .items .item .img-wrap{height:190px;margin:0 auto 20px;width:330px}}@media screen and (max-width:480px){.projects .items .item{margin-bottom:40px}.projects .items .item .img-wrap{height:180px;margin:0 auto 18px;width:310px}}.skills{align-items:center;color:var(--w);display:flex;flex-direction:column;gap:20px;justify-content:center;margin:0 auto;max-width:1200px;padding:100px 20px 0}.skills .title{font-size:22px;font-weight:300;margin-bottom:30px;text-align:center;width:100%}.skills .title>span{color:var(--w-l);font-size:16px;font-weight:300}.skills .items{grid-gap:10px;display:grid;font-size:14px;font-weight:300;gap:10px;grid-template-columns:repeat(5,1fr);height:100%;line-height:1.5;width:100%}.skills .items .item{align-items:center;border:1px solid var(--b);border-radius:8px;display:flex;flex-direction:column;gap:6px;height:120px;justify-content:center;overflow:hidden;position:relative;transition:all .3s ease}.skills .items .item:hover{box-shadow:0 0 2px var(--w-l);-webkit-transform:translateY(-2px);transform:translateY(-2px)}.skills .items .item .skill-icon{align-items:center;display:flex;font-size:60px;height:70px;justify-content:center;transition:all .3s ease;width:70px}.skills .items .item:hover .skill-icon{font-size:45px;height:50px;-webkit-transform:translateY(-10px);transform:translateY(-10px);width:50px}.skills .items .item .skill-name{bottom:15px;font-size:13px;font-weight:300;letter-spacing:.5px;opacity:0;position:absolute;-webkit-transform:translateY(10px);transform:translateY(10px);transition:all .3s ease}.skills .items .item:hover .skill-name{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.logo-react{color:aqua}@media screen and (max-width:960px){.skills .items{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:100%;max-width:570px}.skills .items .item{height:120px;width:180px}}@media screen and (max-width:768px){.skills .items{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(7,1fr);height:100%;width:272px}.skills .items .item{height:120px;width:130px}}
/*# sourceMappingURL=main.e0bf3ed4.css.map*/