/* theme color */
body {
    --white-black: light-dark(white, black);
    --black-white: light-dark(black, white);
    --theme-color: light-dark(#a1cc66, teal); /* hsl(85, 50%, 60%) */
    --back-color: light-dark(#fffff5, #2b2e31); /* hsl(60, 100%, 98%), hsl(210, 7%, 18%) */
    --font-color: light-dark(#222, #f5f5f5);
    --font-gray:  light-dark(#666, #999);
    --grid-color: light-dark(#fff, #333);
    --code-color: light-dark(#ddd, #445);
    --code-block: light-dark(#30303a, #23232a);
    --frame-shadow: light-dark(#999, #111);

    color-scheme: light dark;
    &.light {color-scheme: light;}
    &.dark  {color-scheme: dark;}
}


/* font */
body {
    font-family: "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Segoe UI", "BIZ UDPGothic", sans-serif;
}               /*                                Apple                            |       Linux       |    win-en        win-jp    */

code {
    font-family: "Source Code Pro", "Monaco", "Consolas", "BIZ UDGothic", monospace;
}               /*      Linux     |  Apple  |  windows  |      和文     */

em {
    font-family: serif;
}


/* general */
body {
    margin: 0;
    color: var(--font-color);
    background-color: var(--theme-color);
}

img {
	-webkit-user-drag: none;
    user-select: none;
}

@media (scripting: none) {
    .js {display: none !important;}
}


/* link style */
a {
    text-decoration: none;
    &:hover {text-decoration: underline;}

    color: var(--theme-color);
    &:visited {color: hsl(290, 40%, 50%);}
}