:root {
    --base-purple: #e27ce2;
    --base-dark-purple: #730173;
    --base-darker-purple: #380238;
    --base-gold: #daa520;
    --super-light-purple: #ffc7ff;
    --loguesdk-base: gold;
    --bet-green: #0bd80b;
    --in-play-green: #0fff00;
    --rack-color: rgb(119, 90, 250);
    --background-color: #170317;
}

/* Sixtyfour math */
@font-face {
    font-family: 'Sixtyfour';
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/Sixtyfour/SixtyfourMath.woff2") format('woff2');
    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
    font-display: swap;
}

/* Sixtyfour symbols */
@font-face {
    font-family: 'Sixtyfour';
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/Sixtyfour/SixtyfourSymbols.woff2") format('woff2');
    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
    font-display: swap;
}

/* Sixtyfour latin-ext */
@font-face {
    font-family: 'Sixtyfour';
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/Sixtyfour/SixtyfourLatinExt.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
}

/* Sixtyfour latin */
@font-face {
    font-family: 'Sixtyfour';
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/Sixtyfour/SixtyfourLatin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}

/* Megrim latin-ext */
@font-face {
    font-family: 'Megrim';
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/Megrim/MegrimLatinExt.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Megrim latin */
@font-face {
    font-family: 'Megrim';
    font-style: normal;
    font-weight: 400;

    src: url("./fonts/Megrim/MegrimLatin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body,
.craps_table {
    overflow-y: hidden;
    scrollbar-width: none;
    background: var(--background-color);
    font-size: clamp(0.4rem, 1.3vw, 2.7rem);
    font-family: Megrim, Helvetica, sans-serif;
    user-select: none;
}

h1,
h2,
h3 {
    text-align: center;
    color: goldenrod;
}

img {
    width: clamp(300px, 80%, 851px);
}

.main_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
    width: 99vw;
    height: 99vh;
}

.new_grid {
    border: 1px solid var(--base-purple);
    font-size: clamp(0.4rem, 1.4vw, 7rem);
    color: var(--base-purple);
    text-align: center;
    justify-content: center;
    align-content: center;
}

/* Grid Rows */

.grid_row_1 {
    grid-row: 1;
}

.grid_row_2 {
    grid-row: 2;
}

.grid_row_3 {
    grid-row: 3;
}

.grid_row_4 {
    grid-row: 4;
}

.grid_row_5 {
    grid-row: 5;
}

.grid_row_6 {
    grid-row: 6;
}

.grid_row_7 {
    grid-row: 7;
}

.grid_row_8 {
    grid-row: 8;
}

.grid_row_9 {
    grid-row: 9;
}

.grid_row_10 {
    grid-row: 10;
}

.grid_row_11 {
    grid-row: 11;
}

.grid_row_12 {
    grid-row: 12;
}

.grid_row_13 {
    grid-row: 13;
}

.grid_row_14 {
    grid-row: 14;
}

.grid_row_2_4 {
    grid-row: 2 / 4;
}

.grid_row_2_5 {
    grid-row: 2 / 5;
}

.grid_row_2_6 {
    grid-row: 2 / 6;
}

.grid_row_2_7 {
    grid-row: 2 / 7;
}

.grid_row_2_9 {
    grid-row: 2 / 9;
}

.grid_row_2_10 {
    grid-row: 2 / 10;
}

.grid_row_7_9 {
    grid-row: 7 / 9;
}

.grid_row_10_13 {
    grid-row: 10 / 13;
}

.grid_row_11_14 {
    grid-row: 11 / 14;
}

.grid_row_12_14 {
    grid-row: 12 / 14;
}

/* Grid Columns */
.grid_col_1 {
    grid-column: 1;
}

.grid_col_2 {
    grid-column: 2;
}

.grid_col_3 {
    grid-column: 3;
}

.grid_col_4 {
    grid-column: 4;
}

.grid_col_5 {
    grid-column: 5;
}

.grid_col_6 {
    grid-column: 6;
}

.grid_col_7 {
    grid-column: 7;
}

.grid_col_8 {
    grid-column: 8;
}

.grid_col_9 {
    grid-column: 9;
}

.grid_col_10 {
    grid-column: 10;
}

.grid_col_11 {
    grid-column: 11;
}

.grid_col_12 {
    grid-column: 12;
}

.grid_col_13 {
    grid-column: 13;
}

.grid_col_14 {
    grid-column: 14;
}

.grid_col_15 {
    grid-column: 15;
}

/* Alt Columns */
.grid_col_1_3 {
    grid-column: 1 / 3;
}

.grid_col_1_4 {
    grid-column: 1 / 4;
}

.grid_col_3_6 {
    grid-column: 3 / 6;
}

.grid_col_3_8 {
    grid-column: 3 / 8;
}

.grid_col_3_10 {
    grid-column: 3 / 10;
}

.grid_col_4_10 {
    grid-column: 4 / 10;
}

.grid_col_4_13 {
    grid-column: 4 / 13;
}

.grid_col_1_11 {
    grid-column: 1 / 11;
}

.grid_col_2_11 {
    grid-column: 2 / 11;
}

.grid_col_7_10 {
    grid-column: 7 / 10;
}

.grid_col_8_10 {
    grid-column: 8 / 10;
}

.grid_col_9_11 {
    grid-column: 9 / 11;
}

.grid_col_10_13 {
    grid-column: 10 / 13;
}

.grid_col_10_16 {
    grid-column: 10 / 16;
}

.grid_col_11_14 {
    grid-column: 11 / 14;
}

.grid_col_11_16 {
    grid-column: 11 / 16;
}

.grid_col_13_15 {
    grid-column: 13 / 15;
}

.grid_col_13_16 {
    grid-column: 13 / 16;
}

.grid_col_14_16 {
    grid-column: 14 / 16;
}

/* Border */
.bord_rad_50 {
    border-radius: 50%;
}

.bord_white {
    border: 2px solid white;
}

.curve_bot_right_bord {
    border-bottom-right-radius: 0.6vw 0.6vw;
}

.curve_bot_left_bord {
    border-bottom-left-radius: 0.6vw 0.6vw;
}

.curve_top_right_bord {
    border-top-right-radius: 0.6vw 0.6vw;
}

.curve_top_left_bord {
    border-top-left-radius: 0.6vw 0.6vw;
}

.curve_hard_top_left_bord {
    border-top-left-radius: 80px 80px;
}

.curve_hard_bot_left_bord {
    border-bottom-left-radius: 80px 80px;
}

.curve_hard_bot_right_bord {
    border-bottom-right-radius: 80px 80px;
}

.no_top_border {
    border-top: none;
}

.no_right_border {
    border-right: none;
}

.no_bottom_border {
    border-bottom: none;
}

.no_left_border {
    border-left: none;
}

.no_border {
    border: none;
}

.img_container {
    display: flex;
    justify-content: center;
}

.svg_dice {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: stretch;
    align-items: center;
    align-content: space-around;
    flex-direction: row;
}

.color_base_purple {
    color: var(--base-purple);
}

.color_in_play_green {
    color: var(--in-play-green);
}

.color_rack {
    color: var(--rack-color);
}

.padding_1 {
    padding: 0.3em;
}

.padding_2 {
    padding: 0.3em 0 0 0.1em;
}

.width_100p {
    width: 100%;
}

.width_6_vh {
    width: 6vh;
}

.height_100p {
    height: 100%;
}

.max_height_14p7_vh {
    max-height: 14.7vh;
}

.no_user_select {
    user-select: none;
}

.position_rel {
    position: relative;
}

.position_abs {
    position: absolute;
}

.display_flex {
    display: flex;
}

.justify_content_center {
    justify-content: center;
}

.visible {
    visibility: visible;
}

.no_visible {
    visibility: visible;
}

.top_neg_10p {
    top: -10%;
}

.left_20p {
    left: 20%;
}

.left_33p {
    left: 33%;
}

.rotate-320 {
    rotate: 320deg;
}

.rotate-325 {
    rotate: 325deg;
}

.rotate-330 {
    rotate: 330deg;
}

.rotate-335 {
    rotate: 335deg;
}

.rotate-340 {
    rotate: 340deg;
}

.rotate-345 {
    rotate: 345deg;
}

.rotate-350 {
    rotate: 350deg;
}

.rotate-355 {
    rotate: 355deg;
}

.rotate-360 {
    rotate: 360deg;
}

.rotate-365 {
    rotate: 365deg;
}

.rotate-370 {
    rotate: 370deg;
}

.rotate-375 {
    rotate: 375deg;
}

.rotate-380 {
    rotate: 380deg;
}

.rotate-385 {
    rotate: 385deg;
}

.rotate-390 {
    rotate: 390deg;
}

.rotate-395 {
    rotate: 395deg;
}

.rotate-400 {
    rotate: 400deg;
}

#point_puck {
    z-index: 99;
}

.font_fam_helv {
    font-family: Helvetica, sans-serif, Ariel;
}

.rl_vert_write {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.lr_vert_write {
    writing-mode: sideways-lr;
}

.passLine {
    display: flex;
    flex-direction: left;
    justify-content: center;
}


#come,
#point_4,
#point_5,
#point_8,
#point_10,
#pass_line,
#passLine,
#no_pass_bar,
#no_pass_bar_2 {
    font-size: clamp(0.4rem, 3vw, 2.7rem);
}

#horn {
    font-size: clamp(0.4rem, 3.5vw, 2.7rem);
}

