:root {
    --base-transition-time: 0.2s;
    --base-red: rgba(255, 43, 43, 0.5);
    --base-blue: rgba(10, 100, 200, 0.75);
    --base-green: rgba(28, 170, 28, 0.67);
    --base-yellow: rgba(143, 143, 43, 1);
    --base-button: rgba(200, 200, 200, 1);
    --base-grey: rgba(100, 100, 100, 0.6);
    --base-flash: #0ff;

    /* Neon lights woop woop */
    --base-flash_1: #0ff;
    --base-flash_2: #f0f;
    --base-flash_3: #ff0;
    overflow: hidden;

    /* Au, Ag, Sn/Cu */
/*    --base-flash_1: rgb(164, 129, 17);
    --base-flash_2: rgb(169, 176, 180);
    --base-flash_3: rgb(169, 113, 66);*/

    /* Base */
/*    --base-flash_1: rgb(255, 43, 43);
    --base-flash_2: rgb(28, 170, 28);
    --base-flash_3: rgb(143, 143, 43);*/
}

.row {
  display: flex;
}

.mega_left {
    float: left;
    width: 75%;
}

.mega_right {
    display: inline-table;
    float: right;
    width: 23%;
    height: 100%;
}

.footer {
    position: fixed;
    left: 4%;
    bottom: 0;
    padding-top: 2px;
    padding-bottom: -5px;
    width: 100%;
    color: white;
    text-align: center;
    height: 60px;
}

.unlikely {
    background-color: var(--base-red)!important;
}

.unlikely_2 {
    background-color: var(--base-blue)!important;
}

.ghost_clicked {
    background-color: var(--base-yellow)!important;
}

.clicked {
    background-color: var(--base-green)!important;
}

.right_clicked {
    background-color: var(--base-red)!important;
}

.custom_disabled {
    background-color: var(--base-grey)!important;
    opacity: 0.6;
}

.redundant {
    background-color: var(--base-yellow)!important;
}


.data_col {
    border: 2px solid rgb(20, 130, 20);
    /*border: 2px rgba(0, 0, 0, 1.0);*/
    min-height: 350px;
}

.data_col:nth-child(1) {
    float: top;
    min-height: 200px!important;
}

.data_col:nth-child(2) {
    float: top;
    min-height: 672px!important;
}

.column_left {
    float: left;
    width: 33.33%;
}

.column_right {
    float: left;
    width: 33.33%;          
}

.column_center {
    float: left;
    width: 33.33%;
    padding-left: 40px;
    padding-right: 40px;
}

.column_left_2 {
    float: left;
    width: 1%;
}

.column_right_2 {
    float: left;
    width: 1%;          
}

.column_center_2 {
    float: left;
    width: 98%;
    padding-left: 40px;
    padding-right: 40px;
}

.map_section_btn {
    position: fixed;
    bottom: 80px;
}

.map_section_btn_2 {
    bottom: 80px;
}

.map_section {
    position: fixed;
    bottom: 30px;
    left: 4%;
}

.p_custom.custom_disabled {
    cursor: not-allowed;
    transition: all var(--base-transition-time) ease-in-out;
    transform: scale(1);
    text-decoration: line-through;
}

.p_custom.unlikely_2 {
    transition: all var(--base-transition-time) ease-in-out;
    transform: scale(1);
}

.p_custom.custom_enabled {
    transition: all var(--base-transition-time) ease-in-out;
    transform: translate3d(0, 0px, 0);
    transform: scale(1);
}

.p_custom.custom_enabled:hover {
    transform: scale(1.08);
}

.custom_enabled.custom_hover_valid {
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: rgb(154, 202, 237) 0 0 10px 1px;
    transition: all var(--base-transition-time) ease-in-out;
}

.custom_enabled.custom_hover_valid.ghost {
    /*box-shadow: rgb(100, 255, 100) 0 0 10px 1px;*/
    transition: all var(--base-transition-time) ease-in-out;
}

.custom_enabled.custom_hover_valid.evidence {
    /*box-shadow: rgb(154, 202, 237) 0 0 10px 1px;*/
    transition: all var(--base-transition-time) ease-in-out;
}

