:root {
    --md-primary-fg-color: #4051ab;
    --md-primary-fg-color--light: #7f92f2;
    --md-primary-fg-color--dark: #263065;

    --md-accent-fg-color: #687fef;

    @media screen {
        [data-md-color-scheme="slate"] {
            --md-default-fg-color: hsla(var(--md-hue), 15%, 90%, 1);
        }
    }
}

.md-tabs__link {
    opacity: 1;
    font-weight: bold;
}

.md-tabs__item.md-tabs__item--active {
    border-bottom: 4px solid var(--md-default-fg-color);
}

.container {
    margin-top: 1rem;
}

.container .logo {
    text-align: center;
}

.logo .md-button {
    margin-bottom: 4px;
}

#home__title {
    font-size: clamp(1.8rem, 1.2rem + 1.5vw, 3rem);
    font-weight: 700;
    margin: .75rem 0 .25rem;
    color: var(--md-primary-fg-color);
    letter-spacing: .02em;
}

#home__subtitle {
    margin: 0;
    font-weight: 500;
    font-size: clamp(1.1rem, .9rem + .6vw, 1.5rem);
    color: var(--md-default-fg-color);
    opacity: .9;
}

#home__description {
    color: var(--md-default-fg-color);
    opacity: .75;
    font-weight: 500;
    font-size: clamp(0.9rem, 0.8rem + 0.2vw, 1.05rem);
    margin-top: .35rem;
}

#home__logo {
    width: clamp(7rem, 5rem + 8vw, 12rem);
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.08));
}

/* Hero wrapper */
.hero {
    padding: 1rem 0 0.5rem;
}

@media (prefers-color-scheme: dark) {
    #home__logo {
        filter: drop-shadow(0 2px 8px rgba(0,0,0,.2));
    }
}

@media only screen and (max-width: 479px) {
    .home__logo {
        width: 6rem;
    }
}

