:root {
    /* Primary colors */
    --color-primary: #FFC107;
    --color-primary-hover: #ff9800;
    /* Text in the brand colour: a darker gold in light mode so it meets WCAG AA
       contrast (5.0:1 on white) against the light backgrounds. */
    --color-primary-text: #946700;
    --color-primary-hover-text: #7d5700;
    --color-accent: #2a54f5;
    
    /* Text colors */
    --color-text-primary: #3d3d50;
    --color-text-secondary: #888888;
    --color-text-muted: #969595;
    --color-text-dark: #2b2b3d;
    --color-text-black: #212529;
    --color-heading: #2b2b3d;
    
    /* Background colors */
    --color-bg-body: #f9fafb;
    --color-bg-pattern: #f9fafb;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f6f6f6;
    --color-bg-dark: #313131;
    
    /* Border colors */
    --color-border-primary: #FFC107;
    --color-border-light: #d0d0d0;
    --color-border-gray: #cccccc;
    --color-border-code: #d0d7de;
    
    /* Code block colors */
    --color-code-bg: #f6f8fa;
    --color-code-text: #24292f;
    --color-code-border: #d0d7de;
    
    /* Alert colors */
    --color-success-bg: #d4f4dd;
    --color-success-border: #a3d9a5;
    --color-success-text: #0f5132;
    --color-error-bg: #f8d7da;
    --color-error-border: #f5c6cb;
    --color-error-text: #721c24;
    
    /* Scrollbar colors */
    --color-scrollbar-track: #f1f1f1;
    --color-scrollbar-thumb: #888888;
    --color-scrollbar-thumb-hover: #555555;
    
    /* Misc */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-shadow: rgba(0, 0, 0, 0.1);
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Primary colors - keep the amber/yellow theme */
        --color-primary: #FFC107;
        --color-primary-hover: #ffb300;
        --color-primary-text: #FFC107;
        --color-primary-hover-text: #ffb300;
        --color-accent: #5c7cfa;
        
        /* Text colors */
        --color-text-primary: #c6c1ba;
        --color-text-secondary: #9d9588;
        --color-text-muted: #808080;
        --color-text-dark: #c6c1ba;
        --color-text-black: #c6c1ba;
        --color-heading: #c6c1ba;
        
        /* Background colors */
        --color-bg-body: #202222;
        --color-bg-pattern: none;
        --color-bg-white: #1e2021;
        --color-bg-gray: #1e1e1e;
        --color-bg-dark: #0d0d0d;
        
        /* Border colors */
        --color-border-primary: #af8300;
        --color-border-light: #3a3a3a;
        --color-border-gray: #3a3a3a;
        --color-border-code: #3a3a3a;
        
        /* Code block colors - dark theme */
        --color-code-bg: #2d2d2d;
        --color-code-text: #e0e0e0;
        --color-border-code: #3a3a3a;
        
        /* Alert colors - adjusted for dark mode */
        --color-success-bg: #1a3a1a;
        --color-success-border: #2d5a2d;
        --color-success-text: #80d080;
        --color-error-bg: #3a1a1a;
        --color-error-border: #5a2d2d;
        --color-error-text: #ff8080;
        
        /* Scrollbar colors */
        --color-scrollbar-track: #2a2a2a;
        --color-scrollbar-thumb: #555555;
        --color-scrollbar-thumb-hover: #777777;
        
        /* Misc */
        --color-white: #1a1a1a;
        --color-black: #ffffff;
        --color-shadow: rgba(0, 0, 0, 0.3);
    }
}