.custom_enabled.custom_hover_invalid {
    transition: all var(--base-transition-time) ease-in-out;
    opacity: 0.3;
}

.p_custom_map {
    background: var(--base-button);
    font-size: 21px;
    border:  3px solid;
    border-radius: 20px;
    width: 396px;
    margin-top: 20px;
}

.p_custom {
    cursor: pointer;
    background: var(--base-green);
    font-family: 'Courier New';
    font-size: 20px;
    border: 3px solid;
    border-radius: 20px;
    width: 97.5%;
    margin-top: 22px;
    transition: all var(--base-transition-time) ease-in-out;
}

.p_evi {
    cursor: pointer;
    background: var(--base-button);
    font-size: 20px;
    border-radius: 15px; 
    margin-left: 6px;
    margin-right: 6px;
    transform: translate3d(0px, 0px, 0px);
    transition: all var(--base-transition-time) ease-in-out;
}

.p_evi.custom_disabled {
    cursor: not-allowed;
    transition: all var(--base-transition-time) ease-in-out;
    text-decoration: line-through;
}

.p_evi.unlikely_2 {
    transition: all var(--base-transition-time) ease-in-out;
}

.p_evi.custom_enabled:hover {
    transition: all var(--base-transition-time) ease-in-out;
    transform: translate3d(0px, 3px, 0px);
}

.p_evi .custom_enabled {
    transition: all var(--base-transition-time) ease-in-out;
    transform: scale(1);
}

.p_info {
    background: var(--base-button);
    border-radius: 15px; 
    font-size: 17px;
    cursor: pointer;
    margin-top: 8px;
    margin-left: 4px;
    margin-right: 4px;
    transition: all var(--base-transition-time) ease-in-out;
}

.p_info:hover {
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
    transition: all var(--base-transition-time) ease-in-out;
    transform: scale(1.05);
}

.p_roll {
    position: fixed;
    border-radius: 15px; 
    font-size: 20px; 
    width: 396px;
    bottom: 80px;
    background-color: mediumvioletred!important;
    cursor: pointer;
    transition: all var(--base-transition-time) ease-in-out;
    transform: scale(1);
}

.p_roll:hover {
    transition: all var(--base-transition-time) ease-in-out;
    transform: scale(1.05);
    color: white;
    box-shadow: #9ecaed 0 0 10px 1px;
}

.p_copyright {
    position: fixed;
    color: white;
    font-size: 13px; 
    bottom: 0px;
    margin-left: 250px; 
}

.p_reset {
    background: var(--base-button);
    border-radius: 15px; 
    font-size: 20px; 
    width: 396px;
    background-color: mediumvioletred;
    cursor: pointer;
    transition: all var(--base-transition-time) ease-in-out;
    transform: scale(1);
}

.p_reset:hover {
    transition: all var(--base-transition-time) ease-in-out;
    transform: scale(1.05);
    box-shadow: #9ecaed 0 0 10px 1px;
}

.p_left {
    margin-left: auto;
}

.p_right {
    margin-right: auto;
}

.body_custom {
    position: relative;
    text-align: center;
    max-width: 96%;
    margin-right: auto;
    margin-left: auto;
    background: black;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    background-position: center;
}

.info_box {
    text-align: left;
    margin-left: 30px;
    margin-right: 30px;
    font-family: Helvetica;
    font-size: 15px;
    color: white;
}

.gen_info {
    text-align: left;
    margin-right: 30px;
    margin-left: 30px;
    margin-top: 10px;
    font-family: Helvetica;
    font-size: 15px;
    color: white;
}

.ghosts,
.glitch {
    color: var(--base-green);
}

@-webkit-keyframes map_flash_anim {
    from {
        background: var(--base-flash);
        box-shadow: 0px 0px 10px 10px var(--base-flash);
        border-color: var(--base-flash);
    }
    to {
    }
}
@-moz-keyframes map_flash_anim {
    from {
        background: var(--base-flash);
        box-shadow: 0px 0px 20px 10px var(--base-flash);
        border-color: var(--base-flash);
    }
    to { }
}
@keyframes map_flash_anim {
    from {
        background: var(--base-flash);
        box-shadow: 0px 0px 20px 10px var(--base-flash);
        border-color: var(--base-flash);
    }
    to { }
}

