@import url("https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@300;400;700&family=Lexend:wght@400;700&family=Noto+Sans+SC:wght@400;700&display=swap");

:root {
    --left_margin: 232px;
    --right_margin: 10px;
    --body_bg: #131113;
    --container_bg: #201d20;
    --highlight: #252225;
    --button_bg: #2d2a2d;
    --button_shadow: 0 2px 0 #1c1c1c, 0 2px 3px 1px #0d0d0d;
    --button_bg_hover: #3a363a;
    --button_color_disabled: gray;
    --button_bg_disabled: #333;
    --color: #fff;
    --win_color: lime;
    --lose_color: gray;
    --gold_lighter: #f3d9ae;
    --gold_light: #f8d294;
    --gold: #fdc66c;
    --gold_dark: #b38228;
    --gold_darker: #7e5a19;
    --purple_lighter: #ffabd0;
    --purple_light: #ff64a7;
    --purple: #e92277;
    --purple_dark: #b30a53;
    --purple_darker: #3f001c;
    --purple_o50: rgba(233, 32, 119, .5);
    --light: #fff;
    --gray_lighter: #8e898c;
    --gray_light: #757374;
    --gray: #5f5d5e;
    --gray_dark: #302f2f;
    --gray_darker: #242323;
    --dark: #111011;
    --accent_lighter: var(--purple_lighter);
    --accent_light: var(--purple_light);
    --accent: var(--purple);
    --accent_dark: var(--purple_dark);
    --accent_darker: var(--purple_darker);
    --invalid_bg_color: rgba(97, 0, 0, .5);
    --container_background_color: rgba(11, 9, 27, .5);
    --container_border_color: #292640;
    --container_background_color: rgba(31, 31, 31, .6);
    --container_background_color: hsla(0, 0%, 50%, .1);
    --container_border_color: rgba(46, 46, 46, .6);
    --container_border_color: rgba(97, 97, 97, .2);
    --container_border_radius: 4px;
    --font_mono: "Chivo Mono", monospace;
    --onboard-modal-background: transparent;
    --onboard-main-scroll-container-background: var(--container_bg);
    --w3o-border-color: transparent !important;
    --onboard-connect-sidebar-background: var(--container_bg);
    --onboard-wallet-button-color: #fff;
    --onboard-wallet-button-color-hover: #fff;
    --onboard-connect-sidebar-border-color: var(--button_bg);
    --w3o-border-color: red;
    --onboard-wallet-button-background: var(--button_bg);
    --onboard-wallet-button-background-hover: var(--button_bg_hover);
    --onboard-connect-sidebar-progress-color: var(--purple_lighter);
    --onboard-connect-sidebar-progress-background: var(--purple);
    --onboard-font-family-normal: "Lexend", sans-serif
}

@supports (color:hsl(0 0% 0%/0)) {
    :root {
        --body_bg: #201d20;
        --container_bg: #2a272a;
        --highlight: #353135;
        --button_bg: #3a363a;
        --button_shadow: 0 2px 0 #2a272a, 0 2px 3px 1px #151415;
        --button_bg_hover: #4d474d;
        --button_color_disabled: #827d82
    }
}

body, html {
    padding: 0;
    margin: 0;
    font-family: Lexend, Noto Sans SC, sans-serif;
    color: var(--light)
}

body {
    background-attachment: fixed;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
    background: var(--body_bg)
}

html {
    min-height: 100vh;
    background-color: var(--dark)
}

a {
    color: inherit;
    text-decoration: none
}

* {
    box-sizing: border-box
}

::selection {
    color: var(--dark);
    background: var(--purple_light)
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0
}

input[type=number] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-appearance: textfield !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important
}

::-webkit-scrollbar {
    width: 5px;
    height: 6px
}

::-webkit-scrollbar-thumb {
    background-color: var(--gray_dark);
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray)
}

::-webkit-scrollbar-corner {
    background: transparent
}

* {
    scrollbar-color: var(--gray) var(--body_bg);
    scrollbar-width: thin
}

.address {
    font-family: Roboto Mono, sans-serif
}

input {
    font-family: Poppins, sans-serif
}

.container {
    background-color: var(--container_background_color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--container_border_color);
    border-radius: var(--container_border_radius)
}

.gold_title {
    text-transform: uppercase;
    font-size: 50px;
    letter-spacing: 3px;
    -webkit-text-stroke: 5px transparent;
    text-shadow: 0 0 5px var(--gold)
}

.gold_subtitle, .gold_title {
    padding: 0 10px;
    display: grid;
    grid-template-areas: "overlap";
    place-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-clip: text;
    -webkit-background-clip: text;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    grid-area: overlap;
    text-align: center;
    background-image: linear-gradient(0deg, var(--gold) 0, var(--gold_dark) 33%, var(--gold) 35%);
    color: rgba(0, 0, 0, .15)
}

.gold_subtitle {
    font-size: 25px;
    letter-spacing: 1px;
    -webkit-text-stroke: 1px transparent
}

button {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit
}

button:not(:disabled) {
    cursor: pointer
}

.button {
    font-weight: 700;
    padding: 10px;
    transition: all .1s linear;
    border-radius: 4px;
    font-family: Lexend, sans-serif;
    font-size: 16px;
    color: var(--accent);
    box-shadow: 0 0 2px var(--accent), inset 0 0 2px var(--accent);
    border: 1px solid var(--accent);
    background-color: var(--button_bg);
    display: flex;
    justify-content: center;
    align-items: center
}

.button:not(:disabled):hover {
    background-color: var(--accent);
    color: #fff;
    cursor: pointer
}

.button:disabled {
    color: var(--gray_lighter);
    cursor: default;
    border-color: var(--container_border_color);
    background-color: var(--container_border_color);
    box-shadow: 0 0 3px var(--container_border_color), inset 0 0 3px var(--container_border_color)
}

.button:not(:disabled) {
    background-image: linear-gradient(0deg, var(--gold) 0, var(--gold_dark) 23%, var(--gold) 27%);
    color: #000;
    border-color: var(--gold);
    cursor: pointer;
    box-shadow: 0 0 3px var(--gold), inset 0 0 3px var(--gold)
}

.button:not(:disabled):hover {
    color: #000;
    box-shadow: 0 0 10px var(--gold), inset 0 0 10px var(--gold)
}

.button:not(:disabled):hover svg {
    fill: #000
}

.popup-arrow {
    color: var(--container_bg)
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -webkit-appearance: textfield;
    appearance: textfield;
    -moz-appearance: textfield
}

input {
    border-radius: 0
}