[data-theme="dark"] {
    /* Primary colors - keep the amber/yellow theme */
    --color-primary: #FFC107;
    --color-primary-hover: #ffb300;
    --color-primary-text: #FFC107;
    --color-primary-hover-text: #ffb300;
    --color-accent: #5c7cfa;
    
    /* Text colors */
    --color-text-primary: #c6c1ba;
    --color-text-secondary: #9d9588;
    --color-text-muted: #808080;
    --color-text-dark: #c6c1ba;
    --color-text-black: #c6c1ba;
    --color-heading: #c6c1ba;
    
    /* Background colors */
    --color-bg-body: #202222;
    --color-bg-pattern: none;
    --color-bg-white: #1e2021;
    --color-bg-gray: #1e1e1e;
    --color-bg-dark: #0d0d0d;
    
    /* Border colors */
    --color-border-primary: #af8300;
    --color-border-light: #3a3a3a;
    --color-border-gray: #3a3a3a;
    --color-border-code: #3a3a3a;
    
    /* Code block colors - dark theme */
    --color-code-bg: #2d2d2d;
    --color-code-text: #e0e0e0;
    --color-code-border: #3a3a3a;
    
    /* Alert colors - adjusted for dark mode */
    --color-success-bg: #1a3a1a;
    --color-success-border: #2d5a2d;
    --color-success-text: #80d080;
    --color-error-bg: #3a1a1a;
    --color-error-border: #5a2d2d;
    --color-error-text: #ff8080;
    
    /* Scrollbar colors */
    --color-scrollbar-track: #2a2a2a;
    --color-scrollbar-thumb: #555555;
    --color-scrollbar-thumb-hover: #777777;
    
    /* Misc */
    --color-white: #1a1a1a;
    --color-black: #ffffff;
    --color-shadow: rgba(0, 0, 0, 0.3);
}

body {
    font-family: 'Hind', sans-serif;
    font-size: 15px;
    line-height: 1.8em;
    color: var(--color-text-primary);
    font-weight: 300;
    background-color: var(--color-bg-body);
    background-image: var(--color-bg-pattern);
    background-attachment: fixed;
    user-select: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

#main-content {
    flex: 1;
    padding-top: 56px; /* Height of navbar */
    overflow-x: hidden;
}

/* Navbar styling - only for main navbar, not resume/portfolio switcher */
.navbar-expand-lg.navbar.bg-light {
    background-color: var(--color-bg-white) !important;
}

.navbar-expand-lg.navbar-light .navbar-brand,
.navbar-expand-lg.navbar-light .navbar-nav .nav-link {
    color: var(--color-text-black);
}

.navbar-expand-lg.navbar-light .navbar-nav .nav-link:hover {
    color: var(--color-text-black);
}

.navbar-expand-lg.navbar-light .navbar-toggler {
    border-color: var(--color-border-gray);
}

.navbar-expand-lg.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="dark"] .navbar-expand-lg.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .navbar-expand-lg.navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
}

.navbar-expand-lg .navbar-collapse {
    flex-grow: unset !important;
}

.navbar-expand-lg.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 4000;
  margin: 0;
}

.navbar-expand-lg .navbar-nav {
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
    border-radius: 0px;
}

.navbar-expand-lg .navbar-nav>li {
    display: inline-block;
    float: none;
}

.navbar-expand-lg .navbar-nav {
  display:flex;
}

/* Active nav link highlighting */
.navbar-expand-lg .navbar-nav .nav-item.active .nav-link {
    color: var(--color-text-black);
}

.navbar-expand-lg .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.5);
    user-select: none;
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
    color: var(--color-text-black);
}


/* --------------------------------------
 * Global Typography
 *------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    color: var(--color-heading);
}

h1 {
    font-size: 26px;
    line-height: 1.8em;
    font-weight: 700;
}

h2 {
    font-size: 18px;
    line-height: 1.8em;
    font-weight: 700;
}

h3 {
    font-size: 16px;
    line-height: 1.8em;
    font-weight: 500;
}

h4 {
    font-size: 15px;
    line-height: 1.8em;
    font-weight: 500;
}

h5 {
    font-size: 15px;
    line-height: 1.5em;
    font-weight: 500;
}

h6 {
    font-size: 15px;
    line-height: 1.5em;
}

strong, b {
    font-weight: 700;
}


/* --------------------------------------
 * LINK STYLE
 *------------------------------------------*/

