:root{--bg-primary:#0d1117;--bg-secondary:#161b22;--bg-accent:#21262d;--text-primary:#e6edf3;--text-secondary:#9da7b3;--text-muted:#6e7681;--border-subtle:#ffffff14;--accent:#7c5cff;--accent-hover:#6a4ae3;--radius:10px;--transition:.2s ease}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-primary);height:100%;color:var(--text-primary);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.5}ul{margin:0;padding:0;list-style:none}.app{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5{color:var(--text-primary);font-weight:600}p{color:var(--text-secondary)}a{color:var(--accent);transition:var(--transition);text-decoration:none}a:hover{color:var(--accent-hover)}button{background-color:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:none;padding:10px 16px;font-weight:500}button:hover{background-color:var(--accent-hover)}.card{background-color:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:16px}.section{background-color:var(--bg-secondary);border-top:1px solid var(--border-subtle);padding:24px}input,textarea{background-color:var(--bg-accent);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius);transition:var(--transition);outline:none;padding:10px}input:focus,textarea:focus{border-color:var(--accent)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-accent);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#2a2f36}.skeleton{width:100%;height:100%}.content-wrapper{flex:1;justify-content:center;padding:20px;display:flex}header{justify-content:space-between;align-items:center;padding:10px;display:flex}.title{flex-direction:row;justify-content:center;align-items:center;gap:5px;margin:0;display:flex}.logoimg{border-radius:var(--radius);width:50px;height:50px}.header-skeleton{border-radius:var(--radius)}.header-links{flex-direction:row;gap:20px;display:flex}.headLink{border-radius:var(--radius)}.header-skeleton-wrapper{width:50px;height:50px}.headLink:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-color:var(--accent-hover)}@media screen and (width<=500px){header{flex-direction:column;gap:20px}.title{flex-direction:column;gap:10px}}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color:#ebebeb;--highlight-color:#f5f5f5;--animation-duration:1.5s;--animation-direction:normal;--pseudo-element-display:block;background-color:var(--base-color);-webkit-user-select:none;user-select:none;border-radius:.25rem;width:100%;line-height:1;display:inline-flex;position:relative;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);background-repeat:no-repeat;background-image:var(--custom-highlight-background,linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100%));height:100%;animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite;position:absolute;top:0;left:0;right:0;transform:translate(-100%)}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display:none}}footer{text-align:center;padding:20px}#portfolio-content{flex-direction:column;justify-content:center;align-items:center;gap:30px;display:flex}#projects-list{flex-direction:column;gap:20px;width:100%;max-width:800px;display:flex}.project-card{background-color:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius);flex-direction:row;align-items:center;gap:20px;padding:16px;display:flex}.pagination{justify-content:center;gap:10px;margin-top:20px;display:flex}@media (width<=768px){#portfolio-content{gap:20px}#projects-list{gap:15px}.project-card{flex-direction:column;align-items:flex-start}}@media (width<=425px){#portfolio-content{gap:15px}#projects-list{gap:10px}.project-card{gap:10px;margin:12px}}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.slideinAnimation{animation:1s ease-out forwards slideInFromLeft}.hideCards{opacity:0;transform:translateY(10px)}.showCards{opacity:1;transition:opacity .3s,transform .3s;transform:translateY(0)}#home-content{flex-direction:row;justify-content:center;align-items:center;gap:30px;display:flex}#home-img{border-radius:24px}.hidden{visibility:hidden}.visible{visibility:visible;justify-content:center;align-items:center;display:flex}.skeleton-wrapper{width:400px;height:400px}.skeleton-home{border-radius:24px}#home-text{flex-direction:column;gap:20px;max-width:500px;display:flex}#home-link{text-align:center;background-color:var(--accent);color:var(--text-primary);border-radius:var(--radius);transition:background-color var(--transition), transform var(--transition), box-shadow var(--transition);border:1px solid #0000;padding:10px 20px;font-weight:500;text-decoration:none}#home-link:hover{background-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #7c5cff4d}#home-link:active{box-shadow:none;transform:translateY(0)}#home-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-color:var(--accent-hover)}@media screen and (width<=768px){#home-content{flex-direction:column;gap:30px;margin-top:30px}#home-img{width:50%;height:auto}#home-text{text-align:center;max-width:50%}.skeleton-wrapper{width:364px;height:364px}}@media screen and (width<=425px){.skeleton-wrapper{width:192px;height:192px}}.contact-container{flex-direction:column;justify-content:center;align-items:center;min-height:80vh;display:flex}.contact-items{grid-template-columns:repeat(2,1fr);justify-content:center;gap:20px;margin-top:30px;display:grid}.contact-items a{background-color:var(--accent);color:var(--text-primary);border-radius:var(--radius);transition:background-color var(--transition), transform var(--transition), box-shadow var(--transition);border:1px solid #0000;align-items:center;padding:10px 20px;font-weight:500;text-decoration:none;display:flex}.contact-items a:hover{background-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #7c5cff4d}.contact-icon{width:75px;height:75px}@media (width<=768px){.contact-icon{width:50px;height:50px}}@media (width<=425px){.contact-icon{width:35px;height:35px}}