body {
    font-family: arial;    
    margin: 0;
    padding: 0; 
    height: 100%;
}
html {
    position: relative;
    height: 100%;
}
:root {
    --link1: #fff;
    --link2: #000;
    --bg1: #cc0000;
    --bg2: #0099ff;
    --bg3: #e1e1e1;
    --Bard: #1998a1;
    --Beastlord: #611f08;
    --Berzerker: #c66e0c;
    --Cleric: #ac68bd;
    --Druid: #425631;
    --Enchanter: #0a2dad;
    --Magician: #c40819;
    --Monk: #bc9d6e;
    --Necromancter: #00041e;
    --Paladin: #d4dcdf;
    --Ranger: #6e9954;
    --Rogue: #58655e;
    --Shadow_Knight: #350363;
    --Shaman: #8a8a72;
    --Warrior: #ddb26d;
    --Wizard: #f47e1a;
    --UNKNOWN: blue;
}
.link1 {
    color: var(--bg1);
    text-decoration: none;
    font-weight: bold;
}
.link1:hover {
    text-decoration: underline;
    transition: .5s;
}
.link2 {
    color: var(--bg2);
    text-decoration: none;
    font-weight: bold;
}
.link2:hover {
    text-decoration: underline;
    transition: .5s;
}
.header {
    display: flex;
    width: 100%;
    height: 50px;
    background-color: var(--bg1);
    border-bottom: 2px solid var(--bg2); 
    margin-bottom: 15px;
}
ul.h {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--bg1);
}
li.h {
    float: left;
}
li.h a {
    display: block;
    color: var(--link1);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}        
li.h a:hover {
    color: var(--link1);
    background-color: var(--bg2)
}
.active {
    background-color: var(--bg2);
}    
ul.b {
    list-style-type: square;
}
.page_wrapper {
    width: 80%;
    margin: 0 auto;
}
.error1 {
    width: max-content;
    margin: auto;
    margin-top: 25px;
    font-size: 1.5em;
}
.message {
    max-width: max-content;
    margin: auto;
    margin-top: 25px;
}
#navigator {
    display: none;
    width: 100%;
    background-color: var(--bg1);
    height: 30px;
    color: var(--link1);
    align-items: center;
    justify-content: center;
}
.footer {
    position: sticky;
    display: flex;
    align-items: center;
    background-color: var(--bg3);
    border-top: 2px solid var(--bg1);
    height: 50px;
    width: 100%;
    top: calc(100vh - 50px);
    overflow: hidden;
}
.footer_left {
    width: 50%;
    padding-left: 20px;
}
.footer_right {
    display: flex;
    justify-content: end;
    width: 50%;
    padding-right: 20px;
}
.my_characters {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-top: 10px;
    margin-bottom: 10px;
}
.character_edit {
    display: flex;
    width: max-content;
    padding: 7px;
    justify-content: center;
    align-items: center;
}
.nav_left {
    display: flex;
    width: 75%;
    justify-content: flex-start;
}
.nav_right {
    display: flex;
    width: 24%;
    justify-content: flex-end;
    align-items: center;
}
.hidden {
    display: none;
}
.show {
    display: block;
}