a {
    color: var(--color-primary-text);
    text-decoration: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

a,
a:active,
a:focus,
a:active {
    text-decoration: none;
    outline: none
}

a:hover,
a:focus {
    text-decoration: none;
    color: var(--color-primary-hover-text);
}

p {
    margin-bottom: 20px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/*------------------
 * Button Style
 *------------------*/

.btn {
    padding: 14px 30px 11px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0;
    border: 0;
    text-transform: uppercase;
    user-select: none;
}

.btn-lg {
    font-weight: 700;
    font-size: 24px;
    padding: 15px 30px;
}


/*btn-primary*/

.btn-primary {
    background-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus {
    background: var(--color-primary-hover);
}


/*btn-default*/

.btn-default {
    color: var(--color-border-primary);
    background-color: transparent;
    border: 2px solid var(--color-border-primary);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active:focus {
    background: var(--color-border-primary);
    color: var(--color-white);
    border-color: var(--color-border-primary);
}

button:focus,
.btn:focus,
.btn:active:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* --------------------
 * Column Block
 * -------------------*/

.columns-block {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin: 40px auto;
    padding: 0;
    box-shadow: 0 0 0 1px var(--color-border-primary);
    max-width: 1200px !important;
    position: relative;
    z-index: 1;
}

.blocks {
    box-sizing: border-box;
}

.left-col-block {
    overflow: hidden;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    position: relative;
    background: var(--color-bg-white);
    border-right: 1px solid var(--color-border-primary);
}

.left-col-block .theiaStickySidebar {
    padding-top: 0 !important;
}

.right-col-block {
    -webkit-flex: 2 0 0;
    flex: 2 0 0;
    position: relative;
    background: var(--color-bg-white);
}

@media (max-width: 768px) {
    .columns-block {
        display: block;
        margin: 0;
        box-shadow: none;
    }

    .left-col-block {
        width: 100%;
        position: relative;
        border: 0;
    }

    .right-col-block {
        width: 100%;
        position: relative;
        box-shadow: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .columns-block {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}


/* --------------------
 * Section Background
 * -------------------*/

.gray-bg {
    background-color: var(--color-white);
}


/* --------------------
 *  main Wrapper
 * -------------------*/

#main-wrapper {
    overflow: hidden;
}


/*-------------------
 * Section Wrapper
 *-------------------*/

.section-wrapper {
    padding: 50px 50px 0 50px;
    border-bottom: 1px solid var(--color-border-primary);
}

@media (max-width: 480px) {
    .section-wrapper {
        padding: 30px 20px 0 20px;
    }
}


/*---------------------------
* Section Title
*---------------------------*/

.section-title {
    margin-bottom: 15px;
    color: var(--color-primary-hover-text) !important;
}

.section-title h2 {
    margin-bottom: 5px;
    /* A step above the 16px entry titles (bold, all caps) below each heading,
       so sections stand out from their contents. */
    font-size: 22px;
    color: var(--color-primary-hover-text) !important;
}


/*-----------------------------
 * NAVIGATION & HEADER STYLE
 *-----------------------------*/

.header {
    padding: 20px !important;
    margin: 0;
    position: relative;
}

.header .profile-img {
    margin-bottom: 25px;
    padding-top: 20px;
}

.header .profile-img img {
    /* Fill the column explicitly: with srcset, an auto width would come from
       the sizes hint rather than the column, leaving the photo a few px short. */
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.header .content {
    width: 100%;
    margin: 0 auto;
}

.header .content h1 {
    line-height: 1;
    margin: 0 0 5px;
}

.header .content .lead {
    font-size: 18px;
}

.header .content .about-text {
    margin: 10px 0;
}

.header .btn {
    margin-top: 40px;
}

@media (max-width: 768px) {
    .header {
        padding: 0;
        text-align: center;
        border-bottom: 1px solid var(--color-border-light);
    }

    .header img {
        margin: 0 auto;
    }

    .header .content {
        padding: 10px;
    }
}


/* Header Sticky */

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}


/*-------------------
 * Social Icon
 *-------------------*/

.social-icon {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.social-icon li {
    display: inline-block;
    margin: 0 2px;
}

.social-icon li a {
    display: block;
    font-size: 12px;
    color: var(--color-text-primary);
    width: 34px;
    height: 34px;
    line-height: 33px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid var(--color-border-primary);
    user-select: none;
}

.social-icon li a:hover {
    border-color: var(--color-primary-hover);
}

.about-text address {
    line-height: 34px;
}


/*-------------------
 * Expertise
 *-------------------*/

.expertise-item {
    margin-bottom: 20px;
}

.expertise-item h3 {
    margin-bottom: 5px;
    font-weight: 700;
}


/*-------------------
 * Skills Progressbar
 *-------------------*/

.progress-item {
    position: relative;
}

.progress-item .progress-title {
    font-size: 15px;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 5px;
    user-select: none;
}

.progress-item .progress {
    height: 4px;
    box-shadow: none;
    border-radius: 5px;
}

.progress-item .progress-bar {
    background-color: var(--color-primary);
    box-shadow: none;
    text-align: right;
}

.progress-item .progress-percent {
    font-size: 10px;
    background-color: var(--color-bg-dark);
    position: absolute;
    top: 5px;
    padding: 0 8px;
    border-radius: 3px;
    user-select: none;
}

.progress-item .progress-percent::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    border-top: 6px solid var(--color-bg-dark);
    border-right: 8px solid transparent;
}


/*-------------------
 * Portfolio
 *-------------------*/

.portfolio-item {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.portfolio-item .portfolio-thumb img {
    height: auto;
    display: block;
    max-width: 100%;
}

.portfolio-item .portfolio-thumb video {
    height: auto;
    display: block;
    max-width: 100%;
}

.portfolio-item .portfolio-info {
    position: absolute;
    bottom: 0;
    padding: 30px 15px 5px;
    width: 100%;
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}

.portfolio-item .portfolio-info h3 {
    margin: 0;
    line-height: 1;
    color: var(--color-white);
}

.portfolio-item .portfolio-info small {
    color: var(--color-white);
}

.portfolio-item:hover .portfolio-info {
    background: -webkit-linear-gradient(top, transparent 0%, #000 100%);
}


/*-------------------
 * Content Item
 *-------------------*/

.content-item {
    margin-bottom: 40px;
}

.content-item h3 {
    margin: 0 0 10px;
    line-height: 1;
    font-weight: bold;
    text-transform: uppercase;
}

.content-item h4 {
    margin: 0;
    line-height: 1;
}

.content-item small {
    color: var(--color-text-secondary);
}


/*-------------------
 * Contact
 *-------------------*/

.feedback-form {
    margin-top: 50px;
}


/*-------------------
 * Form Style
 *-------------------*/

.form-control {
    height: 50px;
    padding: 0 20px;
    font-size: 13px;
    line-height: 50px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-gray);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.form-control:focus,
.form-control:active {
    box-shadow: none;
}

/* Form validation states */
.form-control.error {
    border-color: var(--color-error-text);
    background-color: var(--color-error-bg);
}

.form-control.error:focus {
    border-color: var(--color-error-text);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.success {
    border-color: var(--color-success-text);
}

.form-control.success:focus {
    border-color: var(--color-success-text);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Form message styles */
.form-message {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 14px;
    animation: slideDown 0.3s ease-out;
    display: none;
}

.form-message.success {
    background-color: var(--color-success-bg) !important;
    border: 1px solid var(--color-success-border) !important;
    color: var(--color-success-text) !important;
}

.form-message.error {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
}

.form-message.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------
 *   Footer
 *---------------------------------------------- */


/* Copyright */

.footer {
    padding: 30px 50px;
}

.footer .copyright-section {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.footer .copyright-section .copytext {
    font-weight: 400;
    display: block;
}

@media (max-width: 480px) {
    .footer {
        padding: 10px 20px;
    }
}


/* ---------------------------------------------- /*
 * Preloader
/* ---------------------------------------------- */

#preloader {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

/* Always reserve the scrollbar's space so the layout never shifts sideways
   when a page gains or loses a scrollbar (page loads, short pages). */
html {
    scrollbar-gutter: stable;
}

#status,
.status-mes {
    background-image: url("../img/preloader.6a7ca121b74a.svg");
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
}

.status-mes {
    background: none;
    left: 0;
    margin: 0;
    text-align: center;
    top: 65%;
}

/* Dark mode preloader */
[data-theme="dark"] #status {
    background-image: url("../img/preloader-dark.cd8c041a2087.svg");
}

@media (prefers-color-scheme: dark) {
    #status {
        background-image: url("../img/preloader-dark.cd8c041a2087.svg");
    }
}

[data-theme="light"] #status {
    background-image: url("../img/preloader.6a7ca121b74a.svg");
}

.content-item {
    margin-bottom: 20px;
}

.content-item p {
    margin-bottom: 10px;
}

p.res-strengths {
    margin-top: -20px;
}

.section-wrapper.section-ac-experience.gray-bg .content-item {
    margin-bottom: 30px;
}

.navbar {
    margin-top: 8px;
}

.navbar-nav {
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
    border-radius: 0px;
}

.navbar-nav>li {
    display: inline-block;
    float: none;
}

.navbar-default .navbar-nav>li>a {
    color: var(--color-primary-text);
    border-bottom: 1px solid transparent;
    border-top: 2px solid transparent;
    user-select: none;
}

.navbar-default .navbar-nav>li>a:hover {
    color: var(--color-primary-hover-text);
}

.navbar-default {
    background-color: var(--color-bg-white);
    border-radius: 0px;
    border-color: transparent;
}

.navbar-default .navbar-nav>li>a:focus {
    color: var(--color-primary-hover-text);
    background-color: transparent;
    border-bottom: 1px solid var(--color-primary-hover-text);
}

.selected {
    color: var(--color-primary-hover-text) !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-primary-hover-text) !important;
}

.github-item {
    border: 1px solid var(--color-border-primary);
    border-radius: 3px;
    padding: 10px;
}

.github-item h3 {
    font-size: 16px;
}

.github-item small {
    font-size: 13px;
}

.col-md-4 {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 12px;
}

.github-item a {
    color: black;
}

.github-item a:hover {
    color: var(--color-primary-hover-text);
}

/* Dark mode GitHub items */
[data-theme="dark"] .github-item {
    background-color: var(--color-bg-white);
}

[data-theme="dark"] .github-item a {
    color: var(--color-text-primary);
}

[data-theme="dark"] .github-item small {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .github-item svg {
    fill: var(--color-text-secondary);
}

@media (prefers-color-scheme: dark) {
    .github-item {
        background-color: var(--color-bg-white);
    }

    .github-item a {
        color: var(--color-text-primary);
    }

    .github-item small {
        color: var(--color-text-secondary);
    }

    .github-item svg {
        fill: var(--color-text-secondary);
    }
}

[data-theme="light"] .github-item a {
    color: black;
}

[data-theme="light"] .github-item small {
    color: #000000;
}

[data-theme="light"] .github-item svg {
    fill: #586069;
}

.v-align-middle {
    vertical-align: middle !important;
}

.see-all {
    margin-top: 15px;
    margin-left: -9px;
}

.repo-language-color {
    border-radius: 50%;
    display: inline-block;
    height: 12px;
    position: relative;
    top: 1px;
    width: 12px;
}

.col-md-12 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid lightgrey;
    margin: 1.5em 0;
    padding: 0;
}

/* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {
    opacity: 0.7;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /* Center content vertically and horizontally */
    justify-content: center;
    align-items: center;
    padding: 50px 10px 10px;
    box-sizing: border-box;
}

.modal[style*="display: block"] {
    display: flex !important;
}

/* Prevent background scrolling when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* The Modal (background) */
#pdfModal {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 40px 0 0;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

#pdfModal[style*="display: block"] {
    display: flex !important;
}

#pdfModal iframe.modal-content {
    width: 100% !important;
    height: calc(100vh - 40px) !important;
    max-width: 100% !important;
    max-height: calc(100vh - 40px) !important;
    margin: 0;
    padding: 0;
    border: none;
}

/* Modal figure wrapper - keeps image and caption together */
.modal-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    max-width: 95vw;
    max-height: calc(100vh - 70px);
}

/* Modal Content (Image) */
.modal-content {
    display: block;
    width: auto;
    max-width: 95vw;
    max-height: calc(100vh - 100px);
    height: auto;
    object-fit: contain;
    z-index: 5001;
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Caption of Modal Image (Image Text) - directly under image */
#caption {
    display: block;
    text-align: center;
    color: #ccc;
    padding: 6px 10px 0;
    margin: 0;
    font-size: 0.95rem;
    height: auto;
    flex: 0 0 auto;
    line-height: 1.4;
}

/* Add Animation - Zoom in the Modal */
.modal-content,
#caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.close {
    position: fixed;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    user-select: none;
    z-index: 999999;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Mobile: full-width image, larger close button */
@media only screen and (max-width: 768px) {
    .modal {
        padding: 45px 0 5px;
    }
    .modal-figure {
        max-width: 100vw;
    }
    .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100vh - 100px);
    }
    .close {
        font-size: 55px;
        top: 5px;
        right: 15px;
    }
}

