body {
    width: 100vw;
    height: 100vh;
    background-color: black;
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: -1000;
}

.container {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.columns {
    height: 100%;
}

    
.row::before,
.row::after {
  clear: both;
  content: '';
  display: block;
}

.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.topbar {
    position: absolute;
    background-color: lightpink;
    width: 100vw;
    height: 10vh;
    z-index: 2;
}

.bg-1 {
    position: absolute;
    background-color: gray;
    width: 100vw;
    height: 25vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 2;
}
.bg-2 {
    position: absolute;
    background-color: dimgray;
    width: 20vw;
    height: 75vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    float: left;
    z-index: 1;
}

.bg-3 {
    background: url("../images/bg.jpeg");
    float: right;
    width: 80vw;
    height: 75vh;
    box-sizing: border-box;
}

.tile {
    width: 50px;
    height: 50px;
    background: rgb(50, 50, 50);
    color:      #fff;
}

#map {
    position: relative;
}

.selected {
    background-color: lightcoral !important;
}

table {
    border-collapse: collapse;
    border: none;
}

tr {
    border: none;
    position: relative;
}

td {
    padding: 0;
    border-bottom: none;
}

tr:nth-child(even) td:nth-child(odd), 
tr:nth-child(odd) td:nth-child(even)
{
    background-color: rgb(100, 100, 100);
}

.vCenter {
    height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

#stats {
    padding-left: 20px;
    list-style: none;
}

.visionHidden {
    opacity: 0.5;
}

.pip {
    width: 10px;
    height: 24px;
    background-color: white;
    border-radius: 5px;
    display: inline-block;
    margin-right: 2px;
    transform: translateY(6px);
}

.pipbar {
    
}

#charIcon {
    background: url("../images/characterIcon0.png") no-repeat center;
    width: 100%;
    height: 30vh;
}

.blend-normal{ mix-blend-mode: normal; }
.blend-multiply{ mix-blend-mode: multiply; }
.blend-screen{ mix-blend-mode: screen; }
.blend-overlay{ mix-blend-mode: overlay; }
.blend-darken{ mix-blend-mode: darken; }
.blend-lighten{ mix-blend-mode: lighten; }
.blend-color-dodge{ mix-blend-mode: color-dodge; }
.blend-color-burn{ mix-blend-mode: color-burn; }
.blend-hard-light{ mix-blend-mode: hard-light; }
.blend-soft-light{ mix-blend-mode: soft-light; }
.blend-difference{ mix-blend-mode: difference; }
.blend-exclusion{ mix-blend-mode: exclusion; }
.blend-hue{ mix-blend-mode: hue; }
.blend-saturation{ mix-blend-mode: saturation; }
.blend-color{ mix-blend-mode: color; }
.blend-luminosity{ mix-blend-mode: luminosity; }