#any_7,
#any_craps {
    font-size: clamp(0.4rem, 2.1vw, 2.7rem);
}


sup,
sub {
    font-size: clamp(0.4rem, 1.5vw, 2.7rem);
}

#e_bet,
#c_bet {
    font-size: clamp(0.1rem, 2.3vw, 2rem);
}

.font_size_4p5_vh {
    font-size: clamp(0.4rem, 4.5vh, 3.4rem);
}

.font_size_3p3_vw {
    font-size: clamp(0.4rem, 3.3vw, 4.7rem);
}

.font_size_3p1_vh {
    font-size: clamp(0.4rem, 3.1vh, 2.7rem)
}

#any_craps {
    border-bottom-left-radius: 80px 80px;
    border-bottom-right-radius: 80px 80px;
    border-style: none solid solid solid;
}

#dice_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    grid-column: 10 / 13;
    grid-row: 6 / 9;
}

#bet_box {
    grid-column: 1 / 13;
    grid-row: 11 / 14;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: rgba(196, 109, 196, 0.1);
}

#dialog_box {
    grid-column: 2 / 12;
    grid-row: 11 / 14;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: rgba(196, 109, 196, 0.1);
    pointer-events: none;
    overflow-y: scroll;
}

#bet_box,
#bet_box_incr,
#bet_box_decr,
#bet_box_title,
#place_bet,
#bet_box_change_bet,
#bet_box_is_on,
#bet_amount_option_container {
    visibility: hidden;
    color: var(--base-purple);
    text-align: center;
    align-content: center;
}