.project-header h2 {
    margin-bottom: 2px;
}

.project-info h2 {
    margin-bottom: 2px;
}

.project-header .col-md-8 {
    margin-bottom: 15px
}

.left-item {
    text-align: right;
}


.web-thumb {
    margin-top: 15px;
}

@media only screen and (max-width: 768px) {
    .web-thumb {
        margin-top: 0px;
    }
}

.portfolio-pdf, .portfolio-img, .portfolio-vid {
    border: 1px solid lightgray;
    cursor: pointer;
}

.loading {
    display: none;
}

.software-divider:last-child {
    display: none;
}

/* Dark mode toggle button */
#theme-toggle {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

#theme-toggle:focus,
#theme-toggle:active,
#theme-toggle:hover {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
}

/* Submit button styling - yellow outline like Read More */
.btn-blog-outline {
    color: var(--color-primary-text) !important;
    background-color: transparent !important;
    border: 2px solid var(--color-primary-text) !important;
    border-radius: 6px !important;
    user-select: none;
    outline: none !important;
    box-shadow: none !important;
}

.btn-blog-outline:hover,
.btn-blog-outline:focus,
.btn-blog-outline:active {
    color: #d39e00 !important;
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: #d39e00 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dark mode styles for yellow outline button */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-blog-outline {
        color: var(--color-primary-text) !important;
        border-color: var(--color-border-primary) !important;
    }
    
    :root:not([data-theme="light"]) .btn-blog-outline:hover,
    :root:not([data-theme="light"]) .btn-blog-outline:focus {
        color: var(--color-bg-white) !important;
        background-color: var(--color-border-primary) !important;
        border-color: var(--color-border-primary) !important;
    }
}

