/* 
===============================================================================
GENERAL PAGE 
===============================================================================
*/
html
{
    background-color: black;
    background-image: url('/images/backgrounds/dungeon_wall.png');
    background-size: 25rem;
    background-repeat: repeat;
    background-position-x: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 1px;
    overflow-y: hidden;
}

*
{
    box-sizing: border-box;
}

.row 
{  
    display: flex;
    flex-wrap: wrap;
}

.column 
{
    flex: 50%;
}

@media screen and (max-width: 600px) 
{
    .column 
    {
        width: 100%;
    }
}

.page
{
    opacity: 1;
    transition: 500ms;
    tranform: translateX(0);
    tranform-origin: right;
}

body
{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    overflow: scroll; 
    background-size: 100%;
    background: url('/images/backgrounds/dungeon_wall_full.png'),
        linear-gradient(208deg, rgba(255,104,0,1) 0%, rgba(81,13,13,1) 37%, rgba(0,0,0,1) 60%);
    background-blend-mode: color-dodge;
    height: 100%;
}

p 
{
    font-size: 15px;
    color: white;
    border-radius: 12px;
    letter-spacing: 1px;
}

a
{
    font-size: 15px;
    color: yellow;
    border-radius: 12px;
    letter-spacing: 1px;
}

.character_builder
{
    flex: 20%;
    padding: 1rem;
    padding-left: 0rem;
    /* margin-top: 0.5rem; */
}

.encounter_roster
{
    flex: 60%;
    padding: 1rem;
    margin-top: 0.5rem;
    /* margin-right: 1rem; */
    margin-bottom: 4rem;
}

/* .body_content */
/* { */
    /* font-size: 20px; */
    /* animation-duration: 2s; */
    /* animation-timing-function: ease-in-out; */
    /* animation-delay: 0s; */
    /* animation-iteration-count: 1; */
    /* animation-name: slidePageForward; */
/* } */

.body_text
{
    font-size: 15px;
    color: white;
    border-radius: 12px;
    letter-spacing: 1px;
}