.flash_fade {
    -webkit-animation: map_flash_anim 1s ease-in-out 0s;
    -moz-animation: map_flash_anim 1s ease-in-out 0s;
    -o-animation: map_flash_anim 1s ease-in-out 0s;
    animation: map_flash_anim 1s ease-in-out 0s;
}

@-webkit-keyframes map_flash_anim_1 {
    from {
        background: var(--base-flash_1);
        box-shadow: 0px 0px 10px 10px var(--base-flash_1);
        border-color: var(--base-flash_1);
    }
    to {
    }
}
@-moz-keyframes map_flash_anim_1 {
    from {
        background: var(--base-flash_1);
        box-shadow: 0px 0px 20px 10px var(--base-flash_1);
        border-color: var(--base-flash_1);
    }
    to { }
}
@keyframes map_flash_anim_1 {
    from {
        background: var(--base-flash_1);
        box-shadow: 0px 0px 20px 10px var(--base-flash_1);
        border-color: var(--base-flash_1);
    }
    to { }
}

.flash_fade_1 {
    -webkit-animation: map_flash_anim_1 1s ease-in-out 0s;
    -moz-animation: map_flash_anim_1 1s ease-in-out 0s;
    -o-animation: map_flash_anim_1 1s ease-in-out 0s;
    animation: map_flash_anim_1 1s ease-in-out 0s;
}

@-webkit-keyframes map_flash_anim_2 {
    from {
        background: var(--base-flash_2);
        box-shadow: 0px 0px 10px 10px var(--base-flash_2);
        border-color: var(--base-flash_2);
    }
    to {
    }
}
@-moz-keyframes map_flash_anim_2 {
    from {
        background: var(--base-flash_2);
        box-shadow: 0px 0px 20px 10px var(--base-flash_2);
        border-color: var(--base-flash_2);
    }
    to { }
}
@keyframes map_flash_anim_2 {
    from {
        background: var(--base-flash_2);
        box-shadow: 0px 0px 20px 10px var(--base-flash_2);
        border-color: var(--base-flash_2);
    }
    to { }
}

.flash_fade_2 {
    -webkit-animation: map_flash_anim_2 1s ease-in-out 0s;
    -moz-animation: map_flash_anim_2 1s ease-in-out 0s;
    -o-animation: map_flash_anim_2 1s ease-in-out 0s;
    animation: map_flash_anim_2 1s ease-in-out 0s;
}

@-webkit-keyframes map_flash_anim_3 {
    from {
        background: var(--base-flash_3);
        box-shadow: 0px 0px 10px 10px var(--base-flash_3);
        border-color: var(--base-flash_3);
    }
    to {
    }
}
@-moz-keyframes map_flash_anim_3 {
    from {
        background: var(--base-flash_3);
        box-shadow: 0px 0px 20px 10px var(--base-flash_3);
        border-color: var(--base-flash_3);
    }
    to { }
}
@keyframes map_flash_anim_3 {
    from {
        background: var(--base-flash_3);
        box-shadow: 0px 0px 20px 10px var(--base-flash_3);
        border-color: var(--base-flash_3);
    }
    to { }
}

.flash_fade_3 {
    -webkit-animation: map_flash_anim_3 1s ease-in-out 0s;
    -moz-animation: map_flash_anim_3 1s ease-in-out 0s;
    -o-animation: map_flash_anim_3 1s ease-in-out 0s;
    animation: map_flash_anim_3 1s ease-in-out 0s;
}


@-webkit-keyframes flash_card_anim {
    from {
        background: var(--base-flash);
        box-shadow: 0px 0px 10px 10px var(--base-flash);
        border-color: var(--base-flash);
    }
    to {
    /*background: var(--base-button);*/
    /*box-shadow: 0px 0px 0px 0px #0ff;*/
    }
}
@-moz-keyframes flash_card_anim {
    from {
        background: var(--base-flash);
        box-shadow: 0px 0px 20px 10px var(--base-flash);
        border-color: var(--base-flash);
    }
    to { }
}
@keyframes flash_card_anim {
    from {
        background: var(--base-flash);
        box-shadow: 0px 0px 20px 10px var(--base-flash);
        border-color: var(--base-flash);
        transform: scale(1.05);
    }
    to { }
}