[data-theme="dark"] .btn-blog-outline {
    color: var(--color-primary-text) !important;
    border-color: var(--color-border-primary) !important;
}

[data-theme="dark"] .btn-blog-outline:hover,
[data-theme="dark"] .btn-blog-outline:focus {
    color: var(--color-bg-white) !important;
    background-color: var(--color-border-primary) !important;
    border-color: var(--color-border-primary) !important;
}

/* btn-blog-outline-dark for back to blog style buttons */
.btn-blog-outline-dark {
    color: #343a40 !important;
    background-color: transparent !important;
    border: 2px solid #343a40 !important;
    border-radius: 6px !important;
    user-select: none;
    outline: none !important;
    box-shadow: none !important;
}

.btn-blog-outline-dark:hover,
.btn-blog-outline-dark:focus,
.btn-blog-outline-dark:active {
    color: #1d2124 !important;
    background-color: rgba(52, 58, 64, 0.1) !important;
    border-color: #1d2124 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dark mode styles for submit button */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-blog-outline-dark {
        color: var(--color-primary-text) !important;
        border-color: var(--color-border-primary) !important;
    }
    
    :root:not([data-theme="light"]) .btn-blog-outline-dark:hover,
    :root:not([data-theme="light"]) .btn-blog-outline-dark:focus {
        color: var(--color-bg-white) !important;
        background-color: var(--color-border-primary) !important;
        border-color: var(--color-border-primary) !important;
    }
}

