html {
    scroll-behavior: smooth;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
    outline: none;
}

body,
.body_homepage,
.body_portfolio,
.body_contactMe,
.body_resume,
.body_aboutMe,
.searchresults {
    display: flex;
    width: 100%;
    min-height: 1dvh;
    margin: 0;
    background-color: var(--bg-body-dark);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: var(--primary-font);
}


.body_portfolio h1,
.body_contactMe h1,
.body_resume h1,
.body_aboutMe h1,
.body_searchresults h1 {
    margin-top: var(--padding-base);
}

.--neutral {
    color: var(--text-color-neutral);
}


.--link {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 1px;
    font-size: var(--font-size-base);
    color: var(--text-highlighted-blue);
}

.--link:hover {
    text-decoration: underline;

}

h1,
h2,
h3,
h4,
h5,
h6
figcaption {
    scroll-margin-top: var(--spacing-base);
}

.d0 {
    font-size: var(--font-size-d0);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.16px;
}

.d1 {
    font-size: var(--font-size-d1);
    font-weight: 800;
    line-height: 1.1
}

.d2 {
    font-size: var(--font-size-d2);
    color: var(--text-title-secondary-dark);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.16px;
}

h1 {
    font-size: var(--font-size-h1);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    margin: 0;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.1rem;
    padding-bottom: var(--padding-base);
    line-height: 1.1;
    letter-spacing: -0.16px;
}



h2 {
    font-size: var(--font-size-h2);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    margin: 0;
    line-height: 1.2;
}

h3 {
    font-size: var(--font-size-h3);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    margin: 0;
        line-height: 1.3;
}

h4 {
    font-size: var(--font-size-h4);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    margin: 0;
            line-height: 1.3;
}

h5 {
    font-size: var(--font-size-h5);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    margin: 0;
                line-height: 1.4;
}

h6 {
    font-size: var(--font-size-h6);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    margin: 0;
                    line-height: 1.5;
}



p,
.--base,
.base {
    font-size: var(--font-size-base);
    color: var(--text-main-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    margin: 0;
   line-height: 1.618;
    line-height: 2;
}

.--sm,
.sm {
    font-size: var(--font-size-sm);
    color: var(--text-main-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    line-height: 1.618;
        line-height: 2;
    margin: 0;
}



figcaption {
    display: flex;
    width: 100%;
    font-size: var(--font-size-h5);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-medium);
    margin: 0;
    line-height: 1.4;
}


li,

span {
    font-size: var(--font-size-base);
    color: var(--text-main-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
line-height: 1.618;
    margin: 0;
}


table {
    font-size: var(--font-size-base);
    color: var(--text-main-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    line-height: 1.618;
    margin: 0;
}




a.toc-submenu__link,
dt,
dd,
a.menu2__link {
    font-size: var(--font-size-sm);
    color: var(--text-main-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    line-height: 1.618;
    margin: 0;
}

.--xs {
    font-size: var(--font-size-xs);
    color: var(--text-main-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-light);
    line-height: 1.5;
    margin: 0;
}

a {
    font-size: var(--font-size-base);
    color: var(--text-main-secondary-dark);
    font-family: var(--primary-font);
    text-decoration: none;
    line-height: 1.618;
    margin: 0;
}


.--s1, .s1 {
    font-size: var(--font-size-h1);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    font-weight: var(--font-weight-base);
    margin: 0;
    line-height: 1.1;
    font-weight: var(--font-weight-medium);
}
.--s2, .s2 {
    font-size: var(--font-size-h2);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    margin: 0;
    line-height: 1.2;
}

.--s3, .s3 {
    font-size: var(--font-size-h3);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    margin: 0;
    line-height: 1.3;
}

.--s4,
.s4 {
    font-size: var(--font-size-h4);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    margin: 0;
    line-height: 1.3;
}

.--s5,
.s5 {
    font-size: var(--font-size-h5);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    margin: 0;
    line-height: 1.4;
}

.--s6,
.s6 {
    font-size: var(--font-size-h6);
    color: var(--text-title-secondary-dark);
    font-family: var(--primary-font);
    margin: 0;
               line-height: 1.5;

}


b,
.--b,
.b {
    font-weight: var(--font-weight-medium);
}

strong, .--strong {
    font-weight: var(--font-weight-medium);
}

.bold,
.--bold {
    font-weight: var(--font-weight-bold);
}

.black,
.--black {
    font-weight: var(--font-weight-black);
}

   @media only screen and (max-width: 768px) {
body,
.body_homepage,
.body_portfolio,
.body_contactMe,
.body_resume,
.body_aboutMe,
.searchresults {
        min-height: 1dvh;
        background-color: var(--bg-body-x-light);
}


   }


@media print {
    h1 {
        font-size: var(--print-font-size-h1);

    }

    h2 {
        font-size: var(--print-font-size-h2);
    }

    h3 {
        font-size: var(--print-font-size-h3);
    }

    h4 {
        font-size: var(--print-font-size-h4);
    }

    h5 {
        font-size: var(--print-font-size-h5);

    }

    h6 {
        font-size: var(--print-font-size-h6);
    }

    .--s1 {
        font-size: var(--print-font-size-h1);
    }

    .--s3 {
        font-size: var(--print-font-size-h3);
    }

    .--s4,
    .s4 {
        font-size: var(--print-font-size-h4);
    }

    .--s5,
    .s5 {
        font-size: var(--print-font-size-h5);
    }

    .--s6,
    .s6 {
        font-size: var(--print-font-size-h6);
    }


    p,
    .--base,
    .base,
    li,
    span {
        font-size: var(--print-font-size-base);
        line-height: 1.3;
        /* Better for Montserrat on paper */
    }

    table {
        font-size: var(--print-font-size-sm);
    }

    .--sm,
    .sm {
        font-size: var(--print-font-size-sm);
    }

    .--xs {
        font-size: var(--print-font-size-xs);
    }



    figcaption {
        font-size: var(--print-font-size-h4);
    }
}