:root {
    --md-status--incomplete: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>alert-decagram-outline</title><path d="M23,12L20.56,14.78L20.9,18.46L17.29,19.28L15.4,22.46L12,21L8.6,22.47L6.71,19.29L3.1,18.47L3.44,14.78L1,12L3.44,9.21L3.1,5.53L6.71,4.72L8.6,1.54L12,3L15.4,1.54L17.29,4.72L20.9,5.54L20.56,9.22L23,12M20.33,12L18.5,9.89L18.74,7.1L16,6.5L14.58,4.07L12,5.18L9.42,4.07L8,6.5L5.26,7.09L5.5,9.88L3.67,12L5.5,14.1L5.26,16.9L8,17.5L9.42,19.93L12,18.81L14.58,19.92L16,17.5L18.74,16.89L18.5,14.1L20.33,12M11,15H13V17H11V15M11,7H13V13H11V7" /></svg>');
    --md-status--complete: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d=""/></svg>');
}

/* contain colors */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: hsla(244.82, 76.54%, 35.1%, 1);
    --md-primary-fg-color--dark: hsla(244.82, 76.54%, 35.1%, 1);
    --md-primary-fg-color--light: hsla(244.82, 76.54%, 35.1%, 1);

    --md-accent-fg-color: hsla(255.29, 100%, 59.22%, 1);
    --md-accent-fg-color--light: hsla(255.29, 100%, 59.22%, 1);
    --md-accent-fg-color--dark: hsla(0, 0%, 100%, 1);
    --md-accent-fg-color--transparent: hsla(255.29, 100%, 59.22%, 0.1);
}

.md-status--incomplete::after {
    mask-image: var(--md-status--incomplete);
    -webkit-mask-image: var(--md-status--incomplete);
}

.md-status--complete::after {
    mask-image: var(--md-status--complete);
    -webkit-mask-image: var(--md-status--complete);
}

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

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

.md-sidebar--primary .md-sidebar__scrollwrap {
    border-right: 1px solid var(--md-default-fg-color--lightest);
    padding-right: 10px;
}

.md-sidebar--secondary .md-sidebar__scrollwrap {
    border-left: 1px solid var(--md-default-fg-color--lightest);
    padding-left: 10px;
}

/* Clickable boxes */
.md-typeset .grid.cards > ul > li {
    position: relative;
}

.md-typeset .grid.cards ul li p a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

.md-typeset .grid.cards > ul > li:hover {
    border-color: var(--md-accent-fg-color);
}

/* Infocards for cards that are not links */
.grid.cards.infocards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.grid.cards.infocards > ul > li {
    /*border: 1px solid #ddd;*/
    padding: 15px;
    border-radius: 8px;
    /*border-color: var(--md-accent-fg-color);*/
}

.grid.cards.infocards > ul > li:hover {
    border-color: var(--md-default-fg-color--lightest) !important;
    box-shadow: none !important;
}

/* disable border */
.noborder {
    border: none !important;
}

/* Clickable persona figures on the homepage */
.grid.frontpage figure {
    position: relative; /* Establishes a positioning context for the link overlay */
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
    padding: 1.5rem;
    transition:
        transform 0.2s,
        border-color 0.2s;
}

.grid.frontpage figure:hover {
    border-color: var(--md-accent-fg-color);
    transform: translateY(-5px);
}

/* This makes the entire figure clickable by stretching the link's pseudo-element */
.grid.frontpage figure a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}