:root {
    --background-color: white;
    --text-color: rgba(0, 0, 0, 0.87);
    --secondary-text-color: rgba(0, 0, 0, 0.54);
    --text-color-inv: white;
    --secondary-text-color-inv: rgba(255, 255, 255, 0.7);
    --link-color: #2354db;
    --visited-color: #9500e0;
    --card-color: #ddd;
    --contour-color: #bbb;

    color-scheme: light dark;
}

html {
    font-size: clamp(100%, 3.4vw, 150%);
}

html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    background: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: "IBM Plex Sans", sans-serif;
}

a:link {
    color: var(--link-color);
}

a:visited {
    color: var(--visited-color);
}

p {
    line-height: 1.375;
}

button {
    font-family: "IBM Plex Sans", sans-serif;
}

.dark {
    --background-color: #7b1fa2;
    --text-color: white;
    --secondary-text-color: rgba(255, 255, 255, 0.7);
    --text-color-inv: rgba(0, 0, 0, 0.87);
    --secondary-text-color-inv: rgba(0, 0, 0, 0.54);
    --link-color: #a0c3ff;
    --visited-color: #f2a7ff;
    --card-color: #6b1b8c;
    --contour-color: #5a1777;
}

.twilight {
    --background-color: #9fa8da;
    --link-color: #17378f;
    --visited-color: #640096;
    --card-color: #8a92bd;
    --contour-color: #757ba0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #242012;
        --text-color: white;
        --secondary-text-color: rgba(255, 255, 255, 0.7);
        --text-color-inv: rgba(0, 0, 0, 0.87);
        --secondary-text-color-inv: rgba(0, 0, 0, 0.54);
        --link-color: #a0c3ff;
        --visited-color: #f2a7ff;
        --card-color: #353125;
        --contour-color: #474438;
    }

    .dark {
        --background-color: #1b131e;
        --card-color: #2d2630;
        --contour-color: #403942;
    }

    .twilight {
        --background-color: #1e2025;
        --link-color: #a0c3ff;
        --visited-color: #f2a7ff;
        --card-color: #303136;
        --contour-color: #424448;
    }
}