h1 {
    font-size    : var(--font-size-xl);
    font-family  : var(--font-title);
    color        : var(--main-fg);
    margin-top   : var(--margin-lg);
    margin-bottom: var(--margin-sm);
}

h2 {
    display       : inline-flex;
    flex-direction: column;
    font-size     : var(--font-size-xxl);
    font-family   : var(--font-title);
    font-weight   : var(--font-weight-black);
    color         : var(--main-fg);
    margin-top    : var(--margin-sm);
    margin-bottom : var(--margin-sm);
}

h2::before {
    content         : "";
    display         : block;
    background-color: var(--univ-primary);
    transition      : width 0.3s;
    width           : var(--border-cut-length);
    height          : var(--border-strong);
    margin          : var(--margin-lg) 0;
}

h2:hover::before {
    transition: width 0.3s;
    width     : 100%;
}

h3 {
    font-size    : var(--font-size-lg);
    font-family  : var(--font-title);
    color        : var(--universe-first);
    margin-top   : var(--margin-sm);
    margin-bottom: var(--margin-sm);
}

h4 {
    font-size    : var(--font-size-md);
    font-family  : var(--font-title);
    color        : var(--main-fg-full);
    margin-top   : var(--margin-sm);
    margin-bottom: var(--margin-sm);
}

h5 {
    font-size  : var(--font-size-md);
    font-family: var(--font-title);
    color      : var(--main-fg-full);
}

h6 {
    font-family: var(--font-title);
    color      : var(--main-fg-full);
}

.c-heading-anchor {
    text-decoration: none;
    color          : inherit;
}