.trans_1s_all {
    transition: all 1s ease-in-out;

}

.trans_0p5_all {
    transition: all 0.5s ease-in-out;
}

#bet_box_curr,
#bet_box_upd {
    text-align: center;
    align-content: center;
    font-size: clamp(0.4rem, 2vw, 2.7rem);
}

#bet_box_curr {
    grid-column: 8 / 10;
    color: var(--base-purple);
}

.dice-svg {
    width: 100%;
    height: 100%;
}

#place_bet {
    animation: 1.4s ease-in infinite place-bet-reminder;
    justify-content: center;
    width: 80%;
    height: 100%;
    font-size: clamp(0.4rem, 2vw, 2.7rem);
}

#bet_box_incr,
#bet_box_decr,
#place_bet,
#bet_box_change_bet {
    font-family: Megrim, Helvetica, sans-serif;
    color: #380238;
}

#bet_box_change_bet {
    transform: scale(0.7);
    font-size: clamp(0.4rem, 2vw, 2.7rem);
}

#bet_box_upd {
    color: var(--bet-green);
    grid-column: 10 / 13;
}

#bet_box_incr,
#bet_box_decr {
    margin: 0 auto;
    font-size: clamp(0.8rem, 6vw, 40rem);
}

#bet_box_title {
    grid-column: 3 / 8;
    text-align: center;
    align-content: center;
    background-color: transparent;
    background-clip: content-box, content-box, padding-box;
    margin: 2px;
    font-size: clamp(0.4rem, 2.4vw, 2.7rem);
}

#bet_amount_option_container {
    display: flex;
    transition: 0.3s;
    flex-direction: row;
}

.rotate_neg_40_deg {
    transform: rotate(-40deg);
}

