@font-face{font-family:Kanit;src:url(/assets/Kanit-Regular-BsGL4ICW.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Kanit;src:url(/assets/Kanit-Medium-CJNO-8bZ.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:Kanit;src:url(/assets/Kanit-SemiBold-5xQs5Sxr.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:Kanit;src:url(/assets/Kanit-Bold-B50SuEyO.woff2) format("woff2");font-weight:700;font-display:swap}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a{display:inline-block}a,a:link{text-decoration:none;color:inherit}a:hover{text-decoration:none}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit;font-family:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active,textarea:focus,textarea:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}.wrapper{display:flex;flex-direction:column;min-height:100vh;max-width:1440px;margin:0 auto;padding:50px 0 0 50px}body{font-size:18px;font-family:Kanit,sans-serif;font-weight:400;color:ivory;background-color:#16181d;line-height:1.1}section{padding:40px;background-color:#20232a;flex-grow:1;width:100%;border-top-left-radius:20px;overflow:hidden}@media (max-width: 991.98px){.wrapper{padding:40px 0 0 40px}section{padding:30px}}@media (max-width: 767.98px){body{font-size:16px}.wrapper{padding:30px 0 0 30px}section{padding:40px 15px}}@media (max-width: 480px){.wrapper{padding:0}section{border-top-left-radius:0}}.title{font-size:80px;display:inline-block;font-weight:700}.title span{color:#00c8ff}.title--section{font-size:60px;font-weight:700;line-height:1.4;position:relative}.title--section:before,.title--section:after{content:"";position:absolute;bottom:3px;width:40px;height:4px;background-color:#00c8ff}.title--section:before{left:0}.title--section:after{top:5px;right:0}@media (max-width: 991.98px){.title{font-size:60px}.title--section{font-size:40px}}@media (max-width: 767.98px){.title{font-size:48px}.title--section{font-size:36px}.title--section:before,.title--section:after{height:3px}}.label{font-size:24px;font-weight:600}.label span{color:#00c8ff}.text{display:grid;gap:5px;line-height:1.4}.button{display:inline-block;padding:10px 20px;font-size:20px;font-weight:600;text-decoration:none;text-align:center;line-height:1.4;color:ivory;border-radius:10px;border:2px solid rgb(0,200,255);transition:all .3s ease-in-out}.button:hover{border-color:ivory;background-color:#00c8ff;color:#20232a}.navbar{align-self:flex-end;padding:15px 30px;background-color:#20232a;border-top-left-radius:20px;border-bottom:.0625rem solid #000}.navbar__list{display:flex;flex-wrap:wrap;gap:10px 30px}.navbar__link{padding:2px 0;font-size:20px;font-weight:600;text-decoration:none;display:inline-block;color:ivory;position:relative;line-height:1.2}.navbar__link:before,.navbar__link:after{content:"";position:absolute;width:10px;height:2px;background-color:#00c8ff;transition:width .3s ease-in-out}.navbar__link:before{left:0;bottom:0}.navbar__link:after{top:0;right:0}.navbar__link:hover:before,.navbar__link:hover:after{width:100%}.navbar__link.active{color:#00c8ff}.navbar__link.active:before,.navbar__link.active:after{width:100%}@media (max-width: 767.98px){.navbar{padding:15px 20px}.navbar__list{gap:14px}.navbar__link{font-size:16px;font-weight:400}}@media (max-width: 480px){.navbar{padding:20px 15px;width:100%;border-radius:0}.navbar__list{justify-content:space-around}.navbar__link:after{display:none}}.home{display:flex;justify-content:space-between;align-items:center;gap:20px 40px}.home__body{max-width:50%;animation:home-body 2s cubic-bezier(.19,1,.22,1)}.home__label{margin:20px 0 24px}.home__actions{margin-top:24px}.home__image{max-width:500px;aspect-ratio:1/1;position:relative;overflow:hidden;animation:home-image 2s cubic-bezier(.19,1,.22,1)}.home__image:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;border:5px dotted rgb(0,200,255);animation:rotate 30s linear infinite}.home__image img{aspect-ratio:1/1;border-radius:50%;object-fit:cover;padding:20px}@media (max-width: 767.98px){.home{flex-direction:column-reverse;gap:20px}.home__body{max-width:100%}.home__image{max-width:400px}}@media (max-width: 480px){.home{text-align:center}.home__label{display:grid;gap:5px}.home__btn{width:100%}.home__image{width:80%}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes home-body{0%{transform:translate(-50%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes home-image{0%{transform:translate(50%);opacity:0}to{transform:translate(0);opacity:1}}.about{justify-content:space-between;align-items:center;gap:20px 40px}.about__label{margin:20px 0 24px}.about .info-about{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;animation:info-about 1s}.about .info-about__item{display:flex;flex-wrap:wrap;gap:5px;font-size:18px}.about .info-about__item a:hover{color:#636363}.about .info-about__label{color:#00c8ff;font-weight:600}@keyframes info-about{0%{transform:translateY(100px);opacity:0}to{opacity:1;transform:translateY(0)}}.skills__items{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:40px}.skills .item-skill__info{display:flex;justify-content:space-between;margin-bottom:10px}.skills .item-skill__title{text-transform:lowercase;font-weight:500;font-size:24px}.skills .item-skill__title:first-letter{text-transform:uppercase;color:#00c8ff}.skills .item-skill__num{font-size:24px}.skills .item-skill__progress{position:relative;width:100%;height:10px;background-color:#636363;border-radius:5px;margin-top:5px;overflow:hidden}.skills .item-skill__progress:before{content:"";position:absolute;top:0;left:0;width:0;height:100%;background-color:#00c8ff}.skills .item-skill.html .item-skill__progress:before{width:90%;animation:bar-html 2s}.skills .item-skill.css .item-skill__progress:before{width:80%;animation:bar-css 2s}.skills .item-skill.scss .item-skill__progress:before{width:50%;animation:bar-scss 2s}.skills .item-skill.js .item-skill__progress:before{width:30%;animation:bar-js 2s}.skills .item-skill.react .item-skill__progress:before{width:15%;animation:bar-react 2s}.skills .item-skill.php .item-skill__progress:before{width:5%;animation:bar-php 2s}.skills .item-skill.vite .item-skill__progress:before{width:5%;animation:bar-vite 2s}.skills .item-skill.photoshop .item-skill__progress:before{width:7%;animation:bar-photoshop 2s}@media (max-width: 767.98px){.skills__items{grid-template-columns:1fr;gap:30px}}@keyframes bar-html{0%{width:0}to{width:90%}}@keyframes bar-css{0%{width:0}to{width:80%}}@keyframes bar-js{0%{width:0}to{width:30%}}@keyframes bar-scss{0%{width:0}to{width:50%}}@keyframes bar-react{0%{width:0}to{width:15%}}@keyframes bar-php{0%{width:0}to{width:5%}}@keyframes bar-vite{0%{width:0}to{width:5%}}@keyframes bar-photoshop{0%{width:0}to{width:7%}}.portfolio__list{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:20px 30px}.portfolio .card-portfolio{border:2px solid rgb(0,200,255);border-radius:16px;overflow:hidden;box-shadow:0 4px 8px #00c8ff33,0 6px 20px #00c8ff30;display:flex;flex-direction:column}.portfolio .card-portfolio:nth-child(1){animation:portfolio-card .8s}.portfolio .card-portfolio:nth-child(2){animation:portfolio-card 1s}.portfolio .card-portfolio:nth-child(3){animation:portfolio-card 1.5s}.portfolio .card-portfolio:nth-child(4){animation:portfolio-card 1.7s}.portfolio .card-portfolio__img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-in-out;aspect-ratio:16/9}.portfolio .card-portfolio__img:hover{transform:scale(1.05)}.portfolio .card-portfolio__img-link{border-radius:15px;flex:1 0 auto;overflow:hidden;display:block;width:100%}.portfolio .card-portfolio__body{padding:20px;display:flex;flex-direction:column;height:100%}.portfolio .card-portfolio__title-link{font-size:24px;font-weight:500;transition:color .3s ease-in-out}.portfolio .card-portfolio__title-link:hover{color:#00c8ff}.portfolio .card-portfolio__description{margin:12px 0 20px}.portfolio .card-portfolio__skills{display:flex;flex-wrap:wrap;gap:4px 8px}.portfolio .card-portfolio__skills:not(:last-child){margin-bottom:20px}.portfolio .card-portfolio__skills-item{padding:5px 8px;border-radius:8px;border:1px solid rgb(0,200,255);line-height:1}.portfolio .card-portfolio__actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}.portfolio .card-portfolio__btn{padding:10px 12px}.portfolio .card-portfolio__link-btn{padding:5px;border-radius:50%;border:2px solid rgb(0,200,255);width:50px;aspect-ratio:1/1;font-size:24px;display:flex;justify-content:center;align-items:center;fill:ivory;position:relative;overflow:hidden;z-index:1;transition:.3s ease-in-out}.portfolio .card-portfolio__link-btn box-icon{width:100%;height:100%;font-size:24px}.portfolio .card-portfolio__link-btn:nth-child(2){margin-left:auto}.portfolio .card-portfolio__link-btn:before{position:absolute;z-index:-1;content:"";width:0;height:100%;top:0;left:0;background-color:#00c8ff;transition:.3s ease-in-out}.portfolio .card-portfolio__link-btn:hover{fill:#20232a}.portfolio .card-portfolio__link-btn:hover:before{width:100%}.portfolio .pagination-portfolio{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:16px;animation:pagination 1s ease-in-out}.portfolio .pagination-portfolio__btn-prev,.portfolio .pagination-portfolio__btn-next,.portfolio .pagination-portfolio__btn-item{transition:all .3s ease-in-out}.portfolio .pagination-portfolio__btn-prev:hover,.portfolio .pagination-portfolio__btn-next:hover,.portfolio .pagination-portfolio__btn-item:hover{color:#00c8ff;fill:#00c8ff}.portfolio .pagination-portfolio__btn-prev,.portfolio .pagination-portfolio__btn-next{border-radius:50%;padding:10px;border:1px solid rgb(0,200,255);display:flex;align-items:center;fill:ivory}.portfolio .pagination-portfolio__btn-prev:disabled,.portfolio .pagination-portfolio__btn-next:disabled{border-color:#636363;fill:#636363}.portfolio .pagination-portfolio__pages-num{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.portfolio .pagination-portfolio__btn-item{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;width:45px;line-height:1;padding:5px;border-radius:50%;border:1px solid #636363}.portfolio .pagination-portfolio__btn-item.active{border-color:#00c8ff;color:#00c8ff}@media (max-width: 767.98px){.portfolio .card-portfolio__body{padding:20px 10px}}.portfolio__list.loading{display:flex;flex-direction:column;justify-content:center;align-items:center}.portfolio__list.loading .loader-text{text-align:center;font-weight:600;font-size:32px}.portfolio__list.loading .loader{--dim: 3rem;width:var(--dim);height:var(--dim);position:relative;animation:spin988 2s linear infinite;margin-top:10%}.portfolio__list.loading .loader .circle{--color: #333;--dim: 1.2rem;width:var(--dim);height:var(--dim);background-color:#636363;border-radius:50%;position:absolute}.portfolio__list.loading .loader .circle:nth-child(1){top:0;left:0}.portfolio__list.loading .loader .circle:nth-child(2){top:0;right:0}.portfolio__list.loading .loader .circle:nth-child(3){bottom:0;left:0}.portfolio__list.loading .loader .circle:nth-child(4){bottom:0;right:0}@keyframes spin988{0%{transform:scale(1) rotate(0)}20%,25%{transform:scale(1.3) rotate(90deg)}45%,50%{transform:scale(1) rotate(180deg)}70%,75%{transform:scale(1.3) rotate(270deg)}95%,to{transform:scale(1) rotate(360deg)}}@keyframes portfolio-card{0%{transform:translateY(200px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pagination{0%{transform:translateY(700px)}to{transform:translateY(0)}}.contacts__text{margin:40px 0 20px}.contacts__text span{color:#00c8ff}.contacts .form-contacts{display:flex;gap:20px 40px;flex-wrap:wrap}.contacts .form-contacts__item{flex:1 0 calc(50% - 20px);display:grid}.contacts .form-contacts__label{padding-bottom:15px;position:relative}.contacts .form-contacts__label:before{content:"";position:absolute;color:#00c8ff;width:15px;height:2px;background-color:#00c8ff;bottom:10px}.contacts .form-contacts__input,.contacts .form-contacts__textarea{border:1px solid #636363;padding:15px;border-radius:8px}.contacts .form-contacts__input:hover,.contacts .form-contacts__input:focus,.contacts .form-contacts__textarea:hover,.contacts .form-contacts__textarea:focus{border-color:#00c8ff}.contacts .form-contacts__textarea{flex:1 0 100%;resize:none}.contacts .form-contacts__actions{flex:1 0 100%}.contacts .form-contacts__button{margin-top:20px}@media (max-width: 480px){.contacts .form-contacts__button{width:100%}}