@font-face {
    font-family: "Work Sans";
    src: url("public/WorkSans-VariableFont_wght.ttf");
}

:root {
    --h1-font-fallback: "Work Sans";
    --h2-font-fallback: "Work Sans";
    --h3-font-fallback: "Work Sans";
    --h4-font-fallback: "Work Sans";
    --h5-font-fallback: "Work Sans";
    --h6-font-fallback: "Work Sans";
    --text-font-fallback: "Work Sans";
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    font-family: var(--font-text-theme);
    background-color: var(--background-primary);

    display: grid;
}

main {
    margin: 0;
    padding: 0;

    background-color: var(--background-primary);

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}

div.md-container {
    max-width: 80ch;
    margin-top: 16px;
    padding: 8px 36px 24px 36px;
}

h1 {
    color:       var(--h1-color);
    font-family: var(--h1-font, var(--h1-font-fallback, sans-serif));
    font-size:   var(--h1-size, 48px);
    font-style:  var(--h1-style);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height, 1);
}

h2 {
    color:       var(--h2-color);
    font-family: var(--h2-font, var(--h2-font-fallback, sans-serif));
    font-size:   var(--h2-size, 36px);
    font-style:  var(--h2-style);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height, 40px);
}

h3 {
    color:       var(--h3-color);
    font-family: var(--h3-font, var(--h3-font-fallback, sans-serif));
    font-size:   var(--h3-size, 30px);
    font-style:  var(--h3-style);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height, 36px);
}

h4 {
    color:       var(--h4-color);
    font-family: var(--h4-font, var(--h4-font-fallback, sans-serif));
    font-size:   var(--h4-size, 24px);
    font-style:  var(--h4-style);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height, 32px);
}

h5 {
    color:       var(--h5-color);
    font-family: var(--h5-font, var(--h5-font-fallback, sans-serif));
    font-size:   var(--h5-size, 20px);
    font-style:  var(--h5-style);
    font-weight: var(--h5-weight);
    line-height: var(--h5-line-height, 28px);
}

h6 {
    color:       var(--h6-color);
    font-family: var(--h6-font, var(--h6-font-fallback, sans-serif));
    font-size:   var(--h6-size, 18px);
    font-style:  var(--h6-style);
    font-weight: var(--h6-weight);
    line-height: var(--h6-line-height, 20px);
}

p {
    color: var(--text-normal);
    font-family: var(--text-font-fallback);
    font-size: 16px;
    line-height: 24px;
}

li {
    color: var(--text-normal);
    font-family: var(--text-font-fallback);
    font-size: 16px;
    line-height: 24px;
}

img {
    max-width: 100%;
    width: auto;
    height: auto;
}

a {
    color: var(--text-accent);
    text-decoration: var(--link-decoration);
}

a:hover {
    color: var(--text-accent-hover);
    text-decoration: var(--link-decoration-hover);
}

em {
    color: var(--italic-color);
}

strong {
    color: var(--bold-color);
}

pre {
    color: var(--code-normal);
    background-color: var(--code-background);

    padding: 20px;
}

input.path-input {
    background-color: var(--code-background);
    color: var(--text-normal);
    font-family: var(--text-font-fallback);
    font-size: 16px;
    line-height: 24px;

    border: none;
    outline: none;

    position: fixed;
    bottom: -10px;
    left:0;
    width: 100vw;

    padding-bottom: 14px;
    padding-left: 16px;
    padding-top: 4px;
    box-shadow: 1px -1px 9px 6px rgba(0,0,0,0.25);
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

@media screen {
    .no-print, .no-print * {
        display: initial;
    }
}