html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;background-image:url(/ReactFolio/static/media/back.22c9071363435498d9ee.png);background-position:top;background-repeat:no-repeat;background-size:cover;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}header{background-color:#eed86a;border-bottom:1px solid #eed86a;box-sizing:border-box;height:100px;padding:0 20px;position:fixed;top:0;width:100%;z-index:9999}header .inner{height:100%;margin:0 auto;max-width:100%;position:relative}header .header-logo{float:left;font-family:Source Code Pro,sans-serif;font-size:50px;font-weight:bolder;margin-left:50px;padding:25px 0}header .header-logo span{color:#fffdfd}header .header-logo a,header .icon{color:#fff;text-decoration:none}header .icon{display:none;font-size:32px}header .nav-menu{align-items:center;display:flex;float:right;height:100%;justify-content:center;margin-right:50px;transition:.2s ease-out}header .nav-menu li a{box-sizing:border-box;color:#fff;font-size:20px;padding:20px;text-decoration-line:none}header .icon:hover,header .nav-menu li a:hover{border-bottom:3px solid #fff7b1;transition:.1s ease-out}@media screen and (max-width:1380px){header{height:80px}header .header-logo{font-size:32px;margin-left:20px;padding:24px 0}header .nav-menu{display:flex;margin-right:10px}header .nav-menu li a{font-size:16px;padding:20px 10px}header .nav-menu li a:hover{color:#ccc086}}@media screen and (max-width:980px){header{height:60px}header .header-logo{font-size:20px;padding:20px 0}header .nav-menu{display:flex}header .nav-menu li a{font-size:12px}}@media screen and (max-width:768px){header{height:80px;padding:0}header .header-logo{font-size:32px;margin-left:20px;padding:24px 0}header .nav-menu li{display:none;float:none;margin-bottom:30px;text-align:center;width:100%}header .icon{display:block;float:right;margin-right:20px}header .icon a{padding:24px 0}header .nav-menu li a{font-size:22px}header .menu-icon{display:block}header .icon:hover,header .nav-menu li a:hover{border-bottom:none}header .nav-menu.responsive{background-color:#eed86a;display:block;float:none;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-right:0!important}header .nav-menu.responsive li{clear:both;display:block}header .nav-menu.responsive li:last-child{padding-bottom:20px}}@media screen and (max-width:300px){header{height:60px;padding:0}header .header-logo{font-size:30px;margin-left:10px;padding:15px 0}header .icon{align-self:center;font-size:30px;margin-right:10px}header .icon a{padding:17px 0}}.section--hello{align-items:center;box-sizing:border-box;display:flex;height:90vh;justify-content:center;margin-bottom:0;margin-top:100px;padding:5vh 20px;position:relative;text-align:center}.section--hello .inner{margin:0 auto;max-width:1600px}.section--hello .wrapper{color:#fde245;font-weight:bolder}.section--hello .text-title{font-size:90px;font-weight:500;letter-spacing:1px;word-spacing:2px}.section--hello .text-title .hello-emoji{-webkit-animation:hello 1.8s linear infinite;animation:hello 1.8s linear infinite;display:inline-block;-webkit-transform-origin:80% 80%;transform-origin:80% 80%}.section--hello .role{color:#e7dfb0;font-size:35px;margin-top:70px}.section--hello .text-subtitle{color:#e7dfb0;font-size:25px;font-weight:300;font-weight:bolder;line-height:1.5;margin-top:50px}.section--hello .social-links,.section--hello .wrapper-links{margin-top:50px}.section--hello .wrapper-links>*{border:2px solid #dacd3a;border-radius:16px;color:#bab6b6;display:inline-block;font-size:22px;margin-right:20px;padding:20px 30px;text-align:center;text-decoration:none;transition:.3s ease-out}.section--hello .wrapper-links>:hover{background-color:#f4edb0;border-color:#f4edb0;color:#f4d644}#resume{margin-right:0}@-webkit-keyframes hello{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}10%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}20%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}30%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}40%{-webkit-transform:rotate(9deg);transform:rotate(9deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes hello{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}10%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}20%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}30%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}40%{-webkit-transform:rotate(9deg);transform:rotate(9deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@media screen and (max-width:1380px){.section--hello{margin-top:80px}.section--hello .wrapper{min-width:480px}.section--hello .text-title{font-size:55px}.section--hello .role{font-size:25px}.section--hello .text-subtitle{font-size:20px;margin-top:30px}.section--hello .wrapper-links>*{font-size:20px}}@media screen and (max-width:980px){.section--hello{margin-top:60px}}@media screen and (max-width:768px){.section--hello{margin-top:80px;padding:5vh 20px}.section--hello .inner{display:block}.section--hello .wrapper{min-width:auto}.section--hello .text-title{font-size:36px}.section--hello .role{margin-top:30px}.section--hello .social-links{margin:0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.section--hello .wrapper-links>*{background-color:#edeea3;display:block;font-size:18px;max-width:70%;padding:20px 0}#about{margin:0 auto}#resume{margin:10px auto 0}}.social-media-links{font-size:22px;margin-top:30px}.social-media-links .icon-button i{border-radius:50%;box-sizing:border-box;color:#fff;display:inline-block;margin:5px;padding:10px;transition:.3s ease-out}.github i{background-color:#24292e}.linkedin i{background-color:#0073b1}.email i{background-color:#ea4335}.facebook i{background-color:#4867aa}.twitter i{background-color:#2aa9e0}.instagram i{background-color:#a056a1}.medium i{background-color:#000}.stackoverflow i{background-color:#f48024}.icon-button>i:hover{background-color:#000}.section--skill{margin-top:50px;padding:110px 20px 0;position:relative}.section--skill .inner{display:flex;margin:0 auto;max-width:1600px}.section--skill .wrapper{flex:60% 1;margin-left:10px}.section--skill .skill-title{color:#fde245;font-size:60px;font-weight:bolder}.section--skill .skill-subtitle{color:#959798;font-size:25px;font-weight:bolder;margin-top:50px}.section--skill .skill-cards{grid-row-gap:20px;display:grid;grid-template-columns:repeat(auto-fit,20%);margin-top:50px;row-gap:20px}.section--skill .skill-desc{color:#959798;font-size:22px;margin-top:50px}.section--skill .skill-desc p{font-weight:300;margin-top:30px}.section--skill .skill-image{align-self:center;color:#f1f1f1;display:none;flex:40% 1;font-size:300px;text-align:center}@media screen and (max-width:1380px){.section--skill{padding:90px 20px 0}.section--skill .skill-title{font-size:45px}.section--skill .skill-desc,.section--skill .skill-subtitle{font-size:20px}.section--skill .skill-cards{grid-template-columns:repeat(auto-fit,25%)}.section--skill .skill-image{font-size:200px}}@media screen and (max-width:980px){.section--skill .skill-cards{grid-template-columns:repeat(auto-fit,32%)}}@media screen and (max-width:768px){.section--skill .inner{display:block}.section--skill .skill-title{font-size:32px;font-weight:500;text-align:center}.section--skill .skill-subtitle{text-align:center}.section--skill .skill-image{display:none}.section--skill .skill-cards{grid-template-columns:repeat(auto-fit,50%)}}.skill-card-main{background-color:#fff395;border-radius:16px;box-shadow:13px 13px 6px rgba(0,0,0,.2);color:#171717;height:auto;height:140px;margin:0 10px;padding:20px 30px;text-align:center;transition:.3s ease-out}.skill-card-main:hover{box-shadow:0 4px 8px rgba(38,38,38,.2)}.skill-card-main .skill-icon{font-size:40px}.skill-card-main .skill-text{font-size:22px;margin-top:15px}.skill-card-main .skill-progress-bar{border:2px solid #ffd015;border-radius:8px;font-size:16px;height:16px;margin-top:15px}.skill-card-main .skill-progress-bar span{background-color:#ffd015;display:block;height:100%}.skill-card-main .skill-progress-bar p{margin:10px 0}@media screen and (max-width:1380px){.skill-card-main .skill-icon{font-size:35px}.skill-card-main .skill-text{font-size:20px}}#topButton{background-color:#ffac2f;border:none;border-radius:15px;bottom:20px;color:#f1f2f3;cursor:pointer;font-size:20px;outline:none;padding:20px 15px;position:fixed;right:30px;transition:.3s ease-in-out;visibility:hidden;z-index:99}#topButton:hover{-webkit-transform:translateY(-8px);transform:translateY(-8px);transition:.3s ease 0s}@media screen and (max-width:768px){#topButton{display:none}}.section--contact{margin:50px 0;padding:110px 20px 0}.section--contact .contact-title{color:#fde245;font-size:60px;font-weight:bolder;margin:0 auto;max-width:1600px}.section--contact .inner{display:flex;flex-direction:row-reverse;margin:0 auto;max-width:1600px}.section--contact .wrapper-inner{flex:85% 1}.section--contact .contact-subtitle{color:#c1c2c3;font-size:25px;font-weight:300;margin-top:50px}.section--contact .contact-introduce{color:#c1c2c3;font-size:25px;font-weight:500;margin-top:50px}.section--contact .social-links{margin-top:50px}.section--contact .profile-img{flex:15% 1;text-align:right}.section--contact .profile-img img{border:5px solid #f3ec8e;border-radius:100%;box-shadow:0 5px 12px 5px rgba(0,0,0,.3);height:auto;max-width:250px}.section--contact .profile-img img:hover{box-shadow:0 4px 8px rgba(38,38,38,.2);transition:.2s ease-out}@media screen and (max-width:1380px){.section--contact{padding:90px 20px 0}.section--contact .contact-title{font-size:45px}.section--contact .contact-subtitle{font-size:20px}}@media screen and (max-width:768px){.section--contact .contact-title{font-size:32px;font-weight:500;text-align:center}.section--contact .inner{display:block;margin-bottom:40px}.section--contact .profile-img{margin-top:30px;text-align:center}.section--contact .wrapper-inner{text-align:center}}.section--project{margin-top:50px;padding:110px 20px 0}.section--project .inner{margin:0 auto;max-width:1600px}.section--project .project-title{color:#fde245;font-size:60px;font-weight:bolder}.section--project .project-subtitle{color:#8b8c8e;font-size:25px;font-weight:bolder;margin-top:50px}.section--project .project-cards{grid-column-gap:2%;-webkit-column-gap:2%;column-gap:2%;display:grid;grid-template-columns:repeat(auto-fit,32%);margin-top:50px}@media screen and (max-width:1380px){.section--project{padding:90px 20px 0}.section--project .project-title{font-size:45px}.section--project .project-subtitle{font-size:20px}.section--project .project-cards{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}}@media screen and (max-width:768px){.section--project .project-title{font-size:32px;font-weight:500;text-align:center}.section--project .project-subtitle{text-align:center}.section--project .project-cards{grid-template-columns:repeat(auto-fit,100%)}}.project-card-main{background-color:#fff395;border-radius:10px;box-shadow:13px 13px 6px rgba(0,0,0,.2);color:#000;cursor:pointer;display:block;font-size:25px;margin-bottom:30px;padding:30px;text-align:center;text-decoration:none;transition:.3s ease-out}.project-card-main:hover{background-color:#f4edb0;box-shadow:0 4px 8px rgba(38,38,38,.2)}.project-card-main .card-title{font-size:25px;font-weight:500}.project-card-main .card-desc{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#c1c2c3;display:-webkit-inline-box;font-size:20px;font-weight:300;line-height:1.4;margin-top:30px;overflow:hidden}@media screen and (max-width:1380px){.project-card-main .card-title{font-size:22px}.project-card-main .card-desc{font-size:16px}}
/*# sourceMappingURL=main.0bb94ee4.css.map*/