.skillbtn{
    color: #6D56C1 !important;   
    background-color: transparent;
    border-color: #6D56C1 !important;
    border-radius: 0rem !important;
    padding: 1.1rem 3rem ;
    margin: 0.6rem;
    font-size: 1.3rem;
    width:22%;
}
.skillbtn:hover{
    color: #fff !important;   
    background-color: #6D56C1 !important;
}

@media screen and (max-width: 1199px) {
    .skillbtn {
      width: 30%;
    }
  }
@media screen and (max-width: 992px) {
    .skillbtn {
      width: 40%;
    }
  }

@media screen and (max-width: 600px) {
    .skillbtn {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
  }


.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* ---------------------------------------------------------
   Skill groups
   Label on the left, soft chips on the right. Replaces the
   grid of outlined boxes, which read as a wall at this count.
   --------------------------------------------------------- */
.skill-group {
    border-top: 1px solid #ededf3;
    /* Only the vertical padding: the column keeps its 15px sides, or the
       nested .row's negative margins push past the viewport. */
    padding-top: 26px;
    padding-bottom: 26px;
    margin: 0;
}
.skill-group:last-of-type {
    border-bottom: 1px solid #ededf3;
}

.skill-group__label {
    font-family: "Roboto Mono", monospace;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    color: #999;
    margin: 0;
    padding-top: 7px;
}

ul.skill-tags {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.skill-tags li {
    display: inline-block;
    font-size: 15px;
    line-height: 20px;
    color: #555;
    background-color: #f5f4fa;
    border-radius: 3px;
    padding: 8px 15px;
    margin: 0 8px 8px 0;
    transition: all 0.3s;
}
ul.skill-tags li:hover {
    color: #fff;
    background-color: #6d56c1;
}

@media screen and (max-width: 767px) {
    .skill-group {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .skill-group__label {
        padding-top: 0;
        margin-bottom: 14px;
    }
}

/* ---------------------------------------------------------
   Practice projects: compact list under the client work.
   --------------------------------------------------------- */
.practice-head {
    margin-top: 70px;
    margin-bottom: 10px;
}
/* .resume-list_title is scoped to .resume-list, so restate it here. */
.practice-head .resume-list_title {
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--c-muted);
    margin-bottom: 25px;
}
.practice-item {
    border-top: 1px solid #ededf3;
    padding: 24px 0;
}
.practice-item__title {
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
}
.practice-item__description {
    font-size: 16px;
    line-height: 24px;
    color: #999;
    margin-bottom: 12px;
}
.practice-item__links {
    font-family: "Roboto Mono", monospace;
    font-size: 13px;
    line-height: 20px;
    margin: 0;
}
.practice-item__links a {
    margin-right: 25px;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Work timeline
   One block per company; the roles sit inside it so two roles
   at one employer never read as two employers. Dates and
   durations are filled in by assets/js/timeline.js.
   --------------------------------------------------------- */
.job .resume-list__block-title {
    padding-bottom: 2px;
}

.job__span {
    display: block;
    margin-bottom: 18px !important;
}
.job__range {
    font-family: Inconsolata, monospace;
    font-size: 14px;
    line-height: 20px;
    color: #999;
}
.job__total {
    display: inline-block;
    font-family: "Roboto Mono", monospace;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6d56c1;
    background-color: #f1eefb;
    border-radius: 3px;
    padding: 2px 9px;
    margin-left: 10px;
    vertical-align: 1px;
}
.job__total:empty {
    display: none;
}

ul.job__roles {
    margin: 0;
    padding: 0;
    list-style: none;
}
.job__role {
    position: relative;
    padding-left: 22px;
    padding-bottom: 22px;
}
.job__role:last-child {
    padding-bottom: 0;
}
/* Small tick marking each role against the company's spine. */
.job__role:before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 10px;
    height: 2px;
    background-color: #c9bff0;
}
/* A second role onwards gets a connecting line, so the stack reads as one job. */
.job__role + .job__role:after {
    content: "";
    position: absolute;
    left: 4px;
    top: -22px;
    bottom: 0;
    width: 2px;
    background-color: #efecfa;
    z-index: -1;
}

.job__role-title {
    font-size: 17px;
    line-height: 26px;
    font-weight: 500;
    color: #555;
    margin-bottom: 2px !important;
}
.job__role-tag {
    display: inline-block;
    font-family: "Roboto Mono", monospace;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999;
    border: 1px solid #e4e4ec;
    border-radius: 3px;
    padding: 1px 7px;
    margin-left: 8px;
    vertical-align: 2px;
}
.job__role-date {
    font-family: Inconsolata, monospace;
    font-size: 13px;
    line-height: 20px;
    color: #a5a5a5;
    margin-bottom: 8px !important;
}
.job__role-date:empty {
    display: none;
}
.job__role-text {
    font-size: 16px;
    line-height: 25px;
    color: #777;
    margin: 0 !important;
}

@media screen and (max-width: 576px) {
    .job__total {
        margin-left: 0;
        margin-top: 6px;
        display: inline-block;
    }
    .job__range {
        display: block;
    }
}


/* ---------------------------------------------------------
   Project illustrations
   The card's image slot ranges from roughly 0.5 to 1.3 in
   aspect depending on how much text sits beside it, so the
   drawings are fitted rather than cropped. The backdrop is
   the same flat colour as inside the SVG, which makes the
   letterboxing invisible.
   --------------------------------------------------------- */
.project-card__img {
    background-color: #f5f2fc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px !important;
}
.project-card__img img[src$=".svg"] {
    width: 100%;
    height: auto;
    max-height: 330px;
    object-fit: contain;
}

/* The stock padding left a lot of air around short descriptions, which made
   the illustration panel beside it taller than it needed to be. */
.project-card .project-card__info {
    padding: 34px 38px 30px 32px;
}
.project-card .project-card__description {
    margin-bottom: 26px;
}
.project-card .project-card__link {
    margin-top: 28px;
}

@media screen and (max-width: 767px) {
    .project-card__img {
        padding: 20px !important;
    }
    .project-card__img img[src$=".svg"] {
        max-height: 260px;
    }
}


/* ---------------------------------------------------------
   Bits the JSON renderer adds
   --------------------------------------------------------- */

/* Second line of the header title, under the main headline. */
.personal-profile__sub {
    display: block;
    opacity: 0.75;
    margin-top: 4px;
}

/* Course subjects under a degree: same chips as the skills section. */
ul.edu-subjects {
    margin-top: 14px;
}
ul.edu-subjects li {
    font-size: 14px;
    padding: 6px 12px;
}

/* The two links sit side by side until they no longer fit. */
.practice-item__links a:last-child {
    margin-right: 0;
}
@media screen and (max-width: 440px) {
    .practice-item__links a {
        display: block;
        margin-right: 0;
        margin-bottom: 8px;
    }
}


/* ---------------------------------------------------------
   Very narrow screens (320px and down)
   The contact list indents its values by a fixed 100px, which
   leaves an email address too little room to fit. Stack the
   label above the value instead.
   --------------------------------------------------------- */
@media screen and (max-width: 420px) {
    .contact-list dt {
        float: none;
    }
    .contact-list dd {
        padding-left: 0;
        margin-bottom: 14px;
        word-break: break-word;
    }
}

/* Long unbreakable strings — a DOI, an ISBN, a credential ID — have nowhere to
   wrap on a narrow screen, so let them break inside the word. */
.resume-list__block p,
.practice-item__description,
.practice-item__links {
    overflow-wrap: break-word;
    word-break: break-word;
}


/* ---------------------------------------------------------
   Read more
   The Hi_ and Resume_ intros are several paragraphs, which on
   a phone pushes everything else off the screen. Below the
   tablet breakpoint they collapse behind a toggle.
   --------------------------------------------------------- */
.readmore__toggle {
    display: none;
}

@media screen and (max-width: 767px) {
    .readmore {
        position: relative;
    }
    .readmore.is-clamped {
        max-height: 11.5em;
        overflow: hidden;
    }
    /* Fade the cut edge so it reads as "there is more", not a hard crop. */
    .readmore.is-clamped:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.2em;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
        pointer-events: none;
    }

    .readmore__toggle {
        /* Block, so it never shares a line with the Download CV button. */
        display: block;
        width: auto;
        text-align: left;
        background: none;
        border: 0;
        padding: 0;
        margin-top: 16px;
        margin-bottom: 26px;
        font-family: "Roboto Mono", monospace;
        font-size: 13px;
        line-height: 20px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 700;
        color: #6d56c1;
        cursor: pointer;
    }
    .readmore__toggle:after {
        content: " \25be";          /* small caret, flips when expanded */
        display: inline-block;
        margin-left: 6px;
    }
    .readmore__toggle[aria-expanded="true"]:after {
        content: " \25b4";
    }
    .readmore__toggle:hover,
    .readmore__toggle:focus {
        text-decoration: underline;
        outline: none;
    }
}


/* =========================================================
   DARK MODE
   color.css is a compiled file with the colours baked in, so
   rather than rewrite it, every surface the page actually
   shows is re-stated here under [data-theme="dark"]. The
   values are named once as custom properties and used below,
   so changing the palette is a change in one place.
   ========================================================= */
:root {
    --c-bg: #ffffff;
    --c-text: #555555;
    --c-text-soft: #5f5a6b;
    --c-muted: #74707f;
    --c-accent: #6d56c1;
    --c-rule: #f1f1f1;
    --c-rule-soft: #ededf3;
    --c-chip: #f5f4fa;
    --c-chip-strong: #f1eefb;
    --c-surface: #ffffff;
    --c-panel: #f5f2fc;
}

[data-theme="dark"] {
    --c-bg: #141220;
    --c-text: #c7c3d4;
    --c-text-soft: #a7a2b9;
    --c-muted: #8d87a1;
    --c-accent: #a594ec;          /* lifted: #6d56c1 is unreadable on dark */
    --c-rule: #2a2637;
    --c-rule-soft: #272233;
    --c-chip: #231f31;
    --c-chip-strong: #2a2342;
    --c-surface: #1c1829;
    /* Matches what the illustration's own #F5F2FC background becomes once the
       invert filter below runs, so the drawing has no visible edge. */
    --c-panel: #0c0a12;
}

[data-theme="dark"] body {
    background-color: var(--c-bg);
    color: var(--c-text);
}
[data-theme="dark"] hr {
    border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] a {
    color: var(--c-accent);
}
[data-theme="dark"] a:focus,
[data-theme="dark"] a:hover {
    color: var(--c-accent);
}

/* Section headings and body copy */
[data-theme="dark"] .section .section__title,
[data-theme="dark"] .section__description,
[data-theme="dark"] .project-card__title,
[data-theme="dark"] .project-card__description,
[data-theme="dark"] .project-card__stack,
[data-theme="dark"] .job__role-title,
[data-theme="dark"] .practice-item__title {
    color: var(--c-text);
}
[data-theme="dark"] .job__role-text {
    color: var(--c-text-soft);
}
[data-theme="dark"] .resume-list_title,
[data-theme="dark"] .resume-list__block-date,
[data-theme="dark"] .skill-group__label,
[data-theme="dark"] .practice-item__description,
[data-theme="dark"] .job__role-date,
[data-theme="dark"] .portfolio-menu nav ul li a {
    color: var(--c-muted);
}

/* The sticky bar, once it turns solid on scroll */
[data-theme="dark"] .menu.menu--active {
    background-color: var(--c-surface);
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .menu.menu--active .menu__wrapper a {
    color: var(--c-text) !important;
}
[data-theme="dark"] .menu.menu--active .menu__wrapper a:hover,
[data-theme="dark"] .menu.menu--active .menu__mobile-button:hover {
    color: var(--c-accent) !important;
}
[data-theme="dark"] .menu.menu--active .menu__wrapper a:after {
    background: var(--c-accent) !important;
}
[data-theme="dark"] .menu.menu--active .menu__mobile-button {
    color: var(--c-text) !important;
}

/* Resume and publications timeline */
[data-theme="dark"] .resume-list .resume-list__block {
    border-left-color: var(--c-accent);
}
[data-theme="dark"] .resume-list .resume-list__block:before {
    border-color: var(--c-accent);
    background-color: var(--c-bg);
}
[data-theme="dark"] .resume-list .resume-list__block-title {
    color: var(--c-accent);
}
[data-theme="dark"] .job__role:before {
    background-color: #4b3f74;
}
[data-theme="dark"] .job__role + .job__role:after {
    background-color: var(--c-rule);
}
[data-theme="dark"] .job__total {
    color: var(--c-accent);
    background-color: var(--c-chip-strong);
}
[data-theme="dark"] .job__role-tag {
    color: var(--c-muted);
    border-color: var(--c-rule);
}

/* Skills and course subjects */
[data-theme="dark"] .skill-group,
[data-theme="dark"] .skill-group:last-of-type,
[data-theme="dark"] .practice-item {
    border-color: var(--c-rule-soft);
}
[data-theme="dark"] ul.skill-tags li {
    color: var(--c-text);
    background-color: var(--c-chip);
}
/* Filling with the pale accent put white text at 2.6:1. On a dark page the
   hover should lift the chip, not bleach it, so it deepens into purple and the
   text goes to full white. */
[data-theme="dark"] ul.skill-tags li:hover {
    color: #ffffff;
    background-color: #3b3168;
}

/* Project cards */
[data-theme="dark"] .project-card .project-card__info {
    border-color: var(--c-rule);
}
[data-theme="dark"] .project-card:hover {
    box-shadow: 0 1px 31px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .tags li {
    color: var(--c-text);
    background-color: var(--c-surface);
    box-shadow: none;
    border: 1px solid var(--c-rule);
}
[data-theme="dark"] .project-card__img {
    background-color: var(--c-panel);
}
/* The drawings are light-on-light artwork. Inverting flips the lightness and
   the hue rotation puts the purples back where they belong. */
[data-theme="dark"] .project-card__img img[src$=".svg"] {
    background-color: transparent;
    filter: invert(1) hue-rotate(180deg) saturate(0.9) brightness(0.95);
}

/* Read more */
[data-theme="dark"] .readmore.is-clamped:after {
    background: linear-gradient(rgba(20, 18, 32, 0), var(--c-bg) 85%);
}
[data-theme="dark"] .readmore__toggle {
    color: var(--c-accent);
}

/* The button keeps the brand purple rather than inverting to a pale pill,
   which looked washed out against the dark page. Lifted just enough that white
   text still clears AA on it. */
[data-theme="dark"] .site-btn {
    background-color: #6a54c9;
    color: #ffffff !important;
}
[data-theme="dark"] .site-btn:focus,
[data-theme="dark"] .site-btn:hover {
    background-color: #7862d4;
}

/* ---------------------------------------------------------
   Theme toggle button
   --------------------------------------------------------- */
.theme-toggle {
    float: right;
    background: none;
    border: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    color: #ffffff;
    opacity: 0.65;
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.3s, color 0.3s;
}
.theme-toggle:hover,
.theme-toggle:focus {
    opacity: 1;
    outline: none;
    background-color: rgba(255, 255, 255, 0.15);
}
.theme-toggle__icon {
    font-size: 20px;
    vertical-align: middle;
}
/* Once the bar turns solid it sits on a light surface, so the icon flips. */
.menu--active .theme-toggle {
    color: #555555;
    opacity: 0.9;
}
.menu--active .theme-toggle:hover,
.menu--active .theme-toggle:focus {
    color: #6d56c1;
    background-color: rgba(109, 86, 193, 0.1);
}
[data-theme="dark"] .menu--active .theme-toggle {
    color: var(--c-text);
}
[data-theme="dark"] .menu--active .theme-toggle:hover,
[data-theme="dark"] .menu--active .theme-toggle:focus {
    color: var(--c-accent);
    background-color: rgba(165, 148, 236, 0.16);
}
@media screen and (max-width: 991px) {
    .theme-toggle {
        margin-top: -4px;
    }
}


/* ---------------------------------------------------------
   Muted text, both themes
   The template's greys (#999, and #a5a5a5 on the role dates)
   fall below 4.5:1 on white. Routing them through the same
   custom properties as dark mode fixes light and keeps the
   two themes defined in one place.
   --------------------------------------------------------- */
.resume-list .resume-list_title,
.resume-list .resume-list__block-date,
.portfolio-menu nav ul li a,
.skill-group__label,
.practice-item__description,
.job__range,
.job__role-date,
.job__role-tag {
    color: var(--c-muted);
}
.job__role-tag {
    border-color: var(--c-rule);
}
.job__role-text {
    color: var(--c-text-soft);
}


/* ---------------------------------------------------------
   The two gradient bands in dark mode
   The template's gradient is built for a white page; against
   a near-black one it lands as a bright slab. It keeps the
   same indigo-to-plum journey here, just much deeper, so it
   sits in the same family as the page.

   The edge stays hard, matching light mode.
   --------------------------------------------------------- */
[data-theme="dark"] .main-header:before {
    background: linear-gradient(
        54deg,
        rgba(38, 34, 78, 0.95) 34%,
        rgba(72, 42, 64, 0.95)
    );
}

[data-theme="dark"] .background:before {
    background: linear-gradient(
        54deg,
        rgba(38, 34, 78, 0.95) 34%,
        rgba(72, 42, 64, 0.95)
    );
}

/* The header photo carries more of the band now that the overlay is darker,
   so hold it back a little to keep the name legible. */
[data-theme="dark"] .main-header {
    background-color: #0f0d18;
}
[data-theme="dark"] .background {
    background-color: #0f0d18;
}


/* The template de-emphasises these with opacity .4, which puts white text on
   the gradient at about 2.7:1 — below AA in both themes. Just enough opacity
   to clear 4.5:1 while still reading as secondary. */
.contact-list.contact-list__opacity-titles dt {
    opacity: 0.78;
}
.footer {
    opacity: 0.78;
}
/* The dark band is deeper, so the same text clears AA with room to spare and
   can stay more clearly secondary there. */
[data-theme="dark"] .contact-list.contact-list__opacity-titles dt,
[data-theme="dark"] .footer {
    opacity: 0.68;
}


/* ---------------------------------------------------------
   Content-load failure notice
   Only ever appears when site.json could not be fetched —
   almost always because index.html was opened from disk.
   --------------------------------------------------------- */
.load-failure {
    border: 1px solid var(--c-accent);
    border-left-width: 4px;
    border-radius: 3px;
    padding: 22px 26px;
    margin-bottom: 30px;
    background-color: var(--c-chip);
    color: var(--c-text);
    font-size: 16px;
    line-height: 26px;
}
.load-failure p {
    margin: 0 0 12px;
}
.load-failure p:last-child {
    margin-bottom: 0;
}
.load-failure__title {
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--c-accent);
}
.load-failure code {
    font-family: Inconsolata, monospace;
    font-size: 15px;
    background-color: var(--c-chip-strong);
    border-radius: 3px;
    padding: 1px 6px;
}