:root{--primary: #294f7a;--secondary: #ff914d;--white: #fff;--black: #000;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--px-2: calc((.125vw + .125vh) / 1.7778);--px-4: calc((.25vw + .25vh) / 1.7778);--px-8: calc((.5vw + .5vh) / 1.7778);--px-12: calc((.75vw + .75vh) / 1.7778);--px-16: calc((1vw + 1vh) / 1.7778);--px-24: calc((1.5vw + 1.5vh) / 1.7778);--px-32: calc((2vw + 2vh) / 1.7778);--px-40: calc((2.5vw + 2.5vh) / 1.7778);--px-48: calc((3vw + 3vh) / 1.7778);--px-56: calc((3.5vw + 3.5vh) / 1.7778);--px-64: calc((4vw + 4vh) / 1.7778);--px-80: calc((5vw + 5vh) / 1.7778);--px-96: calc((6vw + 6vh) / 1.7778);--px-128: calc((8vw + 8vh) / 1.7778);--px-192: calc((12vw + 12vh) / 1.7778);--px-256: calc((16vw + 16vh) / 1.7778);--px-512: calc((32vw + 32vh) / 1.7778);--fs-1: clamp(2px, var(--px-4), .675rem);--fs-2: clamp(4px, var(--px-8), 1.25rem);--fs-3: clamp(6px, var(--px-12), 1.75rem);--fs-4: clamp(8px, var(--px-16), 2.25rem);--fs-5: clamp(10px, calc(var(--px-16) * 1.25), 3rem);--fs-6: clamp(12px, var(--px-24), 3.5rem);--fs-7: clamp(14px, calc(var(--px-24) * 1.2), 4rem);--fs-8: clamp(16px, var(--px-32), 5rem);--fs-9: clamp(20px, var(--px-40), 6rem);--fs-10: clamp(24px, var(--px-48), 7rem);--fs-11: clamp(28px, var(--px-56), 8rem);--fs-12: clamp(32px, var(--px-64), 9rem);--btn-danger: #dc3545;--btn-warning: #f59e0b;--btn-info: #0dcaf0;--btn-save: #28a745;--btn-neutral: #868e96}::-webkit-scrollbar{width:var(--px-8);height:var(--px-4)}::-webkit-scrollbar-track{background-color:var(--gray-100);border-radius:var(--px-16)}::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:var(--px-16)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,var(--primary),var(--secondary));cursor:pointer}html,body{width:100%;height:100%}*,*:before,*:after{box-sizing:border-box}*{font-family:Poppins,sans-serif;margin:0;padding:0;box-sizing:border-box;outline:none;border:none;text-decoration:none;scroll-behavior:smooth;transition:.3s ease-in-out}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}#root{width:100%;min-height:100vh;display:flex;flex-direction:column;position:relative;padding:0 var(--px-128)}header{width:100%;min-height:var(--px-80);height:-moz-fit-content;height:fit-content;display:flex;justify-content:space-between;align-items:center;padding:var(--px-16) var(--px-8);border-bottom:var(--px-2) solid var(--primary);background-color:var(--white);position:sticky;top:0;z-index:1000}header .logo{display:flex;align-items:center;cursor:pointer}:is(header .logo) img{aspect-ratio:1/1;width:var(--px-48);height:auto}:is(header .logo) h1{font-size:var(--fs-6);font-weight:800;color:var(--primary)}:is(:is(header .logo) h1) span{color:var(--secondary)}header .logo:hover{transform:scale(1.05);filter:drop-shadow(var(--px-2) var(--px-2) var(--px-2) var(--gray-400))}header nav{display:flex;justify-content:center;align-items:center;gap:var(--px-16)}:is(header nav) a{display:flex;align-items:center;font-size:var(--fs-4);font-weight:500;color:var(--gray-800)}:is(header nav) a:not(.move):hover{transform:scale(1.05);color:var(--primary);border-bottom:1px solid var(--primary)}:is(header nav) a.move{gap:var(--px-4);background-color:var(--secondary);padding:var(--px-4) var(--px-24);border-radius:var(--px-8);box-shadow:var(--px-2) var(--px-2) var(--px-4) var(--primary);color:var(--gray-100)}:is(header nav) a.move:hover{background-color:var(--primary)}header button{display:none}header.scrolled{width:95%;min-height:-moz-fit-content;min-height:fit-content;position:sticky;top:var(--px-32);align-self:center;padding:var(--px-4) var(--px-32);background-color:#ffffff4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 var(--px-2) var(--px-16) var(--primary);border:none;border-radius:100px}main{flex:1;width:100%;height:-moz-fit-content;height:fit-content}footer{width:100%;min-height:var(--px-32);height:-moz-fit-content;height:fit-content;display:flex;justify-content:center;align-items:center;padding:var(--px-16) 0;border-top:var(--px-2) solid var(--primary);font-size:var(--fs-4);font-weight:500;color:var(--gray-800)}footer span{font-weight:600}footer span:first-child{color:var(--primary)}footer span:last-child{color:var(--secondary)}@media screen and (max-width: 1280px){header nav{flex-direction:column;justify-content:start;align-items:start;width:40%;padding:var(--px-32) var(--px-16);position:fixed;top:var(--px-96);right:0;background-color:var(--gray-200)}:is(header nav) a{width:100%;border-right:var(--px-2) solid var(--primary);border-left:var(--px-2) solid var(--primary);padding:var(--px-8) var(--px-8)}:is(header nav) a:not(.move):hover{transform:scale(1);background-color:var(--primary);color:var(--white);border-bottom:none}:is(header nav) a.move{justify-content:center;border:none}header nav.closed{right:-200%}header button{display:flex;background-color:transparent;font-size:var(--fs-8);color:var(--primary);cursor:pointer}header button:hover{color:var(--secondary)}header.scrolled nav{width:100%;top:var(--px-64)}}.__home-page section{width:100%;padding:var(--px-40) var(--px-16);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--px-16)}:is(.__home-page section.hero) article:first-of-type{width:60%;min-width:200px}:is(:is(.__home-page section.hero) article:first-of-type) h2{width:100%;font-size:var(--fs-7);font-weight:400;color:var(--gray-700);line-height:1.6}:is(:is(:is(.__home-page section.hero) article:first-of-type) h2) span{font-size:var(--fs-9);font-weight:700}:is(:is(:is(.__home-page section.hero) article:first-of-type) h2) span:first-of-type{color:var(--primary)}:is(:is(:is(.__home-page section.hero) article:first-of-type) h2) span:last-of-type{color:var(--secondary)}:is(:is(.__home-page section.hero) article:first-of-type) p{font-size:var(--fs-5);font-weight:400;text-align:justify;color:var(--gray-700)}:is(.__home-page section.hero) article:last-of-type{width:30%;min-width:200px;display:flex;justify-content:center}:is(:is(.__home-page section.hero) article:last-of-type) img{aspect-ratio:1/1;width:75%;height:auto}:is(:is(.__home-page section.hero) article:last-of-type) img:hover{transform:scale(1.1)}.__home-page section.about{background-color:var(--gray-100);align-items:stretch;gap:var(--px-40)}:is(.__home-page section.about) article:first-of-type{width:40%;min-width:200px;display:flex;justify-content:center}:is(:is(.__home-page section.about) article:first-of-type) img{aspect-ratio:3/4;width:calc(var(--px-256) * 1.5);height:auto;padding:var(--px-4);border-radius:var(--px-16);background:linear-gradient(to bottom right,var(--secondary),var(--white));overflow:hidden;filter:drop-shadow(var(--px-2) var(--px-2) var(--px-4) var(--primary))}:is(.__home-page section.about) article:nth-child(2){width:55%;min-width:200px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:center;align-items:center;gap:var(--px-16)}:is(:is(.__home-page section.about) article:nth-child(2)) h2{width:100%;font-size:var(--fs-9);font-weight:400;color:var(--gray-700)}:is(:is(:is(.__home-page section.about) article:nth-child(2)) h2) span:first-of-type{font-size:calc(var(--fs-12) * 1.2);font-weight:700;color:var(--primary)}:is(:is(:is(.__home-page section.about) article:nth-child(2)) h2) span:last-of-type{font-size:var(--fs-6)}:is(.__home-page section.about) article:nth-child(3),:is(.__home-page section.about) article:last-of-type{width:45%;padding:0 var(--px-32);display:flex;flex-wrap:wrap;justify-content:start;align-content:flex-start;align-items:start}:is(:is(.__home-page section.about) article:nth-child(3),:is(.__home-page section.about) article:last-of-type) h2{width:100%;font-size:var(--fs-6);font-weight:600;color:var(--primary)}:is(:is(.__home-page section.about) article:nth-child(3),:is(.__home-page section.about) article:last-of-type) p{width:100%;height:-moz-fit-content;height:fit-content;font-size:var(--fs-4);font-weight:400;color:var(--gray-700);text-align:justify}:is(:is(.__home-page section.about) article:nth-child(3),:is(.__home-page section.about) article:last-of-type) a{margin:var(--px-8) var(--px-4) 0 0;font-size:var(--fs-6);color:var(--gray-700)}:is(:is(.__home-page section.about) article:nth-child(3),:is(.__home-page section.about) article:last-of-type) a:hover{color:var(--secondary)}.__home-page section.skills{flex-direction:column;gap:var(--px-32);z-index:1}:is(.__home-page section.skills) h2{clip-path:polygon(85% 0%,100% 40%,100% 100%,0 100%,0 0);background-color:var(--primary);padding:var(--px-8) var(--px-32);font-size:var(--fs-8);font-weight:700;color:var(--white);text-shadow:var(--px-2) var(--px-2) var(--px-16) var(--gray-700)}:is(.__home-page section.skills) .container{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));grid-auto-rows:1fr;gap:var(--px-16)}:is(:is(.__home-page section.skills) .container) .card{padding:var(--px-32) var(--px-16);border-radius:var(--px-16);box-shadow:var(--px-2) var(--px-2) var(--px-16) var(--primary);display:flex;flex-direction:column;align-items:center}:is(:is(:is(.__home-page section.skills) .container) .card) .icon{font-size:var(--fs-11);color:var(--gray-700)}:is(:is(:is(.__home-page section.skills) .container) .card) h3{width:100%;margin:var(--px-8) 0;font-size:var(--fs-6);font-weight:600;color:var(--gray-800);text-align:center}:is(:is(:is(.__home-page section.skills) .container) .card) ul{width:100%;list-style-position:inside!important}:is(:is(:is(:is(.__home-page section.skills) .container) .card) ul) li{list-style-type:disc!important;font-size:var(--fs-4);font-weight:500;color:var(--gray-700)}:is(:is(.__home-page section.skills) .container) .card:hover{transform:scale(1.05)}:is(.__home-page section.skills) article{text-align:center}:is(:is(.__home-page section.skills) article) p{font-size:var(--fs-4);font-weight:400;color:var(--gray-700)}.__home-page section.portfolio{flex-direction:column;gap:var(--px-32);width:100%;background-color:var(--gray-100);z-index:1}:is(.__home-page section.portfolio) h2{clip-path:polygon(85% 0%,100% 40%,100% 100%,0 100%,0 0);padding:var(--px-8) var(--px-32);background-image:url(/background/Skills%20background.avif);background-size:cover;background-position:center;background-repeat:no-repeat;font-size:var(--fs-10);font-weight:700;color:var(--white);text-shadow:var(--px-2) var(--px-2) var(--px-16) var(--gray-300);position:relative}:is(.__home-page section.portfolio) h2:before{content:"";position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:-1}:is(.__home-page section.portfolio) .container{-moz-column-count:2;column-count:2;-moz-column-gap:var(--px-32);column-gap:var(--px-32);width:100%}:is(:is(.__home-page section.portfolio) .container) .card{display:inline-block;width:100%;margin-bottom:var(--px-32);-moz-column-break-inside:avoid;break-inside:avoid-column;padding:var(--px-16);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}:is(:is(:is(.__home-page section.portfolio) .container) .card) h3{font-size:var(--fs-10);font-weight:800;color:var(--gray-700);margin-top:var(--px-32)}:is(:is(:is(.__home-page section.portfolio) .container) .card) p{font-size:var(--fs-5);font-weight:400;color:var(--gray-700);text-align:justify;margin-bottom:var(--px-32)}:is(:is(:is(.__home-page section.portfolio) .container) .card) ul{padding-left:var(--px-32);list-style-position:inside!important}:is(:is(:is(:is(.__home-page section.portfolio) .container) .card) ul) li{list-style-type:disc!important;font-size:var(--fs-4)}:is(:is(:is(:is(.__home-page section.portfolio) .container) .card) ul) li a{font-size:var(--fs-4);font-weight:400;color:var(--primary)}:is(:is(:is(:is(.__home-page section.portfolio) .container) .card) ul) li a:hover{color:var(--secondary)}:is(:is(.__home-page section.portfolio) .container) .card:not(:first-of-type):not(:last-of-type){position:relative;padding:var(--px-4);border:var(--px-2) solid var(--primary);box-shadow:var(--px-2) var(--px-4) var(--px-12) var(--gray-700);cursor:pointer}:is(:is(:is(.__home-page section.portfolio) .container) .card:not(:first-of-type):not(:last-of-type)) h3{font-size:var(--fs-4);font-weight:600;color:var(--gray-100);padding:var(--px-4) var(--px-24);position:absolute;top:calc(var(--px-16) * -1);left:var(--px-16);z-index:1;box-shadow:var(--px-2) var(--px-4) var(--px-12) var(--secondary);background-color:var(--primary)}:is(:is(.__home-page section.portfolio) .container) .card:not(:first-of-type):not(:last-of-type):hover{transform:scale(1.025)}:is(:is(.__home-page section.portfolio) .container) .card:last-of-type{border-radius:var(--px-12);box-shadow:var(--px-2) var(--px-4) var(--px-12) var(--primary)}:is(:is(:is(.__home-page section.portfolio) .container) .card:last-of-type) h3{font-size:var(--fs-6);font-weight:700;margin:0;margin-bottom:var(--px-12)}:is(:is(:is(.__home-page section.portfolio) .container) .card:last-of-type) p{font-size:var(--fs-4);font-weight:400;margin-bottom:var(--px-12)}:is(:is(:is(.__home-page section.portfolio) .container) .card:last-of-type) ul{margin-bottom:var(--px-12)}.__home-page section.contact{gap:var(--px-32);flex-wrap:wrap}:is(.__home-page section.contact) article:first-of-type{flex:1;min-width:200px}:is(:is(.__home-page section.contact) article:first-of-type) h2{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-8);font-weight:600;color:var(--primary)}:is(:is(:is(.__home-page section.contact) article:first-of-type) h2) .icon{font-size:var(--fs-12)}:is(:is(.__home-page section.contact) article:first-of-type) p{font-size:var(--fs-5);font-weight:400;color:var(--gray-700);text-align:center}:is(:is(:is(.__home-page section.contact) article:first-of-type) p) a{text-decoration:underline;color:var(--secondary)}:is(:is(:is(.__home-page section.contact) article:first-of-type) p) a:hover{color:var(--primary)}:is(.__home-page section.contact) article:last-of-type{flex:1;min-width:200px;padding:var(--px-16)}:is(:is(.__home-page section.contact) article:last-of-type) form{width:100%;display:flex;flex-wrap:wrap;gap:var(--px-24)}:is(:is(.__home-page section.contact) article:last-of-type) .input-field{width:100%;display:flex;flex-direction:column;border-bottom:var(--px-2) solid var(--primary)}:is(:is(:is(.__home-page section.contact) article:last-of-type) .input-field) label{font-size:var(--fs-4);font-weight:500;color:var(--primary)}:is(:is(:is(.__home-page section.contact) article:last-of-type) .input-field) input,:is(:is(:is(.__home-page section.contact) article:last-of-type) .input-field) textarea{width:100%;border-top-left-radius:var(--px-8);border-top-right-radius:var(--px-8);padding:var(--px-8) var(--px-4);font-size:var(--fs-4);font-weight:400}:is(:is(:is(.__home-page section.contact) article:last-of-type) .input-field) textarea{min-height:var(--px-128);resize:none}:is(:is(:is(.__home-page section.contact) article:last-of-type) .input-field) input:focus,:is(:is(:is(.__home-page section.contact) article:last-of-type) .input-field) input:hover,:is(:is(:is(.__home-page section.contact) article:last-of-type) .input-field) textarea:focus,:is(:is(:is(.__home-page section.contact) article:last-of-type) .input-field) textarea:hover{box-shadow:0 0 var(--px-12) var(--primary)}:is(:is(.__home-page section.contact) article:last-of-type) .input-field:not(:last-of-type){flex:1}:is(:is(.__home-page section.contact) article:last-of-type) button{padding:var(--px-8) var(--px-32);background:linear-gradient(to right top,var(--primary),var(--white),var(--primary));border:var(--px-2) solid var(--primary);border-radius:var(--px-8);font-size:var(--fs-3);font-weight:600;color:var(--gray-800);cursor:pointer}:is(:is(.__home-page section.contact) article:last-of-type) button:hover{background:var(--primary);color:var(--white)}@media screen and (max-width: 1280px){:is(.__home-page section.hero) article:first-of-type{width:100%;order:2;margin-top:var(--px-24);text-align:center}:is(:is(.__home-page section.hero) article:first-of-type) span{display:none}:is(.__home-page section.hero) article:last-of-type{width:100%;order:1}.__home-page section.about{justify-content:center}:is(.__home-page section.about) article:first-of-type{width:100%}:is(.__home-page section.about) article:nth-child(2){width:100%;justify-content:center}:is(:is(.__home-page section.about) article:nth-child(2)) h2{text-align:center;width:100%}}[class*=article-button-][class*=__action-component]{margin:var(--px-16) var(--px-16) var(--px-16) 0;padding:var(--px-8) var(--px-40);background-color:var(--secondary);color:var(--gray-100);font-size:var(--fs-5);font-weight:500;border-radius:100px;cursor:pointer}[class*=article-button-][class*=__action-component] .icon{display:inline;vertical-align:middle}[class*=article-button-][class*=__action-component]:hover{background-color:var(--primary);transform:scale(1.05)}.article-button-1__action-component{margin:var(--px-8) var(--px-8) var(--px-8) 0!important;font-size:var(--fs-3)!important}.article-button-2__action-component{margin:var(--px-8) var(--px-8) var(--px-8) 0!important;font-size:var(--fs-4)!important}
