html {
    margin: 0;
    padding: 0;
}

body {
    background-color: #221625;
    font-family: "Fira Code";
    font-size: 16px;
    font-weight: normal;
    margin: 0em;
    padding: 0em;
    --mobile: 0;
}

@media (pointer: coarse) {
    body {
        font-size: 2.25vw;
        --mobile: 1;
    }
}

main {
    margin: 32px;
}

.tabs_block {
    position: sticky;
    top: 0em;
    z-index: 1;
}

.menu, .submenu {
    display: flex;
    margin: 0em;
    flex-wrap: wrap;
}

#spices_tabs {
    display: none;
}

.tab {
    background: black;
    padding: 0.3em 0.5em;
    font-family: "Fira Code";
    font-size: 2em;
    border: none;
    flex: 1;
    cursor: default;
}

.subtab {
    background: #151116;
    padding: 0.3em 0.5em;
    font-family: "Fira Code";
    font-size: 1.5em;
    border: none;
    flex: 1;
}

@media (pointer: coarse) {
    .tab {
        font-size: 1.75em;
    }

    .subtab {
        font-size: 1.3em;
    }
}

.locked {
    color: #666666;
    font-weight: normal;
}

.unlocked {
    color: #aaaaaa;
    font-weight: normal;
    cursor: pointer;
}

.unlocked:hover {
    color: white;
    font-weight: normal;
}

.selected {
    color: white;
    font-weight: bold;
}

#color_shift {
    margin-top: 1em;
    margin-bottom: 1.5em;
}

#color_shift_button {
    display: inline;
    margin-left: 2em;
}

#crystal_buy_i, #arcane_buy_n {
    display: inline;
}

#statistics_page, #yellow_page, #green_page, #blue_page, #pink_page, #prestige_page, #crystal_page, #crystal_page2, #ascension_page, #ascension_page2, #challenges_page, #collapse_page, #settings_page {
    display: none;
}

.spice_num {
    font-size: 4em;
    font-weight: 700;
    color: white;
    margin-top: 0em;
    margin-bottom: -0.15em;
}

.spice_text {
    font-size: 2em;
    font-weight: 700;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
}

.spice_up {
    font-size: 1.5em;
    font-weight: 400;
    color: white;
    margin-top: 0.5em;
    margin-bottom: 2em;
}

.spice_gen_page {
    display: flex;
}

@media (pointer: coarse) {
    .spice_gen_page {
        flex-direction: column;
    }
}

@media (pointer: fine), (pointer: none) {
    .spice_gen_page {
        flex-direction: row;
    }
}

.spice_gen_panel {
    padding-right: 6em;
}

.spice_gen {
    margin-top: 1.5em;
}

.spice_gen_s {
    margin-top: 5em;
}

.spice_gen_name {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0.4em;
}

.spice_gen_info {
    font-size: 1em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0.6em;
    margin-left: 2em;
}

.spice_gen_boost {
    font-size: 1em;
    font-weight: 700;
    color: white;
    margin-top: 0em;
    margin-bottom: 0.8em;
    margin-left: 2em;
}

#color_shift_unlock {
    margin-left: 0em;
    margin-top: 0.35em;
    margin-bottom: 0.3em;
}

.spice_buttons {
    margin-left: 2em;
}

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

.prestige_upgrade_auto {
    margin-top: 5em;
    margin-bottom: 0.5em;
}

.spice_buy {
    padding: 0.2em 0.4em;
    background-color: #311936;
    font-family: "Fira Code";
    font-size: 1em;
    font-weight: 400;
    color: white;
    border: 1px solid white;
    margin-bottom: 0.3em;
    margin-right: 0.3em;
    cursor: default;
}

.spice_buy:hover {
    background-color: #421d49;
}

.spice_buy:active {
    background-color: #571c66;
}

.can_buy {
    cursor: pointer;
}

.noshift {
    color: #9b9b9b;
    cursor: default;
}

.noshift:hover {
    background-color: #311936;
}

.noshift:active {
    background-color: #311936;
}

.shift1 {
    color: #ffd107;
    text-shadow: 0 0 0.2em #ffd107;
    cursor: pointer;
}

.shift2 {
    color: #25dd8a;
    text-shadow: 0 0 0.2em #25dd8a;
    cursor: pointer;
}

.shift3 {
    color: #0072ff;
    text-shadow: 0 0 0.2em #0072ff;
    cursor: pointer;
}

.shift4 {
    color: #ff3dd8;
    text-shadow: 0 0 0.2em #ff3dd8;
    cursor: pointer;
}

.boost {
    color: var(--rainbow_spice2);
    text-shadow: 0 0 0.2em var(--rainbow_spice);
    cursor: pointer;
}

.max_all {
    font-size: 1.25em;
    cursor: pointer;
}

.a_disabled {
    font-size: 1.25em;
    color: #ff2714;
    cursor: pointer;
}

.a_enabled {
    font-size: 1.25em;
    color: #25dd8a;
    cursor: pointer;
}

#boost_auto, #infusion_auto, #enchantment_auto, #prestige_auto_toggle, #ascend_auto_toggle, #collapse_auto_toggle {
    font-size: 1em;
}

.red_spice{
    color: #ff2714;
}

.yellow_spice {
    color: #ffd107;
}

.green_spice {
    color: #25dd8a;
}

.blue_spice {
    color: #0072ff;
}

.pink_spice {
    color: #ff3dd8;
}

.crystal_spice {
    color: white;
    text-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
}

.arcane_spice {
    color: var(--arcane_spice);
    text-shadow: 0em 0em 0.2em var(--arcane_spice), 0em 0em 0.5em var(--arcane_spice2)
}

.red_cost {
    color: #ff2714;
    font-weight: 700;
}

.yellow_cost {
    color: #ffd107;
    font-weight: 700;
}

.green_cost {
    color: #25dd8a;
    font-weight: 700;
}

.blue_cost {
    color: #0072ff;
    font-weight: 700;
}

.pink_cost {
    color: #ff3dd8;
    font-weight: 700;
}

.rainbow_cost {
    color: var(--rainbow_spice2);
    text-shadow: 0 0 0.2em var(--rainbow_spice);
    font-weight: 700;
}

.crystal_cost {
    color: white;
    text-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
    font-weight: 700;
}

.rune_cost {
    color: var(--ascension2);
    text-shadow: 0em 0em 0.2em var(--ascension);
    font-weight: 700;
}

.arcane_cost {
    color: var(--arcane_spice);
    text-shadow: 0em 0em 0.2em var(--arcane_spice), 0em 0em 0.5em var(--arcane_spice2);
    font-weight: 700;
}

.atomic_cost {
    color: var(--collapse3);
    text-shadow: 0 0 0.2em var(--collapse2), 0 0 0.5em var(--collapse);
    font-weight: 700;
}