.height_50 {
    height: 50%;
}



.bet_amount_option {
    z-index: 9;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    filter: brightness(0.8);
    background-color: transparent;
    border: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.bet_amount_option:hover {
    transform: translateY(-1.5vh);
}

.bet_amount_option:active {
    transform: translateY(-1.5vh) rotateY(-25deg) rotateX(25deg);
}





.hasBBel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.chips_can_be_placed {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.buy_place {
    border: 1px solid var(--base-purple);
    font-size: clamp(0.4rem, 1vw, 7rem);
    color: var(--base-purple);
    text-align: center;
}

.odds {
    margin: 3%;
    z-index: 1;
}

#pass_odds_o {
    border-radius: 30% 0 30% 0;
    border-bottom-right-radius: 80px 80px;
}

#no_pass_odds_o {
    border-radius: 0 0 0 30%;
    border-top-right-radius: 80px 80px;
}

#e_bet,
#c_bet {
    border-radius: 50%;
}

#bank_box {
    border: none;
    display: grid;
    align-content: stretch;
    align-items: start;

}

#clearButton {
    color: var(--base-purple);
    display: flex;
    justify-content: center;
    align-items: center;
}

#help_popover {
    width: 80vw;
    height: 80vh;
    background: #3a0139;
    border: 1.1em ridge goldenrod;
    border-radius: 2em;
}

#htp_btn {
    color: var(--base-purple);
    border: 0.1em ridge goldenrod;
    border-radius: 0.3em;
    max-height: 6vh;
    width: 80%;
    font-size: clamp(0.4rem, 1.2vw, 7rem);
    background: none;
    align-content: center;
    font-family: Megrim, Helvetica, sans-serif;
}

#settings_btn {
    padding: 0.8vw;
    background: none;
}

#settings_popover {
    width: 80vw;
    height: 80vh;
    background: var(--base-darker-purple);
    border: 1.1em ridge var(--base-gold);
    border-radius: 2em;
}

#htp_btn,
#settings_btn {
    transition: 1.3s;
}

#htp_btn:hover {
    animation: rainbow-color 0.8s linear infinite;
    transform: scale(1.13);
}

#settings_btn:hover {
    animation: rainbow-svg 0.8s linear infinite;
}

#table_banner:hover {
    animation: rainbow-color 8s ease-in;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

.rotate_instructions {
    visibility: collapse;
    display: none;
}



[popover] {
    transition: all 0.5s allow-discrete;
    transform: translateY(3rem);

    &:popover-open {


        transform: none;

        @starting-style {
            & {
                transform: translateX(-1rem);
            }
        }
    }
}

[popover]::backdrop {
    backdrop-filter: blur(3px);
}

@media (max-height: 550px) {
    .core-button {
        border: 0.2rem outset var(--base-purple);
    }
}

.core-button {
    border-radius: clamp(2px, 0.313rem, 8px);
    transition: all 0.3s linear;
    background-color: var(--base-purple);
    border: clamp(0.3px, 0.313rem, 4px) outset var(--base-purple);
    color: #380238;
    font-size: clamp(0.2rem, 0.9em, 2rem);
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.core-button:hover {
    transform: scale(1.07);
}

.core-button:active {
    border-radius: 0.313rem;
    transform: translateY(2px);
}

.chipSpan {
    transition: all 1s ease-in-out;
}

.bank_item {
    font-family: Sixtyfour, Helvetica, sans-serif;
    font-size: clamp(0.4rem, 1.2vw, 2.7rem);
    box-shadow: inset 0 1em 0.8em -0.7em #e2ddd080;
    text-align: center;
    align-content: center;
    border: clamp(0.05em, 0.7rem, 0.3em) ridge var(--base-gold);
    border-bottom: none;
    border-radius: 40px 40px 0 0;
}

.bottom_border {
    box-shadow: inset 0 -1em 0.8em -0.7em #e2ddd080;
    border-bottom: clamp(0.05em, 0.7rem, 0.3em) ridge var(--base-gold);
}

.top_border {
    box-shadow: inset 0 1em 0.8em -0.7em #e2ddd080;
    border-top: clamp(0.05em, 0.7rem, 0.3em) ridge var(--base-gold);
}

#help_popover_section {
    display: grid;
    gap: 0.5em;
    justify-content: center;
    align-items: center;
}