.body_image_background
{
    background-image: url('/images/gifs/candle-light.gif');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

@media screen and (width < 700px)
{
    .header
    {
    }
    
    .body
    {
        font-size: 60%;
    }
    
    .body_content .body_text
    {
        font-size: 60%;
    }
    
    .button_add .button_general
    {
        font-size: 60%;
        max-width: 100%;
    }
    
    .button_select .button_checkbox .button_radio 
    {
        height: 25%;
        width: 50%;
    }
    
    .input_text .input_number
    {
        height: 25%;
        width: 50%;
    }
    
    .footer
    {        
    }
}

#collection_email
{
    color: white;
    font-size: 1rem;
    font-weight: bold;
    flex: 100%;
    margin-top: 1rem;
    margin-left: 1rem;
}

#collection_characters
{
    color: white;
    font-size: 1rem;
    font-weight: bold;
    flex: 60%;
    margin-top: 1rem;
    margin-left: 1rem;
}

.characterListItem
{
    padding: 5px;
    margin-right: 1rem;
    background: rgb(40, 31, 31);
    border: darkgray;
    border-style: ridge;
}

.collection_character_button
{
    width: 20px;
    float: right;
    margin-left: 5px;
    transition: 0.1s;
}
.collection_character_button:hover
{
    filter: brightness(0.75);
}

#collection_character_buttons
{
    float: right;
    text-align: right;
}
/* 
===============================================================================
HEADER 
===============================================================================
*/
#header_title
{
    background: #281700;
    color: white;
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    padding-bottom: 10px;
    padding-top: 7px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    opacity: 100%; 
    z-index: 100;
}

#header_band
{
    font-color: white;
    padding: 0%;
    font-size: 23px;
    text-align: left;
    margin-left: 1rem;
    position: relative;
    top: -0.5rem;
}

#header_band > a
{
    text-decoration: none;
    font-size: 1rem;
    color: gray;    
    letter-spacing: 1px;
    transition: 0.1s;
}

#header_band > a:hover
{
    color: white;
}

#header_forte_button
{
    max-width: 140px;
    top: 15px;
    position: absolute;
    left: 43%;
    opacity: 85%;
}

#header_menu_button
{
    max-width: 120px;
    top: 23px;
    position: absolute;
    left: 20;
    opacity: 85%;
}

#header_user_button
{
    max-width: 100px;
    top: 15px;
    position: absolute;
    right: 20;
    opacity: 85%;
}

#header_icon_forte
{
    color:indigo;
    font-size:170px;
    top: -38px;
    position: absolute;
    left: 409px;
    opacity: 85%;
}

#b3_hover:hover+#b3_welcome 
{
    display: block;
}

#b3_profile_header
{
    width: 2rem;
    position: relative;
    top: 0.7rem;
}

#bmac_header
{
    height: 2rem;
    top: 0.7rem;
    position: relative;
    float: right;
    margin-right: 1rem;
}

#b3_welcome
{
    display: none;
    position: absolute;
    left: 3rem;
    top: 3rem;
    color: black;
    height: auto;
    max-width: 32rem;
    background-color: antiquewhite;
    padding: 1rem;
    border-style: solid;
    border-radius: 0rem 1rem 1rem 1rem;
    font-size: 1rem;
    transition: 0.1s;
    font-weight: bold;
    z-index: 100;
}
/*
===============================================================================
MENU 
===============================================================================
*/
.menu
{
    background-color:black;
    font-size: 170px;
}
/*
===============================================================================
BODY 
===============================================================================
*/
#crit
{
    color:red;
}

#form_character
{
    text-align: left;
    margin-bottom: 5rem;
}

.character_roster_header
{
    background-image: url('/images/fantasy_ui/51.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 3%;
    letter-spacing: 1px;
    border: none;
    color: white;
    text-align: center;
    font-size: 1.5rem;
    /* background-color: #200c04;
    border-radius: 0rem;
    border-style: outset;
    border-color: #da8020; */
}

.character_builder_attack
{
    padding: 0.5rem;
    background-color: rgba(43, 34, 35, 0.7);
    /* background-image: url('/images/fantasy_ui/84.png'); */
    /* background-repeat: no-repeat;
    background-size: 100% 100%; */
    border-radius: 0.5rem;
}

.character_builder_heal
{
    padding: 0.5rem;
    background-color: rgba(43, 34, 35, 0.7);
    /* background-image: url('/images/fantasy_ui/84.png');
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    border-radius: 0.5rem;
}

#heal
{
    background-color: transparent;
    /* background-color: rgb(43, 182, 43); */
}

#heal:hover
{
    background-color: transparent;
    /* background-color: rgba(34, 139, 34, 1); */
}

.character_builder_attribute
{
    max-width: 100%;
    margin-top: 0;
    font-weight: bold;
}

.character_roster_option
{
    background-image: url('/images/fantasy_ui/50.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 6%;
    padding-top: 1.4rem;
    letter-spacing: 1px;
    border: none;
    color: white;
    height: 6rem;
}

.character_roster_attacks
{
    background-image: url('/images/fantasy_ui/50.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 5%;
    letter-spacing: 1px;
    border: none;
    color: white;
    padding-top: 8%;
    /* text-align: center; */
}

.character_roster_heals
{
    background-image: url('/images/fantasy_ui/50.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 5%;
    letter-spacing: 1px;
    border: none;
    color: white;
    /* text-align: center; */
}

.character_roster_attack
{
    background-image: url('/images/fantasy_ui/50.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 3%;
    letter-spacing: 1px;
    border: none;
    color: white;
}

.character_roster_heal
{
    background-image: url('/images/fantasy_ui/50.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 2rem;
    letter-spacing: 1px;
    border: none;
    color: white;
}

.character_roster_footer
{
    background-image: url('/images/backgrounds/scroll-clipart-cartoon-19.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 3%;
    letter-spacing: 1px;
    border: none;
    color: #200c04;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    transition: 1s;
    /* background-color: #200c04;
    border-radius: 0rem;
    border-style: outset;
    border-color: #da8020; */
}

#outcome_detailed
{
    background-image: url('/images/fantasy_ui/51.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 3%;
    letter-spacing: 1px;
    border: none;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    transition: 1s;
}

#outcome_detailed:hover
{
    color: red;
}

#outcome_prediction
{
    background-image: url('/images/fantasy_ui/51.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 3%;
    letter-spacing: 1px;
    border: none;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    transition: 1s;
}

#outcome_prediction:hover
{
    color: red;
}

#outcome_summary
{
    background-image: url('/images/fantasy_ui/51.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 3%;
    letter-spacing: 1px;
    border: none;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    transition: 1s;
}

#outcome_summary:hover
{
    color: red;
}

#outcome_detailed_body
{
    display: block;
}

#outcome_summary_body
{
    display: flex;
}

#outcome_summary_damage
{
    flex: 50%;
}

#outcome_summary_healing
{
    flex: 50%;
}

.outcome_summary_body_tile
{
    text-align: left;
    letter-spacing: 1px;
    color: white;
    /* flex-grow: 1; */
    /* flex: 50%; */
}

.outcome_summary_body_tile_title
{
    background-image: url('/images/fantasy_ui/101.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0.5rem;
    color: black;
    text-align: center;    
    font-weight: bold;
}

.outcome_summary_body_tile_list
{
    padding: 1rem;
    background-image: url('/images/fantasy_ui/47.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;   
    background-color: rgba(0, 0, 0, 0.5); 
}

#outcome_prediction_body
{
    color: white;
    padding: 2rem;
    /* background-image: url('/images/fantasy_ui/47.png'); */
    background: rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: left;
    letter-spacing: 1px;
    display: block;
}

.encounter_roster_column
{
    flex: 60%;
    padding: 1rem;
    margin-bottom: 3rem;
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.encounter_game_run
{
    flex: 20%;
    text-align: center;
    padding: 1rem;
    padding-left: 0rem;
    margin-bottom: 3rem;
    font-size: 1.2rem;
    margin-top: 0.5rem; 
}

.player_print
{
    background-blend-mode: hard-light;
    background-repeat: no-repeat;
    background-size: 100% 100%, 88% 79%;
    background-position: center,center;
    letter-spacing: 1px;
    border: none;
    flex: 100%;
    max-width: 50%;
    font-size: 1.2rem;
    padding: 1.5rem;
    /* background-color: #200c0487;
    border-style: inset;
    border-color: #da8020; */
}

.monster_print
{
    background-blend-mode: hard-light;
    background-repeat: no-repeat;
    background-size: 100% 100%, 88% 79%;
    background-position: center,center;
    letter-spacing: 1px;
    border: none;
    flex: 100%;
    max-width: 50%;
    font-size: 1.2rem;
    padding: 1.5rem;
    /* background-color: #200c0487;
    border-style: inset;
    border-color: #da8020; */
}


.print_turn_header
{
    background-image: url('/images/fantasy_ui/101.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 1rem;
    letter-spacing: 1px;
    border: none;    
    color: black;
    font-weight: bold;
}

.print_turn_action
{
    background-image: url('/images/fantasy_ui/47.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 1rem;
    letter-spacing: 1px;
    border: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

.print_game_summary
{
    background-image: url('/images/fantasy_ui/1.png');
    background-repeat: no-repeat;
    /* background: rgba(0, 0, 0, 0.5); */
    /* border-style: solid !important; */
    /* border-color: goldenrod !important;  */
    background-size: 100% 100%;
    padding: 3rem;
    letter-spacing: 1px;
    border: none;
    color: white;
    font-size: 100%;
}

#welcome_message_title
{
    font-size: 2rem;
}

.welcome_message
{
    text-align: center;
    margin: 7rem;
    width: 60%;
    height: 100%;
}

.welcome_message_b3_wakes
{
    width: 10rem;
    /* animation-name: wake_up_b3; */
    /* animation-duration: 3s; */
    margin-bottom: 1rem;
}

@keyframes wake_up_b3
{
    0% 
    {
        opacity: 0.0;
        width: 50rem;
    }
    30%
    {
        opacity: 1;
        width: 50rem;
    }
    31%
    {
        width: 51rem;
    }
    33%
    {
        width: 52rem;
    }
    35%
    {
        width: 51rem;
    }
    100% 
    {
        width: 10rem;
    }
}


.b3_passive
{
    width: 10rem;
    margin-bottom: 3rem;
    animation-name: b3_passive;
    animation-duration: 3s;  
}

@keyframes b3_passive
{
    0%
    {
        margin-top: 0rem;
    }
    50%
    {
        margin-top: 1rem;
    }
    100%
    {
        margin-top: 0rem;
    }
}
/*
.b3_passive:hover
{
    width: 10rem;
    margin-bottom: 3rem;
    animation-name: b3_annoyed;
    animation-duration: 3s;  
}

@keyframes b3_annoyed
{
    0%
    {
        tranform: rotate(0deg);
    }
    25%
    {
        tranform: rotate(-95deg);
    }
    50%
    {
        tranform: rotate(-5deg);
    }
    75%
    {
        tranform: rotate(5deg);
    }
    100%
    {
        tranform: rotate(0deg);
    }
}
*/

.howTo_image
{
    max-width: 100%;
    margin: 1rem 0 0 0;
    border: gray;
    border-radius: 12px;
    border-style: double;    
}
/*
===============================================================================
FORMS
===============================================================================
*/
.button_radio
{
    scale: 1;
    margin-top: 1rem;
}

.button_general
{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 1px;
    height: 3rem;
    width: 14rem;
    margin-bottom: 2rem;
    font-size: 1rem;
    color: white;
    border: none;
    background-image: url('/images/fantasy_ui/21.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: letter-spacing 1s, color 1s, font-size 1s;
    border-radius: 0.5rem;
    background-color: transparent;
    /* background-color: rgba(200, 0, 0, 1); */
    font-weight: bold;
    transition: 0.1s;
}

.button_general:hover
{
    letter-spacing: 1px;
    font-size: 1rem;
    color: white;
    /* background-color: rgba(139, 0, 0, 1); */
    background-image: url('/images/fantasy_ui/22.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: 0.1s;
}

.button_secondary
{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 1px;
    text-align: left;
    height: 2rem;
    width: 100%;
    margin-bottom: 0rem;
    font-size: 1rem;
    color: white;
    border: none;
    background-image: url('/images/fantasy_ui/101.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* transition: letter-spacing 1s, color 1s, font-size 1s; */
    /* border-radius: 2px; */
    background-color: darkred;
    font-weight: bold;
    transition: 0.1s;
    padding-left: 1rem;
}

.button_secondary:hover
{
    letter-spacing: 1px;
    font-size: 1rem;
    color: black;
    /* background-color: darkorange; */
    transition: 0.1s;
}

.button_add
{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 1px;
    height: 3rem;
    width: 100%;
    font-size: 100%;
    color: white;
    border: none;
    background-image: url('/images/fantasy_ui/21.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* transition: letter-spacing 1s, color 1s, font-size 1s; */
    border-radius: 0.5rem;
    background-color: transparent;  
    transition: 0.1s;
    /* background-color: rgba(200, 0, 0, 1); */
    font-weight: bold;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

.button_add:hover
{
    /* background-color: rgba(139, 0, 0, 1); */
    background-image: url('/images/fantasy_ui/22.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    letter-spacing: 1px;
    transition: 0.1s;
}

.button_select
{
    font-size: 1rem;
}

.button_checkbox
{
    scale: 4;
    margin: 4%;
}

.input_text
{
    height:2rem;
    max-width: 100%;
    background-color: antiquewhite;
}

input[type="text"] 
{
    font-size:1rem;
}

.input_number
{
    height: 2rem;
    width: 30%;
    background-color: antiquewhite;
}

input[type="number"]
{
    font-size: 1rem;
}

.character_input
{
    width: 100%;
    height: 2rem;
    background-color: antiquewhite;
}

#login_container
{
    position: absolute;
    left: 30%;
    top: 35%;
    padding: 0.5rem;
    background-color: rgba(139, 0, 0, 0.7);
    border-radius: 0.5rem;
    width: 40%;
}

#reqest_login_container
{
    position: absolute;
    left: 22%;
    top: 22%;
    padding: 0.5rem;
    background-color: rgba(139, 0, 0, 0.7);
    border-radius: 0.5rem;
    width: 55%;
}

#login_email
{
    width: 100%;
    padding: 0.5rem;
}

#login_passcode
{
    display: none;
    width: 100%;
    padding: 0.5rem;
}

#login_label
{
    font-size: 15px;
    color: white;
    border-radius: 12px;
    letter-spacing: 1px;
}

#login_button_verifyPasscode
{
    display: none;
}

#login_errors
{
    color: orange;
    font-weight: bold;
}

.user_login_link
{
    float: right;
    margin: 0px 15px 0px 0px;
}

.pageUnderConstruction
{
    position: absolute;
    width: 100%;
    background-color: orange;
    color: white;
    font-weight: bolder;
    text-align: center;
    z-index: 99999;
    padding: 1rem;
    bottom: 0px;
}

#add_to_my_collection
{
    bottom: 5rem;
    position: relative;
}

#add_from_my_collection
{
    width: auto;
    height: auto;
    padding: 1rem 2rem 1rem 2rem;
}

#add_from_my_collection_list
{
    display: none;
}

.button_remove
{
    width: 30px; 
    margin-bottom: 2rem;
    transition: 0.1s;
}

.button_remove:hover
{
    filter: brightness(50%);
}
/* 
===============================================================================
FOOTER 
===============================================================================
*/
#footer_background
{
    /* opacity: 90%; */
    background-color: black;
}

#footer_row
{
    position: fixed;
    bottom: 0%;
    padding: 0%;
    left: 0%;
    background-color: black;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 100%;
    height: 4rem;
    z-index: 100;
}

.footer_button
{
    background-color: black;
    color: white;
    font-size: 100%;
    margin-left: 0%;
    border: none;
    margin-bottom: 0%;
    margin-right: 0%;
    opacity: 85%;
    text-decoration: none;   
    float: left;
    transition: letter-spacing 2s, color 2s, font-size 2s;
    position: fixed;
    bottom: 15px;
    left: 3px;
}

.footer_button:hover
{
    font-size: 110%;
    letter-spacing: 5px;
    color: goldenrod;
}

.footer_button_icon
{
    width: 10%;
    position: relative;
    bottom: -4px;
    margin-left: 0%;
}
.footer_button_icon:active
{
    background-color: indigo;
}

#run_encounter
{
    float: right;
    margin-right: 2rem;
    margin-bottom: 0.5rem;
    height: 3rem;
    background-size: 100% 100%;
    position: fixed;
    bottom: 0px;
    right: 0px;
    /* width: 12rem; */
    border-radius: 0.5rem;
}

#new_encounter
{
    float: left;
    margin-left: 2rem;
    margin-bottom: 0.5rem;
    height: 3rem;
    background-size: 100% 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 15rem;
    border-radius: 0.5rem;
}

#footer_copywrite
{
    letter-spacing: 1px;
    font-size: 0.8rem;
    opacity: 0.5;
    width: 31%;
}
/* 
===============================================================================
ANIMATIONS 
===============================================================================
*/
@keyframes slidePageForward
{
    0% 
    {
        transform: translateX(100%);
    }
    100% 
    {
        transform: translateX(0%);        
    }
}

.transition-fade
{
    opacity: 1;
    transition: 500ms;
    tranform: translateX(0);
    tranform-origin: left;
}

html.is-animating .transition-fade
{
    opacity: 1;
    tranform: tranlateX(100%);
}

html.is-leaving .transition-fade
{
    opacity: 0;
    tranform: translateX(0);
}
/* 
===============================================================================
REFLEXIVE SETTINGS 
===============================================================================
*/
@media screen and (max-width: 386px)
{
    #header_band > a
    {
        text-decoration: none;
        font-size: 0.8rem;
        color: gray;    
        letter-spacing: 1px;
        transition: 0.1s;
    }
    
    .encounter_game_run 
    {
        flex: 50%;
        text-align: center;
        padding: 1rem;
        margin-bottom: 3rem;
        font-size: 0.8rem;
    }
    
    #footer_row 
    {
        position: relative;
        /* bottom: 22%; */
        padding: 0%;
        background-color: black;
        color: white;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        width: 100%;
        height: 3rem;
    }
    
    #new_encounter
    {
        height: 4rem;
        background-size: 100% 100%;
        border-radius: 2px;
        position: relative;
        width: 15rem;
        float: none;
        margin: 1rem;
    }
    
    #run_encounter 
    {
        float: none;
        height: 4rem;
        background-size: 100% 100%;
        position: relative;
        border-radius: 2px;
        width: 15rem;
        margin-right: 0rem;
    }
    
    .character_builder 
    {
        flex: 50%;
        padding: 1rem;
    }    
    
    .button_general
    {
        height: 4rem;
    }
    
    .welcome_message 
    {
        text-align: center;
        margin: 2rem;
        width: 80%;
        height: 100%;
    }
    
    #footer_copywrite 
    {
        letter-spacing: 1px;
        font-size: 0.8rem;
        opacity: 0.5;
        width: 80%;
    }
    
    .player_print 
    {
        background-blend-mode: hard-light; 
        background-repeat: no-repeat; 
        background-size: 100% 100%, 88% 79%; 
        background-position: center,center; 
        letter-spacing: 1px;
        border: none;
        flex: 100%;
        max-width: 100%;
        font-size: 0.8rem;
        padding-left: 0.5rem;
    }
    
    .monster_print 
    {
        background-blend-mode: hard-light;
        background-repeat: no-repeat;
        background-size: 100% 100%, 88% 79%;
        background-position: center,center;
        letter-spacing: 1px;
        border: none;
        flex: 100%;
        max-width: 100%;
        font-size: 0.8rem;
        padding-left: 0.5rem;
    }
    
    .encounter_roster_column 
    {
        flex: 100%;
        padding: 1rem;
        margin-bottom: 3rem;
        font-size: 0.8rem;
    }
    
    .character_roster_option
    {
        background-image: url('/images/fantasy_ui/50.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 6%;
        letter-spacing: 1px;
        border: none;
        color: white;
        height: 6rem;
    }
}    

.modal
{
    display: none;
    width: 40%;
    text-align: center;
    background-color: rgba(139, 0, 0, 0.7);;
    padding: 6%;
    letter-spacing: 1px;
    border-radius: 1rem;
    color: white;    
    height: auto;
    padding: 1rem;
    top: 45%;
    position: absolute;
    left: 30%;
    z-index: 100;
}

#modal_confirm
{
    display: none;
}

#modal_okay
{
    display: none;
}

#modal_warning
{
    display: none;
}

#modal_error
{
    display: none;
}

#modal_overlay 
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99;
}