.empty_cost {
    color: #9b9b9b;
    font-weight: 700;
}

.prestige_header {
    display: flex;
}

.rainbow_spice_panel {
    flex-grow: 1;
}

.prestige_panel {
    display: flex;
    justify-content: right;
    align-items: center;
    flex-grow: 1;
    margin-top: 0.75em;
}

#rainbow_spice_up, #prestige_auto_block, #rune_control_block, #ascend_auto_block {
    flex-grow: 1;
}

.prestige_text {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
    text-align: right;
}

#prestige_req {
    color: grey;
}

.prestige_button {
    padding: 0.4em 0.6em;
    font-family: "Fira Code";
    font-size: 2em;
    font-weight: 400;
    margin-left: 0.4em;
    flex-grow: 0;
    cursor: default;
}

.reset_efficiency {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 1em;
    margin-bottom: 0em;
    text-align: right;
}

#collapse_efficiency {
    margin-bottom: -3.675em;
}

#prestige_upgrade_block {
    display: flex;
    flex-wrap: wrap;
    width: 64.8em;
    height: 27em;
    margin-left: calc(50% - 32.4em);
    margin-bottom: 18.5em;
}

#crystal_upgrade_block {
    display: flex;
    flex-wrap: wrap;
    width: 64.8em;
    height: 27em;
    margin-left: calc(50% - 32.4em);
    margin-bottom: 18.5em;
}

@media (pointer: coarse) {
    #prestige_upgrade_block {
        width: 32.4em;
        height: 54em;
        margin-left: calc(50% - 16.2em);
    }

    #crystal_upgrade_block {
        width: 32.4em;
        height: 54em;
        margin-left: calc(50% - 16.2em);
    }
}

.prestige_upgrade {
    padding: 0.5em 0.5em;
    font-family: "Fira Code";
    font-size: 0.9em;
    font-weight: 400;
    margin: 0.5em;
    width: 17em;
    height: 9em;
    cursor: default;
}

.bold {
    font-weight: bold;
}

.rainbow_spice {
    color: var(--rainbow_spice2);
    text-shadow: 0 0 0.2em var(--rainbow_spice);
}

.p_locked {
    background-color: black;
    color: white;
    border: 1px solid white;
}

.p_unlocked {
    background-color: black;
    color: var(--rainbow_spice2);
    text-shadow: 0 0 0.2em var(--rainbow_spice);
    border: 1px solid var(--rainbow_spice2);
    box-shadow: 0 0 0.3em var(--rainbow_spice), 0 0 0.3em var(--rainbow_spice) inset;
    cursor: pointer;
}

.p_unlocked:hover {
    background-color: black;
    color: white;
    text-shadow: 0 0 0.2em var(--rainbow_spice);
    border: 1px solid var(--rainbow_spice2);
    box-shadow: 0 0 0.3em var(--rainbow_spice), 0 0 1em var(--rainbow_spice) inset;
}

.p_unlocked:active {
    background-color: var(--rainbow_spice2);
    color: black;
    text-shadow: none;
    border: 1px solid var(--rainbow_spice2);
    box-shadow: 0 0 0.4em var(--rainbow_spice);
}

.p_unlocked2 {
    background-color: black;
    color: var(--rainbow_spice2);
    text-shadow: 0 0 0.5em var(--rainbow_spice);
    border: 1px solid var(--rainbow_spice2);
    box-shadow: 0 0 0.5em var(--rainbow_spice), 0 0 0.5em var(--rainbow_spice) inset;
    cursor: pointer;
}

.p_unlocked2:hover {
    background-color: black;
    color: white;
    text-shadow: 0 0 0.5em var(--rainbow_spice);
    border: 1px solid var(--rainbow_spice2);
    box-shadow: 0 0 0.5em var(--rainbow_spice), 0 0 3em var(--rainbow_spice) inset;
}

.p_unlocked2:active {
    background-color: var(--rainbow_spice2);
    color: black;
    text-shadow: none;
    border: 1px solid var(--rainbow_spice2);
    box-shadow: 0 0 0.5em var(--rainbow_spice);
}

.p_bought {
    background-color: var(--rainbow_spice2);
    color: black;
    text-shadow: none;
    border: 1px solid var(--rainbow_spice2);
    box-shadow: 0 0 0.5em var(--rainbow_spice);
}

.c_unlocked {
    background-color: black;
    color: #ff2ad4;
    text-shadow: 0em 0em 0.2em #ff2ad4, 0em 0em 0.5em #ff2ad4;
    border: 1px solid #ff2ad4;
    box-shadow: 0em 0em 0.5em #ff2ad4, 0em 0em 3em #ff2ad4 inset;
    cursor: pointer;
}

.c_unlocked:hover {
    background-color: black;
    color: white;
    text-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
    border: 1px solid white;
    box-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4, 0em 0em 1.2em white inset, 0em 0em 3em #ff2ad4 inset;
}

.c_unlocked:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
}

.c_bought {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
}

.p_special {
    margin-left: 27.5em;
    margin-top: 2.5em;
}

@media (pointer: coarse) {
    .p_special {
        margin-left: 9.625em;
    }
}

.crystal_header {
    display: flex;
}

.crystal_panel {
    flex-grow: 1;
}

#rainbow_spice_num2, #rainbow_spice_text2, #rainbow_spice_up2 {
    text-align: right;
}

#crystal_buy_i, #crystal_max_i {
    display: inline;
}

#crystal_gen_i {
    margin-top: 0em;
    margin-bottom: 3.5em;
}

#prestige_auto_buttons, #ascend_auto_buttons, #collapse_auto_buttons {
    display: flex;
    justify-content: right;
    margin-top: 1em;
}

#prestige_auto_mode, #ascend_auto_mode, #collapse_auto_mode {
    margin-right: 0em;
    cursor: pointer;
}

#prestige_boosts, #prestige_spice, #prestige_time, #prestige_boosts_delta, #prestige_spice_delta, #ascend_runes, #ascend_time, #collapse_spice, #collapse_spice2, #collapse_time, #collapse_time2 {
    display: flex;
    justify-content: right;
    margin-top: 0.25em;
}

#prestige_goal {
    display: flex;
    justify-content: right;
    margin-top: 0.3em;
}

@media (pointer: coarse) {
    .prestige_header {
        flex-direction: column;
    }

    .prestige_text {
        text-align: left;
    }

    .prestige_panel {
        justify-content: left;
        flex-direction: row-reverse;
    }

    .prestige_button {
        margin-left: 0em;
        margin-right: 0.4em;
    }

    #prestige_auto_buttons, #prestige_boosts, #prestige_spice, #prestige_time, #prestige_boosts_delta, #prestige_spice_delta {
        justify-content: left;
    }

    #rainbow_spice_up, #rainbow_spice_up2 {
        margin-bottom: 0em;
    }

    .rainbow_spice_panel {
        margin-bottom: 1.5em;
    }

    .crystal_header {
        flex-direction: column-reverse;
    }

    #rainbow_spice_num2, #rainbow_spice_text2, #rainbow_spice_up2 {
        text-align: left;
    }

    .spice_num {
        font-size: 3.25em;
    }
}

