/* This is a CSS file I use in a lot of my websites to get nice and easy colors */
/* Document styles */
* {
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
}

/* setup color manipulation based on the preferred color scheme */
@media (prefers-color-scheme: light) {
    :root {
        --body-background-color: #eeeeee;
        --body-color: #111111;

        --primary-color: #1B3C53;
        --secondary-color: #234C6A;
        --tertiary-color: #456882;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-background-color: #111111;
        --body-color: #eeeeee;

        --primary-color: #647FBC;
        --secondary-color: #91ADC8;
        --tertiary-color: #AED6CF;
    }
}

:root {
    /* final colors */
    --html-background-color: var(--body-background-color);

    --selection-background-color: var(--primary-color);

    --scrollbar-thumb-color: var(--primary-color);
    --scrollbar-track-color: var(--tertiary-color);

    --link-color: var(--primary-color);

    --link-hover-color: var(--tertiary-color);
    --link-hover-background-color: var(--primary-color);

    --link-visited-color: var(--secondary-color);
    --link-visited-hover-color: var(--tertiary-color);
    --link-visited-background-color: var(--body-background-color);
    --link-visited-hover-background-color: var(--primary-color);

    --border-color: var(--primary-color);
    --input-background-color: var(--secondary-color);
}

html {
    background-color: var(--html-background-color);

    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);

    margin: 0;
}

body {
    background: var(--body-background-color);
    color: var(--body-color);

    margin: 0;
}

::selection, ::-moz-selection {
    background: var(--selection-background-color);
}

/* General styles */
input, select, button, textarea {
    background-color: var(--input-background-color);
    color: var(--body-color);

    border: 2px solid var(--border-color);
}

input, select {
    padding: .5em;
}

h1 {
    text-align: center;
}
h2 {
    text-align: center;
}

a {
    color: var(--link-color);
}
a:hover {
    color: var(--link-hover-color);
    background-color: var(--link-hover-background-color);
}
a:visited:hover {
    color: var(--link-visited-hover-color);
    background-color: var(--link-visited-hover-background-color);
}
a:visited {
    color: var(--link-visited-color);
    background-color: var(--link-visited-background-color);
}