@property --theme-color {
    syntax: "<color>";
    inherits: true;
}
@property --back-color {
    syntax: "<color>";
    inherits: true;
}
@property --grid-color {
    syntax: "<color>";
    inherits: true;
}

/* theme color */
body, body.light {
    --color-scheme: light;
    --white-black: white;
    --black-white: black;
    --theme-color: hsl(85, 50%, 60%);
    --back-color: hsl(60, 100%, 98%);
    --font-color: #222;
    --grid-color: #fff;
    --code-color: #ddd;
    --code-block: #30303a;
    --frame-shadow: #999;
}

body.dark {
    --color-scheme: dark;
    --white-black: black;
    --black-white: white;
    --theme-color: teal;
    --back-color: hsl(210, 7%, 18%);
    --font-color: #f5f5f5;
    --grid-color: #333;
    --code-color: #445;
    --code-block: #23232a;
    --frame-shadow: #111;
}

@media(prefers-color-scheme: dark){
    body {
        --color-scheme: dark;
        --white-black: black;
        --black-white: white;
        --theme-color: teal;
        --back-color: hsl(210, 7%, 18%);
        --font-color: #fafafa;
        --grid-color: #333;
        --code-color: #445;
        --code-block: #23232a;
        --frame-shadow: #111;
    }
}

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

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

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



/* 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;
}



/* link style */
a {
    text-decoration: none;
    color: var(--theme-color);

    &:hover {
        text-decoration: underline;
    }
    &:visited {
        color: hsl(290, 40%, 50%);
    }
}