#upgrade_auto_toggle, #upgrade_auto_toggle2 {
    margin-right: 0em;
}

.p_auto_text {
    font-size: 1em;
    font-weight: 400;
    color: white;
    margin-top: 0.075em;
    margin-bottom: 0em;
    margin-right: 0.5em;
    text-align: right;
    display: inline;
}

#prestige_goal_text {
    margin-top: 0.3em;
}

#prestige_goal_reset {
    margin-right: 0em;
}

.input {
    background-color: #311936;
    width: 8em;
    color: white;
    padding: 0.2em 0.25em;
    font-family: "Fira Code";
    font-size: 0.8em;
    font-weight: normal;
    border: 1px solid white;
    display: inline;
}

.ascension_header {
    display: flex;
}

.ansuz_panel {
    flex-grow: 1;
}

.ansuz_num {
    font-size: 4em;
    font-weight: 700;
    color: white;
    margin-top: -0.15em;
    margin-bottom: 0em;
}

.ansuz_text {
    font-size: 2em;
    font-weight: 700;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
}

.ascension_panel {
    display: flex;
    justify-content: right;
    align-items: center;
    flex-grow: 1;
    margin-top: 0.75em;
}

.ascend_text {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
    text-align: right;
}

#ascend_req {
    color: grey;
}

.ascend_button {
    padding: 0.4em 0.6em;
    font-family: "Fira Code";
    font-size: 2em;
    font-weight: 400;
    margin-left: 0.4em;
    flex-grow: 0;
    cursor: default;
}

.ascension_upgrade {
    cursor: default;
}

.a_locked {
    background-color: black;
    color: var(--ascension);
    border: 1px solid var(--ascension);
}

.a_unlocked {
    background-color: var(--ascension3);
    color: var(--ascension2);
    text-shadow: 0 0 0.2em var(--ascension);
    border: 1px solid var(--ascension2);
    box-shadow: 0 0 0.3em var(--ascension), 0 0 1em var(--ascension) inset;
    cursor: pointer;
}

.a_unlocked:hover {
    background-color: var(--ascension4);
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em var(--ascension);
    border: 1px solid var(--ascension2);
    box-shadow: 0 0 0.3em var(--ascension), 0 0 1em var(--ascension) inset;
}

.a_unlocked:active {
    background-color: var(--ascension);
    color: black;
    text-shadow: none;
    border: 1px solid var(--ascension);
    box-shadow: 0 0 0.4em var(--ascension);
}

.a_unlocked2 {
    background-color: var(--ascension3);
    color: var(--ascension2);
    text-shadow: 0 0 0.2em var(--ascension);
    border: 1px solid var(--ascension2);
    box-shadow: 0 0 0.6em var(--ascension), 0 0 2em var(--ascension) inset;
    cursor: pointer;
}

.a_unlocked2:hover {
    background-color: var(--ascension4);
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em var(--ascension);
    border: 1px solid var(--ascension2);
    box-shadow: 0 0 0.6em var(--ascension), 0 0 2em var(--ascension) inset;
}

.a_unlocked2:active {
    background-color: var(--ascension);
    color: black;
    text-shadow: none;
    border: 1px solid var(--ascension);
    box-shadow: 0 0 0.8em var(--ascension);
}

.a_bought {
    background-color: var(--ascension);
    color: black;
    text-shadow: none;
    border: 1px solid var(--ascension);
    box-shadow: 0 0 0.8em var(--ascension);
}

.ac_locked {
    background-color: black;
    color: #cccccc;
    border: 1px solid #cccccc;
}

.ac_unlocked {
    background-color: #333333;
    color: white;
    text-shadow: 0 0 0.5em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.6em white, 0 0 0.6em white inset, 0 0 2em #cccccc inset;
    cursor: pointer;
}

.ac_unlocked:hover {
    background-color: #555555;
    color: white;
    text-shadow: 0 0 0.25em white, 0 0 0.5em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.6em white, 0 0 0.6em white inset, 0 0 2em white inset;
}

.ac_unlocked:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.8em #cccccc;
}

.a_active {
    background-color: #333333;
    color: white;
    text-shadow: 0 0 0.2em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.15em white, 0 0 0.3em #cccccc inset, 0 0 1em #cccccc inset;
    cursor: pointer;
}

.a_active:hover {
    background-color: #555555;
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.15em white, 0 0 0.3em white inset, 0 0 1em white inset;
}

.a_active:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.4em #cccccc;
}

.ac_bought {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.8em #cccccc;
}

.runes {
    color: var(--ascension2);
    text-shadow: 0 0 0.2em var(--ascension);
}

.rune_panel {
    margin-top: 2em;
    margin-bottom: 2em;
}

.rune_header {
    font-size: 2em;
    font-weight: bold;
    margin-top: 0em;
    margin-bottom: 0em;
}

.rune_text {
    color: white;
    font-size: 1.25em;
    margin-top: 0.1em;
    margin-bottom: 0.6em;
    margin-left: 1.5em;
}

.rune_menu {
    display: flex;
    flex-direction: row;
    margin-left: 2em;
}

.rune_control {
    display: flex;
    flex-direction: row;
    margin-top: 0.5em;
    margin-bottom: 0em;
}

#distribute_buttons {
    margin-top: 0.5em;
    margin-bottom: 3em;
}

#distributor {
    margin-bottom: 3em;
}

#distributor_title {
    margin-top: -0.5em;
    margin-bottom: 0.25em;
}

.distributor_text {
    color: white;
    font-size: 1.25em;
    margin: 0em 0.5em 0em 1.5em;
}

.distributor_error {
    color: #ff2714;
    font-size: 1.25em;
    margin: 0em 0.5em 0em 2.6em;
}

.distributor_header {
    color: white;
    font-size: 1.25em;
    margin-top: 1em;
    margin-bottom: 0.6em;
    margin-left: 1.5em;
}

.distributor_percent {
    color: white;
    font-size: 1.25em;
    margin: 0em 0.5em 0em 0.5em;
}

.distributor_block {
    display: flex;
    margin-top: 0.1em;
    margin-bottom: 0.6em;
}

.distributor_block2 {
    display: flex;
    margin-top: 0.1em;
    margin-bottom: 0.6em;
    margin-left: 1.5em;
}

#collider_portion {
    margin-left: 0em;
}

.distributor_input {
    font-size: 0.9em;
    width: 3.2em;
}

