@font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/static/dojo/fonts/FiraCode-Bold.ttf);
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/static/dojo/fonts/FiraSans-Bold.ttf);
}

@font-face {
    font-family: 'Fira Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/static/dojo/fonts/FiraSans-Italic.ttf);
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/dojo/fonts/FiraSans-Regular.ttf);
}

@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/dojo/fonts/FiraMono-Regular.ttf);
}

@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/static/dojo/fonts/FiraMono-Medium.ttf);
}

@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/static/dojo/fonts/FiraMono-Bold.ttf);
}

@property --color-gradient-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #FFF;
}

@property --color-gradient-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #000;
}


:root {
    --color-main: hsl(263, 50%, 32%);
    --color-main-bright: hsl(253, 76%, 72%);
    --color-main-transparent: hsla(253, 75%, 72%, 0.75);
    --color-text: hsl(168, 6%, 85%);
    --color-muted: hsl(201, 10%, 66%);
    --color-panel: hsl(195, 26%, 13%);
    --color-highlight: hsl(187, 49%, 84%);
    --color-text-selected: #003d35;
    --color-header: #FFFFFF;
    --color-bg: #002333;
    --color-button: hsl(209, 53%, 39%);
    --color-dark: #3a4e61;
    --color-black: #111;
    --color-gold: #f2ebb3;
    --color-red-first: rgb(128, 1, 1);
    --color-red-second: rgb(187, 0, 0);
    --color-red-third: #df3d03;
    --color-blue-first: rgb(10, 52, 72);
    --color-blue-second: rgb(48, 106, 168);
    --color-green-first: rgb(36, 78, 14);
    --color-green-second: rgb(18, 208, 94);
    --color-yellow-first: rgb(136, 122, 8);
    --color-yellow-second: rgb(215, 219, 8);
    --color-orange-first: rgb(134, 88, 12);
    --color-orange-second: rgb(232, 128, 47);
}

::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
    opacity: 0.5;
}

::-webkit-scrollbar-thumb {
    border: none !important;
    border-radius: 1em !important;
    cursor: pointer;
    box-shadow: 0 0 19 10px var(--color-main-transparent) inset;
}

::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(0deg, var(--color-bg), var(--color-main)) !important;
}

::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(-90deg, var(--color-bg), var(--color-main)) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-main-bright) !important;
}

::-webkit-scrollbar-thumb:active {
    background: var(--color-main-transparent);
}
::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-corner {
    background: var(--color-bg);
}

body {
    --google-font-color-foldit: none;
}

* {
    -webkit-tap-highlight-color: transparent;
}