/* ========================= */
/* Timeline Esperienze       */
/* ========================= */
.timeline {
    position: relative;
    margin: 2.5rem 0 3rem 0;
    padding: 0 0 0 0.75rem;
}
.timeline:before {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.6rem;
    width: 2px;
    height: 100%;
    background: linear-gradient(var(--md-default-fg-color), var(--md-accent-fg-color));
    opacity: .35;
}
.timeline-item {
    position: relative;
    margin: 0 0 2.2rem 0;
    padding: .25rem .75rem .75rem 2.4rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.015);
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
    transition: background .25s, box-shadow .25s, transform .25s;
}
.timeline-item[open] {background: rgba(0,0,0,0.03);}
[data-md-color-scheme="slate"] .timeline-item[open] {background: rgba(255,255,255,0.08);}
[data-md-color-scheme="slate"] .timeline-item {
    background: rgba(255,255,255,0.04);
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.timeline-item:hover {
    background: rgba(0,0,0,0.035);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
[data-md-color-scheme="slate"] .timeline-item:hover {
    background: rgba(255,255,255,0.07);
    box-shadow: 0 4px 16px rgba(0,0,0,.6);
}
.timeline-item:before {
    content: "";
    position: absolute;
    top: .8rem;
    left: .55rem;
    width: 14px;
    height: 14px;
    background: var(--md-primary-fg-color);
    border: 2px solid var(--md-default-bg-color, #fff);
    box-shadow: 0 0 0 4px var(--md-primary-fg-color--light, rgba(64,81,171,.35));
    border-radius: 50%;
}
.timeline-item summary {list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; position: relative; padding-right: 2rem;}
.timeline-item summary::-webkit-details-marker {display:none;}
.timeline-item summary:after {content:""; position:absolute; right:.6rem; top:50%; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: translateY(-60%) rotate(45deg); opacity:.55; transition: transform .25s;}
.timeline-item[open] summary:after {transform: translateY(-50%) rotate(225deg);}
.timeline-item .icon {font-size: 1rem; line-height:1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));}
.timeline-item .role {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: .3px;
}
.timeline-item .company {
    font-weight: 600;
    color: var(--md-accent-fg-color);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-left: .35rem;
}
.timeline-item .periodo {
    font-size: .72rem;
    font-weight: 500;
    opacity: .75;
    margin-top: .15rem;
    letter-spacing: .5px;
}
.timeline-item .descrizione {
    margin-top: .6rem;
    font-size: .8rem;
    line-height: 1.35rem;
}
.timeline-item ul {
    margin: .4rem 0 .2rem 1.05rem;
}
.timeline-item ul li {
    margin: 0 0 .25rem 0;
    font-size: .78rem;
}
/* Badges container */
.badges { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .45rem; }

/* Unified badge style (dark gray background, slightly larger pill) */
 .badge {
    --badge-bg:#2f2f2f;
    --badge-bg-alt:#3a3a3a;
    --badge-border:#444;
    background: linear-gradient(145deg,var(--badge-bg),var(--badge-bg-alt));
    color:#f2f2f2;
        padding:8px 18px 9px; /* aumentato spazio interno */
    font-size:.62rem;
    font-weight:600;
    border-radius:14px;
    letter-spacing:.5px;
    border:1px solid var(--badge-border);
    box-shadow:0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset;
    display:inline-flex; align-items:center; gap:.4ch; white-space:nowrap;
    text-transform:uppercase;
    position:relative;
    line-height:1;
    transition:background .25s, transform .15s;
}
.badge:active { transform:translateY(1px); }
[data-md-color-scheme="slate"] .badge { --badge-bg:#2b2b2b; --badge-bg-alt:#353535; --badge-border:#555; }
/* [data-md-color-scheme="slate"] .badge { box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.timeline-heading { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; }
@media (max-width: 680px){
    .timeline-item {padding-left:2.2rem;}
    .timeline-item:before{left:.45rem;}
    .timeline:before{left:.5rem;}
} */



/* ========================= */
/* Experience Tree (GitLens) */
/* ========================= */
.exp-tree { list-style:none; margin:2rem 0 3rem 0; padding:0 0 0 .75rem; position:relative; }
.exp-tree:before {content:""; position:absolute; top:0.4rem; left:.55rem; width:2px; height:100%; background: linear-gradient(var(--md-default-fg-color), var(--md-accent-fg-color)); opacity:.25;}
.exp-branch {position:relative; margin:0 0 1.1rem 0;}
.exp-node {position:relative;}
.exp-head {display:flex; align-items:center; gap:.4rem; position:relative;}
.exp-head .dot {width:14px; height:14px; border-radius:50%; background:var(--md-primary-fg-color); box-shadow:0 0 0 4px rgba(64,81,171,.35); position:relative; z-index:2;}
.exp-line {flex:0 0 22px; height:2px; background:linear-gradient(90deg,var(--md-primary-fg-color), var(--md-accent-fg-color)); opacity:.55; margin-left:-4px; border-radius:2px;}
.exp-line.end {background:linear-gradient(90deg,var(--md-primary-fg-color), transparent);}
.exp-toggle {background:none; border:none; padding:.35rem .75rem .4rem .5rem; cursor:pointer; text-align:left; font:inherit; color:var(--md-default-fg-color); border-radius:6px; flex:1; position:relative;}
.exp-toggle:hover {background:rgba(0,0,0,.05);} 
[data-md-color-scheme="slate"] .exp-toggle:hover {background:rgba(255,255,255,.07);} 
.exp-toggle:focus-visible {outline:2px solid var(--md-accent-fg-color); outline-offset:2px; box-shadow:none;}
.exp-toggle:after {content:""; position:absolute; right:.75rem; top:50%; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-60%) rotate(45deg); opacity:.6; transition:transform .25s;} 
.exp-toggle[aria-expanded="true"]:after {transform:translateY(-50%) rotate(225deg);} 
/* Period line moved outside button */
.period-line {display:block; opacity:.6; font-size:.72rem; margin:.15rem 0 0 2.3rem; letter-spacing:.5px;}
@media (max-width:680px){ .period-line {margin-left:2rem;} }
.exp-body {margin:.35rem 0 .75rem 2.65rem; padding:.55rem .9rem .8rem; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.05); border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.04);} 
[data-md-color-scheme="slate"] .exp-body {background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08);} 
.exp-body .meta {font-size:.7rem; text-transform:uppercase; letter-spacing:.7px; opacity:.7; margin-bottom:.35rem; font-weight:600;} 
.exp-body .points {margin:.3rem 0 .3rem 1.05rem;} 
.exp-body .points li {font-size:.78rem; margin:0 0 .25rem;} 
.exp-badges, .exp-body .badges {display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.9rem;} 
.badges.small .badge {font-size:.55rem; padding:4px 12px 5px;}
@media (max-width:680px){ .exp-body {margin-left:2.2rem;} }