@media (pointer: coarse) {
    .ascension_header {
        flex-direction: column;
    }

    .ascend_text {
        text-align: left;
    }

    .ascension_panel {
        justify-content: left;
        flex-direction: row-reverse;
    }

    .ascend_button {
        margin-left: 0em;
        margin-right: 0.4em;
    }

    #ascend_auto_buttons, #ascend_runes, #ascend_time {
        justify-content: left;
    }

    #ascend_auto_block {
        margin-bottom: 1.5em;
    }

    #distribute_buttons {
        margin-bottom: 2em;
    }

    .ansuz_num {
        font-size: 3.25em;
    }
}

#arcane_rune_control {
    justify-content: right;
}

.rune_button {
    font-size: 1.25em;
    font-family: "Fira Code";
    margin-right: 0.5em;
}

.ascend_info {
    color: white;
    font-size: 1.35em;
    margin-top: 1em;
    margin-bottom: 2em;
}

#ascension_upgrade_panel {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-left: -32px;
    margin-right: -32px;
}

#ascension_upgrade_panel2 {
    overflow-x: auto;
    overflow-y: hidden;
}

#ascension_upgrade_panel3 {
    position: relative;
    height: 240em;
    width: 73em;
    margin-left: auto;
    margin-right: auto;
}

.ascension_upgrade {
    padding: 0.5em 0.5em;
    font-family: "Fira Code";
    font-size: 0.9em;
    font-weight: 400;
    width: 17em;
    height: 9em;
    position: absolute;
    left: calc(50% - 8.5em);
    top: 0em;
}

.ascension_line {
    padding: 0em;
    margin: 0em;
    background-color: var(--ascension5);
    line-height: 1px;
    position: absolute;
    height: 2em;
    z-index: -1;
}

.ascension_line2 {
    padding: 0em;
    margin: 0em;
    background-color: #777777;
    line-height: 1px;
    position: absolute;
    height: 2em;
    z-index: -1;
}

.challenge_info {
    color: white;
    font-size: 1.35em;
    text-align: center;
    margin-top: 0em;
    margin-bottom: 3em;
}

.a_challenge_panel {
    display: flex;
    width: 70em;
    padding: 1em;
    background-color: black;
    border: 1px solid var(--ascension2);
    box-shadow: 0 0 0.4em var(--ascension), 0 0 0.4em var(--ascension) inset;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

.a_challenge_text {
    font-size: 1.35em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
}

.a_challenge_header {
    font-size: 1.35em;
    font-weight: 400;
    color: var(--ascension2);
    text-shadow: 0 0 0.2em var(--ascension);
    margin-top: 0em;
    margin-bottom: 0em;
}

.a_challenge_block {
    flex-grow: 1;
}

.a_challenge_button {
    font-family: "Fira Code";
    font-size: 1.85em;
    font-weight: 700;
    width: 7.5em;
    flex-grow: 0;
    margin-left: 1em;
    cursor: default;
}

.incomplete {
    background-color: var(--ascension3);
    color: var(--ascension2);
    text-shadow: 0 0 0.2em var(--ascension);
    border: 1px solid var(--ascension2);
    box-shadow: 0 0 0.4em var(--ascension), 0 0 1em var(--ascension) inset;
    cursor: pointer;
}

.incomplete:hover {
    background-color: var(--ascension4);
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em var(--ascension);
    border: 1px solid var(--ascension2);
    box-shadow: 0 0 0.4em var(--ascension), 0 0 1em var(--ascension) inset;
}

.incomplete:active {
    background-color: var(--ascension);
    color: black;
    text-shadow: none;
    border: 1px solid var(--ascension);
    box-shadow: 0 0 0.4em var(--ascension);
}

.inprogress {
    background-color: var(--ascension);
    color: black;
    text-shadow: none;
    border: 1px solid var(--ascension);
    box-shadow: 0 0 0.4em var(--ascension);
}

.finished {
    background-color: #333333;
    color: white;
    text-shadow: 0 0 0.2em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.4em white, 0 0 1em white inset;
    cursor: pointer;
}

.finished:hover {
    background-color: #555555;
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.4em white, 0 0 1em white inset;
}

.finished:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.4em white;
}

.complete {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.4em white;
}

.arcane_header {
    display: flex;
}

.arcane_panel {
    flex-grow: 1;
}

#ansuz_num3, #ansuz_text2 {
    text-align: right;
}

#ansuz_up, #ansuz_up2 {
    margin-top: -0.1em;
    margin-bottom: 0.75em;
}

#ansuz_up3 {
    margin-top: -0.1em;
    margin-bottom: 0.75em;
    text-align: right;
}

#arcane_buy_n, #arcane_max_n {
    display: inline;
}

#arcane_gen_n {
    margin-top: 0em;
    margin-bottom: 3.5em;
}

@media (pointer: coarse) {
    .a_challenge_header {
        font-size: 1.2em;
        margin-bottom: 0.15em;
    }

    .a_challenge_text {
        font-size: 1em;
    }

    .a_challenge_button {
        font-size: 1.35em;
        width: 100%;
        margin-left: 0em;
        margin-top: 0.75em;
        padding: 0.1em 0em;
    }

    .a_challenge_panel {
        width: calc(100% - 2em);
        flex-direction: column;
    }

    .arcane_header {
        flex-direction: column-reverse;
    }

    #ansuz_text2, #ansuz_num3 {
        text-align: left;
    }

    #arcane_rune_control {
        justify-content: left;
        margin-bottom: 1.5em;
    }
}

.collapse_header {
    display: flex;
}

.atomic_spice_panel {
    flex-grow: 1;
}

.collapse_panel {
    display: flex;
    justify-content: right;
    align-items: center;
    flex-grow: 1;
    margin-top: 0.75em;
}

.collapse_text {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
    text-align: right;
}

#collapse_req {
    color: grey;
}

.collapse_button {
    padding: 0.4em 0.6em;
    font-family: "Fira Code";
    font-size: 2em;
    font-weight: 400;
    margin-left: 0.4em;
    flex-grow: 0;
    cursor: default;
}

.collapse_title {
    color: white;
    font-size: 2em;
    font-weight: bold;
    margin-top: 2em;
    margin-bottom: 0.25em;
}

.co_auto_margin {
    margin-top: 0.5em;
}

.atomic_button {
    font-size: 1.25em;
    font-family: "Fira Code";
}

.atomic_spice {
    color: var(--collapse3);
    text-shadow: 0 0 0.2em var(--collapse2), 0 0 0.5em var(--collapse);
}

.collapse_info2 {
    color: white;
    font-size: 1.1em;
    margin-top: 1em;
    text-align: right;
}

.co_locked {
    background-color: black;
    color: var(--collapse);
    border: 1px solid var(--collapse);
}

