/* variables */
:root {
    /* fonts */
    --pixel-font: Commodore64;
    /* --page-font: "PT Sans",
        Arial,
        Helvetica,
        sans-serif; */
    --standard-font: -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen-Sans,
        Ubuntu,
        Cantarell,
        "Helvetica Neue",
        sans-serif;
    --mono-font: 'Courier New',
        Courier,
        monospace;

    /* colour palette */
    /* ------------------------------------------- */

    /* page */
    --page-font-colour: rgb(255, 255, 255);
    --selected-item: rgba(0, 0, 170, 0.5);
    --selected-item-hover: rgb(0, 0, 255);
    --hover-selectable: rgb(255, 255, 0);
    --standard-radius: 7px;

    /* scroll bar */
    --scrollbar-track: rgb(56, 56, 56);
    --scrollbar-thumb: rgb(136, 136, 136);
    --scrollbar-thumb-hover: rgb(0, 0, 0);

    /* input */
    --input-background: rgba(43, 43, 43, 0.5);
    --input-background-disabled: rgb(89, 89, 89);
    --input-border: rgb(43, 43, 43);
    --input-border-hover: rgb(147, 147, 147);
    --input-font-colour: var(--page-font-colour);

    /* button */
    --button-background: rgb(85, 85, 85);
    --button-background-hover: rgb(136, 136, 136);
    --button-background-disabled: var(--button-background-hover);
    --button-border: rgb(85, 85, 85);
    --button-border-hover: rgb(136, 136, 136);
    --button-border-disabled: var(--button-border-hover);
    --button-font-colour: rgb(255, 255, 255);
    --button-font-colour-hover: var(--button-font-colour);
    --button-font-colour-disabled: var(--button-border-hover);
    --button-red-background: darkred;
    --button-red-background-hover: red;
    --button-red-background-disabled: rgb(85, 85, 85);
    --button-red-border: darkred;
    --button-red-border-hover: red;
    --button-red-border-disabled: rgb(85, 85, 85);
    --button-red-font-colour: rgb(255, 255, 255);
    --button-red-font-colour-hover: var(--button-red-font-colour);
    --button-red-font-colour-disabled: var(--button-red-font-colour);
    --button-blue-background: rgb(0, 0, 170);
    --button-blue-background-hover: rgb(0, 0, 255);
    --button-blue-background-disabled: rgb(85, 85, 85);
    --button-blue-border: rgb(0, 0, 170);
    --button-blue-border-hover: rgb(0, 0, 255);
    --button-blue-border-disabled: rgb(85, 85, 85);
    --button-blue-font-colour: rgb(255, 255, 255);
    --button-blue-font-colour-hover: var(--button-blue-font-colour);
    --button-blue-font-colour-disabled: var(--button-blue-font-colour);

    /* select2 */
    --select2-background: var(--input-background);
    --select2-background-disabled: var(--input-background-disabled);
    --select2-border: var(--input-border);
    --select2-border-hover: var(--input-border-hover);
    --select2-font-colour: var(--input-font-colour);
    --select2-dropdown-selection-background: var(--selected-item);
    --select2-dropdown-selection-font-colour: var(--page-font-colour);
    --select2-dropdown-selected-background: rgb(91, 91, 91);
    --select2-dropdown-selected-font-colour: var(--page-font-colour);
    --select2-tag-delete-button: rgb(255, 255, 255);
    --select2-tag-delete-background: rgb(147, 147, 147);
    --select2-tag-background: rgb(78, 78, 78);

    /* arrows */
    --arrow-background: var(--button-background);
    --arrow-background-hover: var(--button-background-hover);

    /* section */
    /* ------------------------------------------- */
    /* secion header */
    --section-header-background: rgba(43, 43, 43, 0.5);
    --section-header-background-hover: rgba(0, 0, 0, 0.5);
    /* section body */
    --section-body-background: rgba(56, 56, 56, 0.3);
    --section-body-background-solid: rgb(56, 56, 56);
    --section-heading-underline: rgba(56, 56, 56, 1);

    /* fancy button */
    --fancybutton-background: rgba(56, 56, 56, 0.3);
    --fancybutton-background-hover: rgba(56, 56, 56, 0.9);

    /* modal */
    /* ------------------------------------------- */
    --modal-background-color: rgba(0, 0, 0, 0.4);
    --modal-border-color: rgba(255, 255, 255, 0.414);
    --modal-tabs-background-color: rgba(255, 255, 255, 0.2);
    --modal-window-background-color: rgba(70, 70, 70, 0.6);
    --modal-window-header-text-color: rgb(255, 255, 255);
    --modal-window-header-background-color: rgb(56, 56, 56);
}