[data-theme="dark"] .btn-blog-outline-dark {
    color: var(--color-primary-text) !important;
    border-color: var(--color-border-primary) !important;
}

[data-theme="dark"] .btn-blog-outline-dark:hover,
[data-theme="dark"] .btn-blog-outline-dark:focus {
    color: var(--color-bg-white) !important;
    background-color: var(--color-border-primary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Dark mode form controls */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-control {
        background-color: var(--color-bg-white) !important;
        color: var(--color-text-primary) !important;
        border-color: var(--color-border-primary) !important;
    }
    
    :root:not([data-theme="light"]) .form-control:focus {
        background-color: var(--color-bg-white) !important;
        color: var(--color-text-primary) !important;
        border-color: var(--color-border-primary) !important;
    }
    
    :root:not([data-theme="light"]) .form-control.error {
        border-color: var(--color-error-text) !important;
        background-color: var(--color-error-bg) !important;
    }
    
    :root:not([data-theme="light"]) .form-control.success {
        border-color: var(--color-success-text) !important;
    }
}

[data-theme="dark"] .form-control {
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

[data-theme="dark"] .form-control.error {
    border-color: var(--color-error-text) !important;
    background-color: var(--color-error-bg) !important;
}

[data-theme="dark"] .form-control.success {
    border-color: var(--color-success-text) !important;
}

/* Theme toggle icon: both icons are in the markup and CSS shows the right one
   (moon in light mode, sun in dark mode) using the same rules as the theme
   colours, so it is correct from the first paint with no script needed. */
.theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-light {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-icon-dark {
        display: inline-block;
    }
}

/* Contact form honeypot: kept off-screen so only bots fill it in. */
.contact-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Uploaded images carry width/height attributes so the browser reserves their
   space before they load (no content jumping down when they arrive). These
   rules keep the attributes from fixing the displayed size: the image keeps
   its proportions and never overflows. :where() gives the rule zero
   specificity, so any class rule (such as a fixed card height) still wins. */
:where(img[width][height]) {
    max-width: 100%;
    height: auto;
}

/* Fade-in for images that weren't loaded yet when htmx swapped a page in
   (see home/js/image-fade.js). */
/* Hidden instantly (no transition) while loading... */
img.img-pending {
    opacity: 0;
}

/* ...then faded in once loaded. */
img.img-fade {
    transition: opacity 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    img.img-fade {
        transition: none;
    }
}

/* Technical Strengths: one unit per skill. Spacing is a margin rather than
   space characters, so a wrapped line never starts with a stray space.
   Multi-word skills may still wrap inside themselves if very long. */
.res-strengths .res-skill {
    display: inline-block;
    margin-right: 0.75em;
}

/* Font Awesome declares its fonts with font-display: block, which hides icons
   (and delays text that waits on them) until the font downloads. Redeclare
   the same fonts with swap; later @font-face rules for the same face win. */
@font-face {
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../../@fortawesome/fontawesome-free/webfonts/fa-solid-900.bd30bbc09dfe.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../@fortawesome/fontawesome-free/webfonts/fa-regular-400.0e488cdc381f.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 7 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../@fortawesome/fontawesome-free/webfonts/fa-brands-400.6ec5376d46cd.woff2") format("woff2");
}