.co_unlocked {
    background-color: var(--collapse4);
    color: var(--collapse3);
    text-shadow: 0 0 0.2em var(--collapse2), 0 0 0.4em var(--collapse);
    border: 1px solid var(--collapse2);
    box-shadow: 0 0 0.2em var(--collapse2), 0 0 0.4em var(--collapse), 0 0 0.2em var(--collapse2) inset, 0 0 0.8em var(--collapse) inset;
    cursor: pointer;
}

.co_unlocked:hover {
    background-color: var(--collapse5);
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em var(--collapse);
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.2em var(--collapse3), 0 0 0.4em var(--collapse2), 0 0 0.2em var(--collapse3) inset, 0 0 1em var(--collapse2) inset;
}

.co_unlocked:active {
    background-color: var(--collapse3);
    color: black;
    text-shadow: none;
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.2em var(--collapse2), 0 0 0.4em var(--collapse);
}

.co_active {
    background-color: #333333;
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.2em white, 0 0 0.4em #cccccc, 0 0 0.2em white inset, 0 0 0.8em #cccccc inset;
    cursor: pointer;
}

.co_active:hover {
    background-color: #555555;
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em white;
    border: 1px solid white;
    box-shadow: 0 0 0.2em white, 0 0 0.4em #cccccc, 0 0 0.2em white inset, 0 0 1em white inset;
}

.co_active:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.2em white, 0 0 0.4em #cccccc;
}

.collider_menu {
    margin-bottom: 5em;
}

#collider_tabs {
    display: flex;
    flex-wrap: nowrap;
    margin-left: 1.9em;
}

#collider_tab1 {
    background-color: var(--unstable_spice8);
    border: 1px solid var(--unstable_spice3);
    color: var(--unstable_spice3);
    box-shadow: 0 0 0.2em var(--unstable_spice) inset;
    text-shadow: 0 0 0.2em var(--unstable_spice2), 0 0 0.5em var(--unstable_spice);
    cursor: pointer;
}

#collider_tab1:hover {
    background-color: var(--unstable_spice7);
    box-shadow: 0 0 0.4em var(--unstable_spice2) inset;
    text-shadow: 0 0 0.2em var(--unstable_spice3), 0 0 0.5em var(--unstable_spice2);
}

#collider_tab1:active, #collider_tab1.current_tab {
    background-color: var(--unstable_spice3);
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab1.current_tab {
    cursor: default;
}

#collider_tab2 {
    background-color: black;
    border: 1px solid white;
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.5em #aaaaaa;
    cursor: pointer;
}

#collider_tab2:hover {
    background-color: #333333;
    box-shadow: 0 0 0.4em white inset;
}

#collider_tab2:active, #collider_tab2.current_tab {
    background-color: white;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab2.current_tab {
    cursor: default;
}

#collider_tab3 {
    background-color: black;
    border: 1px solid #14ebff;
    color: #14ebff;
    text-shadow: 0 0 0.2em #14ebff, 0 0 0.5em #00a8b8;
    cursor: pointer;
}

#collider_tab3:hover {
    background-color: #003338;
    box-shadow: 0 0 0.4em #14ebff inset;
}

#collider_tab3:active, #collider_tab3.current_tab {
    background-color: #14ebff;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab3.current_tab {
    cursor: default;
}

#collider_tab4 {
    background-color: black;
    border: 1px solid #1f48ff;
    color: #1f48ff;
    text-shadow: 0 0 0.2em #1f48ff, 0 0 0.5em #0025b8;
    cursor: pointer;
}

#collider_tab4:hover {
    background-color: #000b38;
    box-shadow: 0 0 0.4em #1f48ff inset;
}

#collider_tab4:active, #collider_tab4.current_tab {
    background-color: #1f48ff;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab4.current_tab {
    cursor: default;
}

#collider_tab5 {
    background-color: black;
    border: 1px solid #ea1a78;
    color: #ea1a78;
    text-shadow: 0 0 0.2em #ea1a78, 0 0 0.5em #9f1955;
    cursor: pointer;
}

#collider_tab5:hover {
    background-color: #30081b;
    box-shadow: 0 0 0.4em #ea1a78 inset;
}

#collider_tab5:active, #collider_tab5.current_tab {
    background-color: #ea1a78;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab5.current_tab {
    cursor: default;
}

#collider_tab6 {
    background-color: black;
    border: 1px solid #ff8c00;
    color: #ff8c00;
    text-shadow: 0 0 0.2em #ff8c00, 0 0 0.5em #9f6319;
    cursor: pointer;
}

#collider_tab6:hover {
    background-color: #301e08;
    box-shadow: 0 0 0.4em #ff8c00 inset;
}

#collider_tab6:active, #collider_tab6.current_tab {
    background-color: #ff8c00;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab6.current_tab {
    cursor: default;
}

#collider_tab7 {
    background-color: black;
    border: 1px solid #3dff64;
    color: #3dff64;
    text-shadow: 0 0 0.2em #3dff64, 0 0 0.5em #1fc740;
    cursor: pointer;
}

#collider_tab7:hover {
    background-color: #0a3d14;
    box-shadow: 0 0 0.4em #3dff64 inset;
}

#collider_tab7:active, #collider_tab7.current_tab {
    background-color: #3dff64;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab7.current_tab {
    cursor: default;
}

#collider_tab8 {
    background-color: black;
    border: 1px solid var(--rainbow_antispice);
    color: var(--rainbow_antispice);
    text-shadow: 0 0 0.2em var(--rainbow_antispice), 0 0 0.5em var(--rainbow_antispice2);
    cursor: pointer;
}

#collider_tab8:hover {
    background-color: var(--rainbow_antispice3);
    box-shadow: 0 0 0.4em var(--rainbow_antispice) inset;
}

#collider_tab8:active, #collider_tab8.current_tab {
    background-color: var(--rainbow_antispice);
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab8.current_tab {
    cursor: default;
}

#collider_block {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1.65em;
}

#collider_view, #collider_view2, #collider_view3 {
    width: 60em;
    height: 30em;
    display: none;
}

@media (pointer: coarse) {
    .collapse_header {
        flex-direction: column;
    }

    .collapse_text {
        text-align: left;
    }

    .collapse_panel {
        justify-content: left;
        flex-direction: row-reverse;
    }

    .collapse_button {
        margin-left: 0em;
        margin-right: 0.4em;
    }

    .collapse_info2 {
        text-align: left;
    }

    .atomic_spice_panel {
        margin-bottom: 1.5em;
    }

    #collapse_auto_buttons, #collapse_spice, #collapse_spice2, #collapse_time, #collapse_time2 {
        justify-content: left;
    }

    #collapse_auto_block {
        margin-bottom: 1.5em;
    }

    .co_auto_margin {
        margin-top: 2em;
    }
    
    #collider_tabs {
        flex-wrap: wrap;
    }

    #collider_view, #collider_view2, #collider_view3 {
        width: 100%;
        height: auto;
        display: none;
    }
}

