@font-face {
    font-family: 'Tech Medium';
    src: url('../fonts/TechMedium.woff2');
}

@font-face {
    font-family: 'Tech Regular';
    src: url('../fonts/TechRegular.woff2');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Tech Regular', sans-serif;
}

.color {
    --cl-modalBg: #1e2329;
    --cl-popupBg: #1e2329;
    --cl-bg1: #181a20;
    --cl-bg2: #0b0e11;
    --cl-bg3: #2b3139;
    --cl-bg4: #5e6673;
    --cl-bg5: #181a20;
    --cl-bg6: #0b0e11;
    --cl-line: #474d57;
    --cl-liteBg1: #20262d;
    --cl-liteBg2: #191a1f;
    --cl-textPrimary: #eaecef;
    --cl-textSecondary: #b7bdc6;
    --cl-textThird: #848e9c;
    --cl-textPlaceholder: #5e6673;
    --cl-textDisabled: #5e6673;
    --cl-textYellow: #f0b90b;
    --cl-textBuy: #0ecb81;
    --cl-textSell: #f6465d;
    --cl-textToast: #a37200;
    --cl-textWhite: #fff;
    --cl-textMuted: #444;
    --cl-lines-primary: #272a2e;
    --cl-lines-light: #272a2e;
    --cl-lines-dark: #272a2e;
    --cl-iconNormal: #848e9c;
    --cl-alertYellowBg: #281a00;
    --cl-badgeYellowBg: #3c2601;
    --cl-outlineHover: #6a4403;
    --cl-primaryHover: #fcd535;
    --cl-primary: #f0b90b;
    --cl-toastFailBg: #35141d;
    --cl-depthSellBg: #35141d;
    --cl-sellHover: #ff707e;
    --cl-sell: #f6465d;
    --cl-toastSuccessBg: #102821;
    --cl-depthBuyBg: #102821;
    --cl-buyHover: #32d993;
    --cl-buy: #0ecb81;
    --cl-invBg: #2b3139;
    --cl-success: #0ecb81;
    --cl-error: #f6465d;
    --cl-successBg: #102821;
    --cl-errorBg: #35141d;
    --cl-disableBg: #474d57;
}

body {
    padding-top: 3em;
    background: #2b3139;
    color: #eaecef;
}

main {
    max-width: 600px;
    margin: 0 auto;
}

button {
    padding: 0.8em 1em 0.7em 1em;
    background: #f0b90b;
    color: #202630;
    font-family: 'Tech Medium', sans-serif;
    border: none;
    border-radius: 5px;
    margin: 1em;
}

button:hover {
    color: #fff;
    cursor: pointer;
}

h1 {
    color: #f0b91a;
}

p {
    line-height: 1.1;
    text-align: justify;
}

.main {
    display: flex;
    flex-direction: column;

    align-items: center;
}

.logo {
    height: 2.2em;
    color: #f0b91a;
}

.dark-op {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5em;
    margin: 1em;
    gap: 1em;

    background: #1f2430;
    border: 1px solid #444;
    border-radius: 1em;
}

.btn-container {
    display: flex;
    flex-direction: row;
}

.c-title {
    font-size: 1.5em;
    font-family: 'Tech Medium';
    color: #0ecb81;
}