:root {
    --color-background: #212121;
    --color-background-e1: #313131;
    --color-background-e2: #424242;
    --color-background-e3: #535353;
    --color-on-background: #F5F5F5;

    --color-primary: #2196F3;
    --color-secondary: #4CAF50;
    --color-tertiary: #FF9800;

    --color-primary-variant: #1565C0;
    --color-secondary-variant: #2E7D32;
    --color-tertiary-variant: #EF6C00;

    --color-primary-light: #64B5F6;
    --color-secondary-light: #81C784;
    --color-tertiary-light: #FFB74D;

    --color-error: #D32F2F;

    --dimen-default: 1rem;
    --dimen-big: 1.5rem;
    --dimen-huge: 2rem;

    --font-size-default: 15px;
    --font-size-big: 16px;
    --line-height-default: 1.5;
    --font-family-default: Verdana;
}

html {
    font-size: var(--font-size-default);
    font-family: var(--font-family-default), sans-serif;
    line-height: var(--line-height-default);

    background-color: var(--color-background);
    color: var(--color-on-background);
}

body {
    margin: 0;
}

input[type=file]::file-selector-button, button {
    margin: 0;

    padding: 0.75rem 1.2rem;

    font-weight: bold;
    font-size: var(--font-size-big);

    color: var(--color-on-background);

    border-radius: 1.25rem;
    border: 1px solid var(--color-background);
    background-color: var(--color-background-e1);
}

input[type=file]::file-selector-button:hover, button:hover {
    background-color: var(--color-background-e2);
}

input[type=file]::file-selector-button:active, button:active {
    color: var(--color-primary-light);
    background-color: var(--color-background-e3);
}