:root { --accent-color-dark: #fff; --accent-color-light: #000; --back-accent-color-dark: #000; --back-accent-color-light: #fff; --font-color-dark: #fff; --font-color-light: #000; --theme-switcher-bg: transparent; --back-accent-color: var(--back-accent-color-light); --font-color: var(--font-color-light); --accent-color: var(--accent-color-light) } body { background-color: var(--back-accent-color, var(--back-accent-color-dark)); color: var(--font-color, var(--font-color-dark)); font-family: 'JetBrains Mono', monospace, 'Segoe UI', Arial, sans-serif; margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-size: 1.06em; overflow-x: hidden } .content-wrapper { max-width: 800px; margin: 0 auto; padding: 2rem; width: 100%; box-sizing: border-box } h1#main_title, h2#subtitle, h3#subsubtitle { color: var(--font-color, var(--font-color-dark)) } .footer, .footer-link, .footer-social a, .footer-copyright, .project-link, .lang-btn { color: var(--font-color, var(--font-color-dark)) !important } .footer { background-color: var(--back-accent-color, var(--back-accent-color-dark)); width: 100%; padding: 10px 0; text-align: center } .footer-main { display: flex; flex-direction: column; align-items: center } .footer-links { flex: 1 1 0; display: flex; justify-content: flex-start; gap: 1em; margin-bottom: 0.2em; width: 100% } .footer-link { color: var(--font-color, var(--font-color-dark)); text-decoration: none; font-size: 1em; transition: color 0.14s; margin-top: 0.5rem; margin-left: 1rem } .footer-link:hover, .footer-link:focus { color: var(--accent-color, var(--accent-color-dark)) } .footer-social { flex: 1 1 0; display: flex; justify-content: center; gap: 1em } .footer-social a { display: flex; align-items: center; justify-content: center; background: none; color: var(--font-color, var(--font-color-dark)); border-radius: 8px; width: 42px; height: 42px; font-size: 1.6em; transition: background 0.18s, color 0.18s; text-decoration: none; box-shadow: none; border: none; padding: 0 } .footer-social a.primary { background: none; color: var(--font-color, var(--font-color-dark)) } .footer-social a.primary:hover, .footer-social a.primary:focus { background: var(--font-color, var(--font-color-dark)); color: var(--back-accent-color, var(--back-accent-color-light)) } .footer-social a.primary:hover svg, .footer-social a.primary:focus svg { filter: none; fill: var(--back-accent-color, var(--back-accent-color-light)) } .footer-social a svg { width: 1em; height: 1em; display: block; fill: var(--font-color, var(--font-color-dark)) } .footer-copyright { color: var(--font-color, var(--font-color-dark)); font-size: 12px; margin: 0; padding: 0; line-height: 1.2 } .header-row { display: flex; justify-content: space-between } .header-titles { display: flex; flex-direction: column } .lang-switcher-top { margin-left: 20px } .main-nav { display: flex; gap: 1em; margin-top: 1em; justify-content: center } .main-nav a { color: var(--font-color, var(--font-color-dark)); text-decoration: none; padding: 0.5em 1em; border-radius: 4px; transition: background 0.15s, color 0.15s } .main-nav a:hover, .main-nav a:focus { background: var(--accent-color, var(--accent-color-dark)); color: var(--back-accent-color, var(--back-accent-color-dark)) } .articles-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.5rem } .article-card { background: var(--back-accent-color, var(--back-accent-color-dark)); border: 2px solid var(--accent-color, var(--accent-color-dark)); border-radius: 12px; padding: 1.2rem; transition: box-shadow 0.2s } .article-card:hover { background: var(--accent-color, var(--accent-color-dark)); color: var(--back-accent-color, var(--back-accent-color-dark)) } .article-card:hover a { color: var(--back-accent-color, var(--back-accent-color-dark)) !important } .article-card:hover p { color: var(--back-accent-color, var(--back-accent-color-dark)) !important } .article-card:hover .article-date { color: var(--back-accent-color, var(--back-accent-color-dark)) !important } .article-card h3 { margin: 0 0 0.5rem 0; font-size: 1.2em } .article-card h3 a { color: var(--font-color, var(--font-color-dark)); text-decoration: none; transition: color 0.15s } .article-card h3 a:hover { color: var(--accent-color, var(--accent-color-dark)) } .article-card p { margin: 0 0 0.5rem 0; font-size: 0.95em; color: var(--font-color, var(--font-color-dark)) } .article-date { font-size: 0.85em; color: var(--accent-color, var(--accent-color-dark)); font-weight: 600 } .projects-btn { display: inline-block; font-size: 1.2em; font-weight: 600; cursor: pointer; color: var(--font-color, var(--font-color-dark)); background: var(--back-accent-color, var(--back-accent-color-dark)); border: 2px solid var(--accent-color, var(--accent-color-dark)); padding: 0.75rem 1.5rem; border-radius: 8px; transition: all 0.2s; text-decoration: none } .projects-btn:hover { background: var(--accent-color, var(--accent-color-dark)); color: var(--back-accent-color, var(--back-accent-color-dark)) } .split-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.5rem; width: 100%; flex: 1; overflow: hidden } .personal-info { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.5rem; overflow-y: auto } .info-section { background: var(--back-accent-color, var(--back-accent-color-dark)); border-radius: 8px; padding: 1.2rem } .projects-section { padding: 1.5rem; overflow-y: auto } body { background: var(--back-accent-color, var(--back-accent-color-dark)); color: var(--font-color, var(--font-color-dark)); font-family: 'JetBrains Mono', monospace, 'Segoe UI', Arial, sans-serif; margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-size: 1.06em } main { width: 100%; padding: 0; box-sizing: border-box; overflow-x: auto } .header-row { display: none } .header-titles { display: flex; flex-direction: column; align-items: flex-start } .lang-switcher-top { margin-top: 0.3em; margin-right: 0.3em } header h1 { font-size: 2.1em; margin-bottom: 0.15em; color: var(--accent-color, var(--accent-color-dark)) } header h2 { font-size: 1.19em; color: var(--accent-color, var(--accent-color-dark)); margin-bottom: 0.08em } header h3 { font-size: 1.01em; color: var(--accent-color, var(--accent-color-dark)); font-weight: 400; margin-bottom: 0.2em } .section { margin-bottom: 1em } #about-section { margin-bottom: 1.2em } .lang-switcher { display: flex; gap: 0.3em; justify-content: flex-end } .lang-btn { background: none; border: none; padding: 0; cursor: pointer; border-radius: 4px; transition: box-shadow 0.15s; outline: none; box-shadow: 0 0 0 0 rgba(0, 255, 247, 0) } .lang-btn:focus, .lang-btn.active {} .lang-btn img { display: block; width: 32px; height: 22px; border-radius: 2px; border: none } .cta-btn { display: inline-block; background: var(--back-accent-color, var(--back-accent-color-dark)); color: var(--font-color, var(--font-color-dark)); border: 2px solid var(--font-color, var(--font-color-dark)); padding: 0.6em 1.2em; border-radius: 4px; font-size: 1em; font-family: inherit; text-decoration: none; margin-top: 1em; transition: background 0.15s, color 0.15s, border 0.15s; cursor: pointer } .cta-btn:hover, .cta-btn:focus { background: var(--font-color, var(--font-color-dark)); color: var(--back-accent-color, var(--back-accent-color-light)); border: 2px solid var(--font-color, var(--font-color-dark)) } .cv-btn { composes: cta-btn } .project-link { color: var(--font-color, var(--font-color-dark)); font-size: 0.97em; margin-left: 1em; text-decoration: underline } .project-link:hover, .project-link:focus { color: var(--font-color, var(--font-color-dark)); text-decoration: underline } footer.footer { width: 100%; max-width: 100vw; box-sizing: border-box; overflow-x: hidden; background: var(--back-accent-color, var(--back-accent-color-dark)); color: var(--font-color, var(--font-color-dark)); margin: 0; padding: 2px 0 1px 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; border-top: 1px solid var(--accent-color, var(--accent-color-dark)); clear: both; position: relative; flex-shrink: 0 } .central-footer-content { width: 100%; max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05em } .footer-main { width: 100%; max-width: unset; margin: 0; display: block } .footer-row { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5em; padding: 0 } .footer-links { flex: 1 1 0; display: flex; justify-content: flex-start } .footer-social { flex: 1 1 0; display: flex; justify-content: center; gap: 0.8em } .footer-switchers { flex: 1 1 0; display: flex; flex-direction: row; gap: 1.2em; align-items: center; justify-content: flex-end } @media (max-width: 900px) { .split-layout { display: block !important; flex-direction: column !important; width: 100% !important; grid-template-columns: none !important; grid-template-rows: none !important; gap: 1rem !important; overflow: visible !important } .personal-info { padding: 1.5rem !important; overflow-y: visible !important; width: 100% !important; max-width: 100% !important; display: block !important } .projects-section { padding: 1.5rem !important; overflow-y: visible !important; width: 100% !important; max-width: 100% !important; display: block !important } } @media (max-width: 700px) { body { font-size: 0.95em; overflow-x: hidden !important; max-width: 100vw !important } .header-row { flex-direction: column; align-items: flex-start; gap: 0.7em } .footer-row { flex-direction: row; gap: 0.3em; align-items: center; flex-wrap: wrap; justify-content: center } .footer-links, .footer-social, .footer-switchers { justify-content: center; flex: 0 0 auto } .footer-switchers { flex-direction: row; gap: 0.3em; align-items: center } footer.footer { padding: 1px 0 0px 0; max-width: 100vw !important; overflow-x: hidden !important } .central-footer-content { gap: 0.02em; max-width: 100vw !important; box-sizing: border-box } .footer-copyright { font-size: 10px; margin: 0; padding: 0 } .split-layout { display: block !important; gap: 1.5rem !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important } .personal-info { padding: 1rem !important; width: 100% !important; max-width: 100vw !important; overflow-y: visible !important; overflow-x: hidden !important; display: block !important; box-sizing: border-box } .projects-section { padding: 1rem !important; width: 100% !important; max-width: 100vw !important; overflow-y: visible !important; overflow-x: hidden !important; display: block !important; box-sizing: border-box } .info-section { padding: 1rem !important; margin-bottom: 1.2rem !important; text-align: left !important; display: block !important; position: relative !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box } .projects-grid { display: block !important; gap: 1.5rem !important; width: 100% !important; max-width: 100% !important } .project-cards-container { display: block !important; gap: 1.5rem !important; width: 100% !important; max-width: 100% !important } .project-card { min-height: 220px !important; padding: 1.4rem !important; aspect-ratio: unset !important; max-width: 100% !important; width: 100% !important; margin-bottom: 1.5rem !important; display: block !important; box-sizing: border-box } h1#main_title, h2#subtitle, h3#subsubtitle { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important } .personal-info .info-section { text-align: left !important; display: block !important } .info-section p { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important } .info-section #download_cv, .info-section .cv-btn, .info-section a[href*="download"] { display: block !important; width: calc(100% - 2rem) !important; margin: 1rem 0 !important; margin-left: 1rem !important; margin-right: 1rem !important; text-align: center !important; padding: 0.8rem 1.2rem !important; box-sizing: border-box !important; font-family: inherit !important; font-size: 1rem !important; background: transparent !important; border: 2px solid var(--font-color, #000) !important; border-radius: 4px !important; text-decoration: none !important; cursor: pointer !important; color: var(--font-color, #000) !important; transition: all 0.15s !important } .info-section #linkedin, .info-section .linkedin-btn, .info-section button[id="linkedin"] { display: flex !important; width: calc(100% - 2rem) !important; margin: 1rem 0 !important; margin-left: 1rem !important; margin-right: 1rem !important; justify-content: center !important; align-items: center !important; padding: 0.8rem 1.2rem !important; box-sizing: border-box !important; font-family: inherit !important; font-size: 1rem !important; background: transparent !important; border: 2px solid var(--font-color, #000) !important; border-radius: 4px !important; cursor: pointer !important; color: var(--font-color, #000) !important; transition: all 0.15s !important } main { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; box-sizing: border-box } .content-wrapper { max-width: 100% !important; padding: 1rem !important; width: 100% !important; box-sizing: border-box; overflow-x: hidden !important } * { max-width: 100% !important } .section { margin-bottom: 2rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box } } @media (max-width: 500px) { body { font-size: 0.9em } h1 { font-size: 1.27em } header h1 { font-size: 1.4em } header h2 { font-size: 1.05em } header h3 { font-size: 0.97em } .personal-info { padding: 0.8rem !important; width: 100% !important } .projects-section { padding: 0.8rem !important; width: 100% !important } .info-section { padding: 0.8rem } .footer-social a { width: 36px; height: 36px; font-size: 1.25em; min-width: 30px; min-height: 30px } .footer-social a svg { width: 22px; height: 22px; min-width: 18px; min-height: 18px; max-width: 100% } .linkedin-btn { padding: 7px 13px; font-size: 0.97em } .linkedin-btn svg { width: 15px; height: 15px; margin-right: 6px } .projects-grid { gap: 1.5rem } .project-cards-container { gap: 1.2rem } .project-card img.project-thumb { width: 70px; height: 70px } .project-card { padding: 1.2rem; min-height: 200px } .project-card h3 { font-size: 1.05em } .project-card p { font-size: 0.9em } .cta-btn { padding: 0.5em 1em; font-size: 0.95em } } .linkedin-btn { composes: cta-btn; padding: 8px 18px; font-size: 1.04em; display: flex; align-items: center } .linkedin-btn svg { width: 24px; height: 24px; margin-right: 10px; fill: var(--font-color, var(--font-color-dark)); transition: fill 0.15s } .linkedin-btn:hover svg { fill: var(--back-accent-color, var(--back-accent-color-light)) } .theme-switcher { display: flex; gap: 0.5em; align-items: center; background: var(--theme-switcher-bg); padding: 0.5em 0; justify-content: center; margin-right: 1em } .theme-btn { border: none; background: transparent; color: var(--font-color, var(--font-color-dark)); font-size: 1em; cursor: pointer; padding: 0.22em 0.9em; border-radius: 4px; margin: 0 0.1em; transition: background 0.17s, color 0.17s } .theme-btn.active, .theme-btn:focus { background: var(--accent-color, var(--accent-color-dark)); color: var(--back-accent-color, var(--back-accent-color-dark)) } .header-row .theme-switcher { display: none } .central-footer-content .theme-switcher { display: flex; gap: 0.5em; align-items: center; background: var(--theme-switcher-bg); padding: 0.5em 0; justify-content: center } .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem } .section { margin-bottom: 1.5em } .project-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem } .project-category { margin-bottom: 0 } .project-category .subtitle { margin-bottom: 1.1rem; font-size: 1.22em; color: var(--accent-color, var(--accent-color-dark)); text-align: left } .project-badge { display: inline-block; font-size: 0.93em; font-weight: 600; border-radius: 6px; padding: 0.15em 0.7em; margin-bottom: 0.7em; letter-spacing: 0.02em } .project-card, .project-card.project-clickable { background: var(--back-accent-color, #181818); border-radius: 12px; padding: 1rem; border: 2px solid var(--accent-color, var(--accent-color-dark)); text-align: center; display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 280px; max-height: 320px; position: relative; width: 100%; box-sizing: border-box; transition: box-shadow 0.2s; margin-bottom: 0; aspect-ratio: 1/1 } .project-card img.project-thumb { width: 80px; height: 80px; object-fit: contain; margin-bottom: 0.8rem; border-radius: 8px } .project-card h3 { margin: 0.4rem 0 0.2rem 0; font-size: 1.15em; font-weight: 600 } .project-card p { font-size: 0.98em; margin: 0 0 0.5em 0; color: var(--font-color, var(--font-color-dark)) } .project-links { display: flex; align-items: center; justify-content: center; gap: 0.35em; margin-top: 0.2em } .project-link.github-icon-link { display: flex; align-items: center; margin-left: 0.2em } .project-link.github-icon-link svg { width: 34px; height: 34px; vertical-align: middle; margin-right: 0.15em } .project-link.github-icon-link.disabled svg { opacity: 0.4 } .project-link.github-icon-link span { font-size: 1.08em; margin-left: 0.15em } .project-card.project-clickable { cursor: pointer; text-decoration: none; color: inherit } .project-card.project-clickable:hover { background: var(--accent-color, var(--accent-color-dark)); color: var(--back-accent-color, var(--back-accent-color-dark)) } .project-card.project-clickable:hover h3, .project-card.project-clickable:hover p { color: var(--back-accent-color, var(--back-accent-color-dark)) } .project-card.project-clickable:hover .github-icon-link svg { fill: var(--back-accent-color, var(--back-accent-color-dark)) } .project-card.project-card-template { opacity: 0.6; cursor: not-allowed; position: relative } .project-card.project-card-template::after { content: "Template"; position: absolute; top: 10px; right: 10px; background: var(--accent-color, var(--accent-color-dark)); color: var(--back-accent-color, var(--back-accent-color-dark)); padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600 } .project-card.project-card-template:hover { background: var(--back-accent-color, #181818); color: var(--font-color, var(--font-color-dark)) } .project-card.project-card-template:hover h3, .project-card.project-card-template:hover p { color: var(--font-color, var(--font-color-dark)) } .project-card.project-card-template:hover .github-icon-link svg { fill: var(--font-color, var(--font-color-dark)) } .github-icon-link { display: inline-flex; align-items: center; gap: 0.2em; color: var(--font-color, var(--font-color-dark)); vertical-align: middle } .github-icon-link svg { display: inline-block; vertical-align: middle; fill: var(--font-color, var(--font-color-dark)); transition: fill 0.15s } .project-card.project-clickable .github-icon-link svg { fill: var(--font-color, var(--font-color-dark)) } .github-icon-link.disabled { opacity: 0.4; pointer-events: none; filter: grayscale(0.7) } .github-warning-card { display: flex; align-items: center; justify-content: center; background: #fff; color: var(--font-color, var(--font-color-dark)); border: 1.5px solid var(--font-color, var(--font-color-dark)); border-radius: 8px; font-size: 0.97em; font-weight: 500; padding: 0.7em 1.2em; margin: 1.2em auto 0.4em auto; max-width: 350px; min-height: 38px; cursor: pointer; transition: box-shadow 0.13s, background 0.13s, color 0.13s; outline: none; text-decoration: none !important } .github-warning-card:hover, .github-warning-card:focus { background: var(--font-color, var(--font-color-dark)); color: var(--back-accent-color, var(--back-accent-color-dark)); border-color: var(--font-color, var(--font-color-dark)) } .github-warning-card a { text-decoration: none !important } #more_projects, #more_projects a { text-decoration: none !important } .github-warning-card, .github-warning-card a { text-decoration: none !important } #more_projects { composes: cta-btn; margin: 1.2em 0 0.4em 0; font-size: 1.2em; font-weight: 600; gap: 0.35em; border: 2px solid var(--font-color, var(--font-color-dark)) } #more_projects svg { width: 1.3em; height: 1.3em; vertical-align: middle; margin-right: 0.28em; fill: var(--font-color, var(--font-color-dark)); transition: fill 0.15s } .stylish-lang-switcher { display: flex; gap: 0.5em; align-items: center; justify-content: flex-end; border-radius: 8px; padding: 0.4em 0.7em; position: relative } .stylish-lang-switcher .lang-btn { display: flex; align-items: center; gap: 0.35em; background: none; border: none; border-radius: 6px; padding: 0.18em 0.7em 0.18em 0.4em; cursor: pointer; transition: background 0.18s, box-shadow 0.18s; font-family: inherit; font-size: 1em; position: relative; outline: none } .stylish-lang-switcher .lang-btn:focus, .stylish-lang-switcher .lang-btn.active { background: var(--accent-color, var(--accent-color-dark)); color: var(--back-accent-color, var(--back-accent-color-dark)); z-index: 2 } .stylish-lang-switcher .lang-btn:hover { } .stylish-lang-switcher .lang-flag-wrap { display: flex; align-items: center; justify-content: center } .stylish-lang-switcher .lang-flag-wrap img { width: 32px; height: 22px; border-radius: 3px; border: none } .stylish-lang-switcher .lang-btn:hover .lang-flag-wrap img { border-color: var(--font-color, var(--font-color-dark)) } .stylish-lang-switcher .lang-label { font-size: 1em; font-weight: 500; margin-left: 0.13em; color: var(--font-color, var(--font-color-dark)); letter-spacing: 0.01em; transition: color 0.18s } .stylish-lang-switcher .lang-btn.active .lang-label { color: var(--back-accent-color, var(--back-accent-color-dark)) } .stylish-lang-switcher .lang-check { display: none; font-size: 1.2em; margin-left: 0.25em; color: var(--font-color, var(--font-color-dark)); font-weight: bold; transition: color 0.18s } .stylish-lang-switcher .lang-btn.active .lang-check { display: inline; color: var(--back-accent-color, var(--back-accent-color-dark)) } @media (max-width: 700px) { .stylish-lang-switcher { width: auto !important; min-width: unset !important; max-width: 100vw; box-sizing: border-box; padding: 0.2em 0.2em; gap: 0.2em; margin: 0 auto; justify-content: center } .stylish-lang-switcher .lang-label { font-size: 0.97em } } #about_text { white-space: pre-line }