/* Global Variables */

:root {
    /* set main colors as a very dark gray and a very light gray */
    --main-hs: 0, 0%;
    --main-bg-l: 12.5%;
    --main-fg-l: 85%;

    --main-bgc-values: var(--main-hs), var(--main-bg-l);
    --main-fgc-values: var(--main-hs), var(--main-fg-l);

    --main-background-color: hsl(var(--main-bgc-values));
    --main-text-color: hsl(var(--main-fgc-values));

    /* structural colors */
    --placeholder-color: hsl(var(--main-hs), calc(var(--main-bg-l) * 0.25));
    --overlay-shadow-color: hsla(0, 0%, 0%, 0.7);
    --navbar-color: var(--main-background-color);
    --navbar-collapsed-color: hsl(var(--main-hs), calc(var(--main-bg-l) * 3.5));
    --separator-color: hsl(var(--main-hs), calc(var(--main-fg-l) * 0.30));

    /* UI colors */
    --ui-light-color: hsl(var(--main-hs), 40%);
    --ui-medium-color: hsl(var(--main-hs), 29%);
    --ui-dark-color: hsl(var(--main-hs), 22%);
    --ui-border-color: hsl(var(--main-hs), 47%);
    --warning-color: hsl(0, 80%, 35%);
    --warning-color-disabled: hsl(0, 40%, 50%);
    --marker-cluster-background: hsla(200, 75%, 55%, 0.7);
    --marker-cluster-foreground: hsla(200, 75%, 30%, 0.7);
    --edit-color: hsl(220, 40%, 50%);

    /* proportions */
    --button-size: 30px;
}

/* can't set break widths as variables, sadly */
@media only screen and (max-device-width: 480px) {
    :root {
        --button-size: 25px;
    }
}


/* Lato weights by ascending weight:
    Hairline
    Thin
    Light
    Regular
    Medium
    Semibold
    Bold
    Heavy
    Black
*/

/* For my uses, Lato's Latin subset is sufficient, but others may want/need a fuller character set. */

@font-face {
    font-family: "Lato";
    src: url("../fonts/LatoLatin/LatoLatin-Light.woff2") format("woff2"),
         url("../fonts/LatoLatin/LatoLatin-Light.woff") format("woff");
    font-style: normal;
    font-weight: 100;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "Lato";
    src: url("../fonts/LatoLatin/LatoLatin-Regular.woff2") format("woff2"),
         url("../fonts/LatoLatin/LatoLatin-Regular.woff") format("woff");
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "Lato";
    src: url("../fonts/LatoLatin/LatoLatin-Italic.woff2") format("woff2"),
         url("../fonts/LatoLatin/LatoLatin-Italic.woff") format("woff");
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "Lato";
    src: url("../fonts/LatoLatin/LatoLatin-Heavy.woff2") format("woff2"),
         url("../fonts/LatoLatin/LatoLatin-Heavy.woff") format("woff");
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "Lato";
    src: url("../fonts/LatoLatin/LatoLatin-HeavyItalic.woff2") format("woff2"),
         url("../fonts/LatoLatin/LatoLatin-HeavyItalic.woff") format("woff");
    font-style: italic;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}




:root {
    font-family: Lato, "Open Sans", sans-serif;
    overflow-y: overlay;
    overflow-x: hidden;
}
* {
    box-sizing: border-box;
}

body {
    color: var(--main-text-color);
    background-color: var(--main-background-color);
}

a:visited, a {
    color: var(--main-text-color);
    text-decoration: none;
}

hr {
    border: 0px;
    border-top: 1px solid var(--separator-color);
}

/* Mixture of scrollbar style directives to work across browsers */
* {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--main-hs), 40%) var(--main-background-color);
}

*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: hsl(var(--main-hs), 40%);
    border-radius: 20px;
    border: 3px solid var(--main-background-color);
}