.casino_letters {
    letter-spacing: 3vw;
    box-shadow: inset 0 -1em 0.8em -0.7em #e2ddd060;
    font-size: clamp(0.4vw, 5rem, 2vw);
    display: flex;
    background: linear-gradient(80deg, white, gold, var(--base-purple), var(--base-dark-purple), var(--base-purple), gold, white) -100%/ 200%;
    align-items: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    justify-content: center;
    font-family: Sixtyfour, Helvetica, sans-serif;
    border: clamp(0.05em, 0.7rem, 0.3em) ridge var(--base-gold);
    border-top: none;
    border-radius: 0 0 40px 40px;
    animation: text-shimmer 6s linear infinite;
}

.post-link {
    color: white;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
    background: linear-gradient(-72deg, rgba(150, 127, 0, 0.18), rgb(85, 64, 12), rgb(49, 42, 1), rgb(88, 76, 2), rgba(122, 92, 18, 0.32));
    border: 3px inset goldenrod;
    border-top: none;
    border-radius: 0 0 0.7em 0.7em;
    padding: 0.6em 0.3em 0.3em 0.3em;
    margin-top: -2em;
    z-index: 999;
    min-width: 10vw;
}

#banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.post-container {
    display: flex;
    justify-content: center;
}

.post {
    max-width: 35em;
    text-align: left;
    color: var(--super-light-purple);
    background: rgba(109, 5, 92, 0.205);
    padding: 0.4em;
    width: 100%;
    border-radius: 0.2em;
    font-family: Garamond, serif;
    font-size: clamp(1rem, 1vw, 2.7rem);
}

.dropdown {
    position: relative;
    display: inline-block;
}

.htp-dropdown-menu {
    z-index: 9;
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;
    list-style: none;
    /** Remove list bullets */
    width: fit-content;
    /** Set the width to 100% of it's parent */
    padding: 0;
    text-align: start;
}

.rules-dropdown-menu {
    z-index: 9;
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;
    list-style: none;
    /** Remove list bullets */
    width: fit-content;
    /** Set the width to 100% of it's parent */
    padding: 0;
    text-align: start;
}

.dropdown:hover .htp-dropdown-menu {
    display: flex;
    flex-direction: column;
    background-color: var(--base-purple);
    border-radius: 0 0 0.7em 0.7em;
    padding: 0.8em;
    font-size: 70%;
}

.dropdown:hover .rules-dropdown-menu {
    display: flex;
    flex-direction: column;
    background-color: var(--base-purple);
    border-radius: 0 0 0.7em 0.7em;
    padding: 0.8em;
    font-size: 70%;
}


@keyframes error-red {

    100%,
    0% {
        background-color: transparent;
    }

    50% {
        background-color: rgb(105, 0, 0);
    }
}

@keyframes rainbow-color {

    100%,
    0% {
        border-color: rgb(255, 0, 0);
        color: rgb(255, 0, 0);
    }

    8% {
        border-color: rgb(255, 127, 0);
        color: rgb(255, 127, 0);
    }

    16% {
        border-color: rgb(255, 255, 0);
        color: rgb(255, 255, 0);
    }

    25% {
        border-color: rgb(127, 255, 0);
        color: rgb(127, 255, 0);
    }

    33% {
        border-color: rgb(0, 255, 0);
        color: rgb(0, 255, 0);
    }

    41% {
        border-color: rgb(0, 255, 127);
        color: rgb(0, 255, 127);
    }

    50% {
        border-color: rgb(0, 255, 255);
        color: rgb(0, 255, 255);
    }

    58% {
        border-color: rgb(0, 127, 255);
        color: rgb(0, 127, 255);
    }

    63% {
        border-color: rgb(0, 0, 255);
        color: rgb(0, 0, 255);
    }

    72% {
        border-color: #C46DC4;
        color: #C46DC4;
    }

    84% {
        border-color: rgb(255, 0, 255);
        color: rgb(255, 0, 255);
    }

    91% {
        border-color: rgb(255, 0, 127);
        color: rgb(255, 0, 127);
    }
}

@keyframes selected-gold {

    100%,
    0% {
        background-color: transparent;
    }

    50% {
        background-color: #067006;
    }
}

