:root {
    /* Primary colors */
    --color-primary-light: #8BEFE0;
    --color-primary-main: #1DC8CC;
    --color-primary-dark: #005cb2;

    /* Secondary colors */
    --color-secondary-light: #9644EE;
    --color-secondary-main: #7d2bd5;
    --color-secondary-dark: #5120C0;

    /* Status colors */
    --color-success-main: #7EA83E;
    --color-warning-main: #FFD600;
    --color-danger-main: #B63333;
    --color-info-main: #00BFFF;

    /* Text colors */
    --color-text-primary: #FFF;
    --color-text-secondary: #171717;
    --color-text-dense: #e0e0e0;

    /* Areas */
    --color-fg: #2A2A2E;
    --color-bg: #1D1D21;

    --color-shadow-main: #1e1d1f;

    /* Forms */
    --color-form-default: #808080; /* buttons, field outlines */
    --color-form-default-pressed: #A1A1A1;
    --color-form-field: rgba(255, 255, 255, 0.08);

    --color-form-group-1: #484848;
    --color-form-group-2: #71512B;
    --color-form-group-3: #2A5D6A;
    --color-form-group-4: #662671;

    --color-nav-button: #2A2A2E;
    --color-nav-button-hover: var(--color-secondary-dark);
}

html {
    min-height: 100vh;
    background: rgb(11, 22, 34);
    padding: 0;
}

body {
    margin: 0;
    background: rgb(11, 22, 34);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
}

* {
    font-weight: 200;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 400;
}

curio-ux {
    /*  To resemble Clarity Design  */
    color: rgb(227, 234, 237);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 200;
    background: #1d1d21;
}

.app-head {
    width: 100%;
}

.head-left {
    display: inline-block;
}

.head-right {
    display: inline-block;
    float: right;
}

a {
    text-decoration: none;
}

a:link,
a:visited {
    color: #adf7ad;
}

a:hover {
    color: #88cc60;
}

.success {
    color: greenyellow;
}

.warning {
    color: yellow;
}

.error {
    color: red;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    src: url('/ux/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 400;
    src: url('/ux/fonts/JetBrainsMono-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 200;
    src: url('/ux/fonts/JetBrainsMono-ExtraLight.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 300;
    src: url('/ux/fonts/JetBrainsMono-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100;
    src: url('/ux/fonts/JetBrainsMono-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    src: url('/ux/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    src: url('/ux/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 800;
    src: url('/ux/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
}
