:root {
    --color-primary: #f5f5f5;
    --color-black: #090909;
    --font: 'Roboto Mono', monospace;
}

body {
    background-color: var(--color-black);
    color: #ccc;
    font-family: var(--font);
    font-weight: 200;
    font-size: 20px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
    font-weight: 200;
}

a, a:visited {
    color: var(--color-primary);
    transition: color .3s;
}

a:hover {
    color: color-mix(in srgb, var(--color-primary), #000 25%);
}

a:active {
    color: color-mix(in srgb, var(--color-primary), #000 40%);
}

.btn {
    border-radius: 0;
}

.btn-outline-primary, .btn-outline-primary:visited {
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-black) !important
}

.btn-outline-primary:active {
    background-color: color-mix(in srgb, var(--color-primary), #000 25%) !important;
    color: var(--color-black) !important
}

::selection {
    background-color: var(--color-primary);
    color: var(--color-black);
}