@keyframes rainbow-background {

    100%,
    0% {
        background-color: rgb(0, 255, 0);
    }

    8% {
        background-color: rgb(0, 255, 127);
    }

    16% {
        background-color: rgb(0, 255, 255);
    }

    25% {
        background-color: rgb(0, 127, 255);
    }

    33% {
        background-color: rgb(0, 0, 255);
    }

    41% {
        background-color: #C46DC4;
    }

    50% {
        background-color: rgb(255, 0, 255);
    }

    58% {
        background-color: rgb(255, 0, 127);
    }

    66% {
        background-color: rgb(255, 0, 0);
    }

    74% {
        background-color: rgb(255, 127, 0);
    }

    84% {
        background-color: rgb(255, 255, 0);
    }

    91% {
        background-color: rgb(127, 255, 0);
    }
}

@keyframes rainbow-text-shadow {

    100%,
    0% {
        text-shadow: 0.1em 0.1em rgb(0, 255, 0);
    }

    8% {
        text-shadow: 0.1em 0.2em rgb(0, 255, 127);
    }

    16% {
        text-shadow: 0.1em 0.1em rgb(0, 255, 255);
    }

    25% {
        text-shadow: 0.1em 0em rgb(0, 127, 255);
    }

    33% {
        text-shadow: -0.1em 0em rgb(0, 0, 255);
    }

    41% {
        text-shadow: 0em -0.1em var(--base-purple);
    }

    50% {
        text-shadow: -0.1em -0.2em rgb(255, 0, 255);
    }

    58% {
        text-shadow: -0.1em -0.1em rgb(255, 0, 127);
    }

    66% {
        text-shadow: -0.1em 0.1em rgb(255, 0, 0);
    }

    74% {
        text-shadow: 0em -0.1em rgb(255, 127, 0);
    }

    84% {
        text-shadow: 0.1em 0em rgb(255, 255, 0);
    }

    91% {
        text-shadow: 0.1em 0.1em rgb(127, 255, 0);
    }
}

@keyframes rainbow {

    100%,
    0% {
        border-color: rgb(0, 255, 0);
        background-color: rgb(0, 255, 0);
    }

    8% {
        border-color: rgb(0, 255, 127);
        background-color: rgb(0, 255, 127);
    }

    16% {
        border-color: rgb(0, 255, 255);
        background-color: rgb(0, 255, 255);
    }

    25% {
        border-color: rgb(0, 127, 255);
        background-color: rgb(0, 127, 255);
    }

    33% {
        border-color: rgb(0, 0, 255);
        background-color: rgb(0, 0, 255);
    }

    41% {
        border-color: #C46DC4;
        background-color: #C46DC4;
    }

    50% {
        border-color: rgb(255, 0, 255);
        background-color: rgb(255, 0, 255);
    }

    58% {
        border-color: rgb(255, 0, 127);
        background-color: rgb(255, 0, 127);
    }

    66% {
        border-color: rgb(255, 0, 0);
        background-color: rgb(255, 0, 0);
    }

    74% {
        border-color: rgb(255, 127, 0);
        background-color: rgb(255, 127, 0);
    }

    84% {
        border-color: rgb(255, 255, 0);
        background-color: rgb(255, 255, 0);
    }

    91% {
        border-color: rgb(127, 255, 0);
        background-color: rgb(127, 255, 0);
    }
}

@keyframes rainbow-dice-1 {

    100%,
    0% {
        stroke: rgb(0, 255, 0);
    }

    8% {
        transform: scale(1.2) translate(-15vw, 5vh);
        stroke: rgb(0, 255, 127);
    }

    16% {
        transform: scale(1.4) translate(-16vw, 7vh);
        stroke: rgb(0, 255, 255);
    }

    25% {
        transform: scale(1.6) translate(-18vw, 12vh);
        stroke: rgb(0, 127, 255);
    }

    33% {
        transform: scale(0.6) translate(-45vw, -35vh) rotate(-359deg);
        stroke: rgb(0, 0, 255);
    }

    41% {
        transform: scale(0.6) translate(-25vw, 30vh) rotate(359deg);
        stroke: #C46DC4;
    }

    50% {
        transform: scale(0.6) translate(-55vw, -40vh) rotate(-359deg);
        stroke: rgb(255, 0, 255);
    }

    58% {
        transform: scale(0.6) translate(7vw, -10vh) rotate(359deg);
        stroke: rgb(255, 0, 127);
    }

    66% {
        transform: scale(0.6) translate(-23vw, -25vh) rotate(-359deg);
        stroke: rgb(255, 0, 0);
    }

    74% {
        transform: scale(0.6) translate(-53vw, 45vh) rotate(359deg);
        stroke: rgb(255, 127, 0);
    }

    84% {
        transform: scale(0.6) translate(23vw, 15vh) rotate(-359deg);
        stroke: rgb(255, 255, 0);
    }

    91% {
        transform: scale(0.6) translate(-25vw, -15vh) rotate(359deg);
        stroke: rgb(127, 255, 0);
    }
}