/* Controls */
.exp-controls {display:flex; gap:.5rem; margin:1rem 0 1rem .2rem; flex-wrap:wrap;}
.exp-ctrl-btn {background:linear-gradient(135deg,var(--md-primary-fg-color--light,#7f92f2),var(--md-primary-fg-color)); color:#fff; border:none; padding:.45rem .9rem; font-size:.65rem; letter-spacing:.8px; font-weight:600; border-radius:6px; cursor:pointer; text-transform:uppercase; position:relative;}
.exp-ctrl-btn:after {content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 2px 4px rgba(0,0,0,.25); opacity:.4; pointer-events:none;}
.exp-ctrl-btn:hover {filter:brightness(1.07);} 
.exp-ctrl-btn:active {transform:translateY(1px);} 
.exp-ctrl-btn:focus-visible {outline:2px solid var(--md-accent-fg-color); outline-offset:2px;}

/*Colors and main styling*/

* {
  --color-primary-custom: #1E90FF;
  --color-shades-blue-100: #E8FDFF;
  --color-shades-blue-200: #A2E3F7;
  --color-shades-blue-300: #5DC8E5;
  --color-shades-blue-400: #00ABCF;
  --color-shades-blue-500: #008AAB;
  --color-shades-blue-600: #006A85;
  --color-shades-blue-700: #004C60;
  --color-shades-blue-800: #002F3D;
  --color-shades-blue-900: #00151D;
  --color-shades-purple-50: #F8F5FF;
  --color-shades-purple-100: #D9CEFF;
  --color-shades-purple-200: #BBA6FF;
  --color-shades-purple-300: #9E7FFA;
  --color-shades-purple-400: #815CDF;
  --color-shades-purple-500: #6441B6;
  --color-shades-purple-600: #472D84;
  --color-shades-purple-700: #2C1C52;
  --color-shades-purple-800: #130C26;
  --color-shades-yellow-50: #FFFBED;
  --color-shades-yellow-100: #F8DEAE;
  --color-shades-yellow-200: #EFC87F;
  --color-shades-yellow-300: #EFBA4B;
  --color-shades-yellow-400: #AA7A00;
  --color-shades-yellow-500: #7D5900;
  --color-shades-yellow-600: #593C00;
  --color-shades-yellow-700: #392400;
  --color-shades-yellow-800: #1A0F00;
  --grayscale-gray-00-white: #FFFFFF;
  --grayscale-gray-50: #F9FAFB;
  --grayscale-gray-100: #F3F4F6;
  --grayscale-gray-200: #E5E7EB;
  --grayscale-gray-300: #D1D5DB;
  --grayscale-gray-350: #c4c9d1;
  --grayscale-gray-400: #9CA3AF;
  --grayscale-gray-500: #6B7280;
  --grayscale-gray-600: #4B5563;
  --grayscale-gray-700: #374151;
  --grayscale-gray-800: #1F2937;
  --grayscale-gray-900: #111827;
  --grayscale-gray-920: #121112;
  --grayscale-gray-950: #030712;
  --grayscale-gray-99-black: #080606;

  --gray-50-004: #F9FAFB04;
  --gray-920-008: #12111208;

  --black:        var(--grayscale-gray-99-black);
  --white:        var(--grayscale-gray-00-white);

  --primary-light: var(--color-shades-purple-100);
  --primary-light-020: #D9CEFF20;
  --primary-light-008: #D9CEFF08;
  

  --secondary-030: #EFBA4B30;
  --secondary-016: #EFBA4B16;

  --tertiary-030: #00ABCF30;
  --tertiary-016: #00ABCF16;
  --tertiary-012: #00ABCF12;
  --tertiary-008: #00ABCF08;
  
  --grayscale-filter: grayscale(50%);

  --spacing-1px: 1px;           /*1px*/ 
  --spacing-0_5: 0.125rem;      /*2px*/
  --spacing-1: 0.25rem;         /*4px*/
  --spacing-1_5: 0.375rem;      /*6px*/
  --spacing-2: 0.5rem;          /*8px*/
  --spacing-2_5: 0.625rem;      /*10px*/
  --spacing-3: 0.75rem;         /*12px*/
  --spacing-3_5: 0.875rem;      /*14px*/
  --spacing-4: 1rem;            /*16px*/
  --spacing-5: 1.25rem;         /*20px*/
  --spacing-6: 1.5rem;          /*24px*/
  --spacing-7: 1.75rem;         /*28px*/
  --spacing-8: 2rem;            /*32px*/
  --spacing-9: 2.25rem;         /*36px*/
  --spacing-10: 2.5rem;         /*40px*/
  --spacing-11: 2.75rem;        /*44px*/
  --spacing-12: 3rem;           /*48px*/

  --tag-padding: var(--spacing-1) var(--spacing-3_5) var(--spacing-1) var(--spacing-2_5);

  --button-border-radius: var(--spacing-8);
  --grid-gap: var(--spacing-4);

}

[data-md-color-scheme="darkColor"] {
  --primary:                            var(--color-primary-custom);
  --primary-050:                        #BBA6FF50;    
  --primary-dark:                       var(--color-shades-blue-500);
  --secondary:                          var(--color-shades-yellow-200);
  --secondary-050:                      #EFC87F50;
  --tertiary:                           var(--color-shades-blue-300);
  --tertiary-050:                       #5DC8E550;
  --disabled:                           var(--grayscale-gray-500);
  --disabled-008:                       #6B728008;
  --black-white:                        var(--grayscale-gray-00-white);
  --white-black:                        var(--grayscale-gray-99-black);
  --graphic-background:                 var(--grayscale-gray-99-black);
  --graphic-lines:                      var(--grayscale-gray-800);

  --md-primary-fg-color:               var(--primary);
  --md-primary-fg-color--light:        var(--primary-light);
  --md-primary-fg-color--dark:         var(--primary-dark);

  --md-secondary:                      var(--secondary);

  --md-accent-fg-color:                var(--tertiary);
  
  --md-default-fg-color:               var(--grayscale-gray-350);
  --md-default-fg-color--light:        var(--grayscale-gray-400);
  --md-default-fg-color--lighter:      var(--grayscale-gray-450);
  --md-default-fg-color--lightest:     var(--grayscale-gray-500); 
  --md-default-bg-color:               var(--grayscale-gray-920);
  --md-default-bg-color--light:        var(--grayscale-gray-900);
  --md-default-bg-color--lighter:      var(--grayscale-gray-800);
  --md-default-bg-color--lightest:     var(--grayscale-gray-700);

  --md-typeset-color:                  var(--md-default-fg-color);
  --md-typeset-color-inverted:         var(--grayscale-gray-920);

  --md-typeset-a-color:                var(--primary);
  --md-typeset-a-background:           var(--color-shades-blue-700);

  --md-code-bg-color:                  var(--grayscale-gray-800);

  --header-background:                 var(--md-default-bg-color);
  --section-bg-color:                  var(--gray-50-004); 

  --outline:                           var(--md-default-fg-color--lightest); 
  --tags:                              var(--grayscale-gray-500);
  --input-caption:                    var(--grayscale-gray-400);  

  --md-mermaid-label-fg-color:        var(--grayscale-gray-400);

  --success: #C3E598;
  --information: #64C3DC;
  --warning: #FF936D;
  --error: #FF929E;

  --md-code-fg-color: #B4B7C0;
  --md-code-bg-color: #272A35;
  --md-code-hl-color: #2977FF;
}


[data-md-color-scheme="lightColor"] {
  --primary:                            var(--color-primary-custom);
  --primary-050:                        #815CDF50;
  --primary-dark:                       var(--color-shades-blue-500);
  --secondary:                          var(--color-shades-yellow-400);
  --secondary-050:                      #EFBA4B50;
  --tertiary:                           var(--color-shades-blue-500);
  --tertiary-050:                       #008AAB50;
  --disabled:                           var(--grayscale-gray-400);
  --disabled-008:                       #9CA3AF08;
  --black-white:                        var(--grayscale-gray-99-black);
  --white-black:                        var(--grayscale-gray-00-white);
  --graphic-background:                 var(--grayscale-gray-200);
  --graphic-lines:                      var(--grayscale-gray-300);


  --md-primary-fg-color:               var(--primary);
  --md-primary-fg-color--light:        var(--primary-light);
  --md-primary-fg-color--dark:         var(--primary-dark);

  --md-secondary:                      var(--color-shades-yellow-400);

  --md-accent-fg-color:                var(--tertiary);
  
  --md-default-fg-color:               var(--grayscale-gray-920);
  --md-default-fg-color--light:       var(--grayscale-gray-900);
  --md-default-fg-color--lighter:     var(--grayscale-gray-800);
  --md-default-fg-color--lightest:    var(--grayscale-gray-700);
  --md-default-bg-color:               var(--grayscale-gray-100);
  --md-default-bg-color--light:        var(--grayscale-gray-200);
  --md-default-bg-color--lighter:      var(--grayscale-gray-300);
  --md-default-bg-color--lightest:     var(--grayscale-gray-400);

  --md-typeset-color:                 var(--md-default-fg-color);
  --md-typeset-color-inverted:        var(--grayscale-gray-200);
  --md-typeset-a-color:               var(--md-primary-fg-color);
  --md-typeset-a-background:          var(--color-shades-blue-200);

  --md-code-bg-color:                 var(--grayscale-gray-200);

  --header-background:                var(--md-default-bg-color);
  --section-bg-color:                 var(--gray-920-008); 
    
  --outline:                          var(--md-default-fg-color--lightest);
  --tags:                             var(--grayscale-gray-500); 
  --input-caption:                    var(--grayscale-gray-700);

  --success: #7BAB00;
  --information: #3190A9;
  --warning: #F77243;
  --error: #CF3C59;
}

[data-md-color-scheme="darkColor"] img[src$="#only-light"],
[data-md-color-scheme="darkColor"] img[src$="#gh-light-mode-only"] {
  display: none; /* Hide light images in dark mode */
}

[data-md-color-scheme="lightColor"] img[src$="#only-dark"],
[data-md-color-scheme="lightColor"] img[src$="#gh-dark-mode-only"] {
  display: none; /* Hide dark images in light mode */
}

.highlight .na, .highlight .nv, .highlight .vc, .highlight .kc, .highlight .vg, .highlight .vi, .highlight .o, .highlight .ow, .highlight .p {
  color: var(--md-default-fg-color--light);
}

.highlight .c {
  color:var(--success);
}

code {
  text-wrap: pretty;
}

input {
  background-color: var(--md-default-bg-color--lighter);
  border: 1px solid var(--md-default-fg-color);
}

.md-typeset h3 {
  font-weight: 500;
  margin: 1rem 0 .64em;
}

#anelialogo path {
  fill:var(--md-typeset-color);
}

::selection {
  color: var(--grayscale-gray-99-black);
  background-color: var(--md-primary-fg-color--light);
}

@font-face {
  font-family: "Mulish";
  src: url("../assets/fonts/Mulish/Mulish-VariableFont_wght.ttf");
}

:root {
  --md-text-font: 'Mulish', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
  --md-typeset-heading: 'Mulish', system-ui, sans-serif;
}

.md-typeset{
  font-family: var(--md-text-font);
  font-size: .9rem;
}

.content-link {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--md-typeset-a-background);
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
    
  text-underline-offset: var(--spacing-1);
}

.content-link:hover {
  text-decoration-thickness: 16px;
  text-underline-offset: -.5em;
  color: var(--md-typeset-a-color);
} 


.md-typeset h1 {
  font-size: 1.8rem;
  color: var(--md-typeset-color);
  font-family: var(--md-typeset-heading);
  font-weight: 900;
  margin: 0 0 var(--spacing-3);
}

.md-typeset h2 {
  font-weight: 600;
  margin: 1rem 0 .64em;
}

.newLine {
  display: flow-root;
}

/*Buttons*/

.md-top {
  background-color: var(--primary-dark);
  color: var(--white);
}

.md-typeset .md-button {
  border-radius: var(--button-border-radius);
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: var(--primary);
  color: var(--md-typeset-color-inverted);
  border: 0.1rem solid var(--primary);
}

.md-typeset .md-button--primary {
  border-radius: var(--button-border-radius);
  border: 0.1rem solid transparent;
  background-color: var(--md-typeset-color);
  color: var(--md-typeset-color-inverted); 
  padding: var(--spacing-2_5) var(--spacing-4);
  margin-top: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  background-color: var(--md-primary-fg-color);
  background-image: linear-gradient(to right, var(--color-shades-purple-400),var(--color-shades-blue-500));
  color: var(--white);
  border: 0.1rem solid transparent;    
}


.md-typeset .md-button--secondary {
  color: var(--md-typeset-color);
  border-radius: var(--button-border-radius);
  border: 0.1rem solid var(--md-typeset-color);
  padding: var(--spacing-2_5) var(--spacing-4);
  margin-top: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.md-typeset .md-button--secondary:focus,
.md-typeset .md-button--secondary:hover {
  background-color: var(--md-default-bg-color);
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

.md-typeset .md-button--tertiary {
  color: var(--md-typeset-color);
  border-radius: 0;
  border: none;
  padding: var(--spacing-2_5) var(--spacing-4);
  margin-top: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.md-typeset .md-button--tertiary:focus,
.md-typeset .md-button--tertiary:hover {
    background-color: var(--md-default-bg-color);
    color: var(--md-accent-fg-color);
    border-bottom: 0.1rem solid var(--md-accent-fg-color);
}

.md-typeset ul li {
  margin-bottom: 0;
}

.md-card {
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.16);
  padding: var(--spacing-4);
  border-radius: var(--spacing-0_5);
  max-width: 300px;
  margin: auto;
}

.md-card-content h2 {
  margin-top: 0;
}

.md-card-content p {
  margin-bottom: var(--spacing-4);
}

.md-card-content img {
  width: 100%;
  height: auto;
}


.md-header--shadow {
  box-shadow: none;
}

.md-header, .md-tabs {
  background-color: var(--header-background);
  color: var(--md-default-fg-color);
}

.md-search__input+.md-search__icon{
  color: var(--md-default-fg-color);
}

.md-search__form{
  background-color: var(--md-default-bg-color);

}
.md-search__input {
  border: 1px solid var(--md-default-fg-color);
  border-radius: var(--spacing-8);
  color: var(--md-typeset-color);
}

.md-search__input::placeholder{
  color: var(--md-typeset-color);
}

.md-nav__item--section {
  border-top: 1px solid var(--outline);
}

.md-post__content h2 {
  font-weight: 600;
}

.md-post__content h2 > a {
  color: var(--md-typeset-color);
}

.md-post__content h3 > a {
  color: var(--md-typeset-color);
} 

.md-post__meta > .md-nav__item--section {
  border-top: none;
}

.md-nav__item .md-nav__link--active {
  border-left: 3px solid;
  padding-left: 12px;
}

.md-nav__list {
  padding-block: 4px;
}




/* gallery */
.galleryFlex {
  width:100%;
}

.galleryItems{
  display: flex;
  flex-wrap: wrap;
  gap: .05rem;
}

.galleryItems > * {
  flex: 1 1 10rem;
  height: 10rem;
} 

.galleryItems img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: var(--grayscale-filter);
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.galleryItems img:hover {
  filter: grayscale(0%);
}

.width50 {
  width: 50%;
}

.galGridItem {
  display: flex;
  gap: .05rem;
}

.galGridItem > * {
  flex: 1 1 15rem;
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.galGridItem > *:hover{
  filter: grayscale(0%);
}

.filterGray {
  filter: var(--grayscale-filter);
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.filterGray:hover {
  filter: grayscale(0%);
}

/*Category Tags*/

.tag {
  padding: 3px 16px 5px 16px;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--spacing-8);
}

.projects-grid {

 --border-project: 0.02rem solid var(--disabled);

  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(290px,100%), 1fr));
  gap: var(--grid-gap);
  margin: 0;
}

.project-image {
  overflow: hidden;
  position: relative;
  height: 0;
  padding-top: 70%;
}

.project-link {
  border: var(--border-project);
  border-radius: var(--spacing-5);
  overflow: clip;
  position: relative;
}

.project-link h3 {
  padding-block: var(--spacing-2);
  padding-left: var(--spacing-4);
  margin: var(--spacing-2) 0 0 0;
}

.project-link p {
  text-align: left;
  padding-inline: var(--spacing-4);
}

.project-link a {
  color: var(--md-typeset-color);
  text-decoration: none;
}

.Digital {
  background: var(--primary-light-020);
  color: var(--primary);
  border-color: var(--primary);
}

.Digital::before {
  content:'\2756';
  padding-right: var(--spacing-1);
}

.Content {
  background: var(--secondary-030);
  color: var(--secondary);
  border-color: var(--secondary);
}

.Content::before {
  content:'\273C';
  padding-right: var(--spacing-1);
}

.Brands {
  background: var(--tertiary-030);
  color: var(--tertiary);
  border-color: var(--tertiary);
}

.Brands::before {
  content:'\2726';
  padding-right: var(--spacing-1);
}

#project-img {
  filter: var(--grayscale-filter);
  transition: transform 200ms ease-in-out 0s,-webkit-transform 200ms ease-in-out 0s;
  width: 100%;
  height: 100%;
  background-size: cover; 
  position: absolute;
  top: 0;
  z-index: 0;
  aspect-ratio: 16/9;
  border-bottom: var(--border-project);
}

@media screen and (max-width: 76.25rem) {
  #project-img {
    filter: grayscale(.1);
  }
  
}

