:root {
    /* Base colors */
    --color-base-light: #eeeeee;
    --color-base-dark: #333333;
    --color-base-gray: #888888;
    --color-base-red: #eb3b5a;
    --color-base-orange: #fa8231;
    --color-base-yellow: #f7b731;
    --color-base-green: #20bf6b;
    --color-base-cyan: #0fb9b1;
    --color-base-azure: #2d98da;
    --color-base-blue: #3867d6;
    --color-base-purple: #8854d0;

    /* Shades of base colors */

    --color-light-1: lch(from var(--color-base-light) calc(l - 10) c h);
    --color-light-2: lch(from var(--color-base-light) calc(l - 5) c h);
    --color-light-3: lch(from var(--color-base-light) calc(l - 2) c h);
    --color-light-4: var(--color-base-light);
    --color-light-5: lch(from var(--color-base-light) calc(l + 2) c h);
    --color-light-6: lch(from var(--color-base-light) calc(l + 5) c h);
    --color-light-7: lch(from var(--color-base-light) calc(l + 10) c h);

    --color-dark-1: lch(from var(--color-base-dark) calc(l - 10) c h);
    --color-dark-2: lch(from var(--color-base-dark) calc(l - 5) c h);
    --color-dark-3: lch(from var(--color-base-dark) calc(l - 2) c h);
    --color-dark-4: var(--color-base-dark);
    --color-dark-5: lch(from var(--color-base-dark) calc(l + 2) c h);
    --color-dark-6: lch(from var(--color-base-dark) calc(l + 5) c h);
    --color-dark-7: lch(from var(--color-base-dark) calc(l + 10) c h);

    --color-gray-1: lch(from var(--color-base-gray) calc(l - 10) c h);
    --color-gray-2: lch(from var(--color-base-gray) calc(l - 5) c h);
    --color-gray-3: var(--color-base-gray);
    --color-gray-4: lch(from var(--color-base-gray) calc(l + 5) c h);
    --color-gray-5: lch(from var(--color-base-gray) calc(l + 10) c h);

    --color-red-1: lch(from var(--color-base-red) calc(l - 10) c h);
    --color-red-2: lch(from var(--color-base-red) calc(l - 5) c h);
    --color-red-3: var(--color-base-red);
    --color-red-4: lch(from var(--color-base-red) calc(l + 5) c h);
    --color-red-5: lch(from var(--color-base-red) calc(l + 10) c h);

    --color-orange-1: lch(from var(--color-base-orange) calc(l - 10) c h);
    --color-orange-2: lch(from var(--color-base-orange) calc(l - 5) c h);
    --color-orange-3: var(--color-base-orange);
    --color-orange-4: lch(from var(--color-base-orange) calc(l + 5) c h);
    --color-orange-5: lch(from var(--color-base-orange) calc(l + 10) c h);

    --color-yellow-1: lch(from var(--color-base-yellow) calc(l - 10) c h);
    --color-yellow-2: lch(from var(--color-base-yellow) calc(l - 5) c h);
    --color-yellow-3: var(--color-base-yellow);
    --color-yellow-4: lch(from var(--color-base-yellow) calc(l + 5) c h);
    --color-yellow-5: lch(from var(--color-base-yellow) calc(l + 10) c h);

    --color-green-1: lch(from var(--color-base-green) calc(l - 10) c h);
    --color-green-2: lch(from var(--color-base-green) calc(l - 5) c h);
    --color-green-3: var(--color-base-green);
    --color-green-4: lch(from var(--color-base-green) calc(l + 5) c h);
    --color-green-5: lch(from var(--color-base-green) calc(l + 10) c h);

    --color-cyan-1: lch(from var(--color-base-cyan) calc(l - 10) c h);
    --color-cyan-2: lch(from var(--color-base-cyan) calc(l - 5) c h);
    --color-cyan-3: var(--color-base-cyan);
    --color-cyan-4: lch(from var(--color-base-cyan) calc(l + 5) c h);
    --color-cyan-5: lch(from var(--color-base-cyan) calc(l + 10) c h);

    --color-azure-1: lch(from var(--color-base-azure) calc(l - 10) c h);
    --color-azure-2: lch(from var(--color-base-azure) calc(l - 5) c h);
    --color-azure-3: var(--color-base-azure);
    --color-azure-4: lch(from var(--color-base-azure) calc(l + 5) c h);
    --color-azure-5: lch(from var(--color-base-azure) calc(l + 10) c h);

    --color-blue-1: lch(from var(--color-base-blue) calc(l - 10) c h);
    --color-blue-2: lch(from var(--color-base-blue) calc(l - 5) c h);
    --color-blue-3: var(--color-base-blue);
    --color-blue-4: lch(from var(--color-base-blue) calc(l + 5) c h);
    --color-blue-5: lch(from var(--color-base-blue) calc(l + 10) c h);

    --color-purple-1: lch(from var(--color-base-purple) calc(l - 10) c h);
    --color-purple-2: lch(from var(--color-base-purple) calc(l - 5) c h);
    --color-purple-3: var(--color-base-purple);
    --color-purple-4: lch(from var(--color-base-purple) calc(l + 5) c h);
    --color-purple-5: lch(from var(--color-base-purple) calc(l + 10) c h);
}

.tuxar-hero {
    background-image: url('/static/img/tuxar.png');
    background-repeat: no-repeat;
    background-size: cover;
}

html,
body,
input,
.uk-logo,
h1,
.uk-h1,
h2,
.uk-h2,
h3,
.uk-h3,
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-heading-3xlarge {
    font-family: 'Source Sans 3', sans-serif;
}

.uk-logo {
    font-weight: 900;
}

.tuxar-button {
    border-radius: 50vh;
    border-width: 0;
    color: var(--color-light-7);
    background-color: var(--color-blue-3);
}

.tuxar-button:hover {
    color: var(--color-light-7);
    background-color: var(--color-blue-4);
}

.tuxar-button:active {
    color: var(--color-light-7);
    background-color: var(--color-blue-2);
}

.tuxar-hero h1 {
    font-weight: 900;
    margin-bottom: 0;
}