@keyframes rainbow-dice-2 {

    100%,
    0% {
        stroke: rgb(0, 255, 0);
    }

    8% {
        transform: scale(1.2) translate(-15vw, 5vh);
        stroke: rgb(0, 255, 127);
    }

    16% {
        transform: scale(1.4) translate(-16vw, 7vh);
        stroke: rgb(0, 255, 255);
    }

    25% {
        transform: scale(1.6) translate(-18vw, 12vh);
        stroke: rgb(0, 127, 255);
    }

    33% {
        transform: scale(0.6) translate(45vw, 35vh) rotate(359deg);
        stroke: rgb(0, 0, 255);
    }

    41% {
        transform: scale(0.6) translate(25vw, -30vh) rotate(-359deg);
        stroke: #C46DC4;
    }

    50% {
        transform: scale(0.6) translate(-15vw, 40vh) rotate(359deg);
        stroke: rgb(255, 0, 255);
    }

    58% {
        transform: scale(0.6) translate(-27vw, 40vh) rotate(-359deg);
        stroke: rgb(255, 0, 127);
    }

    66% {
        transform: scale(0.6) translate(-23vw, 25vh) rotate(359deg);
        stroke: rgb(255, 0, 0);
    }

    74% {
        transform: scale(0.6) translate(53vw, -25vh) rotate(-359deg);
        stroke: rgb(255, 127, 0);
    }

    84% {
        transform: scale(0.6) translate(-23vw, -15vh) rotate(359deg);
        stroke: rgb(255, 255, 0);
    }

    91% {
        transform: scale(0.6) translate(25vw, 15vh) rotate(-359deg);
        stroke: rgb(127, 255, 0);
    }
}

@keyframes rainbow-svg {

    100%,
    0% {
        stroke: rgb(0, 255, 0);
        fill: rgb(0, 255, 0);
    }

    8% {
        stroke: rgb(0, 255, 127);
    }

    16% {
        stroke: rgb(0, 255, 255);
    }

    25% {
        stroke: rgb(0, 127, 255);
    }

    33% {
        stroke: rgb(0, 0, 255);
    }

    41% {
        stroke: #C46DC4;
    }

    50% {
        stroke: rgb(255, 0, 255);
    }

    58% {
        stroke: rgb(255, 0, 127);
    }

    66% {
        stroke: rgb(255, 0, 0);
    }

    74% {
        stroke: rgb(255, 127, 0);
    }

    84% {
        stroke: rgb(255, 255, 0);
    }

    91% {
        stroke: rgb(127, 255, 0);
    }
}

@keyframes error-red-blink {
    0% {
        background-color: rgb(105, 0, 0);
    }

    20% {
        background-color: rgba(105, 0, 0, 0.459);
    }

    100% {
        background-color: transparent;
    }
}

@keyframes error-red-text {
    0% {
        color: rgb(105, 0, 0);
    }

    20% {
        color: rgba(221, 39, 39);
        border-color: red;
        box-shadow: inset 0 -0.2em 15px -0.2em red;
    }

    100% {
        color: transparent;
    }
}

@keyframes slidein {
    from {
        background-position: 0% 10%;
        background-size: 300vw 300vh;
    }

    to {
        background-position: right;
        background-size: 300vw 300vh;
    }
}

@keyframes place-bet-reminder {

    100%,
    0% {}

    50% {
        background-color: #067006;
        border-color: #067006;
        color: white;
        transform: scale(1.1);
    }
}

@keyframes text-shimmer {
    to {
        background-position: 100%
    }
}