@import url('https://fonts.googleapis.com/css2?family=Manufacturing+Consent&display=swap');

.published-container {
    /* Site header */
    --header-height: 50px;
    --site-name-color: var(--text-normal);
    --site-name-color-hover: #CCFE03;
    --site-name-size: 30px;
    --site-menu-icon-color: var(--text-faint);
    --site-menu-icon-color-hover: var(--text-normal);
    --site-menu-icon-size: 30px;
    /* Navigation */
    --nav-collapse-icon-color: var(--text-muted);
    --nav-collapse-icon-color-hover: #CCFE03;
    --nav-parent-item-color: var(--text-muted);
    --nav-parent-item-color-active: var(--text-normal);
    --nav-item-color: var(--text-muted);
    --nav-item-color-hover: #CCFE03;
    --nav-item-color-active: var(--text-normal);
    --nav-item-border-color: var(--text-muted);
    --nav-item-border-color-hover: #CCFE03;
    --nav-item-border-color-active: var(--text-normal);
    /* ... CSS variables for Publish that do not change when light or dark mode is enabled. They sometimes link to color variables in .theme-light or .theme-dark */
}

.site-body-left-column-site-name {
    font-family: "Manufacturing Consent", serif;
    font-weight: 400;
    font-size: 30px;
}

.page-title-font {
    font-family: "Manufacturing Consent", serif;
    font-weight: 400;
    font-size: 28px;
}

body {
    --font-text-theme: sans-serif;
    font-size: 36px;
}

.markdown-preview-view h1 {
    font-family: "Manufacturing Consent", serif;
    font-weight: 400;
    font-size: 24px;
}

.markdown-preview-view h2 {
    font-family: "Manufacturing Consent", serif;
    font-weight: 400;
    font-size: 24px;
}

.markdown-preview-view h3 {
    font-family: "Manufacturing Consent", serif;
    font-weight: 400;
    font-size: 24px;
}

.markdown-preview-view img,
img {
    border: 4px solid var(--image-border-color);
}
.published-container {
    --page-title-font: "Manufacturing Consent", serif;
    font-weight: 400;
    font-size: 28px;
}

.theme-light {
    --background-primary: #ffffff;
    --h1-color: #000000;
    --image-border-color: #000000;

    /* ... CSS color variables for when light mode is enabled */
}

.theme-dark {
    --background-primary: #000000;
    --h1-color: #ffffff;
    --image-border-color: #FFFFFF;

    /* ... CSS color variables for when dark mode is enabled */
}