@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{padding:0;margin:0;box-sizing:border-box;list-style:none;text-decoration:none}html{font-family:Inter,sans-serif;width:100%;height:100%}body{margin:0;padding:0;width:100%;min-height:100vh;background:var(--primary);overflow-x:hidden}.main{width:100vw;height:auto;padding:0 300px;display:flex;flex-direction:column;align-items:center}@media screen and (max-width: 1560px){.main{padding:0 200px}}@media screen and (max-width: 992px){.main{padding:0 100px}}@media screen and (max-width: 768px){.main{padding:0 50px}}@media screen and (max-width: 576px){.main{padding:0}}.title h2{font-size:var(--text-xxl);font-weight:600;letter-spacing:2px;color:var(--text-1)}@media screen and (max-width: 992px){.title h2{text-align:center}}.navigation{width:65px;height:40px;position:fixed;top:50%;left:80px;translate:-50% -50%;display:flex;flex-direction:column;justify-content:space-between}.navigation .active{width:100%;background:var(--text-1)}.navigation span{width:80%;height:2px;background:var(--text-2);display:block;border-radius:2px;cursor:pointer;transition:width .2s ease-out}.navigation span:not(span.active):hover{width:90%}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:#dbdbdb}::-webkit-scrollbar-thumb{background:#ccc}::-webkit-scrollbar-thumb:hover{background:#a0a0a0}header{width:100%;height:80px;display:flex;align-items:center;justify-content:space-between}header .menu{display:none;width:24px;height:24px;color:var(--text-1)}@media screen and (max-width: 576px){header .menu{display:flex;align-items:center}}header nav ul{display:flex;gap:1em}header nav ul li{cursor:pointer;color:var(--text-1);line-height:1}@media screen and (max-width: 576px){header nav{position:absolute;opacity:0}}header .contactButtons{display:flex;align-items:center;gap:1em}header .contactButtons li{cursor:pointer;color:var(--text-1);line-height:1}header .contactButtons a{padding:5px;min-width:120px;max-width:200px;width:auto;height:40px;font-weight:600;display:flex;align-items:center;justify-content:center;color:var(--primary);background:var(--text-1);border:var(--border);border-radius:5px;gap:.5em;transition:opacity .2s ease-out}header .contactButtons a:hover{opacity:.9}@media screen and (max-width: 576px){header{padding:0 10px}}.hero-section{width:100%;min-height:calc(100vh - 80px);height:auto;display:flex}.hero-section .about-part{width:50%;height:540px;display:flex;justify-content:center;flex-direction:column;line-height:1;gap:1.5em}@media screen and (max-width: 992px){.hero-section .about-part{width:100%;height:50%;align-items:center}}.hero-section .about-part h1{font-size:var(--text-huge);font-weight:900;letter-spacing:2px;color:var(--text-1)}.hero-section .about-part p{color:var(--text-2);font-size:var(--text-l)}.hero-section .about-part button{position:relative;padding:5px;min-width:120px;max-width:200px;width:auto;height:40px;font-weight:600;display:flex;align-items:center;justify-content:center;color:var(--primary);background:var(--text-1);border:var(--border);border-radius:5px;gap:.5em;cursor:pointer}.hero-section .about-part button:before,.hero-section .about-part button:after{content:"";position:absolute;height:100%;width:100%;background-image:conic-gradient(from var(--angle),transparent 60%,var(--action-1),rgb(255,217,0),var(--action-1));top:50%;left:50%;translate:-50% -50%;z-index:-1;padding:3px;border-radius:8px;animation:3s spin linear infinite}.hero-section .model-part{width:50%;height:540px;display:flex;justify-content:center;align-items:center}@media screen and (max-width: 1400px){.hero-section .model-part{width:100%;height:50%}}@media screen and (max-width: 1400px){.hero-section{flex-direction:column-reverse;align-items:center;text-align:center}}:root{--primary: #fdfaef;--secondary: #f4f4f4;--Terciary: #f4f4f4;--action-1: #4dbfd6;--action-2: #7eaafc;--action-3: #00328f;--text-1: #1a1a1a;--text-2: #999999;--border: #2a2a2a;font-size:16px;--text-xxs: .25rem;--text-xs: .5rem;--text-s: .75rem;--text-m: 1rem;--text-l: 1.25rem;--text-xl: 1.75rem;--text-xxl: 2.5rem;--text-huge: 4rem;--margin-xxs: .25rem;--margin-xs: .5rem;--margin-s: .75rem;--margin-m: 1rem;--margin-l: 1.25rem;--margin-xl: 1.75rem;--margin-xxl: 2.5rem;--margin-huge: 4rem}:root[type=dark]{--primary: #1a1a1a;--secondary: #f4f4f4;--Terciary: #f4f4f4;--action-1: #0d8ef8;--action-2: #7eaafc;--action-3: #00328f;--text-1: #ffffff;--text-2: #ccc;--border: #ccc}.skills-section{width:100%;min-height:100vh;height:auto;display:flex;justify-content:center;flex-direction:column;gap:3em}@media screen and (max-width: 992px){.skills-section{padding-top:10rem}}.skills-section .skills{width:100%;height:auto;display:flex;justify-content:space-between;gap:1em}@media screen and (max-width: 992px){.skills-section .skills{flex-direction:column;align-items:center;gap:4em}}.skills-section .skills .skill-box{width:380px;height:auto;display:flex;flex-direction:column;gap:2em}@media screen and (max-width: 992px){.skills-section .skills .skill-box{text-align:center}}.skills-section .skills .skill-box .title h3{font-size:var(--text-xl);font-weight:500;color:var(--text-1)}.skills-section .skills .skill-box .icons{display:flex;flex-wrap:wrap;gap:20px}@media screen and (max-width: 992px){.skills-section .skills .skill-box .icons{justify-content:center}}.skills-section .skills .skill-box .icons li{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #ccc;background:var(--secondary);transition:transform .2s ease-in-out,filter .2s ease-in-out}.skills-section .skills .skill-box .icons li:hover{transform:scale(1.05);filter:brightness(.9)}.skills-section .skills .skill-box .react{position:relative}.skills-section .skills .skill-box .react:before,.skills-section .skills .skill-box .react:after{content:"";position:absolute;height:100%;width:100%;background-image:conic-gradient(from var(--angle),var(--action-1),rgb(255,217,0),rgb(115,255,0),var(--action-1));top:50%;left:50%;translate:-50% -50%;z-index:-1;padding:3px;border-radius:12px;animation:3s spin linear infinite}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes spin{0%{--angle: 0deg}to{--angle: 360deg}}