:root {
    --theme-color-white0: #fefeff;
    --theme-color-white1: #f3f3f7;
    --theme-color-white2: #dfe2ed;
    --theme-color-white3: #cbcbcd;
    --theme-color-gray: #a0a0a0;
    --theme-color-black1: #111111;
    --theme-color-black2: #232323;
    --theme-color-black3: #343434;

    --theme-color-main: #f1843f;
    --theme-color-main-button: #dc593a;
    --theme-color-button: #427dad;
    --theme-color-link: #2a71ab;
    --theme-color-second: #3a6588;
    --theme-color-button-hover: #00009009;
    --theme-color-row-hover: #00007009;

    --color-error: #ff9e9d;
    --color-error-inverse: #cb484e;
    --color-success: #71de5d;
    --color-success-inverse: #008b00;
    --color-warning: #dea25d;
    --color-warning-inverse: #8b4a00;
    --color-info: #79d5e6;
    --color-info-inverse: #178494;

    --mobile-width: 480px;

    --main-radius: 0.5rem;
    --title-radius: 1.0rem;
    --gap-0-5: 0.2rem;
    --gap-1: 0.4rem;
    --gap-1-5: 0.6rem;
    --gap-2: 0.8rem;
    --gap-2-5: 1rem;
    --gap-3: 1.2rem;
    --gap-4: 1.6rem;
    --gap-5: 2.0rem;
    --gap-6: 2.4rem;
    --gap-8: 3.2rem;
    --gap-16: 6.4rem;

    --grid-width-minmax: 30rem;

    font-size: 14px;

    transition: all 200ms;
}

@media screen and (max-width: 800px) {
    :root {
        --gap-0-5: 0.1rem;
        --gap-1: 0.2rem;
        --gap-1-5: 0.3rem;
        --gap-2: 0.4rem;
        --gap-2-5: 0.5rem;
        --gap-3: 0.6rem;
        --gap-4: 0.8rem;
        --gap-5: 1.0rem;
        --gap-6: 1.2rem;
        --gap-8: 1.6rem;
        --gap-16: 3.2rem;

        --grid-width-minmax: 20rem;

        font-size: 13px;
    }
}

@font-face {
    font-family: "DejaVu Sans Mono";
    font-style: normal;
    font-weight: normal;
    src: local(DejaVu Sans Mono), local(DejaVuSansMono),
    url("font/DejaVuSansMono.woff") format("woff");
}

@font-face {
    font-family: "DejaVu Sans Mono";
    font-style: normal;
    font-weight: bold;
    src: local(DejaVu Sans Mono Bold), local(DejaVuSansMono-Bold),
    url("font/DejaVuSansMono-Bold.woff") format("woff");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    src: local(Inter Light), local(Inter-Light),
    url("font/Inter-Light.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    src: local(Inter Regular), local(Inter-Regular),
    url("font/Inter-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    src: local(Inter Medium), local(Inter-Medium),
    url("font/Inter-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    src: local(Inter SemiBold), local(Inter-SemiBold),
    url("font/Inter-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    src: local(Inter Bold), local(Inter-Bold),
    url("font/Inter-Bold.ttf") format("truetype");
}

html {
    width: 100%;
    height: 100%;
    font-family: "Inter", ui-sans-serif, sans-serif;
    line-height: 1.5;
}

body {
    background: var(--theme-color-white1);
    background-attachment: fixed;
    min-height: 100%;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    color: var(--theme-color-black2);
    /*    background-color: var(--theme-color-white1);*/
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}

/* Scrollbar */
/* Works on Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--theme-color-second) var(--theme-color-white0);
}

@media screen and (max-width: 800px) {
    * {
        scrollbar-width: thin;
    }
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: var(--gap-1-5);
    height: var(--gap-1-5);
}

*::-webkit-scrollbar-track {
    background: var(--theme-color-white0);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--theme-color-second);
    border-radius: var(--main-radius);
    border: 1px solid var(--theme-color-white0);
}

::placeholder {
    color: var(--theme-color-white3);
}

a {
    color: var(--theme-color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

input, select, textarea {
    padding: var(--gap-1) var(--gap-1-5);
    color: var(--theme-color-black2);
    background-color: var(--theme-color-white0);
    border: 2px solid var(--theme-color-white3);
    border-radius: var(--main-radius);
    margin-top: calc(-1 * var(--gap-1));
    width: 100%;
    transition: border linear .2s, box-shadow linear .2s;
}

input[type="checkbox"] {
    margin-top: 0;
    width: auto;
}

input[type="radio"] {
    vertical-align: middle;
}

input:disabled, select:disabled, textarea:disabled {
    color: var(--theme-color-gray);
}

textarea {
    height: 12rem;
}

textarea:focus,
input:focus {
    outline: 0;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(225, 225, 225, 0.6);
}