:root{--primary-color: #ff6b6b;--secondary-color: #a0f688;--accent-color: #4ecdc4;--background-color: #1a1a1a;--card-background: #333333;--card-background-white: #f7fff7;--button-background: #4ecdc4;--text-color: #f7fff7;--text-color-secondary: #ff6b6b;--text-color-accent: #4ecdc4;--text-color-dark: #1a1a1a;--border-color: #000000;--border-color-secondary: #ff6b6b;--shadow-black: rgba(0, 0, 0, .5);--font-family: "Arial Black", sans-serif;--title-font-size: 4rem;--subtitle-font-size: 2.5rem;--heading-font-size: 2.5rem;--subheading-font-size: 1.5rem;--body-font-size: 1rem;--info-font-size: .875rem;--spacing-small: .25rem;--spacing-medium: .5rem;--spacing-normal: 1rem;--spacing-large: 2rem;--spacing-xlarge: 4rem;--border-width: 2px;--border-width-thick: 4px;--border-style: solid;--border-radius-small: 4px;--border-radius-medium: 8px;--border-radius-large: 12px;--button-shadow: -8px 8px 0 var(--shadow-black);--button-shadow-hover: -12px 12px 0 var(--shadow-black);--button-shadow-active: -4px 4px 0 var(--shadow-black);--button-shadow-none: none;--button-shadow-hover-none: none;--button-shadow-active-none: none;--transition-speed-normal: .2s;--transition-speed-slow: .4s;--transition-speed-fast: .1s}*{margin:0;padding:0;box-sizing:border-box}ul,li{list-style:none}a{color:inherit;text-decoration:none}a:link,a:visited,a:hover,a:active{text-decoration:none}button{cursor:pointer;border:none;background:none;font-family:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--font-family);margin-bottom:var(--spacing-medium);line-height:1.3}h1{font-size:var(--title-font-size)}h2{font-size:var(--large-heading-font-size)}h3{font-size:var(--heading-font-size)}p{font-size:var(--body-font-size);margin-bottom:var(--spacing-medium)}small{font-size:var(--info-font-size)}.markdown-body h1{font-size:2rem;font-weight:700;margin-bottom:1.5rem;margin-top:0;line-height:1.2}.markdown-body h2{font-size:1.5rem;font-weight:600;margin-top:2rem;margin-bottom:1rem;line-height:1.3}.markdown-body h3{font-size:1.25rem;font-weight:600;margin-top:1.5rem;margin-bottom:.75rem}.markdown-body p{line-height:1.6;margin-bottom:1rem}.markdown-body ul,.markdown-body ol{margin-left:2rem;margin-bottom:1rem;line-height:1.6}.markdown-body li{margin-bottom:.5rem}.markdown-body code{background-color:#f3f4f6;color:#1f2937;padding:.2rem .4rem;border-radius:.25rem;font-family:Courier New,monospace;font-size:.9em}.markdown-body pre{background-color:#1f2937;color:#f3f4f6;padding:1rem;border-radius:.5rem;overflow-x:auto;margin-bottom:1rem}.markdown-body pre code{background-color:transparent;color:inherit;padding:0;border-radius:0}.markdown-body blockquote{border-left:4px solid #d1d5db;padding-left:1rem;margin-left:0;margin-right:0;margin-bottom:1rem;color:#6b7280;font-style:italic}.markdown-body a{color:#0ea5e9;text-decoration:underline}.markdown-body a:hover{color:#0284c7}.markdown-body img{max-width:100%;height:auto;margin-bottom:1rem;border-radius:.5rem}.markdown-body table{width:100%;border-collapse:collapse;margin-bottom:1rem}.markdown-body th,.markdown-body td{border:1px solid #d1d5db;padding:.75rem;text-align:left}.markdown-body th{background-color:#f3f4f6;font-weight:600}.markdown-body hr{border:none;border-top:1px solid #d1d5db;margin:2rem 0}html,body{margin:0;padding:0;width:100%;height:100%}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-color);line-height:1.6}#app{display:flex;flex-direction:column;min-height:100vh;background-color:var(--background-color)}main{flex:1;padding:var(--spacing-large)}.container{max-width:1200px;width:100%;min-height:100vh;margin:0 auto;padding:0 var(--spacing-large)}.container-large{max-width:1600px;margin:0 auto;padding:0 var(--spacing-large)}.container-small{max-width:800px;margin:0 auto;padding:0 var(--spacing-large)}.grid{display:grid;gap:var(--spacing-large)}.grid-col--2{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.grid-col--3{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}.flex{display:flex;gap:var(--spacing-medium)}.flex-col{display:flex;flex-direction:column;gap:var(--spacing-medium)}.img-responsive{width:100%;height:100%;object-fit:cover;object-position:top}.img-large{transform:scale(1.2);transition:transform var(--transition-speed-slow) ease-in-out}.img-large:hover{transform:scale(1.5);transition:transform var(--transition-speed-slow) ease-in-out}.site-header{text-align:center;background-color:var(--primary-color);display:flex;justify-content:space-between;align-items:center;border-bottom:var(--border-width) solid var(--border-color)}.site-header__title{font-size:var(--title-font-size)}@media(max-width:768px){.site-header{flex-direction:column}.site-header__title{font-size:var(--subtitle-font-size)}}.site-nav{display:flex}.nav-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}.nav-item__link{color:var(--text-color);text-decoration:none;border-bottom:2px solid var(--text-color);transition:color var(--transition-speed-normal)}.nav-item__link:hover{color:var(--text-color-dark);border-bottom-color:var(--accent-color)}.hamburger{display:none;flex-direction:column;gap:var(--spacing-small);cursor:pointer}.hamburger__line{width:25px;height:3px;background-color:var(--text-color);transition:all var(--transition-speed-normal)}@media(max-width:768px){.site-nav{flex-direction:column;height:0;overflow:hidden;transition:all var(--transition-speed-normal)}.site-nav.--open{height:100vh}.nav-list{flex-direction:column;gap:var(--spacing-small)}.hamburger{display:flex}.hamburger__line.--left{transform:rotate(45deg) translate(5px,5px)}.hamburger__line.--middle{opacity:0}.hamburger__line.--right{transform:rotate(-45deg) translate(5px,-5px)}}.hero{padding:var(--spacing-large);background:linear-gradient(180deg,var(--primary-color) 95%,var(--background-color) 100%);text-align:center;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.hero-title{font-size:var(--title-font-size);margin-bottom:var(--spacing-medium);color:var(--text-color-dark)}.hero-subtitle{font-size:var(--body-font-size);margin-bottom:var(--spacing-large);color:var(--text-color-dark)}.skill-badges{display:flex;flex-wrap:wrap;gap:var(--spacing-medium);justify-content:center;margin-bottom:var(--spacing-large)}.skill-badge{padding:var(--spacing-small) var(--spacing-medium);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius-medium);background-color:var(--accent-color);color:var(--text-color-dark);font-weight:700}.about-header{display:flex;flex-direction:column;gap:var(--spacing-small);text-align:left}.about-header__title{font-size:var(--subtitle-font-size)}.about-header__title:after{content:"";display:block;width:50px;height:4px;background-color:var(--accent-color)}.about-header__subtitle{font-size:var(--subheading-font-size);color:var(--text-color-secondary)}.about-content{display:flex;flex-direction:column;gap:var(--spacing-medium);max-width:800px}.about-content__paragraph{font-size:var(--body-font-size);line-height:2;color:var(--text-color)}.card{padding:var(--spacing-large);background-color:var(--card-background-white);color:var(--text-color-dark);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius-medium);box-shadow:var(--button-shadow);transition:box-shadow var(--transition-speed-normal);width:360px}.card:hover{box-shadow:var(--button-shadow-hover)}.card__title{font-size:var(--subheading-font-size);color:var(--text-color-dark)}.card__description{font-size:var(--info-font-size);color:var(--text-color-dark)}.project-card{display:flex;flex-direction:column;justify-content:flex-start;word-wrap:break-word;gap:var(--spacing-medium);box-shadow:none;border:var(--border-width) var(--border-style) var(--border-color-secondary);width:100%}.project-card:hover{box-shadow:-6px 6px 0 var(--primary-color)}.project-card__image{width:100%;height:300px;overflow:hidden;border-radius:var(--border-radius-small);border:var(--border-width) var(--border-style) var(--primary-color);background-color:var(--secondary-color)}.project-card__content{display:flex;flex-direction:column;gap:var(--spacing-medium)}.project-card__tags{max-width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--spacing-small)}.project-card__tags>*{flex:1 1 auto;text-align:center;max-width:100%}.btn{padding:var(--spacing-medium) var(--spacing-large);background-color:var(--button-background);color:var(--button-text-color);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius-medium);font-weight:700;font-size:var(--body-font-size);cursor:pointer;box-shadow:var(--button-shadow);transition:all var(--transition-speed-normal)}.btn:hover{box-shadow:var(--button-shadow-hover)}.btn:active{box-shadow:var(--button-shadow-active)}.btn--primary{background-color:var(--primary-color);color:var(--text-color);border-color:var(--border-color)}.btn--primary:hover{box-shadow:var(--button-shadow-hover);color:var(--text-color-dark)}.btn--secondary{background-color:var(--secondary-color);color:var(--text-color-dark);border-color:var(--text-color-dark)}.btn--secondary:hover{background-color:var(--card-background);color:var(--text-color-secondary)}.btn--ghost{background-color:transparent;color:var(--text-color-secondary);border-color:var(--text-color)}.btn--ghost:hover{background-color:var(--text-color);color:var(--text-color-dark)}.btn--noshadow{box-shadow:none}.btn--narrow{padding:var(--spacing-small) var(--spacing-medium);font-size:var(--info-font-size)}.hero-button{display:inline-block;padding:var(--spacing-medium) var(--spacing-large);background-color:var(--button-background);color:var(--button-text-color);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius-medium);font-weight:700;font-size:var(--body-font-size);cursor:pointer;box-shadow:var(--button-shadow);transition:box-shadow var(--transition-speed-normal)}.hero-button:hover{box-shadow:var(--button-shadow-hover)}.badge{display:inline-block;padding:var(--spacing-small) var(--spacing-medium);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius-small);font-size:var(--info-font-size);font-weight:700;transition:all var(--transition-speed-normal)}.badge-skill{background-color:var(--accent-color);color:var(--text-color-dark);border-color:var(--text-color-dark)}.badge-skill:hover{box-shadow:var(--button-shadow);transform:translateY(-2px)}.badge-social{background-color:var(--secondary-color);color:var(--text-color-dark);border-color:var(--text-color-dark);display:inline-flex;align-items:center;gap:var(--spacing-small)}.badge-social:hover{background-color:var(--primary-color);color:var(--secondary-color)}.badge-primary{background-color:var(--primary-color);color:var(--text-color);border-color:var(--text-color)}.badge-primary:hover{box-shadow:var(--button-shadow);transform:translateY(-2px)}.badge-secondary{background-color:var(--secondary-color);color:var(--text-color-dark);border-color:var(--text-color-dark)}.badge-secondary:hover{background-color:var(--card-background);box-shadow:var(--button-shadow)}.badge-accent{background-color:var(--accent-color);color:var(--text-color-dark);border-color:var(--text-color-dark)}.badge-accent:hover{box-shadow:var(--button-shadow)}.badge-sm{padding:4px 8px;font-size:.75rem}.badge-lg{padding:var(--spacing-medium) var(--spacing-large);font-size:1rem}.badge-icon{display:inline-flex;align-items:center;gap:6px}.badge-icon svg{width:1em;height:1em}.badge-success{background-color:#51cf66;color:var(--text-color-dark)}.badge-error{background-color:#ff6b6b;color:var(--text-color)}.badge-warning{background-color:#ffd43b;color:var(--text-color-dark)}.site-footer{padding:var(--spacing-large);text-align:center;background-color:var(--primary-color);color:var(--text-color)}.site-footer__links{display:flex;justify-content:center;gap:var(--spacing-medium);margin-top:var(--spacing-medium)}.site-footer__link{color:var(--text-color);text-decoration:none;border-bottom:2px solid var(--text-color);transition:color var(--transition-speed-normal)}.site-footer__link:hover{color:var(--text-color-dark);border-bottom-color:var(--accent-color)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin:var(--spacing-large) 0}.m-0{margin:0}.m-xs{margin:var(--spacing-small)}.m-sm{margin:var(--spacing-medium)}.m-md{margin:var(--spacing-normal)}.m-lg{margin:var(--spacing-large)}.m-xl{margin:var(--spacing-xlarge)}.mt-xs{margin-top:var(--spacing-small)}.mt-sm{margin-top:var(--spacing-medium)}.mt-md{margin-top:var(--spacing-normal)}.mt-lg{margin-top:var(--spacing-large)}.mt-xl{margin-top:var(--spacing-xlarge)}.mb-xs{margin-bottom:var(--spacing-small)}.mb-sm{margin-bottom:var(--spacing-medium)}.mb-md{margin-bottom:var(--spacing-normal)}.mb-lg{margin-bottom:var(--spacing-large)}.mb-xl{margin-bottom:var(--spacing-xlarge)}.mx-auto{margin-left:auto;margin-right:auto}.p-0{padding:0}.p-xs{padding:var(--spacing-small)}.p-sm{padding:var(--spacing-medium)}.p-md{padding:var(--spacing-normal)}.p-lg{padding:var(--spacing-large)}.p-xl{padding:var(--spacing-xlarge)}.pt-xs{padding-top:var(--spacing-small)}.pt-sm{padding-top:var(--spacing-medium)}.pt-md{padding-top:var(--spacing-normal)}.pt-lg{padding-top:var(--spacing-large)}.pt-xl{padding-top:var(--spacing-xlarge)}.pb-xs{padding-bottom:var(--spacing-small)}.pb-sm{padding-bottom:var(--spacing-medium)}.pb-md{padding-bottom:var(--spacing-normal)}.pb-lg{padding-bottom:var(--spacing-large)}.pb-xl{padding-bottom:var(--spacing-xlarge)}.px-xs{padding-left:var(--spacing-small);padding-right:var(--spacing-small)}.px-sm{padding-left:var(--spacing-medium);padding-right:var(--spacing-medium)}.px-md{padding-left:var(--spacing-normal);padding-right:var(--spacing-normal)}.px-lg{padding-left:var(--spacing-large);padding-right:var(--spacing-large)}.px-xl{padding-left:var(--spacing-xlarge);padding-right:var(--spacing-xlarge)}.py-xs{padding-top:var(--spacing-small);padding-bottom:var(--spacing-small)}.py-sm{padding-top:var(--spacing-medium);padding-bottom:var(--spacing-medium)}.py-md{padding-top:var(--spacing-normal);padding-bottom:var(--spacing-normal)}.py-lg{padding-top:var(--spacing-large);padding-bottom:var(--spacing-large)}.py-xl{padding-top:var(--spacing-xlarge);padding-bottom:var(--spacing-xlarge)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--primary-color)}.text-secondary{color:var(--text-color-secondary)}.text-accent{color:var(--accent-color)}.hidden{display:none}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;justify-content:space-between;align-items:center}.grid{display:grid}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-xs{gap:var(--spacing-small)}.gap-sm{gap:var(--spacing-medium)}.gap-lg{gap:var(--spacing-large)}.w-100{width:100%}.h-100{height:100%}.w-auto{width:auto}.h-auto{height:auto}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.border{border:var(--border-width) var(--border-style) var(--border-color)}.border-none{border:none}.rounded{border-radius:var(--border-radius-medium)}.rounded-sm{border-radius:var(--border-radius-small)}.rounded-lg{border-radius:var(--border-radius-large)}.shadow{box-shadow:var(--button-shadow)}.shadow-lg{box-shadow:var(--button-shadow-hover)}.shadow-none{box-shadow:none}.transition{transition:all var(--transition-speed-normal)}.transition-fast{transition:all var(--transition-speed-fast)}.transition-slow{transition:all var(--transition-speed-slow)}@media(max-width:768px){.m-xs-tablet{margin:var(--spacing-small)}.m-sm-tablet{margin:var(--spacing-medium)}.m-md-tablet{margin:var(--spacing-normal)}.m-lg-tablet{margin:var(--spacing-large)}.m-xl-tablet{margin:var(--spacing-xlarge)}.mt-xs-tablet{margin-top:var(--spacing-small)}.mt-sm-tablet{margin-top:var(--spacing-medium)}.mt-md-tablet{margin-top:var(--spacing-normal)}.mt-lg-tablet{margin-top:var(--spacing-large)}.mt-xl-tablet{margin-top:var(--spacing-xlarge)}.mb-xs-tablet{margin-bottom:var(--spacing-small)}.mb-sm-tablet{margin-bottom:var(--spacing-medium)}.mb-md-tablet{margin-bottom:var(--spacing-normal)}.mb-lg-tablet{margin-bottom:var(--spacing-large)}.mb-xl-tablet{margin-bottom:var(--spacing-xlarge)}.p-xs-tablet{padding:var(--spacing-small)}.p-sm-tablet{padding:var(--spacing-medium)}.p-md-tablet{padding:var(--spacing-normal)}.p-lg-tablet{padding:var(--spacing-large)}.p-xl-tablet{padding:var(--spacing-xlarge)}.pt-xs-tablet{padding-top:var(--spacing-small)}.pt-sm-tablet{padding-top:var(--spacing-medium)}.pt-md-tablet{padding-top:var(--spacing-normal)}.pt-lg-tablet{padding-top:var(--spacing-large)}.pt-xl-tablet{padding-top:var(--spacing-xlarge)}.pb-xs-tablet{padding-bottom:var(--spacing-small)}.pb-sm-tablet{padding-bottom:var(--spacing-medium)}.pb-md-tablet{padding-bottom:var(--spacing-normal)}.pb-lg-tablet{padding-bottom:var(--spacing-large)}.pb-xl-tablet{padding-bottom:var(--spacing-xlarge)}.px-xs-tablet{padding-left:var(--spacing-small);padding-right:var(--spacing-small)}.px-sm-tablet{padding-left:var(--spacing-medium);padding-right:var(--spacing-medium)}.px-md-tablet{padding-left:var(--spacing-normal);padding-right:var(--spacing-normal)}.px-lg-tablet{padding-left:var(--spacing-large);padding-right:var(--spacing-large)}.px-xl-tablet{padding-left:var(--spacing-xlarge);padding-right:var(--spacing-xlarge)}.py-xs-tablet{padding-top:var(--spacing-small);padding-bottom:var(--spacing-small)}.py-sm-tablet{padding-top:var(--spacing-medium);padding-bottom:var(--spacing-medium)}.py-md-tablet{padding-top:var(--spacing-normal);padding-bottom:var(--spacing-normal)}.py-lg-tablet{padding-top:var(--spacing-large);padding-bottom:var(--spacing-large)}.py-xl-tablet{padding-top:var(--spacing-xlarge);padding-bottom:var(--spacing-xlarge)}.gap-xs-tablet{gap:var(--spacing-small)}.gap-sm-tablet{gap:var(--spacing-medium)}.gap-lg-tablet{gap:var(--spacing-large)}}@media(max-width:480px){.m-xs-mobile{margin:var(--spacing-small)}.m-sm-mobile{margin:var(--spacing-medium)}.m-md-mobile{margin:var(--spacing-normal)}.m-lg-mobile{margin:var(--spacing-large)}.m-xl-mobile{margin:var(--spacing-xlarge)}.mt-xs-mobile{margin-top:var(--spacing-small)}.mt-sm-mobile{margin-top:var(--spacing-medium)}.mt-md-mobile{margin-top:var(--spacing-normal)}.mt-lg-mobile{margin-top:var(--spacing-large)}.mt-xl-mobile{margin-top:var(--spacing-xlarge)}.mb-xs-mobile{margin-bottom:var(--spacing-small)}.mb-sm-mobile{margin-bottom:var(--spacing-medium)}.mb-md-mobile{margin-bottom:var(--spacing-normal)}.mb-lg-mobile{margin-bottom:var(--spacing-large)}.mb-xl-mobile{margin-bottom:var(--spacing-xlarge)}.p-xs-mobile{padding:var(--spacing-small)}.p-sm-mobile{padding:var(--spacing-medium)}.p-md-mobile{padding:var(--spacing-normal)}.p-lg-mobile{padding:var(--spacing-large)}.p-xl-mobile{padding:var(--spacing-xlarge)}.pt-xs-mobile{padding-top:var(--spacing-small)}.pt-sm-mobile{padding-top:var(--spacing-medium)}.pt-md-mobile{padding-top:var(--spacing-normal)}.pt-lg-mobile{padding-top:var(--spacing-large)}.pt-xl-mobile{padding-top:var(--spacing-xlarge)}.pb-xs-mobile{padding-bottom:var(--spacing-small)}.pb-sm-mobile{padding-bottom:var(--spacing-medium)}.pb-md-mobile{padding-bottom:var(--spacing-normal)}.pb-lg-mobile{padding-bottom:var(--spacing-large)}.pb-xl-mobile{padding-bottom:var(--spacing-xlarge)}.px-xs-mobile{padding-left:var(--spacing-small);padding-right:var(--spacing-small)}.px-sm-mobile{padding-left:var(--spacing-medium);padding-right:var(--spacing-medium)}.px-md-mobile{padding-left:var(--spacing-normal);padding-right:var(--spacing-normal)}.px-lg-mobile{padding-left:var(--spacing-large);padding-right:var(--spacing-large)}.px-xl-mobile{padding-left:var(--spacing-xlarge);padding-right:var(--spacing-xlarge)}.py-xs-mobile{padding-top:var(--spacing-small);padding-bottom:var(--spacing-small)}.py-sm-mobile{padding-top:var(--spacing-medium);padding-bottom:var(--spacing-medium)}.py-md-mobile{padding-top:var(--spacing-normal);padding-bottom:var(--spacing-normal)}.py-lg-mobile{padding-top:var(--spacing-large);padding-bottom:var(--spacing-large)}.py-xl-mobile{padding-top:var(--spacing-xlarge);padding-bottom:var(--spacing-xlarge)}.gap-xs-mobile{gap:var(--spacing-small)}.gap-sm-mobile{gap:var(--spacing-medium)}.gap-lg-mobile{gap:var(--spacing-large)}}