/*
-------------------------------------------------------------------------------
1.  Base styles [hm-01]
-------------------------------------------------------------------------------
*/

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

/* HTML font size and scaling */

html {
    font-size: var(--base-html-font-size);
}
@media (min-width: 1600px) {
    html {
        font-size: var(--base-html-font-size-1600);
    }
}
@media (min-width: 1920px) {
    html {
        font-size: var(--base-html-font-size-1920);
    }
}

/* Auto-scaling disabled */

@media (min-width: 1600px) {
    html.auto-scaling-disabled {
        font-size: var(--base-html-font-size);
    }
}
@media (min-width: 1920px) {
    html.auto-scaling-disabled {
        font-size: var(--base-html-font-size);
    }
}

/* DOM body */

body {
    background-color: var(--lm-base-body-bg-color);
    background-image: var(--lm-base-body-bg-image);
    color: var(--lm-base-text-color);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
}
.dark-mode {
    background-color: var(--dm-base-body-bg-color);
    background-image: var(--dm-base-body-bg-image);
    color: var(--dm-base-text-color);
    /*
    Anti-aliasing works best on light fonts on dark backgrounds. Otherwise, 
    there is a loss of readability. 
    */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Horizontal rule */

hr {
    height: 1px;
    color: var(--lm-horizontal-rule-color);
    background-color: var(--lm-horizontal-rule-color);
    border: none;
}
.dark-mode hr {
    color: var(--dm-horizontal-rule-color);
    background-color: var(--dm-horizontal-rule-color);
}