#project-img:hover {
  filter: grayscale(0%);
  transform: scale(1.1);
  position: absolute;
}

.mermaid {
  text-align: center;
}

/*Created with https://css-generators.com/wavy-shapes/*/

.postCover, .md-post__content img {
  --mask:
    radial-gradient(23.15px at 50% 31.80px,#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
    radial-gradient(23.15px at 50% -19.8px,#0000 99%,#000 101%) 50% 12px/48px 100% repeat-x;
  -webkit-mask: var(--mask);
        mask: var(--mask);
}

@media screen and (min-width: 50rem) {
  .postCover, .md-post__content img {
    --mask:
      radial-gradient(33.53px at 50% 47.30px,#000 99%,#0000 101%) calc(50% - 44px) 0/88px 100%,
      radial-gradient(33.53px at 50% -25.3px,#0000 99%,#000 101%) 50% 22px/88px 100% repeat-x;
    -webkit-mask: var(--mask);
            mask: var(--mask);
  }
}

.md-post__content img {
  width: 100%;
  object-fit: cover;
}

.blogcover  {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.md-post--excerpt {
  border-bottom: 3px dotted var(--primary-050);
  padding-bottom: var(--spacing-6);
  margin-bottom: var(--spacing-5);
}

.md-post__action a::after {
  content: '\2192';
}

.handnotes {
  text-decoration-thickness: 16px;
  text-underline-offset: -.5em;
  text-decoration-color: var(--secondary-050);
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
}

.md-sidebar__scrollwrap {
  overflow-y: visible;
}

.iconSummary {
  color: var(--md-secondary);
  margin-right: var(--spacing-2);
}

.md-typeset .grid.cards>ul>li {
  border-radius: var(--spacing-3);
}

.grid.cards>ul>li>p:first-child {
  display: flex;
  align-items: center;
}