@font-face {
    font-family: "Baloo 2";
    src: url("../fonts/Baloo2-VariableFont_wght.ttf") format("truetype-variations");
}

:root {
    --color-bg-1-raw: 0, 7, 12;
    --color-bg-1: rgb(var(--color-bg-1-raw));

    --color-bg-2-raw: 0, 18, 30;
    --color-bg-2: rgb(var(--color-bg-2-raw));

    --color-primary-raw: 0, 110, 255;
    --color-primary: rgb(var(--color-primary-raw));
    --color-primary-darkened-1-raw: 0, 96, 227;
    --color-primary-darkened-1: rgb(var(--color-primary-darkened-1-raw));
    --color-primary-darkened-2-raw: 0, 83, 197;
    --color-primary-darkened-2: rgb(var(--color-primary-darkened-2-raw));

    --color-accent-raw: 0, 208, 112;
    --color-accent: rgb(var(--color-accent-raw));

    --color-info-raw: 0, 110, 255;
    --color-info: rgb(var(--color-info-raw));

    --color-success-raw: 0, 208, 112;
    --color-success: rgb(var(--color-success-raw));

    --color-warning-raw: 255, 222, 0;
    --color-warning: rgb(var(--color-warning-raw));

    --color-error-raw: 255, 0, 45;
    --color-error: rgb(var(--color-error-raw));

    --color-btn-danger-raw: 222, 0, 40;
    --color-btn-danger: rgb(var(--color-btn-danger-raw));
    --color-btn-danger-darkended-1-raw: 190, 0, 36;
    --color-btn-danger-darkended-1: rgb(var(--color-btn-danger-darkended-1-raw));
    --color-btn-danger-darkended-2-raw: 166, 0, 31;
    --color-btn-danger-darkended-2: rgb(var(--color-btn-danger-darkended-2-raw));

    --color-neutral-1-raw: 211, 211, 211;
    --color-neutral-1: rgb(var(--color-neutral-1-raw));
}

body, html {
    margin: 0;
    padding: 0;
    font-family: "Baloo 2", sans-serif;
    background-color: var(--color-bg-1);
    color: var(--color-neutral-1);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

a {
    color: var(--color-primary);
    transition: color 250ms;
}

a:hover {
    color: var(--color-primary-darkened-2);
}