:root {
    --dark-primary: #2D2B2A;
    --dark-secondary: #fefefe;
    --dark-accent: #bcbab3;
    --dark-color: #f4e8a3;
    --dark-main-content-background: #242322;
    --dark-dot-background: #000;

    --light-primary: #aaa79e;
    --light-secondary: #282828;
    --light-accent: #464542;
    --light-color: #e0fce1;
    --light-main-content-background: #9b9993;
    --light-dot-background: #8888;

    --primary: var(--dark-primary);
    --secondary: var(--dark-secondary);
    --accent: var(--dark-accent);
    --color: var(--dark-color);
    --main-content-background: var(--dark-main-content-background);
    --dot-background: var(--dark-dot-background);
    
    --selection-text-color: var(--primary);
}

@font-face {
    font-family: Envy-Code-R;
    src: url(../assets/fonts/Envy-Code-R.ttf)
}

@font-face {
    font-family: NotoSansJP;
    src: url(../assets/fonts/NotoSansJP-Regular.otf)
}

@font-face {
    font-family: NotoSansCH;
    src: url(../assets/fonts/NotoSansSC-Regular.otf)
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* background-color: var(--primary); */
    background-color: var(--accent);
}

body {
    /* dotted background grid */
    --spacing: 7px;
    --size: 1.5px;
    background-color: var(--dot-background);
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) var(--size), var(--primary) var(--size));
    background-size: var(--spacing) var(--spacing);
}

a {
    color: var(--color) !important;
    text-decoration: none;
}

a:hover {
    color: var(--secondary) !important;
    /* transition: 0.5s; */
}

[lang=jp] {
    font-family: NotoSansJP;
}

[lang=zh] {
    font-family: NotoSansCH;
}

insert {
    color: var(--secondary);
    user-select: none;
}

insert:hover {
    cursor: pointer;
}

#note {
    color: var(--accent);
    padding-top: 25px;
    position: absolute;
    left: 35px;
}

.strikethrough {
    text-decoration: line-through;
}

.secondary {
    color: var(--secondary);
}

.accent {
    color: var(--accent);
}

.color {
    color: var(--color);
}

.no-sel {
    user-select: none;
}

.center {
    width: 100%; 
    text-align: center; 
    white-space: pre;
}