#collider_view {
    filter: hue-rotate(var(--collapse6)) brightness(var(--collapse7)) saturate(var(--collapse8)) drop-shadow(0 0 0.2em var(--collapse2)) drop-shadow(0 0 0.5em var(--collapse));
}

#collider_view2 {
    filter: hue-rotate(var(--unstable_spice4)) brightness(var(--unstable_spice5)) saturate(var(--unstable_spice6)) drop-shadow(0 0 0.2em var(--unstable_spice2)) drop-shadow(0 0 0.5em var(--unstable_spice));
}

.pure_collider {
    filter: drop-shadow(0 0 0.1em white) drop-shadow(0 0 0.2em #444444) drop-shadow(0 0 0.3em #222222) drop-shadow(0 0 0.4em #111111) drop-shadow(0 0 0.5em black);
}

.red_collider {
    filter: drop-shadow(0 0 0.1em #14ebff) drop-shadow(0 0 0.2em #00464d) drop-shadow(0 0 0.3em #002124) drop-shadow(0 0 0.4em #001214) drop-shadow(0 0 0.5em black);
}

.yellow_collider {
    filter: drop-shadow(0 0 0.1em #1f48ff) drop-shadow(0 0 0.2em #000f4d) drop-shadow(0 0 0.3em #000724) drop-shadow(0 0 0.4em #000414) drop-shadow(0 0 0.5em black);
}

.green_collider {
    filter: drop-shadow(0 0 0.1em #ea1a78) drop-shadow(0 0 0.2em #430a23) drop-shadow(0 0 0.3em #1f0511) drop-shadow(0 0 0.4em #11030a) drop-shadow(0 0 0.5em black);
}

.blue_collider {
    filter: drop-shadow(0 0 0.1em #ff8c00) drop-shadow(0 0 0.2em #43290a) drop-shadow(0 0 0.3em #1f1305) drop-shadow(0 0 0.4em #110b03) drop-shadow(0 0 0.5em black);
}

.pink_collider {
    filter: drop-shadow(0 0 0.1em #3dff64) drop-shadow(0 0 0.2em #0c501a) drop-shadow(0 0 0.3em #06270d) drop-shadow(0 0 0.4em #041607) drop-shadow(0 0 0.5em black);
}

.rainbow_collider {
    filter: hue-rotate(var(--rainbow_antispice8)) brightness(var(--rainbow_antispice9)) saturate(var(--rainbow_antispice10)) drop-shadow(0 0 0.1em var(--rainbow_antispice)) drop-shadow(0 0 0.2em var(--rainbow_antispice4)) drop-shadow(0 0 0.3em var(--rainbow_antispice5)) drop-shadow(0 0 0.4em var(--rainbow_antispice6)) drop-shadow(0 0 0.5em black);
}

.collider_text {
    color: white;
    font-size: 1.25em;
    margin-left: 1.5em;
}

#activate_collider {
    margin-left: 1.5em;
}

.unstable_spice {
    color: var(--unstable_spice3);
    text-shadow: 0 0 0.2em var(--unstable_spice2), 0 0 0.5em var(--unstable_spice);
}

.decayed_spice {
    color: var(--decayed_spice);
    text-shadow: 0 0 0.2em var(--decayed_spice2);
}

.pure_antispice {
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em #444444, 0 0 0.3em #222222, 0 0 0.4em #111111, 0 0 0.5em black;
}

.red_antispice {
    color: #14ebff;
    text-shadow: 0 0 0.1em #14ebff, 0 0 0.2em #00464d, 0 0 0.3em #002124, 0 0 0.4em #001214, 0 0 0.5em black;
}

.yellow_antispice {
    color: #1f48ff;
    text-shadow: 0 0 0.1em #1f48ff, 0 0 0.2em #000f4d, 0 0 0.3em #000724, 0 0 0.4em #000414, 0 0 0.5em black;
}

.green_antispice {
    color: #ea1a78;
    text-shadow: 0 0 0.1em #ea1a78, 0 0 0.2em #430a23, 0 0 0.3em #1f0511, 0 0 0.4em #11030a, 0 0 0.5em black;
}

.blue_antispice {
    color: #ff8c00;
    text-shadow: 0 0 0.1em #ff8c00, 0 0 0.2em #43290a, 0 0 0.3em #1f1305, 0 0 0.4em #110b03, 0 0 0.5em black;
}

.pink_antispice {
    color: #3dff64;
    text-shadow: 0 0 0.1em #3dff64, 0 0 0.2em #0c501a, 0 0 0.3em #06270d, 0 0 0.4em #041607, 0 0 0.5em black;
}

.rainbow_antispice {
    color: var(--rainbow_antispice);
    text-shadow: 0 0 0.1em var(--rainbow_antispice), 0 0 0.2em var(--rainbow_antispice4), 0 0 0.3em var(--rainbow_antispice5), 0 0 0.4em var(--rainbow_antispice6), 0 0 0.5em black;
}

.unstable_text {
    color: white;
    font-size: 1.25em;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

@media (pointer: coarse) {
    #unstable_boost {
        font-size: 1em;
    }
}

#research_unlock {
    font-weight: bold;
}

#research_title, #antiperks_title {
    margin-top: 1.5em;
}

.research_text {
    color: white;
    font-size: 1.25em;
    margin-top: 0em;
    margin-bottom: 0em;
}

#research_info {
    width: 47em;
}

.research_number {
    font-size: 1.5em;
    color: var(--collapse3);
    text-shadow: 0 0 0.2em var(--collapse2), 0 0 0.5em var(--collapse);
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.research_options {
    display: flex;
    flex-wrap: wrap;
    width: 60em;
    margin-top: 0.75em;
    margin-left: 1.5em;
}

#research_completed_block {
    margin-top: 1.5em;
}

.research_button {
    padding-left: 0.4em;
    padding-right: 0.4em;
    background-color: #311936;
    height: 1.5em;
    font-family: "Fira Code";
    font-size: 2em;
    font-weight: 700;
    color: white;
    border: 1px solid white;
    margin-right: 0.3em;
    margin-bottom: 0.3em;
    cursor: pointer;
}

.research_button:hover {
    background-color: #421d49;
}

.research_button:active {
    background-color: #571c66;
}

.r_repeat {
    color: #ffd107;
    text-shadow: 0 0 0.2em #ffd107;
}

.r_special {
    color: #00ccff;
    text-shadow: 0 0 0.2em #00ccff;
}

.r_select {
    border: 1px solid var(--collapse3);
}

.r_view, .r_view:hover, .r_view:active {
    background-color: white;
    color: black;
    text-shadow: none;
    cursor: default;
}

.r_active, .r_active:hover, .r_active:active {
    background-color: var(--collapse3);
    color: black;
    text-shadow: none;
    border: 1px solid var(--collapse3);
    cursor: default;
}

#research_info_block {
    margin-left: 1.5em;
}

#research_control {
    display: flex;
    margin-top: 1.25em;
    width: 60em;
    height: 2.8em;
}