.flash_fade_card {
    -webkit-animation: flash_card_anim 0.5s ease-in-out 0s;
    -moz-animation: flash_card_anim 0.5s ease-in-out 0s;
    -o-animation: flash_card_anim 0.5s ease-in-out 0s;
    animation: flash_card_anim 0.5s ease-in-out 0s;
}


@-webkit-keyframes flash_card_anim_1 {
    from {
        background: var(--base-flash_1);
        box-shadow: 0px 0px 10px 10px var(--base-flash_1);
        border-color: var(--base-flash_1);
    }
    to {
    }
}
@-moz-keyframes flash_card_anim_1 {
    from {
        background: var(--base-flash_1);
        box-shadow: 0px 0px 20px 10px var(--base-flash_1);
        border-color: var(--base-flash_1);
    }
    to { }
}
@keyframes flash_card_anim_1 {
    from {
        background: var(--base-flash_1);
        box-shadow: 0px 0px 20px 10px var(--base-flash_1);
        border-color: var(--base-flash_1);
        transform: scale(1.05);
    }
    to { }
}

.flash_fade_card_1 {
    -webkit-animation: flash_card_anim_1 0.5s ease-in-out 0s;
    -moz-animation: flash_card_anim_1 0.5s ease-in-out 0s;
    -o-animation: flash_card_anim_1 0.5s ease-in-out 0s;
    animation: flash_card_anim_1 0.5s ease-in-out 0s;
}


@-webkit-keyframes flash_card_anim_2 {
    from {
        background: var(--base-flash_2);
        box-shadow: 0px 0px 10px 10px var(--base-flash_2);
        border-color: var(--base-flash_2);
    }
    to {
    }
}
@-moz-keyframes flash_card_anim_2 {
    from {
        background: var(--base-flash_2);
        box-shadow: 0px 0px 20px 10px var(--base-flash_2);
        border-color: var(--base-flash_2);
    }
    to { }
}
@keyframes flash_card_anim {
    from {
        background: var(--base-flash_2);
        box-shadow: 0px 0px 20px 10px var(--base-flash_2);
        border-color: var(--base-flash_2);
        transform: scale(1.05);
    }
    to { }
}

.flash_fade_card_2 {
    -webkit-animation: flash_card_anim_2 0.5s ease-in-out 0s;
    -moz-animation: flash_card_anim_2 0.5s ease-in-out 0s;
    -o-animation: flash_card_anim_2 0.5s ease-in-out 0s;
    animation: flash_card_anim_2 0.5s ease-in-out 0s;
}


@-webkit-keyframes flash_card_anim_3 {
    from {
        background: var(--base-flash_3);
        box-shadow: 0px 0px 10px 10px var(--base-flash_3);
        border-color: var(--base-flash_3);
    }
    to {
    }
}
@-moz-keyframes flash_card_anim_3 {
    from {
        background: var(--base-flash_3);
        box-shadow: 0px 0px 20px 10px var(--base-flash_3);
        border-color: var(--base-flash_3);
    }
    to { }
}
@keyframes flash_card_anim_3 {
    from {
        background: var(--base-flash_3);
        box-shadow: 0px 0px 20px 10px var(--base-flash_3);
        border-color: var(--base-flash_3);
        transform: scale(1.05);
    }
    to { }
}

.flash_fade_card_3 {
    -webkit-animation: flash_card_anim_3 0.5s ease-in-out 0s;
    -moz-animation: flash_card_anim_3 0.5s ease-in-out 0s;
    -o-animation: flash_card_anim_3 0.5s ease-in-out 0s;
    animation: flash_card_anim_3 0.5s ease-in-out 0s;
}

.roll_disabled:disabled {
    background: grey;
    transform: scale(1);
    border: 0px solid black;
    box-shadow: unset;
    color: black;
    cursor: not-allowed;
}