@media (pointer: coarse) {
    .research_options {
        width: 100%;
    }

    #research_control {
        width: 100%;
    }

    #research_info {
        width: 100%;
    }
    
}

.research_toggle {
    padding: 0.2em 0.4em;
    font-family: "Fira Code";
    font-size: 1.5em;
    font-weight: 400;
    margin-right: 1em;
    width: auto;
}

.r_begin {
    background-color: black;
    color: var(--collapse3);
    text-shadow: 0 0 0.2em var(--collapse2);
    border: 1px solid var(--collapse2);
    box-shadow: 0 0 0.2em var(--collapse2), 0 0 0.2em var(--collapse2) inset;
    cursor: pointer;
}

.r_begin:hover {
    background-color: black;
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em var(--collapse);
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.2em var(--collapse3), 0 0 0.6em var(--collapse3) inset;
}

.r_begin:active {
    background-color: var(--collapse3);
    color: black;
    text-shadow: none;
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.2em var(--collapse2), 0 0 0.4em var(--collapse);
}

.r_pause {
    background-color: var(--collapse4);
    color: var(--collapse3);
    text-shadow: 0 0 0.2em var(--collapse2), 0 0 0.4em var(--collapse);
    border: 1px solid var(--collapse2);
    box-shadow: 0 0 0.2em var(--collapse2), 0 0 0.4em var(--collapse), 0 0 0.2em var(--collapse2) inset, 0 0 0.8em var(--collapse) inset;
    cursor: pointer;
}

.r_pause:hover {
    background-color: var(--collapse5);
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em var(--collapse);
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.2em var(--collapse3), 0 0 0.4em var(--collapse2), 0 0 0.2em var(--collapse3) inset, 0 0 1em var(--collapse2) inset;
}

.r_pause:active {
    background-color: var(--collapse3);
    color: black;
    text-shadow: none;
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.2em var(--collapse2), 0 0 0.4em var(--collapse);
}

.r_done {
    background-color: var(--collapse3);
    color: black;
    text-shadow: none;
    font-weight: 700;
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.2em var(--collapse2), 0 0 0.4em var(--collapse);
    cursor: default;
}

#research_back {
    width: 100%;
    background-color: black;
}

#research_progress {
    width: 0%;
    height: 100%;
}

.r_on {
    background-color: var(--collapse3);
    box-shadow: 0 0 0.3em var(--collapse2), 0 0 0.6em var(--collapse);
}

.r_off {
    background-color: var(--collapse);
    box-shadow: none;
}

#research_boost {
    margin-top: 3em;
    margin-bottom: 0.75em;
}

#research_upgrade {
    margin-left: 1.5em;
}

.co_challenge_panel {
    display: flex;
    width: 70em;
    padding: 1em;
    background-color: black;
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.4em var(--collapse2), 0 0 0.4em var(--collapse) inset;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

.co_challenge_text {
    font-size: 1.35em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
}

.co_challenge_header {
    font-size: 1.35em;
    font-weight: 400;
    color: var(--collapse3);
    text-shadow: 0 0 0.2em var(--collapse2), 0 0 0.5em var(--collapse);
    margin-top: 0em;
    margin-bottom: 0em;
}

.co_challenge_block {
    flex-grow: 1;
}

.co_challenge_button {
    font-family: "Fira Code";
    font-size: 1.85em;
    font-weight: 700;
    width: 7.5em;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 7.5em;
    margin-left: 1em;
}

.small_text {
    font-size: 0.75em;
}

.outside {
    background-color: var(--collapse4);
    color: var(--collapse3);
    text-shadow: 0 0 0.2em var(--collapse2), 0 0 0.5em var(--collapse);
    border: 1px solid var(--collapse2);
    box-shadow: 0 0 0.2em var(--collapse2), 0 0 0.4em var(--collapse), 0 0 0.2em var(--collapse2) inset, 0 0 1em var(--collapse) inset;
    cursor: pointer;
}

.outside:hover {
    background-color: var(--collapse5);
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.5em var(--collapse);
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.2em var(--collapse3), 0 0 0.4em var(--collapse2), 0 0 0.2em var(--collapse3) inset, 0 0 1em var(--collapse2) inset;
}

.outside:active {
    background-color: var(--collapse3);
    color: black;
    text-shadow: none;
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.4em var(--collapse2);
}

.inside {
    background-color: var(--collapse3);
    color: black;
    text-shadow: none;
    border: 1px solid var(--collapse3);
    box-shadow: 0 0 0.4em var(--collapse2);
    cursor: default;
}

@media (pointer: coarse) {
    .co_challenge_header {
        font-size: 1.2em;
        margin-bottom: 0.15em;
    }

    .co_challenge_text {
        font-size: 1em;
    }

    .co_challenge_button {
        font-size: 1.35em;
        width: 100%;
        height: 2em;
        flex-basis: 2em;
        flex-grow: 0;
        flex-shrink: 0;
        margin-left: 0em;
        margin-top: 0.75em;
        padding: 0.1em 0em;
    }

    .co_challenge_panel {
        width: calc(100% - 2em);
        flex-direction: column;
    }

    .small_text {
        font-size: 1em;
    }
}

.antispice_block {
    text-align: center;
    flex-basis: 33%;
    flex-grow: 1;
}

.antispice_panel {
    display: flex;
}

@media (pointer: coarse) {
    .antispice_panel {
        flex-direction: column;
    }
}

.antispice_text {
    color: white;
    font-size: 1.25em;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    text-align: center;
}

#antispice_reduction {
    font-size: 1.5em;
}

#antispice_perk_block {
    display: flex;
    flex-wrap: wrap;
    width: 64.8em;
    height: 12em;
    margin-left: calc(50% - 32.4em);
    margin-bottom: 18.5em;
}

@media (pointer: coarse) {
    #antispice_perk_block {
        width: 32.4em;
        height: 54em;
        margin-left: calc(50% - 16.2em);
    }
}

.antispice_perk {
    padding: 0.5em 0.5em;
    font-family: "Fira Code";
    font-size: 0.9em;
    font-weight: 400;
    margin: 0.5em;
    width: 17em;
    height: 9em;
}

.ap_locked {
    background-color: black;
    color: var(--rainbow_antispice);
    border: 1px solid var(--rainbow_antispice);
    cursor: default;
}

.ap_unlocked {
    background-color: var(--rainbow_antispice5);
    color: var(--rainbow_antispice);
    text-shadow: 0 0 0.15em var(--rainbow_antispice), 0 0 0.3em var(--rainbow_antispice4), 0 0 0.45em var(--rainbow_antispice5), 0 0 0.6em var(--rainbow_antispice6), 0 0 0.75em black;
    border: 1px solid var(--rainbow_antispice);
    box-shadow: 0 0 0.2em var(--rainbow_antispice), 0 0 0.4em var(--rainbow_antispice4), 0 0 0.6em var(--rainbow_antispice5), 0 0 0.8em var(--rainbow_antispice6), 0 0 1em black, 0 0 1em var(--rainbow_antispice2) inset, 0 0 2.5em var(--rainbow_antispice7) inset;
    cursor: pointer;
}

.ap_unlocked:hover {
    background-color: var(--rainbow_antispice4);
    color: white;
    text-shadow: 0 0 0.15em var(--rainbow_antispice), 0 0 0.3em var(--rainbow_antispice4), 0 0 0.45em var(--rainbow_antispice5), 0 0 0.6em var(--rainbow_antispice6), 0 0 0.75em black;
    border: 1px solid var(--rainbow_antispice);
    box-shadow: 0 0 0.2em var(--rainbow_antispice), 0 0 0.4em var(--rainbow_antispice4), 0 0 0.6em var(--rainbow_antispice5), 0 0 0.8em var(--rainbow_antispice6), 0 0 1em black, 0 0 2em var(--rainbow_antispice) inset, 0 0 5em var(--rainbow_antispice2) inset;
}

.ap_unlocked:active {
    background-color: var(--rainbow_antispice);
    color: black;
    text-shadow: 0 0 0.25em black, 0 0 0.5em black;
    border: 1px solid var(--rainbow_antispice);
    box-shadow: 0 0 0.2em var(--rainbow_antispice), 0 0 0.4em var(--rainbow_antispice4), 0 0 0.6em var(--rainbow_antispice5), 0 0 0.8em var(--rainbow_antispice6), 0 0 1em black;
}

.ap_unlocked2 {
    background-color: var(--rainbow_antispice5);
    color: var(--rainbow_antispice);
    text-shadow: 0 0 0.075em var(--rainbow_antispice), 0 0 0.15em var(--rainbow_antispice4), 0 0 0.225em var(--rainbow_antispice5), 0 0 0.3em var(--rainbow_antispice6), 0 0 0.375em black;
    border: 1px solid var(--rainbow_antispice);
    box-shadow: 0 0 0.1em var(--rainbow_antispice), 0 0 0.2em var(--rainbow_antispice4), 0 0 0.3em var(--rainbow_antispice5), 0 0 0.4em var(--rainbow_antispice6), 0 0 0.5em black, 0 0 0.5em var(--rainbow_antispice2) inset, 0 0 1.25em var(--rainbow_antispice7) inset;
    cursor: pointer;
}

.ap_unlocked2:hover {
    background-color: var(--rainbow_antispice4);
    color: white;
    text-shadow: 0 0 0.075em var(--rainbow_antispice), 0 0 0.15em var(--rainbow_antispice4), 0 0 0.225em var(--rainbow_antispice5), 0 0 0.3em var(--rainbow_antispice6), 0 0 0.375em black;
    border: 1px solid var(--rainbow_antispice);
    box-shadow: 0 0 0.1em var(--rainbow_antispice), 0 0 0.2em var(--rainbow_antispice4), 0 0 0.3em var(--rainbow_antispice5), 0 0 0.4em var(--rainbow_antispice6), 0 0 0.5em black, 0 0 1em var(--rainbow_antispice) inset, 0 0 2.5em var(--rainbow_antispice2) inset;
}

.ap_unlocked2:active {
    background-color: var(--rainbow_antispice);
    color: black;
    text-shadow: 0 0 0.125em black, 0 0 0.25em black;
    border: 1px solid var(--rainbow_antispice);
    box-shadow: 0 0 0.1em var(--rainbow_antispice), 0 0 0.2em var(--rainbow_antispice4), 0 0 0.3em var(--rainbow_antispice5), 0 0 0.4em var(--rainbow_antispice6), 0 0 0.5em black;
}

.ap_bought {
    background-color: var(--rainbow_antispice);
    color: black;
    text-shadow: 0 0 0.25em black, 0 0 0.5em black;
    border: 1px solid var(--rainbow_antispice);
    box-shadow: 0 0 0.2em var(--rainbow_antispice), 0 0 0.4em var(--rainbow_antispice4), 0 0 0.6em var(--rainbow_antispice5), 0 0 0.8em var(--rainbow_antispice6), 0 0 1em black;
    cursor: default;
}

.ap_special {
    margin-left: 27.5em;
    margin-top: 2.5em;
}

@media (pointer: coarse) {
    .ap_special {
        margin-left: 9.625em;
    }
}

#refund_perks {
    margin-top: 0.25em;
    margin-bottom: 0.75em;
}

.statistics_text {
    font-size: 1.333em;
    font-weight: 400;
    color: white;
    text-align: center;
}

@media (pointer: coarse) {
    .statistics_text {
        font-size: 1.167em;
    }
}

.settings_block {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 0.6em;
}

#settings_block1 {
    margin-top: 0em;
}

#save_block {
    margin-top: 5em;
    margin-bottom: 3em;
}

#wipe_block {
    margin-top: 3em;
}

.settings_button {
    padding: 0.2em 0.2em;
    width: 16em;
    height: 4em;
    background-color: #311936;
    font-family: "Fira Code";
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    border: 1px solid white;
    margin-left: 0.25em;
    margin-right: 0.25em;
    cursor: default;
}

.can_modify {
    cursor: pointer;
}

.settings_button:hover {
    background-color: #421d49;
}

.settings_button:active {
    background-color: #571c66;
}

@media (pointer: coarse) {
    .settings_button {
        font-size: 1em;
        width: 20em;
        height: 5em;
    }
}

.s_big {
    font-size: 2em;
    padding: 0.125em 0.125em;
    width: 10em;
    height: 2.5em;
    margin-left: 0.15625em;
    margin-right: 0.15625em;
}

#wipe_save {
    color: #ff2714;
}

.hotkeys_list {
    font-size: 1em;
    color: white;
    margin-top: 3em;
    margin-bottom: 0em;
    text-align: center;
}

.info {
    color: white;
    font-size: 1.25em;
    margin-top: 6em;
    margin-bottom: 0.5em;
}

.link {
    color: #ff3dd8;
    cursor: pointer;
    margin-right: 0.5em;
}

.link:hover {
    color: #fd74e2;
}

.title {
    font-family: "Fira Code";
    font-size: 2.857em;
    font-weight: bold;
    color: #ff3dd8;
    margin-top: 0.4em;
    margin-bottom: 0.8em;
}

.change_head {
    font-family: "Fira Code";
    color: white;
    font-size: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
}

.change_minor {
    font-family: "Fira Code";
    color: #aaaaaa;
    font-size: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
}

.change_major {
    font-family: "Fira Code";
    color: #ff3dd8;
    font-size: 1.4em;
    margin-top: 0em;
    margin-bottom: 0em;
}